code: wText vue3 optimize

src/components/modules/widgets/wText/wText.vue

@@ -49,7 +49,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 // 文本组件
 const NAME = 'w-text'
 

src/components/modules/widgets/wText/wTextStyle.vue

@@ -34,7 +34,7 @@
         <!-- <color-select v-model="innerElement.backgroundColor" label="背景颜色" @finish="(value) => finish('backgroundColor', value)" /> -->
       </div>
       <div class="line-layout style-item">
-        <effect-wrap v-model="innerElement.textEffects" :data="innerElement" :degree="innerElement.degree" @select="testEffect" />
+        <effect-wrap v-model="innerElement.textEffects" :data="innerElement" :degree="innerElement.degree" @select="selectTextEffect" />
       </div>
       <icon-item-select class="style-item" :data="layerIconList" @finish="layerAction" />
       <icon-item-select class="style-item" :data="alignIconList" @finish="alignAction" />
@@ -48,13 +48,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 // 文本组件样式
 const NAME = 'w-text-style'
-// import api from '@/api'
+import { defineComponent, reactive, toRefs, computed, watch, nextTick, onMounted } from 'vue'
-// import _config from '@/config'
+import { useStore } from 'vuex'
-import { mapGetters, mapActions } from 'vuex'
+import { useRoute } from 'vue-router'
-import { styleIconList1, styleIconList2, alignIconList } from '../../../../assets/data/TextIconsData'
+import { styleIconList1, styleIconList2, alignIconList } from '@/assets/data/TextIconsData'
 import layerIconList from '@/assets/data/LayerIconList'
 import numberInput from '../../settings/numberInput.vue'
 import numberSlider from '../../settings/numberSlider.vue'
@@ -66,11 +66,13 @@ import effectWrap from '../../settings/EffectSelect/TextWrap.vue'
 import { useFontStore } from '@/common/methods/fonts'
 import usePageFontsFilter from './pageFontsFilter.ts'
 
