全局指令:
vue项目中一般使用utils文件夹来存放全局的函数,指令
首先在src目录下创建utils文件夹
在文件夹内创建directives.js文件
自定义指令“focus”使表单元素获取焦点
export default(Vue) => {
Vue.directive("focus", {
inserted: function(el) {
el.focus();
}
})
}
在main.js中声明指令
import directives from '@/utils/directives.js'
Vue.use(directives)
在vue文件中直接使用即可
<input v-focus />
局部指令:
<script>
// 创建根实例
new Vue({
el: '#app',
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
</script>