vue3 怎么封装vue-ueditor-wrap

为了封装vue-ueditor-wrap，可以按照以下步骤进行操作：

1.安装vue-ueditor-wrap和ueditor

npm install vue-ueditor-wrap ueditor --save

2.在main.js中引入ueditor

import Vue from 'vue'
import App from './App.vue'
import UEditor from 'vue-ueditor-wrap'
import 'ueditor/ueditor.config.js'
import 'ueditor/ueditor.all.min.js'
import 'ueditor/lang/zh-cn/zh-cn.js'

Vue.component('u-editor', UEditor)

new Vue({
  el: '#app',
  render: h => h(App)
})

3.在组件中使用vue-ueditor-wrap

<template>
  <div>
    <u-editor v-model="content"></u-editor>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  }
}
</script>

4.封装vue-ueditor-wrap为一个独立的组件

<template>
  <div>
    <u-editor v-model="content"></u-editor>
  </div>
</template>

<script>
import UEditor from 'vue-ueditor-wrap'
import 'ueditor/ueditor.config.js'
import 'ueditor/ueditor.all.min.js'
import 'ueditor/lang/zh-cn/zh-cn.js'

export default {
  name: 'VueUeditorWrap',
  components: {
    UEditor
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      content: this.value
    }
  },
  watch: {
    value(val) {
      this.content = val
    },
    content(val) {
      this.$emit('input', val)
    }
  }
}
</script>

5.在其他组件中使用封装好的vue-ueditor-wrap组件

<template>
  <div>
    <vue-ueditor-wrap v-model="content"></vue-ueditor-wrap>
  </div>
</template>

<script>
import VueUeditorWrap from './VueUeditorWrap.vue'

export default {
  components: {
    VueUeditorWrap
  },
  data() {
    return {
      content: ''
    }
  }
}
</script>