Vue 中input 点击复制其内容

这篇具有很好参考价值的文章主要介绍了Vue 中input 点击复制其内容。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Element UI中el-input 组件 ,一般使用情况:

<el-input type="text" id="put" v-model="value" ></el-input>

el-input 添加点击事件,这样添加点击事件是无效的:

<el-input @click="copy">

正确的写法,需要使用v-on的修饰符.native,@click.native:

<el-input type="text" id="put" v-model="value" @click.native="copy"></el-input>

data:

	data() {
		return {
		value: "点击我试试!",
		count: 0
		}
	},

在methods方法中,添加触发点击:

methods: {
	copy_() {
	var d = document.getElementById("put") //获取需要复制的元素
	d.select() //选中
	document.execCommand("copy") //直接复制
	//打印结果: 点击我试试!
	}
},

触发后,直接Ctrl+v/鼠标右击粘贴(就会显示复制的内容)!文章来源地址https://www.toymoban.com/news/detail-601216.html

到了这里,关于Vue 中input 点击复制其内容的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于elementUI input粘贴复制

    关于elementUI input粘贴复制 elementUI是一个基于Vue.js的前端UI框架,提供了丰富的组件和功能,方便开发者快速构建高效的用户界面。其中,input组件是一个常用的表单控件,用于接收用户的输入内容。input组件支持粘贴复制功能,即用户可以通过快捷键或右键菜单来复制或粘贴文

    2024年02月16日
    浏览(49)
  • vue+ElementUI实现点击图片预览大图和预览视频

    最近遇到一个需求: 在表格中实现预览图片和查看视频 预览图片功能: 如下,是材料一栏的代码 在 data 中定义: methods 中: style 中: 预览图片的功能就完成了. 接下来是查看视频: 安装 vue-video-player 在 main.js 中: 在写的vue页面中引入: 当时在 main.js 中引入后,发现这个插件没效果,然后

    2023年04月08日
    浏览(51)
  • vue element-ui blur触发事件 vue中使用@blur获取input val值 elementui+vue

    vue中使用@blur获取input val值

    2024年02月11日
    浏览(50)
  • vue去掉所有输入框两边空格,封装指令去空格,支持Vue2和Vue3,ElementUI Input去空格

    就是页面很多表单输入框,期望在提交的时候,都要把用户两边的空格去掉 ❌使用 vue 的指令 .trim 去掉空格 中间会输入不了空格, 比如我想输入 你好啊 中国 , 这中间的空格输入不了,只能变成 你好啊中国 ❌在提交的时候使用 trim() 方法去两边空格 需要一个个字段的添加,

    2024年02月14日
    浏览(51)
  • vue input获取光标位置,并追加内容

    项目中需要实现在输入框内的任意位置,追加内容,这里通过input的selectionStart属性还有setSelectionRange方法来实现。 首先来看selectionStart属性,用于获取文本框选区的开始位置,selectionEnd用于获取文本框选区结束的位置,举个栗子: 在该功能中,我们不是选择文字,主要是需要

    2024年02月16日
    浏览(37)
  • Vue3+ElementUI 多选框中复选框和名字点击方法效果分离

    现在的需求为 比如我点击了Option A ,触发点击Option A的方法,并且复选框不会取消勾选,分离的方法。   通过Vue事件处理的方法.prevent来阻止。!-- 提交事件将不再重新加载页面 --

    2024年01月22日
    浏览(59)
  • 【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

    gogo code 是一个基于 AST (源代码的抽象语法结构树状表现形式)的 JavaScript/Typescript/HTML 代码转换工具,可以用它来构建一个代码转换程序来帮助自动化完成如框架升级、代码重构、多平台转换等工作。 当前 GoGoCode 支持解析和操作如下类型的代码: ○JavaScript(JSX) ○Typescript

    2024年02月12日
    浏览(54)
  • vue中实现复制内容到剪切板

    在项目中 点击按钮 复制 某行文本是很常见的 应用场景, 在 Vue 项目中实现 复制功能 需要借助 vue-clipboard2 插件。 1、安装 vue-clipboard2 依赖 ( 不行的话可以切换成淘宝镜像源 npm config set registry https://registry.npm.taobao.org ) 2、在 main.js 文件中全局引入插件 示例代码如下: 3、

    2024年02月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包