github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

perf: refine dialog component 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/588/head
Ryan Wang 2022-07-11 16:27:46 +08:00
parent 352f7a3acc
commit ebc9756a8d
1 changed files with 10 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/components/src/components/dialog/Dialog.vue
View File

@ -1,6 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { VModal } from "@/components/modal"; import { VModal } from "@/components/modal";
import { VSpace } from "@/components/space";
import { VButton } from "@/components/button"; import { VButton } from "@/components/button";
import { import {
IconCheckboxCircle, IconCheckboxCircle,
@ -94,35 +93,30 @@ const handleClose = () => {
<template> <template>
<VModal :visible="visible" :width="450" @close="handleCancel()"> <VModal :visible="visible" :width="450" @close="handleCancel()">
<div class="flex justify-between items-start py-2 mb-2"> <div class="flex justify-between items-start py-2 mb-2">
<div> <div class="flex flex-row items-center gap-3">
<div <component
:class="`ring-${icon.color}-100`" :is="icon.icon"
class="inline-flex rounded-full bg-teal-50 p-1.5 ring-4" :class="`text-${icon.color}-500`"
> class="w-6 h-6"
<component ></component>
:is="icon.icon" <div class="text-base text-gray-900 font-bold">{{ title }}</div>
:class="`text-${icon.color}-500`"
class="w-5 h-5"
></component>
</div>
</div> </div>
<div> <div>
<IconClose class="cursor-pointer" @click="handleCancel" /> <IconClose class="cursor-pointer" @click="handleCancel" />
</div> </div>
</div> </div>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="flex-1 flex flex-col items-stretch gap-2"> <div class="flex-1 flex items-stretch">
<div class="text-base text-gray-900 font-bold">{{ title }}</div>
<div class="text-sm text-gray-700">{{ description }}</div> <div class="text-sm text-gray-700">{{ description }}</div>
</div> </div>
</div> </div>
<template #footer> <template #footer>
<VSpace> <div class="flex flex-col sm:flex-row gap-[10px]">
<VButton :loading="loading" type="secondary" @click="handleConfirm"> <VButton :loading="loading" type="secondary" @click="handleConfirm">
{{ confirmText }} {{ confirmText }}
</VButton> </VButton>
<VButton @click="handleCancel">{{ cancelText }}</VButton> <VButton @click="handleCancel">{{ cancelText }}</VButton>
</VSpace> </div>
</template> </template>
</VModal> </VModal>
</template> </template>