-export default {
+export default defineComponent({
   name: NAME,
     components: { numberInput, colorSelect, iconItemSelect, textInputArea, valueSelect, effectWrap, numberSlider },
-  data() {
+    setup() {
-    return {
+      const store = useStore()
+      const route = useRoute()
+      const state = reactive({
         activeNames: [],
         innerElement: {},
         tag: false,
@@ -83,48 +85,74 @@ export default {
         styleIconList1,
         styleIconList2,
         alignIconList,
-    }
+      })
-  },
+      const dActiveElement = computed(() => store.getters.dActiveElement)
-  computed: {
+      const dMoving = computed(() => store.getters.dMoving)
-    ...mapGetters(['dActiveElement', 'dMoving']),
+      // const isDraw = computed(() => route.name === 'Draw')
-    isDraw() {
+
-      return this.$route.name === 'Draw'
+      watch(() => dActiveElement.value, () => {
-    },
+        change()
-  },
+      }, { deep: true })
-  watch: {
+
-    dActiveElement: {
+      watch(() => state.innerElement, () => {
-      handler(newValue, oldValue) {
+        changeValue()
-        this.change()
+      }, { deep: true })
-      },
+
-      deep: true,
+      let timer: any = null
-    },
+
-    innerElement: {
+      onMounted(() => {
-      handler(newValue, oldValue) {
+        change()
-        this.changeValue()
-      },
-      deep: true,
-    },
-  },
-  created() {
-    this.timer = null
-    this.change()
         setTimeout(() => {
-      this.loadFonts()
+          loadFonts()
         }, 100)
-  },
+      })
-  methods: {
+
-    ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'pushHistory']),
+      function change() {
-    testEffect({ key, value, style }) {
+        if (timer) {
-      console.log('选择回调')
+          return
-      const uuid = this.dActiveElement.uuid
-      this.$store.commit('setWidgetStyle', { uuid, key, value })
-      if (style) {
-        this.finish('color', style.color || '')
         }
-    },
+        timer = true
-    loadFonts() {
+        setTimeout(() => {
-      // if (!this.isDraw) {
+          timer = null
-      // useFontStore().init()
+        }, 300)
+        state.tag = true
+        state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
+        changeStyleIconList()
+      }
+
+      function changeValue() {
+        if (state.tag) {
+          state.tag = false
+          return
+        }
+        if (dMoving.value) {
+          return
+        }
+        // TODO 修改数值
+        for (let key in state.innerElement) {
+          if (state.ingoreKeys.indexOf(key) !== -1) {
+            dActiveElement.value[key] = state.innerElement[key]
+          } else if (key !== 'setting' && key !== 'record' && state.innerElement[key] !== dActiveElement.value[key]) {
+            // const pushHistory = !['textEffects', 'transformData', 'fontClass'].includes(key)
+            store.dispatch('updateWidgetData', {
+              uuid: dActiveElement.value.uuid,
+              key,
+              value: state.innerElement[key],
+              pushHistory: false,
+            })
+          }
+        }
+      }
+
+      function selectTextEffect({ key, value, style }: any) {
+        const uuid = dActiveElement.value.uuid
+        store.commit('setWidgetStyle', { uuid, key, value })
+        if (style) {
+          finish('color', style.color || '')
+        }
+      }
+
+      function loadFonts() {
         const localFonts = useFontStore.list
         const fontLists = { 当前页面: [], 中文: [], 英文: [] }
         for (const font of localFonts) {
@@ -133,123 +161,96 @@ export default {
           lang === 'zh' ? fontLists['中文'].unshift(item) : fontLists['英文'].unshift(item)
         }
         fontLists['当前页面'] = usePageFontsFilter()
-      this.fontClassList = fontLists
+        state.fontClassList = fontLists
-      // }
-      // const isDev = process.env.NODE_ENV === 'development'
-      // if (!isDev) {
-      //   const { list } = await api.material.getFonts() // { name: 'SourceHanSansCN-Normal' }
-      //   this.fontClassList = this.fontClassList.concat(list)
-      // }
-    },
-    change() {
-      if (this.timer) {
-        return
       }
-      this.timer = true
+
-      setTimeout(() => {
+      function finish(key, value) {
-        this.timer = null
+        store.dispatch('updateWidgetData', {
-      }, 300)
+          uuid: dActiveElement.value.uuid,
-      this.tag = true
-      this.innerElement = JSON.parse(JSON.stringify(this.dActiveElement))
-      this.changeStyleIconList()
-    },
-    changeValue() {
-      if (this.tag) {
-        this.tag = false
-        return
-      }
-      if (this.dMoving) {
-        return
-      }
-      // TODO 修改数值
-      for (let key in this.innerElement) {
-        if (this.ingoreKeys.indexOf(key) !== -1) {
-          this.dActiveElement[key] = this.innerElement[key]
-        } else if (key !== 'setting' && key !== 'record' && this.innerElement[key] !== this.dActiveElement[key]) {
-          // console.log('???', key)
-          // const pushHistory = !['textEffects', 'transformData', 'fontClass'].includes(key)
-          this.updateWidgetData({
-            uuid: this.dActiveElement.uuid,
           key,
-            value: this.innerElement[key],
+          value,
-            pushHistory: false,
-          })
-        }
-      }
-    },
-    finish(key, value) {
-      this.updateWidgetData({
-        uuid: this.dActiveElement.uuid,
-        key: key,
-        value: value,
           pushHistory: false,
         })
         setTimeout(() => {
-        key === 'fontClass' && (this.fontClassList['当前页面'] = usePageFontsFilter())
+          key === 'fontClass' && (state.fontClassList['当前页面'] = usePageFontsFilter())
         }, 300)
-    },
+      }
-    layerAction(item) {
+
-      this.updateLayerIndex({
+      function layerAction(item) {
-        uuid: this.dActiveElement.uuid,
+        store.dispatch('updateLayerIndex', {
+          uuid: dActiveElement.value.uuid,
           value: item.value,
         })
-    },
+      }
-    async textStyleAction(item) {
+
+      async function textStyleAction(item) {
         let value = item.key === 'textAlign' ? item.value : item.value[item.select ? 1 : 0]
-      this.innerElement[item.key] = value
+        state.innerElement[item.key] = value
         // TODO: 对竖版文字的特殊处理
-      item.key === 'writingMode' && this.relationChange()
+        item.key === 'writingMode' && relationChange()
-      await this.$nextTick()
+        await nextTick()
-      this.$store.commit('updateRect')
+        store.commit('updateRect')
-    },
+      }
-    async alignAction(item) {
+
-      this.updateAlign({
+      async function alignAction(item) {
+        store.dispatch('updateAlign', {
           align: item.value,
-        uuid: this.dActiveElement.uuid,
+          uuid: dActiveElement.value.uuid,
         })
-      await this.$nextTick()
+        await nextTick()
-      this.$store.commit('updateRect')
+        store.commit('updateRect')
-    },
+      }
-    changeStyleIconList() {
+
-      for (let i = 0; i < this.styleIconList1.length; ++i) {
+      function changeStyleIconList() {
-        let key = this.styleIconList1[i].key
+        for (let i = 0; i < state.styleIconList1.length; ++i) {
-        this.styleIconList1[i].select = false
+          let key = state.styleIconList1[i].key
-        const [unchecked, checked] = this.styleIconList1[i].value
+          state.styleIconList1[i].select = false
+          const [unchecked, checked] = state.styleIconList1[i].value
           switch (key) {
             case 'fontWeight':
             case 'textDecoration':
             case 'fontStyle':
-            if (this.innerElement[key] !== unchecked && this.innerElement[key] == checked) {
+              if (state.innerElement[key] !== unchecked && state.innerElement[key] == checked) {
-              this.styleIconList1[i].select = !this.styleIconList1[i].select
+                state.styleIconList1[i].select = !state.styleIconList1[i].select
               }
               break
             case 'writingMode':
-            if (this.innerElement[key] !== unchecked) {
+              if (state.innerElement[key] !== unchecked) {
-              this.styleIconList1[i].select = true
+                state.styleIconList1[i].select = true
               }
               break
           }
         }
-      for (let i = 0; i < this.styleIconList2.length; i++) {
+        for (let i = 0; i < state.styleIconList2.length; i++) {
-        let key = this.styleIconList2[i].key
+          let key = state.styleIconList2[i].key
-        this.styleIconList2[i].select = false
+          state.styleIconList2[i].select = false
-        if (key === 'textAlign' && this.innerElement[key] === this.styleIconList2[i].value) {
+          if (key === 'textAlign' && state.innerElement[key] === state.styleIconList2[i].value) {
-          this.styleIconList2[i].select = true
+            state.styleIconList2[i].select = true
             continue
           }
         }
-    },
+      }
-    relationChange() {
+
+      function relationChange() {
         setTimeout(() => {
-        if (this.dActiveElement.writingMode) {
+          if (dActiveElement.value.writingMode) {
-          const w_record = this.dActiveElement.width
+            const w_record = dActiveElement.value.width
-          this.innerElement.width = this.dActiveElement.height
+            state.innerElement.width = dActiveElement.value.height
-          this.innerElement.height = w_record
+            state.innerElement.height = w_record
           }
         }, 10)
-    },
+      }
-  },
+
-}
+      return {
+        ...toRefs(state),
+        selectTextEffect,
+        textStyleAction,
+        finish,
+        layerAction,
+        alignAction
+      }
+    }
+})
 </script>
 
 <style lang="less" scoped>