feat(尺寸): 封装通用弹框

ikuaitu · May 11, 2024 · caf9378 · caf9378
1 parent de98428
commit caf9378
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 139 deletions.
diff --git a/src/components/common/modalSzie.vue b/src/components/common/modalSzie.vue
@@ -0,0 +1,100 @@
+<!--
+ * @Author: 秦少卫
+ * @Date: 2022-09-03 19:16:55
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-05-11 19:09:45
+ * @Description: 公共尺寸
+-->
+
+<template>
+  <Modal v-model="modal" :title="props.title" footer-hide>
+    <h3>
+      {{ $t('importFiles.createDesign.customSize') }}
+    </h3>
+    <Form ref="formInline" inline :label-width="40">
+      <FormItem label="宽度">
+        <InputNumber v-model="width" :min="1" placeholder="请输入"></InputNumber>
+      </FormItem>
+      <FormItem label="高度">
+        <InputNumber v-model="height" :min="1" placeholder="请输入"></InputNumber>
+      </FormItem>
+      <FormItem :label-width="0">
+        <Button type="primary" @click="customSizeCreate">
+          {{ $t('importFiles.createDesign.create') }}
+        </Button>
+      </FormItem>
+    </Form>
+    <Divider class="divider" />
+    <h3>
+      {{ $t('importFiles.createDesign.systemSize') }}
+    </h3>
+    <CellGroup @on-click="setSize">
+      <Cell
+        :title="item.name"
+        :label="`${item.width}x${item.height}${item.unit}`"
+        :arrow="false"
+        :key="item.name"
+        :name="`${item.width}x${item.height}x${item.unit}`"
+        v-for="item in sizeList"
+      >
+        <template #extra>
+          <Icon type="md-add" />
+        </template>
+      </Cell>
+    </CellGroup>
+  </Modal>
+</template>
+
+<script name="ImportJson" setup>
+import useSelect from '@/hooks/select';
+import { Message } from 'view-ui-plus';
+const { canvasEditor } = useSelect();
+const emit = defineEmits(['set']);
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+});
+
+const modal = ref(false);
+const width = ref(null);
+const height = ref(null);
+const sizeList = ref([]);
+const showSetSize = (w, h) => {
+  width.value = w || null;
+  height.value = h || null;
+  // 获取素材
+  canvasEditor.getSizeList().then((res) => {
+    sizeList.value = res;
+  });
+  modal.value = true;
+};
+const setSize = (itemString) => {
+  const [w, h] = itemString.split('x');
+  width.value = Number(w);
+  height.value = Number(h);
+};
+
+const customSizeCreate = async () => {
+  if (width.value && height.value) {
+    emit('set', width.value, height.value);
+    modal.value = false;
+  } else {
+    Message.warning('请检查尺寸');
+  }
+};
+
+defineExpose({
+  showSetSize,
+});
+</script>
+<style scoped lang="less">
+h3 {
+  margin-bottom: 10px;
+}
+.divider {
+  margin-top: 0;
+}
+</style>
diff --git a/src/components/importJSON.vue b/src/components/importJSON.vue
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2022-09-03 19:16:55
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-11 13:34:51
+ * @LastEditTime: 2024-05-11 19:15:19
  * @Description: 导入JSON文件
 -->
 
@@ -24,51 +24,24 @@
     </Dropdown>
 
     <!-- 创建设计 -->
-    <Modal v-model="modal" :title="$t('importFiles.createDesign.title')" footer-hide>
-      <h3>
-        {{ $t('importFiles.createDesign.customSize') }}
-      </h3>
-      <Form ref="formInline" inline :label-width="40">
-        <FormItem label="宽度">
-          <InputNumber v-model="width" :min="1" placeholder="请输入"></InputNumber>
-        </FormItem>
-        <FormItem label="高度">
-          <InputNumber v-model="height" :min="1" placeholder="请输入"></InputNumber>
-        </FormItem>
-        <FormItem :label-width="0">
-          <Button type="primary" @click="customSizeCreate">
-            {{ $t('importFiles.createDesign.create') }}
-          </Button>
-        </FormItem>
-      </Form>
-      <Divider class="divider" />
-      <h3>
-        {{ $t('importFiles.createDesign.systemSize') }}
-      </h3>
-      <CellGroup @on-click="setSize">
-        <Cell
-          :title="item.name"
-          :label="`${item.width}x${item.height}${item.unit}`"
-          :arrow="false"
-          :key="item.name"
-          :name="`${item.width}x${item.height}x${item.unit}`"
-          v-for="item in sizeList"
-        >
-          <template #extra>
-            <Icon type="md-add" />
-          </template>
-        </Cell>
-      </CellGroup>
-    </Modal>
+    <!-- 修改尺寸 -->
+    <modalSzie
+      :title="$t('importFiles.createDesign.title')"
+      ref="modalSizeRef"
+      @set="customSizeCreate"
+    ></modalSzie>
   </div>
 </template>
 
 <script name="ImportJson" setup>
 import useSelect from '@/hooks/select';
 import useMaterial from '@/hooks/useMaterial';
 import { Message } from 'view-ui-plus';
+import modalSzie from '@/components/common/modalSzie';
+
 const { canvasEditor } = useSelect();
 const { createTmpl, routerToId } = useMaterial();
