admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: ✏️ 添加 MessageBox 自定义按钮样式的文档

Browse Source
This commit is contained in:
不如摸鱼去 2024-12-06 00:09:58 +08:00
parent 80682ba933
commit 46b1c394a0
1 changed files with 39 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/pages/messageBox/Index.vue
View File

@ -1,41 +1,43 @@
<template> <template>
<page-wraper> <view class="page-message-box">
<wd-message-box></wd-message-box> <page-wraper>
<wd-message-box selector="wd-message-box-slot"> <wd-message-box></wd-message-box>
<wd-rate custom-class="custom-rate-class" v-model="rate" /> <wd-message-box selector="wd-message-box-slot">
</wd-message-box> <wd-rate v-model="rate" />
<demo-block title="alert"> </wd-message-box>
<wd-button @click="alert">alert</wd-button> <demo-block title="alert">
</demo-block> <wd-button @click="alert">alert</wd-button>
</demo-block>
<demo-block title="显示标题"> <demo-block title="显示标题">
<wd-button @click="alertWithTitle">alert</wd-button> <wd-button @click="alertWithTitle">alert</wd-button>
</demo-block> </demo-block>
<demo-block title="confirm"> <demo-block title="confirm">
<wd-button @click="confirm">confirm</wd-button> <wd-button @click="confirm">confirm</wd-button>
</demo-block> </demo-block>
<demo-block title="prompt"> <demo-block title="prompt">
<wd-button @click="prompt">prompt</wd-button> <wd-button @click="prompt">prompt</wd-button>
</demo-block> </demo-block>
<demo-block title="当文案过长时，弹框的高度不再增加，而是将文案内容设置成滚动"> <demo-block title="当文案过长时，弹框的高度不再增加，而是将文案内容设置成滚动">
<wd-button @click="alertWithLongChar">alert</wd-button> <wd-button @click="alertWithLongChar">alert</wd-button>
</demo-block> </demo-block>
<demo-block title="使用wd-message-box组件，通过slot插入其他组件内容"> <demo-block title="使用wd-message-box组件，通过slot插入其他组件内容">
<wd-button @click="withSlot">custom</wd-button> <wd-button @click="withSlot">custom</wd-button>
</demo-block> </demo-block>
<demo-block title="使用beforeConfirm钩子，在弹框确认前，可以进行一些操作"> <demo-block title="使用beforeConfirm钩子，在弹框确认前，可以进行一些操作">
<wd-button @click="beforeConfirm">beforeConfirm</wd-button> <wd-button @click="beforeConfirm">beforeConfirm</wd-button>
</demo-block> </demo-block>
<demo-block title="通过button-props自定义按钮"> <demo-block title="通过button-props自定义按钮">
<wd-button @click="withButtonProps">withButtonProps</wd-button> <wd-button @click="withButtonProps">withButtonProps</wd-button>
</demo-block> </demo-block>
</page-wraper> </page-wraper>
</view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useMessage, useToast } from '@/uni_modules/wot-design-uni' import { useMessage, useToast } from '@/uni_modules/wot-design-uni'
@ -113,10 +115,12 @@ function withButtonProps() {
msg: '自定义按钮样式', msg: '自定义按钮样式',
title: '提示', title: '提示',
cancelButtonProps: { cancelButtonProps: {
round: false,
type: 'error', type: 'error',
customClass: 'custom-shadow' customClass: 'custom-shadow'
}, },
confirmButtonProps: { confirmButtonProps: {
round: false,
type: 'success', type: 'success',
customClass: 'custom-shadow' customClass: 'custom-shadow'
} }
@ -141,13 +145,11 @@ function withSlot() {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.custom-rate-class) { .page-message-box {
display: block; :deep() {
height: 22px; .custom-shadow {
} box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
:deep() { }
.custom-shadow {
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
} }
} }
</style> </style>