页面展示js对象以及非input实现js复制到剪切板

页面展示js对象

// 以下是我在vue当中使用
var objStr = JSON.stringify(this.$store.state.options, null, 4)
this.options = objStr.replace(/\n/g, '<br>').replace(/\s/g, '&nbsp')
this.$refs.options.innerHTML = this.options

这里我遇到一个小坑，因为这个对象显示在dialog中所以导致$refs.options为undefined，代码如下：

// 显示dialog
this.centerDialogVisible = true
var objStr = JSON.stringify(this.$store.state.options, null, 4)
this.options = objStr.replace(/\n/g, '<br>').replace(/\s/g, '&nbsp')
this.$refs.options.innerHTML = this.options

原因：因为在获取$refs.options时，dialog可能还没有渲染完成，因此$refs.options为undefined。
修改后的代码：

this.centerDialogVisible = true
this.$nextTick(() => {
   var objStr = JSON.stringify(this.$store.state.options, null, 4)
   this.options = objStr.replace(/\n/g, '<br>').replace(/\s/g, '&nbsp')
   this.$refs.options.innerHTML = this.options
 })

大家也要注意昂 嘻嘻嘻

非input实现js复制到剪切板

直接上代码

var tx = this.$refs.options
      // 创建select对象与range对象
      const selection = window.getSelection()
      const range = document.createRange()
      // 从当前selection对象中移除所有的range对象
      // 取消所有的选择只 留下anchorNode 和focusNode属性并将其设置为null。
      // 这里没弄明白为什么需要先remove一下， 也没有太多资料查证 没有这句会复制失败
      if (selection.rangeCount > 0) selection.removeAllRanges()
      // 使 Range 包含某个节点的内容 使用这个 或者下面的selectNode都可以
      // range.selectNodeContents(tx)
      // 使 Range 包含某个节点及其内容
      range.selectNode(tx)
      // 向选区（Selection）中添加一个区域（Range）
      selection.addRange(range)
      // 已复制文字
      // console.log('selectedText', selection.toString())
      // 执行浏览器复制命令
      document.execCommand('copy')
      //  这步可有可无   如果没有页面上复制内容会被选中
      selection.removeAllRanges()