vue自定义指令
Posted 江山一族
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue自定义指令相关的知识，希望对你有一定的参考价值。
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自定义指令的主要内容，如果未能解决你的问题，请参考以下文章