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

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

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

后端返回类型：
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('复制成功'))
  }
};

原文地址：https://blog.csdn.net/socaicaicaicai/article/details/145263673

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！