refactor: migrate spacing utilities to tailwind v4 syntax
This commit is contained in:
@@ -35,7 +35,7 @@ function handleUpdate(len: number) {
|
||||
<div
|
||||
v-for="item in list"
|
||||
:key="item"
|
||||
class="flex-center h-[220px] w-full bg-muted even:bg-heavy"
|
||||
class="flex-center h-55 w-full bg-muted even:bg-heavy"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,7 @@ function onChange() {
|
||||
<div class="flex w-full gap-1">
|
||||
<Select
|
||||
v-model:value="modelValue[0]"
|
||||
class="w-[80px]"
|
||||
class="w-20"
|
||||
placeholder="类型"
|
||||
allow-clear
|
||||
:class="{ 'valid-success': !!modelValue[0] }"
|
||||
|
||||
@@ -38,7 +38,7 @@ function handleUpdate(len?: number) {
|
||||
<div
|
||||
v-for="item in list"
|
||||
:key="item"
|
||||
class="flex-center h-[220px] w-full bg-muted even:bg-heavy"
|
||||
class="flex-center h-55 w-full bg-muted even:bg-heavy"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
|
||||
@@ -20,7 +20,7 @@ const value = ref();
|
||||
<template>
|
||||
<Modal
|
||||
append-to-main
|
||||
class="w-[600px]"
|
||||
class="w-150"
|
||||
title="基础弹窗示例"
|
||||
title-tooltip="标题提示内容"
|
||||
>
|
||||
|
||||
@@ -191,21 +191,21 @@ async function openPrompt() {
|
||||
<NestedModal />
|
||||
<BlurModal />
|
||||
<Flex wrap="wrap" class="w-full" gap="10">
|
||||
<Card class="w-[300px]" title="基本使用">
|
||||
<Card class="w-75" title="基本使用">
|
||||
<p>一个基础的弹窗示例</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openBaseModal">打开弹窗</Button>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="w-[300px]" title="指定容器+关闭后不销毁">
|
||||
<Card class="w-75" title="指定容器+关闭后不销毁">
|
||||
<p>在内容区域打开弹窗的示例</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openInContentModal">打开弹窗</Button>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="w-[300px]" title="内容高度自适应">
|
||||
<Card class="w-75" title="内容高度自适应">
|
||||
<p>可根据内容并自动调整高度</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openAutoHeightModal">
|
||||
@@ -214,14 +214,14 @@ async function openPrompt() {
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="w-[300px]" title="可拖拽示例">
|
||||
<Card class="w-75" title="可拖拽示例">
|
||||
<p>配置 draggable 可开启拖拽功能</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openDragModal"> 打开弹窗 </Button>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="w-[300px]" title="动态配置示例">
|
||||
<Card class="w-75" title="动态配置示例">
|
||||
<p>通过 setState 动态调整弹窗数据</p>
|
||||
<template #extra>
|
||||
<Button type="link" @click="openDynamicModal">打开弹窗</Button>
|
||||
@@ -233,7 +233,7 @@ async function openPrompt() {
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="w-[300px]" title="内外数据共享示例">
|
||||
<Card class="w-75" title="内外数据共享示例">
|
||||
<p>通过共享 sharedData 来进行数据交互</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openSharedModal">
|
||||
@@ -242,27 +242,27 @@ async function openPrompt() {
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="w-[300px]" title="表单弹窗示例">
|
||||
<Card class="w-75" title="表单弹窗示例">
|
||||
<p>弹窗与表单结合</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openFormModal"> 打开表单弹窗 </Button>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="w-[300px]" title="嵌套弹窗示例">
|
||||
<Card class="w-75" title="嵌套弹窗示例">
|
||||
<p>在已经打开的弹窗中再次打开弹窗</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openNestedModal">打开嵌套弹窗</Button>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="w-[300px]" title="遮罩模糊示例">
|
||||
<Card class="w-75" title="遮罩模糊示例">
|
||||
<p>遮罩层应用类似毛玻璃的模糊效果</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openBlurModal">打开弹窗</Button>
|
||||
</template>
|
||||
</Card>
|
||||
<Card class="w-[300px]" title="轻量提示弹窗">
|
||||
<Card class="w-75" title="轻量提示弹窗">
|
||||
<template #extra>
|
||||
<DocButton path="/components/common-ui/vben-alert" />
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user