001:vue3 实现自定义指令v-copy复制

news2024/11/23 16:53:24

文章目录

    • 1. 实现效果
    • 2. vue3 注册全局自定义指令详解(v-copy)
    • 3. `main.js` 注册全局自定义指令,挂载到 vue 上
    • 4. 页面使用

1. 实现效果

请添加图片描述

2. vue3 注册全局自定义指令详解(v-copy)

  1. 在src中,新建 directive 文件夹,在次新建 clipboard 文件夹(copy指令),创建 index.js 书写 copy指令方法

在这里插入图片描述

  1. directive/clipboard/index.js clipboard(copy指令)完整代码
import Clipboard from 'clipboard'
if ( !Clipboard ) {
  throw new Error( '你须先运行 npm install `clipboard` --save ' )
}

export default {
  beforeMount( el, binding ) {
    if ( binding.arg === 'success' ) {
      el._v_clipboard_success = binding.value
    } else if ( binding.arg === 'error' ) {
      el._v_clipboard_error = binding.value
    } else {
      const clipboard = new Clipboard( el, {
        text() {
          return binding.value
        },
        action() {
          return binding.arg === 'cut' ? 'cut' : 'copy'
        }
      } )
      clipboard.on( 'success', e => {
        const callback = el._v_clipboard_success
        callback && callback( e )
      } )
      clipboard.on( 'error', e => {
        const callback = el._v_clipboard_error
        callback && callback( e )
      } )
      el._v_clipboard = clipboard
    }
  },
  beforeUpdate( el, binding ) {
    if ( binding.arg === 'success' ) {
      el._v_clipboard_success = binding.value
    } else if ( binding.arg === 'error' ) {
      el._v_clipboard_error = binding.value
    } else {
      el._v_clipboard.text = function() {
        return binding.value
      }
      el._v_clipboard.action = function() {
        return binding.arg === 'cut' ? 'cut' : 'copy'
      }
    }
  },
  unmounted( el, binding ) {
    if ( binding.arg === 'success' ) {
      delete el._v_clipboard_success
    } else if ( binding.arg === 'error' ) {
      delete el._v_clipboard_error
    } else {
      el._v_clipboard.destroy()
      delete el._v_clipboard
    }
  }
}

  1. directive 文件夹中新建 index.js,编写整合所有的自定义指令
import clipboard from './clipboard'
const directives = {
  clipboard
}

const registerDirective = app => {
  Object.keys( directives ).forEach( key => {
    app.directive( key, directives[key] )
  } )
}
export default registerDirective

3. main.js 注册全局自定义指令,挂载到 vue 上

// 自定义指令
import { createApp } from "vue";
import registerDirective from "@/directive";
const app = createApp(App);
const initApp = async () => {
  //  ....
  registerDirective(app);
  app.mount("#app");
};

initApp();

4. 页面使用

<template>
<el-row :gutter="10">
  <el-col :span="18">
    <el-input placeholder="请输入" v-model="value" />
  </el-col>
  <el-col :span="6">
    <el-button
      type="primary"
      v-clipboard:copy="value"
      v-clipboard:success="clipboardSuccess"
      v-clipboard:error="clipboardError"
    >
      复制
    </el-button>
  </el-col>
</el-row>
</template>

<script setup>
const value = ref('')

