自定义指令基本用法
- 1.自定义指令案例一:输入框自动聚焦
- 2.自定义指令生命周期和参数-修饰符
- 3.封装全局自定义指令
- 3.1 创建directive目录,创建index.js,创建format-xx文件
- 3.1 main.js文件引入并传入全局对象
- 3.3 组件中引用
自定义指令
Vue可以根据项目实际情况需要自定义指令。
注意:要对DOM元素进行底层操作就会需要自定义指令
自定义指令分为两种:
1. 自定义局部指令:组件中通过directives选项,只能在当前组件使用;
2. 自定义全局指令:app的directive方法,可以任意组件被使用;
1.自定义指令案例一:输入框自动聚焦
<template>
<div>
<input type="text" ref="input" v-focus>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
// 局部指令
directives: {
focus: {
// 当input元素或者组件挂载到页面上的时候执行
mounted(el, bingdings, vnode, preVnode){
console.log('focus mounted');
el.focus();
}
}
},
setup () {
const input = ref(null)
onMounted(() => {
input.value.focus();
})
return {
input
}
}
}
</script>
2.自定义指令生命周期和参数-修饰符
指令的生命周期
created: 在绑定元素的attribute或事件监听器被应用之前调用。
beforeMounted: 当指令第一次绑定到元素并且在挂载父组件之前调用;
mounted: 在绑定元素的父组件被挂载后调用;
beforeUpdate: 在更新包含自建的VNode之前调用;
updated: 在包含组件的VNode及其子组件的VNode更新后调用;
beforeUnmount: 在卸载绑定元素的父组件之前调用;
unmounted: 当指令与元素解除绑定且父组件已卸载时,只调用一次
<template>
<div>
<input type="text" ref="input" v-focus>
<button v-why.aaaa.bbb="'coderwhy'" v-if="counter < 2 " @click="incremnt">当前计数;{{ counter }}</button>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
// 局部指令
directives: {
// focus: {
// // 当input元素或者组件挂载到页面上的时候执行
// mounted(el, bingdings, vnode, preVnode){
// console.log('focus mounted');
// el.focus();
// }
// }
why: {
created (el,bingdings,vnode,preVnode) {
console.log('why created',el,bingdings,vnode,preVnode);
console.log(bingdings.value); // 取传参
console.log(bingdings.modifiers); // 取修饰符
},
beforeMount () {
console.log('why beforeMount');
},
mounted () {
console.log('why mounted');
},
beforeUpdate () {
console.log('why beforeUpdate');
},
updated () {
console.log('why updated');
},
beforeUnmount () {
console.log('why beforeUnmount');
},
unmounted () {
console.log('why unmounted');
}
}
},
setup () {
const input = ref(null)
const counter = ref(0)
const incremnt = () => {
counter.value++
}
onMounted(() => {
input.value.focus();
})
return {
input,
counter,
incremnt
}
}
}
</script>
3.封装全局自定义指令
3.1 创建directive目录,创建index.js,创建format-xx文件
// 1.index.js
import formatTime from './format-time'
export default function registerDirectives (app) {
formatTime(app)
}
// 2.format-time.js
import dayjs from 'dayjs'
export default function (app) {
let formatString = 'YYYY-MM-DD HH:mm:ss'
app.directive('format-time',{
created(el,bingdings){
if(bingdings.value){
formatString = bingdings.value
}
},
mounted(el,bingdings){
console.log('format-time');
let textContent = el.textContent;
let timeStamp = parseInt(textContent);
if(textContent.length === 10){
el.textContent = timeStamp * 1000;
}
el.textContent = dayjs(timeStamp).format(formatString)
}
})
}
3.1 main.js文件引入并传入全局对象
import registerDirectives from './11_自定义指令/directive'
registerDirectives(app)
3.3 组件中引用
<template>
<div>
<input type="text" ref="input" v-focus>
<button v-why.aaaa.bbb="'coderwhy'" v-if="counter < 2 " @click="incremnt">当前计数;{{ counter }}</button>
<h2 v-format-time="'YYYY/MM/DD HH:mm:ss'">{{ timeStamp }}</h2>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
// 局部指令
directives: {
setup () {
const timeStamp = 1715001108724
return {
timeStamp
}
}
}
</script>