首页 > 其他分享 >Vue自定义指令实现复制功能

Vue自定义指令实现复制功能

时间:2023-10-11 16:38:25浏览次数:44  
标签:el Vue 自定义 handler binding value 指令 text input

import Vue from 'vue'
import store from '../store'

function copyMethod(value) {
 let text = ''
 switch (typeof value) {
  case 'number':
   text = value.toString()
   break
  case 'object':
   text = JSON.stringify(value)
   break
  default:
   text = value
   break
 }
 let input = document.createElement('textarea')
 input.value = text
 document.body.appendChild(input)
 input.select()
 document.execCommand('copy')
 store.commit('success_msg', '复制成功')
 document.body.removeChild(input)
 input = null
}

Vue.directive('copy', {
 bind(el, binding) {
  el.handler = () => copyMethod(binding.value)
  el.addEventListener('click', el.handler)
 },
 // 更新参数时更新监听函数
 componentUpdated(el, binding) {
  el.removeEventListener('click', el.handler)
  el.handler = () => copyMethod(binding.value)
  el.addEventListener('click', el.handler)
 },
 unbind(el) {
  el.removeEventListener('click', el.handler)
  el.handler = null
 },
})
1、main.js中引入自定义指令 import './directives' 2、组件中使用 v-copy="item.name"

 

标签:el,Vue,自定义,handler,binding,value,指令,text,input
From: https://www.cnblogs.com/lyt520/p/17757525.html

相关文章

  • Vue 路由——重定向
    问题描述:网页打开,url默认是/路径,未匹配到组件时,会出现空白解决:重定向→匹配path后,强制跳转path路径 语法:{path:匹配路径, redirect:重定向到的路径}constrouter=newVueRouter({ routes:[  {path: '/', redirect:'/find'}, ......
  • .net 关于在program中使用AddNewtonsoftJson之后,继承于System.Text.Json.Serializatio
    首先,先说遇见的问题与代码示例,在.net代码中注册了如下代码.AddNewtonsoftJson(option=>{//使用本地时区option.SerializerSettings.DateTimeZoneHandling=DateTimeZoneHandling.Local;......
  • 问题记录贴:vue-i18n在弹出框中$t()报错:TypeError: Cannot read property '_t' of unde
    网上有用的解决方法:vue国际化在弹出框中$t()报错:TypeError:Cannotreadproperty'_t'ofundefined大佬给出的解决方法:弹窗是一个新的Vue对象,只需要单独给弹窗重新绑定i18n即可。代码://dialog/main.jsimportcustomDialogfrom'./dialog.vue'importi18nfrom'@/i18n'......
  • Vue 生命周期
    Vue生命周期Vue生命周期指的是Vue实例从创建到销毁整个过程Vue生命周期函数Vue生命周期函数(或生命周期回调函数、生命周期钩子)指的是在Vue生命周期的特定关键时间点被Vue自动调用的一些特殊函数注意事项生命周期函数的名字不可更改,但函数的具体内容是程序员根据需......
  • vue3+vite import 引入ThreeBSP库 报错
    我在网上查了一下先用npm下载了三方包npmithree-js-csg再使用constThreeBSP=require('three-js-csg')(THREE)的方法引入出现了这个报错查了是因为require是webpack里的vite不支持所以找不到然后我就尝试使用import的方法引入importThreeBSPfrom'three-js......
  • 竟然可以在一个项目中混用 Vue 和 React?
    React和Vue是前端开发中的两大热门框架,各自都有着强大的功能和丰富的生态系统。然而,你有没有想过,在一个项目中同时使用React和Vue?是的,你没有听错,可以在同一个项目中混用这两个框架!本文就来分享3个用于混合使用React和Vue的工具!#VeauryVeaury是一个基于React和Vue3的工具......
  • vite.config.js base 与 vue-router base
    vite.config.jsbase决定了打包后,资源引用的前缀base:'/hlw/'linkref='/hlw/assets'打包后的dist要放到/hlw路径下base的值与process.env.BASE_URL、import.meta.env.BASE_URL一致vuerouter的base决定了,多页面的访问路径当vite.config.js与router中的base......
  • vue项目个人配置
    src/assets/base.css:root{--html-bg-color:#ffffff;}html.dark{--html-bg-color:#242424;}src/assets/reset.css/***EricMeyer'sResetCSSv2.0(http://meyerweb.com/eric/tools/css/reset/)*http://cssreset.com*/html,body,div,span,......
  • 将Vue3项目部署到Github Pages
    1.创建vue3项目$npminitvue@latest初始化工程,并验证。2.创建github仓库3.连接vue项目到github仓库打开vue项目根目录,初始化本地git仓库$gitinit$gitadd.$gitcommit-m"init"连接vue项目到第二步创建的github仓库$gitremoteaddoriginhttps://gith......
  • Vue3常用库安装
    目录Pinia引入使用ElementPlus安装完整引入Volar支持按需导入-自动导入unocss&Icon安装unocss安装Icon库使用动态引用图标Iconify安装使用Pinia引入//main.tsimport{createPinia,typePiniaPluginContext}from"pinia";const__piniaKey='__PINIAKEY__'typeOpti......