+const modalSizeRef = ref(null);
 
 const clickHandler = (type) => {
   const handleMap = {
@@ -80,34 +53,14 @@ const clickHandler = (type) => {
   handleMap[type]?.();
 };
 
-const modal = ref(false);
-const width = ref(null);
-const height = ref(null);
-const sizeList = ref([]);
 const createDesign = () => {
-  width.value = null;
-  height.value = null;
-  // 获取素材
-  canvasEditor.getSizeList().then((res) => {
-    sizeList.value = res;
-  });
-  modal.value = true;
-};
-const setSize = (itemString) => {
-  const [w, h] = itemString.split('x');
-  width.value = Number(w);
-  height.value = Number(h);
+  modalSizeRef.value.showSetSize();
 };
 
-const customSizeCreate = async () => {
-  if (width.value && height.value) {
-    const res = await createTmpl(width.value, height.value);
-    routerToId(res.data.data.id);
-    modal.value = false;
-    Message.success('创建成功');
-  } else {
-    Message.warning('请检查尺寸');
-  }
+const customSizeCreate = async (w, h) => {
+  const res = await createTmpl(w, h);
+  routerToId(res.data.data.id);
+  Message.success('创建成功');
 };
 </script>
 <style scoped lang="less">

diff --git a/src/components/setSize.vue b/src/components/setSize.vue
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2022-09-03 19:16:55
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-04-24 12:16:05
+ * @LastEditTime: 2024-05-11 19:11:46
  * @Description: 尺寸设置
 -->
 
@@ -17,86 +17,28 @@
         <InputNumber disabled v-model="height" @on-change="setSize"></InputNumber>
       </FormItem>
     </Form>
-    <Button type="primary" @click="() => (showModal = true)">调整尺寸</Button>
+    <Button type="primary" @click="showSetSize">调整尺寸</Button>
 
-    <Modal
-      v-model="showModal"
-      :title="$t('setSizeTip')"
-      @on-ok="handleConfirm"
-      @on-cancel="handleClose"
-    >
-      <p>{{ $t('default_size') }}</p>
-      <ButtonGroup vertical style="margin: 10px 0">
-        <Button
-          v-for="(item, i) in presetSize"
-          :key="`${i}presetSize`"
-          size="small"
-          style="text-align: left"
-          @click="setSizeBy(item.width, item.height)"
-        >
-          {{ item.label }}:{{ item.width }}x{{ item.height }}
-        </Button>
-      </ButtonGroup>
-
-      <Form :label-width="40" class="form-wrap" style="justify-content: flex-start">
-        <FormItem :label="$t('width')" prop="name" style="margin-right: 10px">
-          <InputNumber :min="1" :max="99999999" v-model="modalData.width"></InputNumber>
-        </FormItem>
-        <FormItem :label="$t('height')" prop="name">
-          <InputNumber :min="1" :max="99999999" v-model="modalData.height"></InputNumber>
-        </FormItem>
-      </Form>
-    </Modal>
+    <!-- 修改尺寸 -->
+    <modalSzie :title="$t('setSizeTip')" ref="modalSizeRef" @set="handleConfirm"></modalSzie>
   </div>
 </template>
 
 <script setup name="CanvasSize">
-import { Modal } from 'view-ui-plus';
 import useSelect from '@/hooks/select';
-import { useI18n } from 'vue-i18n';
+import modalSzie from '@/components/common/modalSzie';
 
 const { mixinState, canvasEditor } = useSelect();
-const { t } = useI18n();
 
 const DefaultSize = {
   width: 900,
   height: 1200,
 };
 
-const showModal = ref(false);
-const modalData = reactive({
-  width: DefaultSize.width,
-  height: DefaultSize.height,
-});
+const modalSizeRef = ref(null);
+
 let width = ref(DefaultSize.width);
 let height = ref(DefaultSize.height);
-let presetSize = reactive([
-  {
-    label: t('red_book_vertical'),
-    width: 900,
-    height: 1200,
-  },
-  {
-    label: t('red_book_horizontal'),
-    width: 1200,
-    height: 900,
-  },
-  {
-    label: t('phone_wallpaper'),
-    width: 1080,
-    height: 1920,
-  },
-  {
-    label: 'kindle',
-    width: 1200,
-    height: 860,
-  },
-  {
-    label: 'kindle-resize',
-    width: 860,
-    height: 1200,
-  },
-]);
 
 onMounted(() => {
   canvasEditor.setSize(width.value, height.value);
@@ -106,23 +48,17 @@ onMounted(() => {
   });
 });
 
-const setSizeBy = (w, h) => {
-  modalData.width = w;
-  modalData.height = h;
-};
 const setSize = () => {
   canvasEditor.setSize(width.value, height.value);
 };
 
-const handleClose = () => {
-  showModal.value = false;
+const showSetSize = () => {
+  modalSizeRef.value.showSetSize(width.value, height.value);
 };
-
-const handleConfirm = () => {
-  width.value = modalData.width;
-  height.value = modalData.height;
+const handleConfirm = (w, h) => {
+  width.value = w;
+  height.value = h;
   setSize();
-  handleClose();
 };
 </script>
 

diff --git a/src/language/zh.json b/src/language/zh.json
@@ -47,7 +47,7 @@
       "systemSize": "系统推荐尺寸",
       "width": "宽度",
       "height": "高度",
-      "create": "创建"
+      "create": "确定"
     },
     "importFiles": "导入文件"
   },