效果图：只是简单的演示怎么使用
image.png
全局自定义指令：
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'animate.css'
Vue.config.productionTip = false
// 注册一个全局自定义指令
// modifiers修饰符
Vue.directive('dh', {
inserted: function (el, bind) {
console.log(el)
console.table(bind)
// el.focus()
// 添加修饰符
if (bind.modifiers.upper) {
el.value = bind.value.toUpperCase()
}
if (bind.modifiers.trim) {
el.value = el.value.trim()
}
}
})
new Vue({
router,
// 从根组件中植入，可以直接使用 this.$store.state获取state对象,并在子组件的computed中返回
store,
render: h => h(App)
}).$mount('#app')
在home.vue中使用全局自定义组件
<template>
<div>
<input v-dh.trim.upper="hcy" />
</div>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
hcy: ' daf '
}
}
}
</script>
局部自定义指令---只能在当前组件用
<template>
<div>
<input v-dh.trim.upper="hcy" />
<input v-focus>
</div>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
hcy: ' daf '
}
}，
// 局部自定义指令
directives: {
focus: {
inserted: function (el, binding) {
el.focus()
}
}
}
}
</script>
