1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| <template>
| <view style="position: relative;">
| <uni-icons @mouseenter.native="mouseenter" @mouseleave.native="showStableInfo = false"
| style="padding:0 10px;color: #a8a8a8;cursor: pointer;" type="info" />
| <view v-if="showStableInfo" class="show-stable" :style="{top:`${top}px`,left:`${left}px`}">
| <text>{{content}}</text>
| </view>
| </view>
| </template>
|
| <script>
| export default {
| props: {
| content: String,
| top: {
| type: [Number, String],
| default: -60
| },
| left: {
| type: [Number, String],
| default: -100
| }
| },
| data() {
| return {
| showStableInfo: false,
| arrowStyle: {}
| }
| },
| methods: {
| mouseenter(e) {
| this.showStableInfo = true
| }
| }
| }
| </script>
|
| <style lang="scss" scoped>
| $main_color: #fff;
| $main_back_color: #303133;
|
| .show-stable {
| width: 200px;
| position: absolute;
| padding: 5px 10px;
| background-color: $main_back_color;
| color: $main_color;
| border-radius: 4px;
| border: 1px solid #e9e9eb;
| z-index: 99999;
| }
| </style>
|
|
