我就這么坐著生活給我什么我就接著拿走什么我就看著。

我的github: 李大玄
我的私人博客: 李大玄
我的npm開源庫: 李大玄
我的簡書: 李大玄
我的CSDN: 李大玄
我的掘金: 李大玄
嗶哩嗶哩: 李大玄
語雀文檔: 李大玄
圈紅地方不可刪除, 功能已實(shí)現(xiàn)

在這里插入圖片描述

<!--
 * @Description: 
 * @Author: 李大玄
 * @Date: 2021-08-04 15:26:14
 * @FilePath: /ucenter-messageflat-web-view/src/pages/test/ipt.vue
-->
<template>
  <el-input
    type="textarea"
    placeholder="請輸入模板內(nèi)容"
    class="w500"
    rows="5"
    resize="none"
    v-model="val"
    @keydown.delete="onDeleteKeyDown"
    maxlength="500"
    show-word-limit
    id="textarea"
  ></el-input>
  <!-- <pre>{{config}}</pre> -->
</template>

<script>
import { reactive, toRefs } from 'vue';
// import {config} from './map.ts'
export default {
  name: 'custom-textarea',
  props: {
    value: {
      required: true,
      type: [Number, String],
    },
    protectedSelection: {
      type: String,
      default: '0,0', // 'Start,End'
    },
  },
  setup() {
    const state = reactive({
      val: '你好啊;哈發(fā)大V和哦VH你SVHO${code}和啊${number}按時(shí)把U盾啊SV的${asadads}奧',
      list: [
        { type: 1, desc: '驗(yàn)證碼', code: '${code}' },
        { type: 2, desc: '電話號碼', code: '${phone}' },
        { type: 3, desc: '其它號碼（訂單號、密碼等）', code: '${number}' },
        { type: 4, desc: '時(shí)間', code: '${datetime}' },
        { type: 5, desc: '金額', code: '${amount}' },
        { type: 6, desc: '其它（名稱、賬號、地址等）', code: '${other}' },
      ],
      findIndexArr: [],
      // config: config
    });


    const onDeleteKeyDown = (e) => {
      state.findIndexArr = [];
      const { target } = e;
      // console.log(`deleteKeyDown:
      //   selectionStart: ${target.selectionStart}
      //   selectionStart: ${target.selectionEnd}
      //   length: ${target.value.length}
      //   value: ${target.value}
      //   keyCode: ${e.which}
      // `);
      // 如果包含不能刪除的區(qū)域，禁止
      for (let i = 0, list = state.list; i < list.length; i++) {
        const findIndex = state.val.indexOf(list[i].code);
        if (findIndex != -1) {
          state.findIndexArr.push([findIndex, findIndex + list[i].code.length]);
        }
      }
      if (isContainsProtectedSelection(target.selectionStart)) {
        e.preventDefault();
      }
    };
    const isContainsProtectedSelection = (start) => {
      // 第二個或條件這里其實(shí)沒必要，因?yàn)榧僭O(shè)不能刪除的字符串就在開頭
      // 如果字符串位置不固定，那么是需要的，且 props 的 protectedSelection 也需要動態(tài)計(jì)算
      for (let i = 0; i < state.findIndexArr.length; i++) {
        if (start > state.findIndexArr[i][0] && start <= state.findIndexArr[i][1]) {
          // 刪除范圍在區(qū)間
          return true;
        }
      }
      return false;
    };
    return {
      ...toRefs(state),
      onDeleteKeyDown,
    };
  },
};
</script>

<style scoped>
</style>