需求: 点击复制按钮,复制一个链接

在GitHub上找到一个clipboard组件,功能比较齐全
使用方法:
 
安装
npm i clipboard --save
HTML
<template>
<div class="info_item nomargin">
<p class="info_content">您的登录地址</p>
<p class="info_text link_text">
<!-- 需要复制的内容,需要指定一个id -->
<input class="text_link" type="text" id="link" :value="url" ref="link">
<!-- 复制按钮 -->
<button class="btn" @click="copyLink" data-clipboard-action="copy" data-clipboard-target="#link">复制
</button>
<!-- 复制成功/失败的提示 -->
<span class="message" v-show="isShow">{{word}}</span>
</p>
</div>
</template>
js文件
// 引入
import Clipboard from 'clipboard'
export default {
data () {
return {
isShow: false,
word: 'success',
url: ''
}
}, // 实例创建后,进行默认数据处理
created () {
this.url = `${location.hostname}/#/login`
},
// 方法集合
methods: {
// 复制链接方法
copyLink () {
let clipboard = new Clipboard('.btn')
clipboard.on('success', e => {
this.isShow = true
this.word = 'Success'
setTimeout(() => {
this.isShow = false
}, 500)
clipboard.destroy() // 使用destroy可以清楚缓存
})
clipboard.on('error', e => {
this.word = 'Fail'
this.isShow = true
setTimeout(() => {
this.isShow = false
}, 500)
clipboard.destroy()
})
}
}
}
点击复制,成功,这样就复制成功了
这个组件还有一些其他功能,可以阅读下文档http://www.clipboardjs.cn/

vue+element-ui 项目中实现复制文字链接功能的更多相关文章

  1. 在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表

    在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用, ...

  2. 在Vue&Element前端项目中,对于字典列表的显示处理

    在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如 ...

  3. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  4. vue+element ui项目总结点(二)table合计栏目,按照起始年份--截止年份 插入数据并向后追加数据以最后一条年份+1

    1.oninput 事件在用户输入时触发; <template> <div class="test_box"> <p>hell,你好</p ...

  5. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  6. vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  7. vue+element ui项目总结点(三)富文本编辑器 vue-wangeditor

    1.参考 https://www.npmjs.com/package/vue-wangeditor 使用该富文本编辑器 <template> <div class="egi ...

  8. vue + element ui开发过程中需要注意的几个点

    1.实现动态的数据双向绑定 关键字[$set]在这个需求开发的过程中还遇到深度克隆的问题 2:form表单的动态字段验证 关键字[promise.all] 3:动态表单验证关键字[el-form-it ...

  9. vue+element ui项目总结点(五)Carousel 走马灯组件、Collapse 折叠面板、Tree 树形控件

    <template> <div class="ele_test_box"> <!-- 常用效果 Popover 弹出框组件 具体属性查看官方文档--& ...

随机推荐

  1. img标签替换为mip-img标签的方法

    function replaceMipImages($content){ preg_match_all('/<img (.*?)\>/', $content, $images); if(! ...

  2. laravel5.1设置cookie

    Laravel 所建立的 cookie 会加密并且加上认证记号,这代表着被用户擅自更改的 cookie 会失效.从请求中取得Cookie值,你使用cookie方法 $value = $request- ...

  3. CockroachDB学习笔记——[译]The New Stack:遇见CockroachDB,一个弹性SQL数据库

    原文链接:https://www.cockroachlabs.com/blog/the-new-stack-meet-cockroachdb-the-resilient-sql-database/ 原 ...

  4. 配置Xmanager远程登录

    1.修改/etc/gdm/custom.conf文件找到下面的语句:[security]AllowRemoteRoot=true[xdmcp]Enable=true修改custom.conf后,必须重 ...

  5. Android之View的内容

    View的事件体系 本章介绍View的事件分发和滑动冲突问题的解决方案. 3.1 view的基础知识 View的位置参数.MotionEvent和TouchSlop对象.VelocityTracker ...

  6. linux 文件赋权限

    chown tomcat:tomcat /logs chmod 766 /logs

  7. Python3 Selenium自动化web测试 ==> 第一节 起始点之Python单元测试框架 unittest

    前置步骤 Python版本:3.6.4 selenium版本:3.11.0 >>> import selenium >>> help(selenium) IDE:P ...

  8. 【手记】解决Graphics.DrawImage带ImageAttributes在XP报内存不足的问题

    异常信息: System.OutOfMemoryException: 内存不足. 在 System.Drawing.Graphics.CheckErrorStatus(Int32 status) 在 ...

  9. AbstractQueuedSynchronizer 源码解读(转载)

    转载文章,拜读了一下原文感觉很不错,转载一下,侵删 链接地址:http://objcoding.com/2019/05/05/aqs-exclusive-lock/ Java并发之AQS源码分析(一) ...

  10. Hadoop入门学习笔记之一

    http://hadoop.apache.org/docs/r1.2.1/api/index.html 适当的利用 null 在map中可以实现对文件的简单处理,如排序,和分集合输出等. 需要关心的内 ...