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

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

@ -1,8 +1,9 @@
<template> <template>
<view class="page-message-box">
<page-wraper> <page-wraper>
<wd-message-box></wd-message-box> <wd-message-box></wd-message-box>
<wd-message-box selector="wd-message-box-slot"> <wd-message-box selector="wd-message-box-slot">
<wd-rate custom-class="custom-rate-class" v-model="rate" /> <wd-rate v-model="rate" />
</wd-message-box> </wd-message-box>
<demo-block title="alert"> <demo-block title="alert">
<wd-button @click="alert">alert</wd-button> <wd-button @click="alert">alert</wd-button>
@ -36,6 +37,7 @@
<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;
height: 22px;
}
:deep() { :deep() {
.custom-shadow { .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%); 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>