Nuxt中自定义全选指令

nuxt中自定义全选指令

看两个例子来熟悉熟悉nuxt中如何自定义指令,一个简单的focus指令,一个是比较常用的全选功能。

一个简单的focus指令

在plugins文件夹下,新建文件directives.js,放入如下内容:

1
2
3
4
5
6
7
// focus指令的定义参考vuejs官方文档
import Vue from 'vue'
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})

修改nuxt.config.js文件,添加自定义指令声明:

1
2
3
plugins: [
'~/plugins/directives'
],

重启nuxt, 好了,可以开始使用了。

任意页面中添加:

1
<input v-focus>

效果:

全选实现

先看效果:

思路是给全选按钮一个class: select-all, 每个选项一个class:select-item, 最外面包一层指令: select-all-container. 这样所有相关的checkbox都在指令的el内了,这样就可以定位到对应的元素。

然后利用bind钩子函数,来给按钮添加change事件。

具体步骤基本同focus,只是directives.js的内容不一样,这里贴上指令的定义部分和示例的HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// plugins/directives.js
import Vue from 'vue'
import $ from 'jquery'

Vue.directive('select-all-container', {
bind: function (el) {
$(el).on('change', '.select-item', function() {
const $items = $(el).find('.select-item')
const allChecked = $items.length != 0 && $items.not(':checked').length == 0
$(el).find('.select-all').prop('checked', allChecked)
})

$(el).on('change', '.select-all', function() {
$(el).find('.select-item').prop('checked', this.checked)
})
}
})

调用bind钩子函数,给全选及单个子选项添加change事件。

HTML示例部分:

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
<template>
<div v-select-all-container>
<label>
<input type="checkbox" class="select-all"> 全选
</label>
<ul class="list-unstyled ml-4">
<li v-for="student in students" :key="student.id">
<label>
<input type="checkbox" :value="student.id" class="select-item">
{{ student.name }}
</label>
</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
students: [{ 'id': 1, 'name': "张三" },
{ 'id': 2, 'name': "李四" },
{ 'id': 3, 'name': "王五" },
{ 'id': 4, 'name': "赵麻子" }]
}
}
}
</script>

好,大功告成。

参考

Where do custom directives belong?

custom-directive

用Vue实现全选指令