fix: 🐛 删除Editor双向绑定，改为props传参

package.json

@@ -33,7 +33,7 @@
     "vue": "3.0.4",
     "vue-router": "4.0.0-rc.6",
     "vuex": "4.0.0-rc.2",
-    "wangeditor": "^4.5.2",
+    "wangeditor": "4.5.4",
     "web-storage-cache": "^1.1.1"
   },
   "devDependencies": {

src/components/Editor/index.vue

@@ -11,7 +11,7 @@ import 'highlight.js/styles/monokai-sublime.css'
 export default defineComponent({
   name: 'Editor',
   props: editorProps,
-  emits: ['change', 'focus', 'blur', 'update:value'],
+  emits: ['change', 'focus', 'blur', 'update:modelValue'],
   setup(props, { emit }) {
     const editorRef = ref<HTMLElement | null>(null)
     const editor = ref<E | null>(null)
@@ -101,8 +101,8 @@ export default defineComponent({
       // 配置 onchange 回调函数
       editor.config.onchange = (html: string) => {
         const text = editor.txt.text()
-        emitFun(editor, html, 'change')
-        emit('update:value', props.valueType === 'html' ? html : text)
+        emitFun(editor, props.valueType === 'html' ? html : text, 'change')
+        // emit('update:modelValue', props.valueType === 'html' ? html : text)
       }
       // 配置触发 onchange 的时间频率，默认为 200ms
       editor.config.onchangeTimeout = onchangeTimeout
@@ -121,8 +121,21 @@ export default defineComponent({
       emit(type, props.valueType === 'html' ? html : text)
     }
 
+    function getHtml() {
+      if (editor.value) {
+        return unref(editor.value as any).txt.html()
+      }
+    }
+
+    function getText() {
+      if (editor.value) {
+        return unref(editor.value as any).txt.text()
+      }
+    }
+
     return {
-      editorRef
+      editorRef,
+      getHtml, getText
     }
   }
 })

src/components/Editor/props.ts

@@ -14,7 +14,7 @@ export const editorProps = {
         zIndex: 0,
         placeholder: '请输入文本',
         focus: false,
-        onchangeTimeout: 500,
+        onchangeTimeout: 1000,
         customAlert: (s: string, t: string) => {
           switch (t) {
           case 'success':

src/components/index.ts

@@ -1,6 +1,10 @@
 import type { App } from 'vue'
 import Dialog from './Dialog/index.vue'// Dialog组件
+import ComTable from './Table/index.vue'// Table组件
+import ComSearch from './Search/index.vue'// Search组件
 
 export function setupGlobCom(app: App<Element>): void {
   app.component('ComDialog', Dialog)
+  app.component('ComTable', ComTable)
+  app.component('ComSearch', ComSearch)
 }

src/pages/index/views/components-demo/editor/index.vue

@@ -7,12 +7,17 @@
       type="info"
       style="margin-bottom: 20px;"
     />
-    <editor v-model:value="html" />
+    <editor ref="editorRef" :value="html" />
+
+    <div style="text-align: center;margin-top: 20px;">
+      <el-button @click="getContent('getHtml')">获取HTML(请在控制台查看)</el-button>
+      <el-button @click="getContent('getText')">获取TEXT(请在控制台查看)</el-button>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, unref } from 'vue'
 import Editor from '_c/Editor/index.vue'
 import { content } from './data'
 export default defineComponent({
@@ -22,8 +27,16 @@ export default defineComponent({
   },
   setup() {
     const html = ref<string>(content)
+    const editorRef = ref<HTMLElement | null>(null)
+
+    function getContent(name: string) {
+      console.log(unref(editorRef as any)[name]())
+    }
+
     return {
-      html
+      html,
+      editorRef,
+      getContent
     }
   }
 })

src/pages/index/views/components-demo/preview/index.vue

@@ -48,7 +48,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import { createImgPreview } from '_c/Preview/functional'
+import { createImgPreview } from '_c/Preview'
 import { Message } from '_c/Message'
 export default defineComponent({
   // name: 'PreviewDemo',

src/pages/index/views/components-demo/scroll/index.vue

@@ -1,59 +0,0 @@
-<template>
-  <div>
-    <el-alert message="抽取于 Element 的 Scrollbar 组件进行改造统一美化各个浏览器滚动条，保持一致性。" style="margin-bottom: 20px;" />
-
-    <el-alert message="横向滚动，外围容器需要设置固定宽度。" style="margin-bottom: 20px;" />
-    <div class="deom__wrap deom__wrap--horizontal">
-      <scrollbar>
-        <ul class="deom-ul__wrap">
-          <li v-for="i in 1" :key="i">{{ i }}</li>
-        </ul>
-      </scrollbar>
-    </div>
-
-    <el-alert message="纵向滚动，外围容器需要设置固定高度。" style="margin-bottom: 20px;margin-top: 20px;" />
-    <div class="deom__wrap deom__wrap--vertical">
-      <scrollbar>
-        <ul class="deom-ul__wrap">
-          <li v-for="i in 100" :key="i">{{ i }}</li>
-        </ul>
-      </scrollbar>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import Scrollbar from '_c/Scrollbar/index.vue'
-export default defineComponent({
-  // name: 'Scroll',
-  components: {
-    Scrollbar
-  }
-})
-</script>
-
-<style lang="less" scoped>
-.deom__wrap {
-  padding: 20px;
-  background: #fff;
-  li {
-    border: 1px solid #91d5ff;
-    height: 40px;
-    line-height: 40px;
-    margin-bottom: -1px;
-    padding-left: 15px;
-  }
-}
-.deom__wrap--horizontal {
-  width: 500px;
-  height: 80px;
-  .deom-ul__wrap {
-    width: 800px;
-  }
-}
-.deom__wrap--vertical {
-  width: 500px;
-  height: 500px;
-}
-</style>

src/pages/index/views/components-demo/search/index.vue

@@ -15,7 +15,7 @@
       style="margin-bottom: 20px;margin-top: 20px;"
     />
     <div class="searh">
-      <search
+      <com-search
         :data="classicData"
         @search-submit="searchSubmit1"
         @reset-submit="resetSubmit1"
@@ -33,7 +33,7 @@
       style="margin-bottom: 20px;margin-top: 20px;"
     />
     <div class="searh">
-      <search
+      <com-search
         layout="bottom"
         :data="classicData"
         @search-submit="searchSubmit2"
@@ -52,7 +52,7 @@
       style="margin-bottom: 20px;margin-top: 20px;"
     />
     <div class="searh">
-      <search
+      <com-search
         layout="right"
         :data="classicData"
         @search-submit="searchSubmit3"
@@ -67,13 +67,9 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import Search from '_c/Search/index.vue'
 import { classicData } from './classic-data'
 export default defineComponent({
   // name: 'SearchDemo',
-  components: {
-    Search
-  },
   setup() {
     const formData1 = ref<{[key: string]: any} | null>(null)
     const formData2 = ref<{[key: string]: any} | null>(null)

src/pages/index/views/example-demo/example/components/IfnoWrite.vue

@@ -48,7 +48,7 @@
         </el-col>
         <el-col :span="24">
           <el-form-item prop="content" label="内容">
-            <editor v-model:value="form.content" />
+            <editor ref="editorRef" :value="form.content" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -87,6 +87,7 @@ export default defineComponent({
   emits: ['close', 'success'],
   setup(props, { emit }) {
     const formRef = ref<HTMLElement | null>(null)
+    const editorRef = ref<HTMLElement | null>(null)
     const subLoading = ref<boolean>(false)
 
     const form = reactive<InfoWriteParams>({
@@ -136,6 +137,8 @@ export default defineComponent({
     // 新增或者编辑
     function setListData() {
       const formRefWrap = unref(formRef as any)
+      const editorRefWrap = unref(editorRef as any)
+      form.content = editorRefWrap.getHtml()
       try {
         subLoading.value = true
         formRefWrap.validate(async(valid: boolean) => {
@@ -166,7 +169,7 @@ export default defineComponent({
     }
 
     return {
-      formRef,
+      formRef, editorRef,
       subLoading,
       form,
       rules,

src/pages/index/views/example-demo/example/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="search__example--wrap">
-      <search
+      <com-search
         :data="searchData"
         @search-submit="searchSubmit"
         @reset-submit="resetSubmit"
@@ -58,8 +58,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
-import Search from '_c/Search/index.vue'
 import IfnoWrite from './components/IfnoWrite.vue'
 
 import { useExample } from '@/hooks/useExample'
@@ -116,8 +114,6 @@ const columns = [
 export default defineComponent({
   // name: 'Example',
   components: {
-    ComTable,
-    Search,
     IfnoWrite
   },
   setup() {

src/pages/index/views/table-demo/basic-table/index.vue

@@ -13,7 +13,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -52,9 +51,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'BasicTable',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/border-table/index.vue

@@ -18,7 +18,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -57,9 +56,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'BorderTable',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/custom-header/index.vue

@@ -36,7 +36,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -78,9 +77,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'CustomHeader',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/custom-index/index.vue

@@ -17,7 +17,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const tableData = [
   {
@@ -41,9 +40,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'CustomIndex',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/expand-row/index.vue

@@ -44,7 +44,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -106,9 +105,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'ExpandRow',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/fixed-column-header/index.vue

@@ -25,7 +25,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -139,9 +138,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'FixedColumnHeader',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/fixed-column/index.vue

@@ -24,7 +24,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -106,9 +105,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'FixedColumn',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/fixed-header/index.vue

@@ -19,7 +19,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -76,9 +75,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'FixedHeader',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/fluid-height/index.vue

@@ -24,7 +24,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -70,9 +69,6 @@ const columns = [
 ]
 export default defineComponent({
   // name: 'FluidHeight',
-  components: {
-    ComTable
-  },
   setup() {
     const tableData = ref<any[]>([
       {

src/pages/index/views/table-demo/merge-table/index.vue

@@ -28,7 +28,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -115,9 +114,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'MergeTable',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/multi-header/index.vue

@@ -24,7 +24,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -82,9 +81,6 @@ const columns = [
 
 export default defineComponent({
   // name: 'MultiHeader',
-  components: {
-    ComTable
-  },
   setup() {
     const tableData = ref<any[]>([
       {

src/pages/index/views/table-demo/multiple-choice/index.vue

@@ -25,7 +25,6 @@
 
 <script lang="ts">
 import { defineComponent, ref, unref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -64,9 +63,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'MultipleChoice',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/page-table/index.vue

@@ -23,7 +23,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -62,9 +61,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'PageTable',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/screen-table/index.vue

@@ -29,7 +29,6 @@
 
 <script lang="ts">
 import { defineComponent, ref, unref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const tableData = [
   {
@@ -57,9 +56,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'ScreenTable',
-  components: {
-    ComTable
-  },
   setup() {
     const filterTable = ref<HTMLElement | null>(null)
 

src/pages/index/views/table-demo/single-choice/index.vue

@@ -25,7 +25,6 @@
 
 <script lang="ts">
 import { defineComponent, ref, unref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -64,9 +63,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'SingleChoice',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/sort-table/index.vue

@@ -19,7 +19,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -60,9 +59,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'SortTable',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/state-table/index.vue

@@ -18,7 +18,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -57,9 +56,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'StateTable',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/stripe-table/index.vue

@@ -18,7 +18,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -57,9 +56,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'StripeTable',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/total-table/index.vue

@@ -30,7 +30,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -117,9 +116,6 @@ const tableData = [
 
 export default defineComponent({
   // name: 'TotalTable',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

src/pages/index/views/table-demo/tree-and-load/index.vue

@@ -33,7 +33,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import ComTable from '_c/Table/index.vue'
 
 const columns = [
   {
@@ -138,9 +137,6 @@ const tableData1 = [
 
 export default defineComponent({
   // name: 'TreeAndLoad',
-  components: {
-    ComTable
-  },
   setup() {
     const loading = ref<boolean>(true)
     setTimeout(() => {

yarn.lock

@@ -10550,10 +10550,10 @@ vuex@4.0.0-rc.2:
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.0-rc.2.tgz#3681c84eb6f5171b039edaa17cc78105e20724f3"
   integrity sha512-HCPzYGea1xL7fMpDoMiHKujC1Bi/HM9LS5ML0Kv55zQtZJvOl0Lq7eWvJoen+SI4Lf7p9V5AqcVsoLPXNBywjg==
 
-wangeditor@^4.5.2:
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/wangeditor/-/wangeditor-4.5.3.tgz#a646a222ecd3ec81fef845efbfb57ece864ecc2c"
-  integrity sha512-fxByLI/RPtvc23dSz8P9I9cywDwCugoFKn/xq/wi6fuTlrI7SMUBSGM655U4stwkK3oRljPRt0kWYGeR3ScyuQ==
+wangeditor@4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/wangeditor/-/wangeditor-4.5.4.tgz#cce6f73b96fdb9ce1f19a1e972e1fd0aef9192a6"
+  integrity sha512-HqqyPzpf03E2VO7qtOz2nUCr7GT75/+9agvQnG5Ybiwu9FcwGkVipn9BdVxydBxfAeRGCXXWs6+v3Z9dJ0H2fg==
   dependencies:
     "@babel/runtime" "^7.11.2"
     "@babel/runtime-corejs3" "^7.11.2"