vue插件实现v-model功能

<input type="text" v-model="value" style="line-height: 30px;">
data () {
 return {
 value: '222'
 }
}

<input type="text" :value="value" @input="value=$event.target.value">

<editor v-model="content" :height="editorHeight"></editor>

<div v-bind:style="{height: height}" class="editor-box" ref="editor" contenteditable v-html="contentHtml" @input="changeText"></div>

 changeText () {
  const htmlString = this.$refs.editor.innerHTML
  this.$emit('input', htmlString)
 },

props: {
 value: {
  type: String,
  default: ''
 },
 height: {
  type: String,
  default: 'auto'
 }
 },
data () {
 return {
  // 编辑器内容
  contentHtml: this.value || this.value === 0 ? this.value : '<div><br></div>',
  // 是否在编译
  isLocked: true,
  // 光标位置
  lastEditRange: null
 }
 },
 watch: {
 value (val) {
  if (!this.isLocked) {
  this.contentHtml = this.value;
  }
 }
 }

 <div v-bind:style="{height: height}" class="editor-box" ref="editor" contenteditable v-html="contentHtml" @input="changeText" @focus="focusEditor" @blur="blurEditor"></div>
 // 编辑器失去焦点
 blurEditor (event) {
  this.isLocked = false
 },
 // 编辑器获得焦点
 focusEditor (event) {
  this.isLocked = true
 },