几个知识点总结一下：
1，window.getSelection()：获取选中的字段，返回的是一个Selection对象，可以通过连 接字符串或者String.toString()转为字符串。同 document.getSelection()
2，Selection.getRangeAt(0)：返回一个包含当前选区内容的区域对象。
3，Range.deleteContents()：移除当前选取内容区域对象里面的内容，即Range内容。
4，子元素会继承父元素的属性，所以在子元素上，要设contenteditable为false,保证绑定了超链接的字段不会被编辑。

代码如下：

<template>
 <div>
   <div class="demo"
        contenteditable
        placeholder="请输入内容"
        ref="msgContent"
        @mouseup="handleLink"
   ></div>
   <button ref="link" @click="addLink">点击添加链接</button>
 </div>
</template>
<script>
    export default {
    data () {
      return {
        linkUrl:'',
        linkWord:'',
        flag:false
      }
    },
    methods: {
      //获取选中字段
      selectText(){
        if(window.getSelection){
          return window.getSelection()
        } else if(document.getSelection){
          return document.getSelection()
        }else {
          return ""
        }
      },
      //弹出添加链接弹框
      addLink(){
        this.$prompt('请输入地址',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          inputPattern:/^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:\/~+#]*[\w\-@?^=%&\/~+#])?$/,
          inputErrorMessage:'地址格式不正确'
        }).then(({value})=>{
          this.linkUrl.deleteContents()
          let box = document.createElement('a')
          box.setAttribute('href',value)
          //不受父元素属性的影响
          box.setAttribute('contenteditable',false)
          box.setAttribute('target','_blank')
          box.style.color='rgb(25,137,250)'
          box.innerHTML = this.linkWord
          this.linkUrl.insertNode(box)
          this.$refs.link.style.color = 'rgb(96,98,102)'
          this.flag = false
        })

      },
      //为选中字段绑定超链接
      handleLink(){
        let msgContant = this.$refs.msgContent.innerText
        if(msgContant.length !== 0){
          this.linkWord = this.selectText().toString()
          if(this.linkWord.length === 0){
            this.flag = false
          }else{
            this.flag = true
            this.$refs.link.style.color = 'rgb(25,137,250)'
            this.linkUrl = this.selectText().getRangeAt(0)
          }
        }

      }
    }
  }
</script>

<style>
  .demo {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    padding:10px;
    outline: none;
  }
</style>