yhui-yuanhuan
Version:
A Component Library for Vue 3 based on element-plus
1 lines • 4.08 kB
Source Map (JSON)
{"version":3,"file":"dialog.mjs","sources":["../../../../../../packages/components/dialog/src/dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ElButton, ElDialog, ElIcon } from 'element-plus'\nimport { FullScreen } from '@element-plus/icons-vue'\nimport type { IConfirmParam } from './type'\n\ndefineOptions({\n name: 'YhDialog',\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', p: any)\n (e: 'confirm', p: IConfirmParam<any>)\n}>()\nconst props = withDefaults(\n defineProps<{\n dialogProps?: InstanceType<typeof ElDialog>['$props']\n from?: IConfirmParam<any>['from']\n modelValue: boolean\n showPublish?: boolean\n showFullScreen?: boolean\n title?: string\n }>(),\n {\n title: '',\n from: 'other',\n }\n)\n\nconst isFullscreen = ref(false)\n\nconst isFetching = ref(false)\nconst done = (isClose = true) => {\n isFetching.value = false\n if (isClose) {\n emit('update:modelValue', false)\n }\n}\n\nconst confirm = async (type: IConfirmParam<any>['type']) => {\n isFetching.value = true\n if (type === 'cancel') {\n done()\n }\n emit('confirm', {\n type,\n from: props.from || 'other',\n done,\n })\n}\n</script>\n\n<template>\n <ElDialog\n class=\"yh-dialog\"\n width=\"600\"\n draggable\n :fullscreen=\"isFullscreen\"\n :close-on-click-modal=\"false\"\n :close-on-press-escape=\"false\"\n align-center\n v-bind=\"dialogProps\"\n :model-value=\"modelValue\"\n @update:modal-value=\"emit('update:modelValue', $event)\"\n @close=\"emit('update:modelValue', false)\"\n >\n <template #header>\n <div class=\"dialog-header\">\n <span>{{ title }}</span>\n <ElIcon\n v-if=\"showFullScreen\"\n class=\"fullscreen\"\n @click=\"isFullscreen = !isFullscreen\"\n >\n <FullScreen />\n </ElIcon>\n </div>\n </template>\n <slot />\n <template #footer>\n <div class=\"dialog-footer\">\n <template v-if=\"['edit', 'new'].includes(from) && !showPublish\">\n <ElButton\n type=\"default\"\n :disabled=\"isFetching\"\n @click=\"confirm('cancel')\"\n >取消</ElButton\n >\n <ElButton type=\"primary\" :loading=\"isFetching\" @click=\"confirm('ok')\"\n >确定</ElButton\n >\n </template>\n <template v-else-if=\"['edit', 'new'].includes(from) && showPublish\">\n <ElButton\n type=\"default\"\n :disabled=\"isFetching\"\n @click=\"confirm('cancel')\"\n >取消</ElButton\n >\n <ElButton type=\"primary\" :loading=\"isFetching\" @click=\"confirm('ok')\"\n >保存</ElButton\n >\n <ElButton\n type=\"primary\"\n :loading=\"isFetching\"\n @click=\"confirm('publish')\"\n >发布</ElButton\n >\n </template>\n <template v-else-if=\"from === 'view'\">\n <ElButton\n type=\"default\"\n :disabled=\"isFetching\"\n @click=\"confirm('cancel')\"\n >关闭</ElButton\n >\n </template>\n </div>\n </template>\n </ElDialog>\n</template>\n"],"names":[],"mappings":";;;;;mCAMc,CAAA;AAAA,EACZ,IAAM,EAAA,UAAA;AACR,CAAA,CAAA,CAAA;;;;;;;;;;;;;;AAqBA,IAAM,MAAA,YAAA,GAAe,IAAI,KAAK,CAAA,CAAA;AAE9B,IAAM,MAAA,UAAA,GAAa,IAAI,KAAK,CAAA,CAAA;AAC5B,IAAM,MAAA,IAAA,GAAO,CAAC,OAAA,GAAU,IAAS,KAAA;AAC/B,MAAA,UAAA,CAAW,KAAQ,GAAA,KAAA,CAAA;AACnB,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,IAAA,CAAK,qBAAqB,KAAK,CAAA,CAAA;AAAA,OACjC;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,OAAA,GAAU,OAAO,IAAqC,KAAA;AAC1D,MAAA,UAAA,CAAW,KAAQ,GAAA,IAAA,CAAA;AACnB,MAAA,IAAI,SAAS,QAAU,EAAA;AACrB,QAAK,IAAA,EAAA,CAAA;AAAA,OACP;AACA,MAAA,IAAA,CAAK,SAAW,EAAA;AAAA,QACd,IAAA;AAAA,QACA,IAAA,EAAM,MAAM,IAAQ,IAAA,OAAA;AAAA,QACpB,IAAA;AAAA,OACD,CAAA,CAAA;AAAA,KACH,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}