vue点击复制功能

复制功能,选中复制或者点击复制(不使用插件的情况下)

1、选中复制

这个比点击复制简单点

<template>

<div>

<el-button type="primary" plain @click="copy()">复制</el-button>

</div>

</template>

<script>

export default {

data(){

return{

}

},

methods:{

copy(){

document.execCommand("Copy"); // 执行浏览器复制命令

this.$message({

message: ‘复制成功‘,

type: ‘success‘

});

},

}

}

</script>

代码如图:

选中点击按钮即可复制,其实这个并不实用,有助于理解execCommand("Copy")。

2、点击复制

  (我是在vue+element UI中实现点击表格中的按钮复制表格中的数据;)

<template>

<div>

<el-table

:data="tableData"

style="width: 100%">

<el-table-column

prop="name"

label="姓名"

width="180">

</el-table-column>

<el-table-column label="操作">

<template slot-scope="scope">

<el-button

size="mini"

@click="handleCopy(scope.$index, scope.row)">复制</el-button>

</template>

</el-table-column>

</el-table>

</div>

</template>

<script>

export default {

data(){

return{

tableData:{

name:‘小明‘

},

copyData:null,

}

},

methods:{

handleCopy(index,row){

this.copyData = row.name

this.copy(this.copyData)

},

copy(data){

let url = data;

let oInput = document.createElement(‘input‘);

oInput.value = url;

document.body.appendChild(oInput);

oInput.select(); // 选择对象;

console.log(oInput.value)

document.execCommand("Copy"); // 执行浏览器复制命令

this.$message({

message: ‘复制成功‘,

type: ‘success‘

});

oInput.remove()

},

}

}

</script>

如图:

其实就是把值赋给一个创建的节点选中

原文地址:https://www.cnblogs.com/zyz-s/p/11636885.html

时间: 2024-10-31 16:36:47

vue点击复制功能的相关文章

vue点击切换样式,点击切换地址栏,点击显示或者隐藏

1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 ‘{“span”:index==0}’ 意思就是判断等于 index等于0的时候就显示span的样式  2.点击切换地址栏 conten.vue top.vue left.vue 效果 原文地址:https://www.cnblogs.com/yunhubuxi/p/11965689.html

VUE 点击事件(父子层级元素点击时踩坑记录)

<ul> <li @click="fatherClick"> <div @click.stop="childClick"> </div> </li> </ul> var vm_target = new Vue({ el: '#vm_target', data: { }, methods:{ /**父元素点击事件**/ fatherClick:function(event){ var el1 =

vue 点击获取当前DOM元素

哈哈哈,昨天登QQ的时候,意外发现有人看了我写的博客,居然还加了我,这就激起了我内心的小波澜啊 公司最近在做电商,用的前端框架依然是VUE 矩MAX(微信公众号)可以搜的到哦,貌似小苹果的AppStore也可以搜的到,不过应该是内测版 回归中体哈,说一下今天做的领券中心 有点类似于京东的领券中心,刚测试完,券全被我领啦 效果就是点击立即领取,文字变为立即使用.弹出领取成功 但是因为接口不是实时的,所以我没有通过接口数据判断让用户点击领取的同时,让优惠券改变状态 但是,毛爷爷说过:办法总比困难多~

VUE点击弹出蒙版实现步骤

项目需求: 1.点击一个事件时弹出一个蒙版: 2.蒙版上有取消,删除事件:(点击取消时候蒙版消失,点击删除时,删除蒙版并消失): 3.点击空白地方,蒙版也消失: 先附上实现效果: 图1: 图2: 代码:首先我这里是两个组件:蒙版是一个:列表是一个:其余的地方都可能用到. 列表代码: <template> <div class="waitPay"> <div class="logo"> <span></span&g

vue中点击空白处隐藏弹框(用指令优雅地实现)

在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div class="show" v-show="show" v-clickoutside="handleClose"> 显示 </div> </div> </template> <script> cons

vue 点击其他区域关闭自定义div

1.vue模块中的内容 <template> <div class="hello" @click="hidePanel"> <div id="myPanel" v-if="panelShow"></div> </div> </template> 第一步,我们在自己的vue模块中整体添加了一个hidePanel事件,准备整体区域进行点击,然后id为myPan

vue 点击当前元素添加class 去掉兄弟的class

点击当前标签给其添加class,兄弟标签class删除 演示地址: https://xibushijie.github.io/static/addClass.html 原文地址:https://www.cnblogs.com/wangjae/p/9023555.html

vue 点击修改样式

1.页面加载默认一个初始的isact,让第二个div.f具有一个on的类:在点击的时候,传入一个值给data.isact 1 <template> 2 <nav class="clearfix"> 3 <div class="fl" :class="{on:'zh'==isact}" @click="refresh(); changeLangEvent('zh')" v-text="$t

vue 点击下拉框

data: { hide:false, zhi:"全部" }, <div class="item"> <div class="c2c-all" @click="hide ? hide=false : hide=true"> <span class="c2c-alla" style="position: relative">{{zhi}}</spa