前端划词选中实现

1、需求

如上图，鼠标划词选中标签，选中的词自动填入到输入框中

2、实现

    <div class="tag-words" @mouseup="startSelectWord">
      <div class="tag-word" v-for="(item, index) in tagWords" :key="index">
        {{ item.text }}
      </div>
    </div>

    startSelectWord(event) {
      const target = event.target;
      if (target.classList.contains('tag-words') || target.classList.contains('tag-word')) {
        var txt;
        if (window.getSelection) {
          txt = window.getSelection();
        } else {
          txt = document.selection.createRange().text;
        }
        if (txt + '' !== '') {
          this.ruleForm.tagName = (txt + '').replace(/(\r\n|\n|\r)/gm, '');
        }
        console.log(this.ruleForm.tagName, 'ruleForm')
      }
    }

注意：因为划词选中的效果只针对于class="tag-words"和class="tag-word"这个div里，所以需要进行一个event.target的判断

如下图class="tag-words"的div是红框部分，class="tag-word"的div是每个词的部分

3、实现效果

4、全部代码

<template>
  <div>
    <el-dialog
      :title="dialogVisibleTitle"
      :visible.sync="dialogVisible"
      width="50%"
      center
      :before-close="handleClose"
    >
      <div class="formClass">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          label-width="95px"
          class="demo-ruleForm"
        >
          <div class="note">
            <i class="el-icon-warning"></i>第一个选择的标签将默认为主标签。注：产品标签将和预警数据进行关联，请不要选择通用性词汇，如：理财计划、二十三期等。
          </div>
          <br>
          <div class="prompt">
            <p>请选择标签</p>
            <p>可划词添加标签</p>
          </div>
          <div class="tag-words" @mouseup="startSelectWord">
            <div class="tag-word" v-for="(item, index) in tagWords" :key="index">
              {{ item.text }}
            </div>
          </div>
          <br>
          <el-input style="width: 500px" v-model="ruleForm.tagName"/>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="conformFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {participle} from "@/api/apply/apply";

export default {
  data() {
    return {
      dialogVisibleTitle: '添加标签',
      dialogVisible: false,
      ruleForm: {
        tagName: '',
        eventTag: ''
      },
      tagArray: [],
      tagWords: [],
      isSelecting: false,
      selectedWords: []
    }
  },
  methods: {
    conformFn() {
      this.$parent.tagNames.push({tagName: this.ruleForm.tagName})
      this.handleClose();
    },
    handleClose() {
      this.dialogVisible = false
      this.ruleForm.tagName = ''
    },
    getTagWords(productName) {
      const param =  {
        text: productName
      }
      participle(param).then(res => {
        this.tagWords = res
      })
    },
    startSelectWord(event) {
      const target = event.target;
      if (target.classList.contains('tag-words') || target.classList.contains('tag-word')) {
        var txt;
        if (window.getSelection) {
          txt = window.getSelection();
        } else {
          txt = document.selection.createRange().text;
        }
        if (txt + '' !== '') {
          this.ruleForm.tagName = (txt + '').replace(/(\r\n|\n|\r)/gm, '');
        }
        console.log(this.ruleForm.tagName, 'ruleForm')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .note {
    font-family: Source Han Sans CN;
    font-size: 12px;
    font-weight: normal;
    color: #999999;

    i {
      color: #feb127
    }
  }

  .prompt {
    display: flex;
    align-items: center;

    p:first-child {
      margin-right: 10px;

      font-family: Source Han Sans CN;
      font-size: 14px;
      font-weight: normal;
      color: #333333;
    }

    p:nth-of-type(2) {
      font-family: Source Han Sans CN;
      font-size: 12px;
      font-weight: normal;
      color: #999999;
    }
  }

  .tag-words {
    display: flex;
    gap: 10px;

    font-family: Source Han Sans CN;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    color: #306EF5;
  }
</style>