vue自定义指令

标签：nts   main   value   app   new   component   config   ntc   name   

1.main.js 文件中定义全局指令

import Vue from ‘vue‘
import App from ‘./App‘
Vue.config.productionTip = false

//定义全局指令
Vue.directive(‘focus‘,{
inserted:function(el){
el.focus()
}
})
/* eslint-disable no-new */
new Vue({
el: ‘#app‘,
components: { App },
template: ‘<App/>‘
})

2.页面引用和局部指令

<template>
<div>
全局指令:<input type="text" name="" id="" value="" v-focus/>
局部指令：<input type="text" name="" id="" value="" v-focus1/>
<p v-fontCss>自定义指令字体颜色</p>
</div>
</template>

<script>
export default {
name: ‘input1‘,
data() {
return {
msg: ‘子组件数据‘
}
},
directives:{
focus1:{
inserted:e1=>{
e1.focus()
}
},
fontCss:e1=>{
e1.style.color=‘red‘
}
}
}
</script>

<style>

</style>

vue自定义指令

标签：nts   main   value   app   new   component   config   ntc   name   

原文地址：https://www.cnblogs.com/qiyc/p/9127165.html