docs: docs modal z-index fixed, update alert docs (#5930)
This commit is contained in:
parent
4a2c7b313f
commit
2971ccc0b7
@ -1,7 +1,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { h } from 'vue';
|
import { h } from 'vue';
|
||||||
|
|
||||||
import { Page } from '@vben/common-ui';
|
import { Page, useVbenDrawer } from '@vben/common-ui';
|
||||||
|
|
||||||
import { ElButton, ElCard, ElCheckbox, ElMessage } from 'element-plus';
|
import { ElButton, ElCard, ElCheckbox, ElMessage } from 'element-plus';
|
||||||
|
|
||||||
@ -17,11 +17,16 @@ const [Form, formApi] = useVbenForm({
|
|||||||
},
|
},
|
||||||
layout: 'horizontal',
|
layout: 'horizontal',
|
||||||
// 大屏一行显示3个,中屏一行显示2个,小屏一行显示1个
|
// 大屏一行显示3个,中屏一行显示2个,小屏一行显示1个
|
||||||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
// wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
||||||
handleSubmit: (values) => {
|
handleSubmit: (values) => {
|
||||||
ElMessage.success(`表单数据:${JSON.stringify(values)}`);
|
ElMessage.success(`表单数据:${JSON.stringify(values)}`);
|
||||||
},
|
},
|
||||||
schema: [
|
schema: [
|
||||||
|
{
|
||||||
|
component: 'IconPicker',
|
||||||
|
fieldName: 'icon',
|
||||||
|
label: 'IconPicker',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
// 组件需要在 #/adapter.ts内注册,并加上类型
|
// 组件需要在 #/adapter.ts内注册,并加上类型
|
||||||
component: 'ApiSelect',
|
component: 'ApiSelect',
|
||||||
@ -149,6 +154,8 @@ const [Form, formApi] = useVbenForm({
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const [Drawer, drawerApi] = useVbenDrawer();
|
||||||
function setFormValues() {
|
function setFormValues() {
|
||||||
formApi.setValues({
|
formApi.setValues({
|
||||||
string: 'string',
|
string: 'string',
|
||||||
@ -168,6 +175,9 @@ function setFormValues() {
|
|||||||
description="我们重新包装了CheckboxGroup、RadioGroup、Select,可以通过options属性传入选项属性数组以自动生成选项"
|
description="我们重新包装了CheckboxGroup、RadioGroup、Select,可以通过options属性传入选项属性数组以自动生成选项"
|
||||||
title="表单演示"
|
title="表单演示"
|
||||||
>
|
>
|
||||||
|
<Drawer class="w-[600px]" title="基础表单示例">
|
||||||
|
<Form />
|
||||||
|
</Drawer>
|
||||||
<ElCard>
|
<ElCard>
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
@ -175,7 +185,7 @@ function setFormValues() {
|
|||||||
<ElButton type="primary" @click="setFormValues">设置表单值</ElButton>
|
<ElButton type="primary" @click="setFormValues">设置表单值</ElButton>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<Form />
|
<ElButton type="primary" @click="drawerApi.open"> 打开抽屉 </ElButton>
|
||||||
</ElCard>
|
</ElCard>
|
||||||
</Page>
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
|
@ -104,6 +104,11 @@
|
|||||||
--vp-custom-block-tip-text: var(--vp-c-text-1);
|
--vp-custom-block-tip-text: var(--vp-c-text-1);
|
||||||
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
|
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
|
||||||
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
|
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* modal zIndex
|
||||||
|
*/
|
||||||
|
--popup-z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
|
@ -3,7 +3,7 @@ import { h } from 'vue';
|
|||||||
|
|
||||||
import { alert, prompt, VbenButton } from '@vben/common-ui';
|
import { alert, prompt, VbenButton } from '@vben/common-ui';
|
||||||
|
|
||||||
import { Input, RadioGroup } from 'ant-design-vue';
|
import { Input, RadioGroup, Select } from 'ant-design-vue';
|
||||||
import { BadgeJapaneseYen } from 'lucide-vue-next';
|
import { BadgeJapaneseYen } from 'lucide-vue-next';
|
||||||
|
|
||||||
function showPrompt() {
|
function showPrompt() {
|
||||||
@ -18,7 +18,7 @@ function showPrompt() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function showSelectPrompt() {
|
function showSlotsPrompt() {
|
||||||
prompt({
|
prompt({
|
||||||
component: Input,
|
component: Input,
|
||||||
componentProps: {
|
componentProps: {
|
||||||
@ -37,6 +37,29 @@ function showSelectPrompt() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function showSelectPrompt() {
|
||||||
|
prompt({
|
||||||
|
component: Select,
|
||||||
|
componentProps: {
|
||||||
|
options: [
|
||||||
|
{ label: 'Option A', value: 'Option A' },
|
||||||
|
{ label: 'Option B', value: 'Option B' },
|
||||||
|
{ label: 'Option C', value: 'Option C' },
|
||||||
|
],
|
||||||
|
placeholder: '请选择',
|
||||||
|
// 弹窗会设置body的pointer-events为none,这回影响下拉框的点击事件
|
||||||
|
popupClassName: 'pointer-events-auto',
|
||||||
|
},
|
||||||
|
content: '此弹窗演示了如何使用component传递自定义组件',
|
||||||
|
icon: 'question',
|
||||||
|
modelPropName: 'value',
|
||||||
|
}).then((val) => {
|
||||||
|
if (val) {
|
||||||
|
alert(`你选择了${val}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function sleep(ms: number) {
|
function sleep(ms: number) {
|
||||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||||
}
|
}
|
||||||
@ -44,7 +67,6 @@ function sleep(ms: number) {
|
|||||||
function showAsyncPrompt() {
|
function showAsyncPrompt() {
|
||||||
prompt({
|
prompt({
|
||||||
async beforeClose(scope) {
|
async beforeClose(scope) {
|
||||||
console.log(scope);
|
|
||||||
if (scope.isConfirm) {
|
if (scope.isConfirm) {
|
||||||
if (scope.value) {
|
if (scope.value) {
|
||||||
// 模拟异步操作,如果不成功,可以返回false
|
// 模拟异步操作,如果不成功,可以返回false
|
||||||
@ -75,6 +97,7 @@ function showAsyncPrompt() {
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex gap-4">
|
<div class="flex gap-4">
|
||||||
<VbenButton @click="showPrompt">Prompt</VbenButton>
|
<VbenButton @click="showPrompt">Prompt</VbenButton>
|
||||||
|
<VbenButton @click="showSlotsPrompt"> Prompt With slots </VbenButton>
|
||||||
<VbenButton @click="showSelectPrompt">Prompt With Select</VbenButton>
|
<VbenButton @click="showSelectPrompt">Prompt With Select</VbenButton>
|
||||||
<VbenButton @click="showAsyncPrompt">Prompt With Async</VbenButton>
|
<VbenButton @click="showAsyncPrompt">Prompt With Async</VbenButton>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user