看两个例子来熟悉熟悉nuxt中如何自定义指令，一个简单的focus指令，一个是比较常用的全选功能。
一个简单的focus指令
在plugins文件夹下，新建文件directives.js，放入如下内容：
// focus指令的定义参考vuejs官方文档
import Vue from 'vue'
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
修改nuxt.config.js文件，添加自定义指令声明：
plugins: [
'~/plugins/directives'
],
重启nuxt, 好了，可以开始使用了。
任意页面中添加:
<input v-focus>
效果：
全选实现
先看效果：
思路是给全选按钮一个class: select-all, 每个选项一个class：select-item， 最外面包一层指令: select-all-container. 这样所有相关的checkbox都在指令的el内了，这样就可以定位到对应的元素。
然后利用bind钩子函数，来给按钮添加change事件。
具体步骤基本同focus，只是directives.js的内容不一样，这里贴上指令的定义部分和示例的HTML代码：
// 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示例部分：
<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>
好，大功告成。