vue3自定义指令看完这篇就入门了

<script>
export default {
  directives: {
      // 自定义私有指令focus，在使用的时候要用 v-focus 。
    focus: {
      mounted(el) {
        el.focus()
      },
    },
  },
}
</script>

<!-- 声明自定义私有指令focus，在使用的时候要用 v-focus 。 -->    
<input v-focus/>

import { createApp } from 'vue'

const app = createApp({
  /* ... */
})

// 注册（对象形式的指令）
app.directive('my-directive', {
  /* 自定义指令钩子 */
})

// 注册（函数形式的指令）
app.directive('my-directive', () => {
  /* ... */
})

// 得到一个已注册的指令
const myDirective = app.directive('my-directive')

// 声明全局自定义指令
app.directive('focus', {
  mounted(el) {
    console.log('mounted')
    el.focus()
  },
  updated(el) {
    console.log('updated')
    el.focus()
  },
})

app.directive('focus', (el) => {
    // 在 mounted 和 updated 都会触发这个函数方法
  el.focus()
})

// 自定义 v-color 指令
app.directive('color', (el, binding) => {
    // binding.value 就是通过 = 绑定的值，在传值的时候传到这 binding.value
  el.style.color = binding.value
})

<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>