platformFront/src/components/basicKnow/DivEditable.vue

<template>
  <div>
    <span class="address-placeholder" v-show="onshow" @click="getfouce">请输入</span>
    <div
      class="test_box"
      contenteditable="true"
      v-html="innerText"
      :ref="Maincontent"
      @input="handleInput"
      @blur="unblur"
      @focus="changeColor"
      @compositionstart="handleStart"
      @compositionend="handleEnd"
    ></div>
  </div>
</template>

<script>
// import { Fragment } from 'vue-fragment'
export default {
  name: 'DivEditable',
  props: ['value', 'Maincontent'],
  data() {
    return {
      innerText: this.value,
      isChange: true,
      composing: false,
      onshow: true
    };
  },
  // components: { Fragment },
  watch: {
    value() {
      if (this.isChange) {
        this.innerText = this.value;
      }
    }
  },
  mounted() {
    let len = this.value.length;
    this.onshow = len > 0 ? false : true;
  },
  methods: {
    changeColor(){
      this.isChange = false
      this.$refs[this.Maincontent].style.border = '1px solid #48C5D7'
    },
    unblur() {
      this.$refs[this.Maincontent].style.border = '1px solid #dcdfe6'
    },
    getfouce() {
       this.$refs[this.Maincontent].focus()
    },
    handleInput(event) {
      let text = event.target.innerText;
      let len = text.length;
      this.onshow = len > 0 ? false : true;
      this.valueHandle(event, text);
      this.$emit('input', text);
    },
    valueHandle(event, strVale) {
      let _this = this;
      let text = strVale;
      if (this.composing) {
        return;
      }
      let len = text.length;
      this.onshow = len > 0 ? false : true;
      if (len > 200) {
        this.$refs[this.Maincontent].innerHTML = text.substr(0, 200);
        this.$refs[this.Maincontent].focus();
      }
      setTimeout(() => {
        _this.keepLastIndex(event.target);
      }, 5);
      // 拓展 如果想要只需要前100位数据
      // this.content = this.content.substring(0, 100)
    },
    handleStart() {
      this.composing = true;
    },
    /**
     * 中文输入结束
     */
    handleEnd($event) {
      this.composing = false;
      let text = $event.target.innerHTML;
      // console.log($event.target.innerHTML)
      this.valueHandle($event, text);
    },
    keepLastIndex(obj) {
      if (window.getSelection) {
        // ie11 10 9 ff safari
        obj.focus(); // 解决ff不获取焦点无法定位问题
        let range = window.getSelection(); // 创建range
        range.selectAllChildren(obj); // range 选择obj下所有子内容
        range.collapseToEnd(); // 光标移至最后
      } else if (document.selection) {
        // ie10 9 8 7 6 5
        let range = document.selection.createRange(); // 创建选择对象
        // var range = document.body.createTextRange();
        range.moveToElementText(obj); // range定位到obj
        range.collapse(false); // 光标移至最后
        range.select();
      }
    }
  }
};
</script>

<style lang="less" scoped>
.address-placeholder {
  line-height: 42px;
  height: 42px;
  color: #a2a2a2;
  position: absolute;
  left: 16px;
  top: 6px;
  opacity: 0.7;
  font-size: 14px;
}
.test_box {
  min-height: 20px;
  max-height: 300px;
  outline: 0;
  border: 1px solid #dcdfe6;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 4px;
  margin-top: 6px;
  padding: 10px 15px;
}
</style>