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

kailong321200875 · Dec 24, 2020 · c395e27 · c395e27
1 parent 5142e6e
commit c395e27
Show file tree

Hide file tree

Showing 32 changed files with 53 additions and 167 deletions.
diff --git a/package.json b/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": {

diff --git a/src/components/Editor/index.vue b/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
     }
   }
 })

diff --git a/src/components/Editor/props.ts b/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':

diff --git a/src/components/Preview/functional.ts → src/components/Preview/index.ts b/src/components/Preview/functional.ts → src/components/Preview/index.ts
diff --git a/src/components/index.ts b/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)
 }
diff --git a/src/pages/index/views/components-demo/editor/index.vue b/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
     }
   }
 })

diff --git a/src/pages/index/views/components-demo/preview/index.vue b/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',

diff --git a/src/pages/index/views/components-demo/scroll/index.vue b/src/pages/index/views/components-demo/scroll/index.vue
diff --git a/src/pages/index/views/components-demo/search/index.vue b/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)

diff --git a/src/pages/index/views/example-demo/example/components/IfnoWrite.vue b/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,

diff --git a/src/pages/index/views/example-demo/example/index.vue b/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() {

diff --git a/src/pages/index/views/table-demo/basic-table/index.vue b/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(() => {

diff --git a/src/pages/index/views/table-demo/border-table/index.vue b/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(() => {

diff --git a/src/pages/index/views/table-demo/custom-header/index.vue b/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(() => {

diff --git a/src/pages/index/views/table-demo/custom-index/index.vue b/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(() => {

diff --git a/src/pages/index/views/table-demo/expand-row/index.vue b/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(() => {

diff --git a/src/pages/index/views/table-demo/fixed-column-header/index.vue b/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(() => {