vue3中自定义指令的小demo

vue3的自定义组件的用法跟vue2一致，但是内置的钩子有所不同。


下面根据自定义指令知识点衍生的一个小例子，该例子没有特别的技术难点。只是为了验证一下这两天学习的vue3部分知识点，存粹是一个练手记录～～～

//示例

<template>
	<p>
		改变方向：<input type="text" v-model="direction" />
	</p>
	<p>
		改变数值：<input type="range" min="0" :max="maxNum" v-model="pinPadding" />
	</p>
	<p>
		<button @click="reset">重置</button>
	</p>
	<div style="position: relative;border: 1px solid red;width: 800px;height: 400px;margin: 0 auto;">
		<p v-pin:[direction]="pinPadding">数据：{{pinPadding}},方向:{{direction}}</p>
	</div>
</template>
<script>
	import two from './components/two.vue'
	import {
		ref,
		reactive,
		defineComponent,
		computed
	} from 'vue'
	export default ({
		name: 'lycApp',
		components: {
			two
		},
		setup(prop, context) {
			const direction = ref('left')
			const pinPadding = ref(0)
			const reset = () => {
				direction.value = 'left'
				pinPadding.value = 0
			}
			const maxNum = computed(()=>{
				if(direction.value == 'right' || direction.value == 'left'){
					return 650
				}else{
					return 360
				}
			})
			return {
				direction,
				pinPadding,
				reset,
				maxNum
			}
		},
		directives: {
			pin: {
				mounted(el, binding) {
					el.style.position = 'absolute'
					const s = binding.arg
					el.style[s] = binding.value + 'px'
				},
				updated(el, binding) {
					el.removeAttribute('style')
					el.style.position = 'absolute'
					const s = binding.arg
					el.style[s] = binding.value + 'px'
				}
			}
		}
	})
</script>

//效果图

可以在红色线框内随便改变方向跟距离。