首页 > 其他分享 >js实现el-select选中的文本,一键复制

js实现el-select选中的文本,一键复制

时间:2023-12-20 10:13:11浏览次数:33  
标签:el tempEle js 复制 选中 document select

<div class="invite-buttom">
           请选择要复制的网站:
            <el-select v-model="webValue" placeholder="请选择要复制的网站">
              <el-option
                v-for="item in formUrl.webInviteUrl"
                :key="item.name"
                :label="item.name"
                :value="item.webInviteUrl">
              </el-option>
            </el-select>
          <div class="invite-btn" @click="copyToClip">复制链接</div>
        </div>

methods中

//复制链接
    copyToClip(){
      let tempEle= document.createElement('input') // 创建一个输入框,先把要粘贴的值放进去
      tempEle.value = this.webValue// 赋值
      document.body.appendChild(tempEle)
      tempEle.select() // 对输入框中的内容进行选中
      let result = document.execCommand('Copy') // 浏览器复制方法
      if(result) {
        this.$message.success('复制成功')
      }
      document.body.removeChild(tempEle);
      this.webValue =''
    },

 

标签:el,tempEle,js,复制,选中,document,select
From: https://www.cnblogs.com/anna001/p/17915869.html

相关文章

  • delphi cxgrid 过滤列表增加右键
    首先弹出来的下拉过滤列表也是一个form思路,在不改源代码的情况:hook,捕捉  WM_SHOWWINDOW 消息,通过源码得知窗口类名为”TcxGridFilterPopup“ 再通过句柄转得到实例,同时在本单元type一下新的 TcxGridFilterPopup, TcxGridPopupListBox才能访问保护起来的方法跟属性C......
  • npmjs.com 网站
    npmjs.com提供了许多对日常开发非常有用的功能:包管理:你可以使用npm来安装、升级、卸载包。这些包可以是全局安装的,也可以是本地安装的。依赖控制:npm可以帮助你管理项目的依赖,使得代码部署变得更加容易。发布和维护包:如果你是一个开发者,npm也提供了命令行工具,让你......
  • C++ Qt开发:QItemDelegate 自定义代理组件
    Qt是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍QStyledItemDelegate自定义代理组件的常用方法及灵活运用。在Qt中,QStyledItemDelegate类是用于......
  • cpp环境搭建 - vs2017编译CMakeLists项目(Box2dLite)
    box2dlite地址:GitHub-erincatto/box2d-lite:Asmall2Dphysicsengine vs2017不支持utf-8withoutbom问题box2dlite的源码文件是utf-8withoutbom的,如果在里面写了中文注释,就会出现编译错误解决办法:将文件编码改成utf-8带bom的(这边没有在附加选项加/utf-8貌似也没问题......
  • 在Mapbox-gl-js中添加自定义图层
    在Mapbox-gl-js中添加自定义图层前言一、制作geojson地图二、使用Tippecanoe将geojson转换成vectortile(.pbf)文件三、使用mapbox-gl-js显示三、Mapbox-gl-js中根据矢量数据的属性过滤显示前言本文说明如何制作自定义的地图数据,并使用mapbox-gl-js进行显示一、制作geoj......
  • JsonNode、ObjectNode和ArrayNode
    我个人不喜欢fastjson,但是项目中很多地方用到json字符串转换对象但又不想创建pojo所以使用jackson的JsonNode、ObjectNode和ArrayNode就非常好用,万能对象,这三个对象是非常全面的,感兴趣的可以看下源码JsonNode只读,通常由ObjectMapper解析json字符串得到ObjectNode可修改,继承......
  • Linux--VM设置静态IP--VM&XShell连接
     1.配置环境Linux:CentOS7远程:XShell7 2.设置①打开虚拟机登录 cd/-->ipaddr 输入:cd/etc/sysconfig/network-scripts回车输入:viifcfg-ens33 --->进入网卡配置文件(必须在左下角Insert模式时编写可直接按......
  • beanshell
    beanshellbeanshell是一种java源代码解释器,具有脚本语言的特性使用beanshell可以是jmeter实现更多的业务需求 vars.get() 从jmeter中获得变量值vars.put()  把数据保存为jmeter的变量log.info()   打印props.get()  读取jmeter.properties文件里的内容 ......
  • 网页在线编辑Excel表格,调用本机Office,非模拟,插入图片,导出PDF全屏编辑
    Excel作为微软Office的重要组成部分,在各行业中应用非常广泛,随着互联网及云计算的普及,网页在线编辑Excel表格也越来越成文更多人的广泛需求,而在网页中却无法直接在线编辑微软Office,下面介绍一种Web网页在线编辑Excel表格方案,可以调用本机原生Offce软件,直接在网页上编辑Excel表格。......
  • 【力扣】-9. 回文数|刷题打卡-JS
    给你一个整数 x ,如果 x 是一个回文整数,返回 true ;否则,返回 false 。回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数。例如,121 是回文,而 123 不是。示例1:输入:x=121输出:true示例 2:输入:x=-121输出:false解释:从左向右读,为-121。从右向左读,为121-。......