vue中表格输入框的新增，查看功能

功能：

新增功能：

<template>
  <div :contenteditable="canEdit" ref="materialTxt" v-html="innerText" @keydown="textareaKeydown($event)" @blur="changeText"></div>
</template>
<script>
export default {
  name: 'divEdit',
  props: ['value'],
  data() {
    return {
      canEdit: true
    }
  },
  mounted() {
    this.$refs.materialTxt.addEventListener('paste', function (e) {
      console.log('监听到了')
      e.stopPropagation()
      e.preventDefault()
      let text = ''
      const event = e.originalEvent || e
      if (event.clipboardData && event.clipboardData.getData) {
        text = event.clipboardData.getData('text/plain')
      } else if (window.clipboardData && window.clipboardData.getData) {
        text = window.clipboardData.getData('Text')
      }
      if (document.queryCommandSupported('insertText')) {
        document.execCommand('insertText', false, text)
      } else {
        document.execCommand('paste', false, text)
      }
    })
    this.$nextTick(function () {
      var editType = localStorage.getItem('rateIsType')
      if (editType == '1') {
        this.canEdit = false
      }
    })
  },
  computed: {
    innerText() {
      return this.value
    }
  },
  methods: {
    changeText() {
      var value = this.$el.innerHTML
      this.$emit('input', value)
    },
    onEnter(event) {
      event.preventDefault()
      return false
    },
    textareaKeydown(event) {
      if (event.keyCode === 13) {
        event.preventDefault() // 阻止浏览器默认换行操作
        return false
      }
    }
  }
}
</script>

查看功能：

<template>
    <div>{{value}}</div>
</template>
<script>
    export default {
      name:'divView',
        props: ['value'],
        data(){
            return {innerText:this.value}
        },
        methods:{
        }
    }
</script>

使用：(通过动态组件切换是否可编辑)

<template>
  <div>
    <compontnt :is="componentsName" v-model="main.name" class="full"></compontnt>
  </div>
</template>

<script>
import divEdit from './divEdit.vue'
import divView from './divView.vue'

export default {
  name: 'applyForm',
  data() {
    return {
      componentsName: 'divEdit',
    }
   },
   components: {
    divEdit,
    divView
    },
  },
</script>