显示目录

Vue 动态显示编辑按钮和计算 Class

下面介绍使用 vue

  • 动态的显示编辑按钮

    当鼠标移动到 segment 上时显示编辑按钮(@mouseenter 事件),鼠标离开 segment 时隐藏编辑按钮(@mouseleave 事件),需要定义一个属性如 editable 表示当前 segment 是否可编辑,使用 v-show 进行判断显示和隐藏

  • 动态的计算 class

    复杂情况下不同元素的 class 不一样,此时可以使用函数动态计算 class,在 :class 中使用此函数,不同的参数计算出来的 class 不一样

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://cdn.staticfile.org/semantic-ui/2.2.7/semantic.min.css">
<style media="screen">
body {
padding: 20px;
}
#vue-segments {
width: 350px;
}
.icon.edit,
.icon.delete {
float: right;
}
.icon.edit:hover,
.icon.delete:hover {
color: darkred;
}
</style>
</head>
<body>
<div id="vue-segments">
<div class="ui segment" :class="segmentClass(index)" v-for="(item, index) in items" @mouseenter="item.editable=true" @mouseleave="item.editable=false">
<i class="icon delete" v-show="item.editable" @click="remove(index)"></i>
<i class="icon edit" v-show="item.editable" @click="edit(index)"></i>
<span class="text" v-html="item.text"></span>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/vue/2.0.3/vue.js"></script>
<script src="http://cdn.staticfile.org/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="http://cdn.staticfile.org/layer/2.3/layer.js"></script>
<script>
new Vue({
el: '#vue-segments',
data: {
items: [{
text: '<i class="icon tag"></i> This segment is on top',
editable: false
}, {
text: 'This method is a shortcut for .on( "mouseenter", handler ) in the first two variations, and .trigger( "mouseenter" ) in the third.',
editable: false
}, {
text: 'A function to execute each time the event is triggered.',
editable: false
},{
text: 'This segment is on bottom',
editable: false
}],
currentIndex: -1
},
methods: {
// 动态计算 segment 的 class
segmentClass: function(index) {
if (index === 0) {
return 'ui top attached segment';
} else if (index === this.items.length - 1) {
return 'ui bottom attached segment';
} else {
return 'ui attached segment';
}
},
edit: function(index) {
layer.msg('编辑: ' + this.items[index].text);
},
remove: function(index) {
layer.msg('删除: ' + this.items[index].text);
}
}
});
</script>
</body>
</html>

也可以在 :class 中进行计算:

1
<div class="ui attached segment" :class="{'ui top attached segment': index==0, 'ui bottom attached segment': index==items.length-1}" v-for="(item, index) in items" @mouseenter="item.editable=true" @mouseleave="item.editable=false">