const clipboardSuccess = () => {
  ElMessage.success( '复制成功' )
}
const clipboardError = () => {
  ElMessage.error( '复制失败' )
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1019480.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

鸟哥的LInux私房菜 基础学习篇 第四版 学习笔记

第一章 目前被称为纯种的Unix指的是System V以及BSD这两套软件。 要实现多任务的环境&#xff0c;除了硬件&#xff08;主要是CPU&#xff09;需要能够具有多任务的特性外&#xff0c;操作系统也需要支持这个功能。 如果网络有问题时&#xff0c;去/var/log目录查日志。 第二…

基于Java的高校科研信息管理系统设计与实现(亮点:完整严谨的科研项目审批流程、多文件上传、多角色)

高校科研信息管理系统 一、前言二、我的优势2.1 自己的网站2.2 自己的小程序&#xff08;小蔡coding&#xff09;2.3 有保障的售后2.4 福利 三、开发环境与技术3.1 MySQL数据库3.2 Vue前端技术3.3 Spring Boot框架3.4 微信小程序 四、功能设计4.1 主要功能描述 五、系统实现5.1…

Kafka自带zookeeper---集群安装部署

kafka简介 kafka官网&#xff1a;http://kafka.apache.org/kafka下载页面&#xff1a;http://kafka.apache.org/downloadskafka配置快速入门&#xff1a;http://kafka.apache.org/quickstart 首先让我们看几个基本的消息系统术语&#xff1a; •Kafka将消息以topic为单位进行…

STM32的HAL库SPI操作(master 模式)-根据时序图配置SPI

SPI相关基础知识 SPI基本概念请自行百度&#xff0c;参考&#xff1a;百度百科SPI简介.我们讲重点和要注意的地方。 master模式下要关注的地方 接线一一对应 也就是说主控的MISO,MOSI,SCLK,[CSn]分别和设备的MISO,MOSI,SCLK,[CSn]一一对应相连&#xff0c;不交叉&#xff0…

Linux 本地Yearning SQL 审核平台远程访问

文章目录 前言1. Linux 部署Yearning2. 本地访问Yearning3. Linux 安装cpolar4. 配置Yearning公网访问地址5. 公网远程访问Yearning管理界面6. 固定Yearning公网地址 前言 Yearning 简单, 高效的MYSQL 审计平台 一款MYSQL SQL语句/查询审计工具&#xff0c;为DBA与开发人员使用…

二叉树的几个递归问题

我的主页&#xff1a;Lei宝啊 愿所有美好如期而遇 前言&#xff1a; 二叉树的递归是二叉树很重要的问题&#xff0c;几乎解决二叉树的问题都要使用递归&#xff0c;接下来我们将解决二叉树几个最基础的递归问题。 目录 前言&#xff1a; 二叉树的前序&#xff0c;中序&…

负载均衡原理及应用

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

JDK8源码阅读环境配置

说明 环境 jdk 版本&#xff1a;1.8.0_381 系统&#xff1a;macos 13.5.1 Intel 目的 学习 jdk8 源码&#xff0c;并能自定注释。 新建 java 工程 在 idea 中新建 java 工程&#xff0c;注意并非 maven 工程。如下图&#xff1a;完成后&#xff0c;如下图&#xff1a; 配置…

中外超市纷争“到家”13年 永辉盒马山姆谁也不服谁

59岁的侯毅&#xff0c;需要一次机会&#xff0c;向刘强东、向张勇&#xff0c;还有马云证明盒马的可能。 日前&#xff0c;盒马香港IPO意外“搁置”&#xff0c;无形之中给国内零售市场再次增添了一丝寒意。 近几年国内线下商超市场一片低气压&#xff0c;不续租、关店、亏损…

5万条汉语精选字词大全ACCESS\EXCEL数据库

《5万条汉语精选字词大全ACCESS数据库》精选了51675个词条&#xff0c;解释内容包含了拼音&#xff0c;英语&#xff0c;解释&#xff0c;例名。不管你是学生还是老师亦或是正在学习中文的外国友人&#xff0c;都可以轻松搜索掌握以及了解你想要知道的词或字。 截图下方有显示“…

Java环境搭建安装IDE

Java环境搭建、安装IDE 文章目录 Java环境搭建、安装IDE1. 下载Java JDK &#xff0c;配置环境变量&#xff0c;在命令行环境下完成hello world程序&#xff1b;简介安装Step 0 安装包准备工作Step 1 下载 Java JDKStep 2 配置环境变量配置 JAVA_HOME配置 Path配置 CLASSPATH S…

长胜证券:A股或处于主题驱动向业绩驱动的切换点

长胜证券指出&#xff0c;上星期社融、经济数据好于预期&#xff0c;降准进一步表现方针呵护&#xff0c;但海外扰动下商场以震荡为主。大势上&#xff0c;本轮“方针底”到“商场底”阶段外资定价权更高&#xff0c;当前处于国内基本面预期底部与海外基本面预期顶部的最后角力…

力扣刷题(简单篇):两数之和、两数相加、无重复字符的最长子串

坚持就是胜利 一、两数之和 题目链接&#xff1a;https://leetcode.cn/problems/two-sum/ 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应…

RAID配置:确保数据安全性

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

Call短路触发版本SIP对讲求助终端

SV-2701VP Call短路触发版本SIP对讲求助终端 一、描述 SV-2701VP是我司的一款壁挂式求助对讲终端&#xff0c;具有10/100M以太网接口&#xff0c;支持G.711与G.722音频解码&#xff0c;其接收SIP网络的音频数据&#xff0c;实时解码播放。配置一路线路输入&#xff0c;一路线…

Git全套命令使用

日升时奋斗&#xff0c;日落时自省 目录 1、Git安装 1.1、创建git本地仓库 1.2、配置Git 1.3、认识Git内部区分 2、Git应用操作 2.1、添加文件 2.2、查看日志 2.3、查看修改信息 2.4、查看添加信息 3、版本回退 4、撤销修改 4.1、工作区撤销 4.2、已经add&#xf…

网络编程——基础知识

全文目录 网络发展协议OSI七层模型TCP/IP五层(或四层)模型 网络传输网络地址IP地址MAC地址 网络通信的本质 网络发展 网络没有出来之前计算机都是相互独立的&#xff1a; 网络就是将独立的计算机连接在一起&#xff0c;局域网和广域网的区别只是范围上的大小&#xff1a; 局域…

go语言基础--面向对象杂谈

面向过程 所谓的面向过程就是&#xff1a;强调的是步骤、过程、每一步都是自己亲自去实现的。 面向对象 所谓的面向对象其实就是找一个专门做这个事的人来做&#xff0c;不用关心具体怎么实现的。 所以说&#xff0c;面向过程强调的是过程&#xff0c;步骤。而面向对象强调的…

多线程中的Semaphore信号量

在Java多线程编程中&#xff0c;Semaphore是一种用于控制资源访问的机制。Semaphore允许您限制同时访问某个资源的线程数量。这在需要限制并发访问的情况下非常有用&#xff0c;例如数据库连接池或有限数量的线程池。 创建Semaphore 要使用Semaphore&#xff0c;首先需要创建…

解锁汽车自动驾驶的密码:L0到L5六个等级全解析

引言 随着智能网联汽车技术的快速发展,自动驾驶已成为汽车产业发展的重要方向。根据国际公认的标准,汽车自动驾驶可分为六个等级:L0级到L5级,等级越高意味着自动化程度越高。那么这六个等级具体有何区别呢?本文将详细介绍汽车自动驾驶的六个等级标准。 自动驾驶的6个等级(L0-…