利用 Vue 自定义指令让你的开发变得更优雅

const app = Vue.createApp({})// 注册一个全局自定义指令 `v-focus`app.directive('focus', {  // 当被绑定的元素挂载到 DOM 中时……  mounted(el) {    // 聚焦元素    el.focus()  }})

<input v-focus />

directives: {    safeAreaBottom: {      bind(el, binding) {        const addHigh = binding.value || 0        el.setAttribute('style', el.style.cssText + `padding-bottom: calc(${addHigh} +  constant(safe-area-inset-bottom));padding-bottom: calc(${addHigh} +  env(safe-area-inset-bottom));`);      }    }}

<div v-safe-area-bottom></div>

<div v-safe-area-bottom="'1rem'"></div><div v-safe-area-bottom="'10px'"></div>

touchScroll: {  inserted() {    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;    document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;';  },  unbind() {    const body = document.body || document.documentElement;    body.style.position = '';    const top = body.style.top;    document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top, 10);    body.style.top = '';  }}

<div v-touch-scroll>是的，我是一个弹窗，当我出现时我的背景会吓得不敢动</div>

clipboard: {  bind(el, binding, { context }) {    const _this = context    // 利用arg用来注入回调函数    if (binding.arg === 'success') {      _this.__clipboardSuccess = _this[binding.expression]    } else if (binding.arg === 'error') {      _this.__clipboardError = _this[binding.expression]    } else { // 正常情况下就将文字缓存起来      _this.__clipboardValue = binding.value    }    el.handler = () => {      if (!_this.__clipboardValue) {        this.__clipboardError && this.__clipboardError('无内容')        return      }      if (binding.arg) { // 这里是因为属性被我们用了多次会多次执行，所以限制了执行次数        return      }      try {        const textarea = document.createElement('textarea')        textarea.readOnly = 'readonly' // 禁止输入， readonly 防止手机端错误聚焦自动唤起键盘        textarea.setAttribute('style', 'position:fixed;top:-9999px;left:-9999px;') // 它是可见的，但它又是不可见的        textarea.value = binding.value        document.body.appendChild(textarea)        textarea.select()        const result = document.execCommand('Copy')        if (result) {          _this.__clipboardSuccess && _this.__clipboardSuccess(binding.value) // 这里可以定义成功回调返回的数据        }        document.body.removeChild(textarea)      } catch (e) {        this.__clipboardError && this.__clipboardError(e)      }    }    el.addEventListener('click', el.handler)  },  componentUpdated(el, { arg, value }, { context }) { // 更新值时候触发    const _this = context    if (!arg) { // 注册回调的部分不要赋值      _this.__clipboardValue = value    }  },  unbind(el) {    el.removeEventListener('click', el.handler)  },}

<div v-clipboard="'copy copy Text'">点击直接复制到剪贴板</div>

<template>    <div v-clipboard="text" v-clipboard:success="success" v-clipboard:error="error">copy copy Text</div></template>
<script>export default {  data() {    return {      text: 123    }  },  methods: {    success(e) {      console.log(e); // 复制成功回调    },    error(e) {      console.log(e); // 复制失败回调    }  }}</script>

// 设置 v-throttle 自定义指令Vue.directive('throttle', {  bind: (el, binding) => {    let throttleTime = binding.value; // 节流时间    if (!throttleTime) { // 用户若不设置节流时间，则默认2s      throttleTime = 2000;    }    let cbFun;    el.addEventListener('click', event => {      if (!cbFun) { // 第一次执行        cbFun = setTimeout(() => {          cbFun = null;        }, throttleTime);      } else {        event && event.stopImmediatePropagation();      }    }, true);  },});

<button @click="sayHello" v-throttle>提交</button>

const LazyLoad = {    // install方法    install(Vue,options){        // 代替图片的loading图        let defaultSrc = options.default;        Vue.directive('lazy',{            bind(el,binding){                LazyLoad.init(el,binding.value,defaultSrc);            },            inserted(el){                // 兼容处理                if('IntersectionObserver' in window){                    LazyLoad.observe(el);                }else{                    LazyLoad.listenerScroll(el);                }                            },        })    },    // 初始化    init(el,val,def){        // data-src 储存真实src        el.setAttribute('data-src',val);        // 设置src为loading图        el.setAttribute('src',def);    },    // 利用IntersectionObserver监听el    observe(el){        let io = new IntersectionObserver(entries => {            let realSrc = el.dataset.src;            if(entries[0].isIntersecting){                if(realSrc){                    el.src = realSrc;                    el.removeAttribute('data-src');                }            }        });        io.observe(el);    },    // 监听scroll事件    listenerScroll(el){        let handler = LazyLoad.throttle(LazyLoad.load,300);        LazyLoad.load(el);        window.addEventListener('scroll',() => {            handler(el);        });    },    // 加载真实图片    load(el){        let windowHeight = document.documentElement.clientHeight        let elTop = el.getBoundingClientRect().top;        let elBtm = el.getBoundingClientRect().bottom;        let realSrc = el.dataset.src;        if(elTop - windowHeight<0&&elBtm > 0){            if(realSrc){                el.src = realSrc;                el.removeAttribute('data-src');            }        }    },    // 节流    throttle(fn,delay){        let timer;         let prevTime;        return function(...args){            let currTime = Date.now();            let context = this;            if(!prevTime) prevTime = currTime;            clearTimeout(timer);                        if(currTime - prevTime > delay){                prevTime = currTime;                fn.apply(context,args);                clearTimeout(timer);                return;            }
            timer = setTimeout(function(){                prevTime = Date.now();                timer = null;                fn.apply(context,args);            },delay);        }    }
}export default LazyLoad;