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

Fix: the default value of numberSlider component

src/components/modules/settings/numberSlider.vue

@@ -49,7 +49,7 @@ const props = withDefaults(defineProps<TProps>(), {
 })
 const emit = defineEmits<TEmits>()
 
-const innerValue = ref<number>(1)
+const innerValue = ref<number>(props.minValue)
 
 watch(
   () => innerValue.value,

src/components/modules/widgets/wGroup/wGroupStyle.vue

@@ -7,19 +7,19 @@
 -->
 <template>
   <div id="w-group-style">
-    <el-collapse v-model="activeNames">
+    <el-collapse v-model="state.activeNames">
       <el-collapse-item title="位置尺寸" name="1">
         <div class="line-layout">
-          <number-input v-model="innerElement.left" label="X" @finish="(value) => finish('left', value)" />
+          <number-input v-model="state.innerElement.left" label="X" @finish="(value) => finish('left', value)" />
-          <number-input v-model="innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
+          <number-input v-model="state.innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
-          <number-input v-model="innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
+          <number-input v-model="state.innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
-          <number-input v-model="innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
+          <number-input v-model="state.innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
         </div>
       </el-collapse-item>
       <el-collapse-item title="样式设置" name="2">
-        <el-button plain type="primary" class="block-btn" @click="ungroup(innerElement.uuid)">取消组合</el-button>
+        <el-button plain type="primary" class="block-btn" @click="store.dispatch('ungroup', state.innerElement.uuid)">取消组合</el-button>
         <!-- <div class="ungroup style-item" @click="ungroup(innerElement.uuid)">取消组合</div> -->
-        <number-slider v-model="innerElement.opacity" class="style-item" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
+        <number-slider v-model="state.innerElement.opacity" class="style-item" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
         <br />
         <icon-item-select class="style-item" label="" :data="layerIconList" @finish="layerAction" />
         <icon-item-select label="" :data="alignIconList" @finish="alignAction" />
@@ -28,98 +28,137 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // 组合组件样式
-const NAME = 'w-group-style'
+// const NAME = 'w-group-style'
-import { mapGetters, mapActions } from 'vuex'
+import { reactive, watch } from 'vue'
+import { mapGetters, mapActions, useStore } from 'vuex'
 import numberInput from '../../settings/numberInput.vue'
-import iconItemSelect from '../../settings/iconItemSelect.vue'
+import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
 import numberSlider from '../../settings/numberSlider.vue'
 import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
+import { wGroupSetting } from './groupSetting'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 
-export default {
+type TState = {
-  name: NAME,
+  activeNames: string[],
-  components: { numberInput, iconItemSelect, numberSlider },
+  // defaultValue: 0,
-  data() {
+  innerElement: typeof wGroupSetting,
-    return {
+  tag: boolean,
-      activeNames: ['1', '2', '3', '4'],
+  ingoreKeys: string[],
-      // defaultValue: 0,
+  layerIconList: TIconItemSelectData[],
-      innerElement: {},
+  alignIconList: TIconItemSelectData[],
-      tag: false,
+}
-      ingoreKeys: ['name', 'width', 'height'],
+
-      layerIconList,
+const state = reactive<TState>({
-      alignIconList,
+  activeNames: ['1', '2', '3', '4'],
-    }
+  // defaultValue: 0,
+  innerElement: JSON.parse(JSON.stringify(wGroupSetting)),
+  tag: false,
+  ingoreKeys: ['name', 'width', 'height'],
+  layerIconList,
+  alignIconList,
+})
+const store = useStore()
+const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+
+let dMoving = false
+
+// computed: {
+//   ...mapGetters(['dActiveElement']),
+// },
+
+watch(
+  () => dActiveElement.value,
+  (newValue, oldValue) => {
+    change()
   },
-  computed: {
+  { deep: true }
-    ...mapGetters(['dActiveElement']),
+)
+
+watch(
+  () => state.innerElement,
+  (newValue, oldValue) => {
+    changeValue()
   },
-  watch: {
+  { deep: true }
-    dActiveElement: {
+)
-      handler(newValue, oldValue) {
+
-        this.change()
+function created() {
-      },
+  change()
-      deep: true,
+}
-    },
+
-    innerElement: {
+created()
-      handler(newValue, oldValue) {
+
-        this.changeValue()
+// ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'ungroup']),
-      },
+    
-      deep: true,
+function change() {
-    },
+  state.tag = true
-  },
+  state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
-  created() {
+}
-    this.change()
+
-  },
+function changeValue() {
-  methods: {
+  if (state.tag) {
-    ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'ungroup']),
+    state.tag = false
-    change() {
+    return
-      this.tag = true
+  }
-      this.innerElement = JSON.parse(JSON.stringify(this.dActiveElement))
+  if (dMoving) {
-    },
+    return
-    changeValue() {
+  }
-      if (this.tag) {
+  for (let key in state.innerElement) {
-        this.tag = false
+    const itemKey = key as keyof typeof wGroupSetting
-        return
+    if (state.ingoreKeys.indexOf(itemKey) !== -1) {
-      }
+      dActiveElement.value[itemKey] = state.innerElement[itemKey]
-      if (this.dMoving) {
+    } else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
-        return
+      store.dispatch("updateWidgetData", {
-      }
+        uuid: dActiveElement.value.uuid,
-      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]) {
-          this.updateWidgetData({
-            uuid: this.dActiveElement.uuid,
-            key: key,
-            value: this.innerElement[key],
-          })
-        }
-      }
-    },
-    finish(key, value) {
-      this.updateWidgetData({
-        uuid: this.dActiveElement.uuid,
         key: key,
-        value: value,
+        value: state.innerElement[itemKey],
-        pushHistory: true,
       })
-    },
+      // this.updateWidgetData({
-    layerAction(item) {
+      //   uuid: this.dActiveElement.uuid,
-      this.updateLayerIndex({
+      //   key: key,
-        uuid: this.dActiveElement.uuid,
+      //   value: this.innerElement[key],
-        value: item.value,
+      // })
-        isGroup: true,
+    }
-      })
+  }
-    },
+}
-    alignAction(item) {
+
-      this.updateAlign({
+
-        align: item.value,
+function finish(key: string, value: string | number | number[]) {
-        uuid: this.dActiveElement.uuid,
+  store.dispatch("updateWidgetData", {
-      })
+    uuid: dActiveElement.value.uuid,
-    },
+    key: key,
-  },
+    value: value,
+    pushHistory: true,
+  })
+  // this.updateWidgetData({
+  //   uuid: this.dActiveElement.uuid,
+  //   key: key,
+  //   value: value,
+  //   pushHistory: true,
+  // })
+}
+
+function layerAction(item: TIconItemSelectData) {
+  store.dispatch("updateLayerIndex", {
+    uuid: dActiveElement.value.uuid,
+    value: item.value,
+    isGroup: true,
+  })
+  // this.updateLayerIndex({
+  //   uuid: this.dActiveElement.uuid,
+  //   value: item.value,
+  //   isGroup: true,
+  // })
+}
+
+function alignAction(item: TIconItemSelectData) {
+  store.dispatch("updateAlign", {
+    align: item.value,
+    uuid: dActiveElement.value.uuid,
+  })
 }
 </script>