Merge pull request #83 from JeremyYu-cn/feat-upgrade-vue3

feat: convert wQrcode component to composition API

src/components/business/qrcode/index.vue

@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, watch, nextTick } from 'vue'
-import QRCodeStyling, {DotType, Options } from 'qr-code-styling'
+import QRCodeStyling, { Options } from 'qr-code-styling'
 import { debounce } from 'throttle-debounce'
 import { generateOption } from './method'
 
@@ -20,10 +20,7 @@ export type TQrcodeProps = {
   height?: number
   image?: string
   value?: string
-  dotsOptions: {
+  dotsOptions: Options['dotsOptions']
-    color: string,
-    type: DotType,
-  }
 }
 
 const props = withDefaults(defineProps<TQrcodeProps>(), {

src/components/modules/panel/wrap/ToolsListWrap.vue

@@ -28,9 +28,10 @@
 import { ref, onMounted } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
-import wQrcode from '../../widgets/wQrcode/wQrcode.vue'
+// import wQrcode from '../../widgets/wQrcode/wQrcode.vue'
 import imageCutout from '@/components/business/image-cutout'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { wQrcodeSetting } from '../../widgets/wQrcode/wQrcodeSetting'
 
 const store = useStore()
 const route = useRoute()
@@ -59,7 +60,7 @@ onMounted(() => {
 
 function addQrcode() {
   store.commit('setShowMoveable', false) // 清理掉上一次的选择
-  let setting = JSON.parse(JSON.stringify(wQrcode.setting))
+  let setting = JSON.parse(JSON.stringify(wQrcodeSetting))
   const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - setting.width / 2
   setting.top = pH / 2 - setting.height / 2

src/components/modules/widgets/wQrcode/wQrcode.vue

@@ -7,8 +7,8 @@
 -->
 <template>
   <div
-    :id="params.uuid"
+    :id="`${params.uuid}`"
-    ref="widget"
+    ref="widgetRef"
     :class="['w-qrcode', { 'layer-lock': params.lock }]"
     :style="{
       position: 'absolute',
@@ -19,109 +19,101 @@
       opacity: params.opacity,
     }"
   >
-    <QRCode ref="qrcode" v-bind="qrCodeOptions" :width="width" :height="width" class="target" :image="params.url" :value="params.value" />
+    <QRCode
+      ref="qrcode"
+      v-bind="state.qrCodeOptions"
+      :width="width"
+      :height="width"
+      class="target"
+      :image="params.url"
+      :value="params.value"
+    />
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 // 图片组件
-const NAME = 'w-qrcode'
+// const NAME = 'w-qrcode'
 
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters, mapActions, useStore } from 'vuex'
 import QRCode from '@/components/business/qrcode'
+import { TWQrcodeSetting } from './wQrcodeSetting';
+import { computed, nextTick, onMounted, onUpdated, reactive, ref, watch } from 'vue';
+import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { Options } from 'qr-code-styling';
 
-export default {
+type TProps = {
-  name: NAME,
+  params: TWQrcodeSetting & {
-  components: { QRCode },
+    rotate?: number
-  setting: {
+    lock?: boolean
-    name: '二维码',
+  }
-    type: NAME,
+  parent: {
-    uuid: -1,
+    top: number
-    width: 300,
+    left: number
-    height: 300,
+  }
-    left: 0,
-    top: 0,
-    zoom: 1,
-    transform: '',
-    radius: 0,
-    opacity: 1,
-    parent: '-1',
-    url: '',
-    dotType: 'classy',
-    dotColorType: 'single',
-    dotRotation: 270,
-    dotColor: '#35495E',
-    dotColor2: '#35495E',
-    value: 'https://xp.palxp.cn',
-    setting: [],
-    record: {
-      width: 0,
-      height: 0,
-      minWidth: 10,
-      minHeight: 10,
-      dir: 'all',
-    },
-  },
-  props: ['params', 'parent'],
-  data() {
-    return {
-      qrCodeOptions: {},
 }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dZoom']),
-    width() {
-      return Number(this.params.width)
-    },
-  },
-  watch: {
-    params: {
-      async handler(nval) {
-        this.changeValues()
-      },
-      immediate: true,
-      deep: true,
-    },
-  },
-  updated() {
-    this.updateRecord()
-    this.$store.commit('updateRect')
-  },
 
-  async mounted() {
+type TState = {
-    this.updateRecord()
+  qrCodeOptions: Options
-    await this.$nextTick()
+}
-    this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
+
+const store = useStore()
+const props = defineProps<TProps>()
+const state = reactive<TState>({
+  qrCodeOptions: {}
+})
+const { dActiveElement, dZoom } = useSetupMapGetters(['dActiveElement', 'dZoom'])
+const width = computed(() => Number(props.params.width))
+const widgetRef = ref<HTMLElement | null>(null)
+
+watch(
+  () => props.params,
+  () => {
+    changeValues()
   },
-  methods: {
+  { immediate: true, deep: true, }
-    ...mapActions(['updateWidgetData']),
+)
-    updateRecord() {
+
-      if (this.dActiveElement.uuid === this.params.uuid) {
+onUpdated(() => {
-        let record = this.dActiveElement.record
+  updateRecord()
-        record.width = this.$refs.widget.offsetWidth
+  store.commit('updateRect')
-        record.height = this.$refs.widget.offsetHeight
+})
+
+onMounted(async () => {
+  updateRecord()
+  await nextTick()
+  if (widgetRef.value){
+    props.params.rotate && (widgetRef.value.style.transform += `rotate(${props.params.rotate})`)
+  }
+})
+// ...mapActions(['updateWidgetData']),
+function updateRecord() {
+  if (dActiveElement.value.uuid === props.params.uuid) {
+    let record = dActiveElement.value.record
+    if (!widgetRef.value) return
+    record.width = widgetRef.value.offsetWidth
+    record.height = widgetRef.value.offsetHeight
   }
   // this.updateZoom()
-    },
+}
-    changeValues() {
+
-      this.qrCodeOptions = {
+function changeValues() {
+  state.qrCodeOptions = {
     qrOptions: { typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' },
     // dotsOptions: { color: '#999999' },
     dotsOptions: {
-          type: this.params.dotType,
+      type: props.params.dotType,
-          color: this.params.dotColor,
+      color: props.params.dotColor,
       gradient: {
         type: 'linear',
-            rotation: this.params.dotRotation,
+        rotation: props.params.dotRotation,
         colorStops: [
-              { offset: 0, color: this.params.dotColor },
+          { offset: 0, color: props.params.dotColor },
-              { offset: 1, color: this.params.dotColorType === 'single' ? this.params.dotColor : this.params.dotColor2 },
+          { offset: 1, color: props.params.dotColorType === 'single' ? props.params.dotColor : props.params.dotColor2 },
         ],
       },
     },
   }
-    },
-  },
 }
 </script>
 

src/components/modules/widgets/wQrcode/wQrcodeSetting.ts

@@ -0,0 +1,61 @@
+import { DotType } from "qr-code-styling"
+
+export type TWQrcodeSetting = {
+  name: string
+  type: string
+  uuid: string | number
+  width: number
+  height: number
+  left: number
+  top: number
+  zoom: number
+  transform: string
+  radius: number
+  opacity: number
+  parent: string
+  url: string
+  dotType: DotType
+  dotColorType: string
+  dotRotation: number
+  dotColor: string
+  dotColor2: string
+  value: string
+  setting: Record<string, any>[]
+  record: {
+    width: number
+    height: number
+    minWidth: number
+    minHeight: number
+    dir: string
+  }
+}
+
+export const wQrcodeSetting: TWQrcodeSetting = {
+  name: '二维码',
+  type: 'w-qrcode',
+  uuid: -1,
+  width: 300,
+  height: 300,
+  left: 0,
+  top: 0,
+  zoom: 1,
+  transform: '',
+  radius: 0,
+  opacity: 1,
+  parent: '-1',
+  url: '',
+  dotType: 'classy',
+  dotColorType: 'single',
+  dotRotation: 270,
+  dotColor: '#35495E',
+  dotColor2: '#35495E',
+  value: 'https://xp.palxp.cn',
+  setting: [],
+  record: {
+    width: 0,
+    height: 0,
+    minWidth: 10,
+    minHeight: 10,
+    dir: 'all',
+  },
+}

src/components/modules/widgets/wSvg/wSvg.vue

@@ -1,3 +1,6 @@
+<!--
+  TODO: 重构
+-->
 <template>
   <div
     :id="params.uuid"