Nuxt中自定义全选指令

nuxt中自定义全选指令

看两个例子来熟悉熟悉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>    

好,大功告成。

参考

Where do custom directives belong?

custom-directive

用Vue实现全选指令