当前位置: 首页 > article >正文

模版字符串复制粘贴支持换行

模版字符串复制粘贴支持换行

  • 模版字符串复制粘贴支持换行

根据后端返回字段,获取对应字段的值,生成模版进行复制粘贴出来!

模版字符串复制粘贴支持换行

后端返回类型:
const arr = [
	'test',
	'test1',
	'test2',
	'test3',
]

const copyProp = [
  { prop: 'test', label: '测试' },
  { prop: 'test1', label: '测试1' },
  { prop: 'test2', label: '测试2' },
  { prop: 'test3', label: '测试3' }
]

template:
<button :title="$lang('一键复制')" class="el-button el-button--text el-button--small" type="button">
     <i class="icon-iconfont iconfont iconbiaodan-chushen font-16" @click="handleCopy(row)"></i>
</button>
script:
 // 一键复制
    handleCopy(row) {
      // 处理复制模版
      const templateList = []
      this.arr.map((item) => {
        const [label] = copyProp.filter((i) => i.prop === item).map(v => v.label)
        templateList.push(`${label} : ${row[item] || ''}`)
      })
      templateList.push(this.msg) // 增加后面固定提示语
      const template = '' + `${templateList.join('\n')}`
      oneClickReplication(template)
    },
/**
 *
 * @param {*} 点击复制
 */
export const oneClickReplication = template => {
  var textareaC = document.createElement('textarea')
  textareaC.setAttribute('readonly', 'readonly') // 设置只读属性防止手机上弹出软键盘
  textareaC.value = template
  document.body.appendChild(textareaC) // 将textarea添加为body子元素
  textareaC.select()
  if (document.execCommand('copy')) {
    document.execCommand('copy')
    document.body.removeChild(textareaC)// 移除DOM元素
    vm.$message.success(vm.$lang('复制成功'))
  }
};


http://www.kler.cn/a/512348.html

相关文章:

  • 关于机器学习的一份总结
  • 机器人“大脑+小脑”范式:算力魔方赋能智能自主导航
  • OSI七层协议——分层网络协议
  • VLAN基础理论
  • 【计算机体系结构、微架构性能分析】core 与 uncore 分别是哪一些部分?区分 core 和 uncore
  • 【服务器】Ubuntu22.04配置静态ip
  • 【Block总结】TFF和SFF模块,时间和尺度的特征融合|即插即用
  • 【大数据2025】Yarn 总结
  • Android 11.0 第三方app接收不到开机广播问题的解决以及开机自启动功能实现二
  • Agent Laboratory: Using LLM Agents as Research Assistants 论文简介
  • 低代码系统-UI设计器核心介绍
  • MATLAB基础应用精讲-【数模应用】误差函数(erf)(附Java、python、R语言和MATLAB代码实现)
  • 高效安全文件传输新选择!群晖NAS如何实现无公网IP下的SFTP远程连接
  • Spring MVC:设置响应
  • Kafka 日志存储 — 文件目录及日志格式
  • Objective-C语言的数据库交互
  • goland map学习-实践使用练习:判断存在及遍历
  • 【计算机网络】传输层协议TCP与UDP
  • FreeRTOS系统移植
  • 在Vue中,<img> 标签的 src 值
  • 点云目标检测训练数据预处理---平面拟合与坐标转换(python实现)
  • MySQL事件功能简介
  • 【Web3企业出海】奇墨科技为企业出海提供云安全、ITQM智能运维及云MSP一站式服务
  • 数据分析及应用:经营分析中的综合指标解析与应用
  • 微服务学习-Nacos 作为配置中心动态管理
  • AI绘画入门:探索数字艺术新世界(1/10)