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 +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
解决中英文字符串长度问题函数
2007/01/16 PHP
php Undefined index的问题
2009/06/01 PHP
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
python3+requests接口自动化session操作方法
2018/10/13 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
团代会宣传工作方案
2014/05/08 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis