Vue3.0写自定义指令的简单步骤记录


Posted in Vue.js onJune 27, 2021

前言

vue中提供了丰富的内置指令,如v-if,v-bind,v-on......,除此之外我们还可以通过Vue.directive({})或者directives:{}来定义指令

在开始学习之前我们应该理解,自定义指令的应用场景,任何功能的开发都是为了解决具体的问题的,

通过自定义指令,我们可以对DOM进行更多的底层操作,这样不仅可以在某些场景下为我们提供快速解决问题的思路,而且让我们对vue的底层有了进一步的了解

第一步

在main.js

在src下简历对应的文件夹

import Directives from "@/Directives/index";// 自定义指令(@ 代表src)
const app = createApp(App);
app.use(Directives);
app.mount("#app");

Vue3.0写自定义指令的简单步骤记录

第二步

import copy from "./copy"; // 引入需要的指令

const directivesList = {
  copy // 挂载
};

const directives = {
  install: function (app) {
    Object.keys(directivesList).forEach((key) => {
      app.directive(key, directivesList[key]); // 注册
    });
  }
};

export default directives;// 抛出

第三步

在copy.js 写入我们的指令内容 Vue2 与Vue3只是一些生命周期函数修改

import { ElMessage } from "element-plus";
const copy = {
  mounted (el, { value }) {
    el.$value = value;
    el.handler = () => {
      if (!el.$value) {
        // 值为空的时候,给出提示
        ElMessage.warning({
          message: "您好,复制的值不能为空。",
          type: "warning"
        });
        return;
      }
      if (window.clipboardData) {
        window.clipboardData.setData("text", el.$value);
      } else {
        (function (content) {
          document.oncopy = function (e) {
            e.clipboardData.setData("text", content);
            e.preventDefault();
            document.oncopy = null;
          };
        })(el.$value);
        document.execCommand("Copy");
      }

      ElMessage.success("复制成功");
    };
    // 绑定点击事件
    el.addEventListener("click", el.handler);
  },
  beforeUpdate (el, {
    value
  }) {
    el.$value = value;
  },
  unmounted (el) {
    el.removeEventListener("click", el.handler);
  }
};

export default copy;

总结

到此这篇关于Vue3.0写自定义指令的文章就介绍到这了,更多相关Vue3.0自定义指令内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 #Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
vue-router中hash模式与history模式的区别
Vue-Element-Admin集成自己的接口实现登录跳转
Vue + iView实现Excel上传功能的完整代码
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
vue3使用vue-router的完整步骤记录
You might like
2019十大人气国漫
2020/03/13 国漫
php使用百度ping服务代码实例
2014/06/19 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
javascript 函数使用说明
2010/04/07 Javascript
javascript 精粹笔记
2010/05/09 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
Python构造函数及解构函数介绍
2015/02/26 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Python中的集合介绍
2019/01/28 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
财务会计专业毕业生自荐信
2013/10/02 职场文书
入党自我鉴定范文
2013/10/04 职场文书
工程师求职简历的自我评价分享
2013/10/10 职场文书
生物科学专业个人求职信范文
2013/12/07 职场文书
师范毕业生个人求职信
2013/12/09 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
班主任班级寄语大全
2014/04/04 职场文书
小学生评语大全
2014/04/18 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL