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

feat: ✨ 适配暗黑模式

Browse Source
This commit is contained in:
xuqingkai 2023-08-15 23:33:45 +08:00
parent 2e3fd952b5
commit f5946a4b71
183 changed files with 5991 additions and 3644 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/.vitepress/theme/components/frame.vue
View File

@ -1,20 +1,11 @@
<!--
* @Author: weisheng
* @Date: 2022-12-16 18:03:21
* @LastEditTime: 2023-08-04 15:40:12
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\docs\.vitepress\theme\components\frame.vue
* 记得注释
-->
<template>
<iframe v-if="href" id="demo-modal" class="iframe demo-model" scrolling="auto" frameborder="0" :src="href"></iframe>
<iframe v-if="href" id="demo" class="iframe demo-model" scrolling="auto" frameborder="0" :src="href"></iframe>
</template>
<script setup>
import { useRoute } from 'vitepress';
import { computed } from 'vue'
const baseUrl = process.env.NODE_ENV === 'production' ? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/` : 'http://localhost:5173/#/'
<script setup lang="ts">
import { useRoute, useData } from 'vitepress';
import { computed, onMounted, ref, watch } from 'vue'
const baseUrl = process.env.NODE_ENV === 'production' ? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/` : 'http://localhost:5173/demo/#/'
const route = useRoute()
const href = computed(() => {
const path = route.path
@ -28,6 +19,15 @@ const href = computed(() => {
return href
})
const vitepressData = useData()
watch(() => vitepressData.isDark.value, () => {
const iFrame: any = document.getElementById('demo')
iFrame && iFrame.contentWindow.postMessage(vitepressData.isDark.value, href.value)
})
</script>
<style scoped>
::-webkit-scrollbar {

2
docs/component/form.md
View File

@ -17,7 +17,7 @@
html 文件代码：
```html
<wd-message-box id="wd-message-box" />
<wd-message-box />
<wd-toast />
<form @submit="formSubmit">
<wd-cell-group custom-class="group" title="基础信息" border>

3
index.html
View File

@ -1,7 +1,7 @@
<!--
* @Author: weisheng
* @Date: 2023-03-21 22:49:24
* @LastEditTime: 2023-07-22 17:55:23
* @LastEditTime: 2023-08-14 22:50:20
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\index.html
@ -22,6 +22,7 @@
<title></title>
<!--preload-links-->
<!--app-context-->
<script src="./src/static/touch-emulator.js"></script>
</head>
<body>
<div id="app"><!--app-html--></div>

27
src/App.vue
View File

@ -1,15 +1,37 @@
<!--
* @Author: weisheng
* @Date: 2023-03-09 19:23:03
* @LastEditTime: 2023-07-22 17:56:50
* @LastEditTime: 2023-08-15 23:20:15
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\App.vue
* 记得注释
-->
<script setup lang="ts">
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
import { onLaunch, onShow, onHide, onThemeChange } from '@dcloudio/uni-app'
import { useDark } from './store'
const darkMode = useDark()
onThemeChange((option) => {
darkMode.setDark(option.theme === 'dark')
})
onLaunch((ctx) => {
const systemInfo = uni.getSystemInfoSync()
darkMode.setDark(systemInfo.theme === 'dark')
// #ifdef H5
process.env.NODE_ENV === 'development' &&
window.addEventListener('message', function (event) {
if (event.source !== parent) return
// 处理收到的消息
if (typeof event.data === 'boolean') {
darkMode.setDark(event.data)
} else {
darkMode.setDark(false)
}
})
// #endif
console.log('App Launch')
})
onShow(() => {
@ -24,6 +46,7 @@ onHide(() => {
width: 0;
height: 0;
}
page {
margin: 0;
padding: 0;

30
src/components/demo-block/demo-block.vue
View File

@ -1,3 +1,12 @@
<!--
* @Author: weisheng
* @Date: 2023-08-01 11:12:05
* @LastEditTime: 2023-08-15 22:13:27
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\components\demo-block\demo-block.vue
* 记得注释
-->
<template>
<view :class="['demo-block', transparent ? '' : 'is-white', customClass]">
<view class="demo-title">{{ title }}</view>
@ -8,9 +17,10 @@
</template>
<script lang="ts">
export default {
// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签
options: {
virtualHost: true
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
@ -46,14 +56,28 @@ function setStyle() {
}
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.is-white {
background: $-dark-background2;
}
.demo-block {
color: $-dark-color3;
}
}
.demo-block {
margin: 15px 0;
margin-bottom: 15px;
&:not(:first-child) {
margin: 15px 0;
}
color: #666;
overflow: hidden;
}
.is-white {
background: #fff;
}
.demo-title {
padding: 0 15px;
margin: 10px 0;

48
src/components/page-wraper/page-wraper.vue Normal file
View File

@ -0,0 +1,48 @@
<!--
* @Author: weisheng
* @Date: 2023-08-07 18:49:03
* @LastEditTime: 2023-08-15 23:22:19
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\components\page-wraper\page-wraper.vue
* 记得注释
-->
<template>
<wd-config-provider :theme="theme">
<view class="page-wraper">
<!-- <wd-cell title="切换暗黑" title-width="240px" center>
<wd-switch v-model="isDark" name="switchVal" />
</wd-cell> -->
<slot />
</view>
</wd-config-provider>
</template>
<script lang="ts">
export default {
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useDark } from '../../store'
const darkMode = useDark()
const isDark = ref<boolean>(false)
const theme = computed(() => {
return darkMode.isDark.value || isDark.value ? 'dark' : 'light'
})
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.page-wraper {
background: #000;
}
}
.page-wraper {
min-height: calc(100vh - var(--window-top));
}
</style>

131
src/manifest.json
View File

@ -1,72 +1,81 @@
{
"name" : "",
"appid" : "",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
"name": "",
"appid": "",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
"app-plus": {
"darkmode": true,
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"compilerVersion": 3,
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
/* 模块配置 */
"modules": {},
/* 应用发布信息 */
"distribute": {
/* android打包配置 */
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* 模块配置 */
"modules" : {},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {}
}
/* ios打包配置 */
"ios": {},
/* SDK配置 */
"sdkConfigs": {}
}
},
/* 快应用特有相关 */
"quickapp" : {},
"quickapp": {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wx18107b71aa1672e2",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
"mp-weixin": {
"darkmode": true,
"themeLocation": "theme.json",
"appid": "wx18107b71aa1672e2",
"setting": {
"urlCheck": false
},
"usingComponents": true
},
"mp-alipay" : {
"usingComponents" : true
"mp-alipay": {
"darkmode": true,
"themeLocation": "theme.json",
"usingComponents": true
},
"mp-baidu" : {
"usingComponents" : true
"h5": {
"darkmode": true,
"themeLocation": "theme.json"
},
"mp-toutiao" : {
"usingComponents" : true
"mp-baidu": {
"usingComponents": true
},
"uniStatistics": {
"enable": false
"mp-toutiao": {
"usingComponents": true
},
"vueVersion" : "3"
}
"uniStatistics": {
"enable": false
},
"vueVersion": "3"
}

25
src/pages.json
View File

@ -520,6 +520,16 @@
},
"navigationBarTitleText": "Collapse 折叠面板"
}
},
{
"path": "pages/configProvider/Index",
"name": "configProvider",
"style": {
"mp-alipay": {
"allowsBounceVertical": "NO"
},
"navigationBarTitleText": "ConfigProvider 全局配置"
}
}
],
// "tabBar": {
@ -529,8 +539,17 @@
// "list": [ ]
// },
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFF",
"backgroundColor": "#F8F8F8"
"navigationBarBackgroundColor": "@navBgColor",
"navigationBarTextStyle": "@navTxtStyle",
"navigationBarTitleText": "Wot Design Uni",
"backgroundColor": "@bgColor",
"backgroundTextStyle": "@bgTxtStyle",
"backgroundColorTop": "@bgColorTop",
"backgroundColorBottom": "@bgColorBottom",
"navigationStyle": "default"
// "navigationBarTextStyle": "black",
// "navigationBarBackgroundColor": "#FFF",
// "backgroundColor": "#F8F8F8"
}
}

58
src/pages/actionSheet/Index.vue
View File

@ -1,32 +1,34 @@
<template>
<wd-toast />
<view>
<demo-block title="基本用法">
<wd-button @click="showActions1">弹出菜单</wd-button>
<wd-action-sheet :show="show" :actions="actions" @close="close" />
</demo-block>
<demo-block title="选项状态">
<wd-button @click="showActions2">弹出菜单</wd-button>
</demo-block>
<demo-block title="取消按钮">
<wd-button @click="showActions3">弹出菜单</wd-button>
<wd-action-sheet :show="show1" :actions="actions" cancel-text="取消" @close="close1" />
</demo-block>
<demo-block title="自定义面板单行">
<wd-button @click="showActions4">弹出菜单</wd-button>
<wd-action-sheet :show="show2" :panels="panels" cancel-text="取消" @close="close2" @select="select" />
</demo-block>
<demo-block title="自定义面板多行">
<wd-button @click="showActions5">弹出菜单</wd-button>
<wd-action-sheet :show="show3" :panels="panels" cancel-text="取消" @close="close3" @select="select1" />
</demo-block>
<demo-block title="标题">
<wd-button @click="showActions6">弹出菜单</wd-button>
</demo-block>
<wd-action-sheet :show="show4" title="标题" @close="close4" :cancelText="cancelText">
<view style="padding: 15px 15px 150px 15px">内容</view>
</wd-action-sheet>
</view>
<page-wraper>
<wd-toast />
<view>
<demo-block title="基本用法">
<wd-button @click="showActions1">弹出菜单</wd-button>
<wd-action-sheet :show="show" :actions="actions" @close="close" />
</demo-block>
<demo-block title="选项状态">
<wd-button @click="showActions2">弹出菜单</wd-button>
</demo-block>
<demo-block title="取消按钮">
<wd-button @click="showActions3">弹出菜单</wd-button>
<wd-action-sheet :show="show1" :actions="actions" cancel-text="取消" @close="close1" />
</demo-block>
<demo-block title="自定义面板单行">
<wd-button @click="showActions4">弹出菜单</wd-button>
<wd-action-sheet :show="show2" :panels="panels" cancel-text="取消" @close="close2" @select="select" />
</demo-block>
<demo-block title="自定义面板多行">
<wd-button @click="showActions5">弹出菜单</wd-button>
<wd-action-sheet :show="show3" :panels="panels" cancel-text="取消" @close="close3" @select="select1" />
</demo-block>
<demo-block title="标题">
<wd-button @click="showActions6">弹出菜单</wd-button>
</demo-block>
<wd-action-sheet :show="show4" title="标题" @close="close4" :cancelText="cancelText">
<view style="padding: 15px 15px 150px 15px">内容</view>
</wd-action-sheet>
</view>
</page-wraper>
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'

86
src/pages/badge/Index.vue
View File

@ -1,50 +1,52 @@
<template>
<view>
<demo-block title="展示消息数量">
<wd-badge custom-class="badge" :modelValue="12">
<wd-button :round="false" type="info" size="small">评论</wd-button>
</wd-badge>
<wd-badge custom-class="badge" :modelValue="3" bg-color="pink">
<wd-button :round="false" type="info" size="small">回复</wd-button>
</wd-badge>
<wd-badge custom-class="badge" :modelValue="1" type="primary">
<wd-button :round="false" type="info" size="small">评论</wd-button>
</wd-badge>
<wd-badge custom-class="badge" :modelValue="2" type="warning">
<wd-button :round="false" type="info" size="small">回复</wd-button>
</wd-badge>
<wd-badge custom-class="badge" :modelValue="1" type="success">
<wd-button :round="false" type="info" size="small">评论</wd-button>
</wd-badge>
<wd-badge custom-class="badge" :modelValue="2" type="info">
<wd-button :round="false" type="info" size="small">回复</wd-button>
</wd-badge>
</demo-block>
<page-wraper>
<demo-block title="展示消息数量">
<wd-badge custom-class="badge" :modelValue="12">
<wd-button :round="false" type="info" size="small">评论</wd-button>
</wd-badge>
<wd-badge custom-class="badge" :modelValue="3" bg-color="pink">
<wd-button :round="false" type="info" size="small">回复</wd-button>
</wd-badge>
<wd-badge custom-class="badge" :modelValue="1" type="primary">
<wd-button :round="false" type="info" size="small">评论</wd-button>
</wd-badge>
<wd-badge custom-class="badge" :modelValue="2" type="warning">
<wd-button :round="false" type="info" size="small">回复</wd-button>
</wd-badge>
<wd-badge custom-class="badge" :modelValue="1" type="success">
<wd-button :round="false" type="info" size="small">评论</wd-button>
</wd-badge>
<wd-badge custom-class="badge" :modelValue="2" type="info">
<wd-button :round="false" type="info" size="small">回复</wd-button>
</wd-badge>
</demo-block>
<demo-block title="可定义消息最大值">
<wd-badge custom-class="badge" :modelValue="200" max="99">
<wd-button :round="false" type="info" size="small">评论</wd-button>
</wd-badge>
<wd-badge custom-class="badge" :modelValue="200" max="10">
<wd-button :round="false" type="info" size="small">回复</wd-button>
</wd-badge>
</demo-block>
<demo-block title="可定义消息最大值">
<wd-badge custom-class="badge" :modelValue="200" :max="99">
<wd-button :round="false" type="info" size="small">评论</wd-button>
</wd-badge>
<wd-badge custom-class="badge" :modelValue="200" :max="10">
<wd-button :round="false" type="info" size="small">回复</wd-button>
</wd-badge>
</demo-block>
<demo-block title="自定义内容">
<wd-badge custom-class="badge" modelValue="new">
<wd-button :round="false" type="info" size="small">评论</wd-button>
</wd-badge>
<wd-badge custom-class="badge" modelValue="hot">
<wd-button :round="false" type="info" size="small">回复</wd-button>
</wd-badge>
</demo-block>
<demo-block title="自定义内容">
<wd-badge custom-class="badge" modelValue="new">
<wd-button :round="false" type="info" size="small">评论</wd-button>
</wd-badge>
<wd-badge custom-class="badge" modelValue="hot">
<wd-button :round="false" type="info" size="small">回复</wd-button>
</wd-badge>
</demo-block>
<demo-block title="点状类型">
<wd-badge custom-class="badge" is-dot>数据查询</wd-badge>
<wd-badge custom-class="badge" is-dot>
<wd-button :round="false" type="info" size="small">回复</wd-button>
</wd-badge>
</demo-block>
<demo-block title="点状类型">
<wd-badge custom-class="badge" is-dot>数据查询</wd-badge>
<wd-badge custom-class="badge" is-dot>
<wd-button :round="false" type="info" size="small">回复</wd-button>
</wd-badge>
</demo-block>
</page-wraper>
</view>
</template>
<script setup lang="ts"></script>

207
src/pages/button/Index.vue
View File

@ -1,106 +1,109 @@
<template>
<view>
<demo-block title="基本用法">
<wd-button open-type="getUserInfo" @getuserinfo="handleGetuserinfo">主要按钮</wd-button>
<wd-button type="success">成功按钮</wd-button>
<wd-button type="info">信息按钮</wd-button>
<wd-button type="warning">警告按钮</wd-button>
<wd-button type="error">危险按钮</wd-button>
</demo-block>
<demo-block title="禁用按钮">
<wd-button disabled>主要按钮</wd-button>
<wd-button type="success" disabled>成功按钮</wd-button>
<wd-button type="info" disabled>信息按钮</wd-button>
<wd-button type="warning" disabled>警告按钮</wd-button>
<wd-button type="error" disabled>危险按钮</wd-button>
</demo-block>
<demo-block title="幽灵按钮">
<wd-button plain>主要按钮</wd-button>
<wd-button type="success" plain>成功按钮</wd-button>
<wd-button type="info" plain>信息按钮</wd-button>
<wd-button type="warning" plain>警告按钮</wd-button>
<wd-button type="error" plain>危险按钮</wd-button>
</demo-block>
<demo-block title="幽灵按钮禁用状态">
<wd-button plain disabled>主要按钮</wd-button>
<wd-button type="success" plain disabled>成功按钮</wd-button>
<wd-button type="info" plain disabled>信息按钮</wd-button>
<wd-button type="warning" plain disabled>警告按钮</wd-button>
<wd-button type="error" plain disabled>危险按钮</wd-button>
</demo-block>
<demo-block title="按钮大小">
<wd-button size="small">小型按钮</wd-button>
<wd-button size="medium">普通按钮</wd-button>
<wd-button size="large">大型按钮</wd-button>
</demo-block>
<demo-block title="加载中">
<wd-button loading>加载中</wd-button>
<wd-button type="success" loading>加载中</wd-button>
<wd-button type="warning" loading>加载中</wd-button>
<wd-button type="error" loading>加载中</wd-button>
<wd-button type="info" loading>加载中</wd-button>
</demo-block>
<demo-block title="文字按钮">
<wd-button type="text">按钮</wd-button>
<wd-button type="text" disabled>按钮</wd-button>
</demo-block>
<demo-block title="图标按钮">
<wd-button type="icon" icon="delete-thin"></wd-button>
<wd-button type="icon" icon="delete-thin" disabled></wd-button>
</demo-block>
<demo-block title="带图标的基本按钮">
<wd-button icon="download">下载</wd-button>
<wd-button icon="setting">设置</wd-button>
</demo-block>
<demo-block title="块状按钮，宽度100%">
<wd-button block size="large">主要按钮</wd-button>
<wd-button type="success" block size="large">成功按钮</wd-button>
<wd-button type="info" block size="large">信息按钮</wd-button>
<wd-button type="warning" block size="large">警告按钮</wd-button>
<wd-button type="error" block size="large">危险按钮</wd-button>
</demo-block>
<demo-block title="常用按钮：块状+圆角">
<wd-button block size="large" disabled>主要按钮</wd-button>
<wd-button block size="large">主要按钮</wd-button>
<wd-button block size="large" loading>主要按钮</wd-button>
<wd-button type="info" block size="large" disabled>信息按钮</wd-button>
<wd-button type="info" block size="large">信息按钮</wd-button>
</demo-block>
<demo-block title="常用按钮：圆角或圆角+幽灵">
<view>
<wd-button disabled>主操作</wd-button>
<wd-button size="small" disabled>主操作</wd-button>
</view>
<view>
<wd-button>主操作</wd-button>
<wd-button size="small">主操作</wd-button>
</view>
<view>
<wd-button type="info" disabled>次操作</wd-button>
<wd-button type="info" size="small" disabled>次操作</wd-button>
</view>
<view>
<wd-button type="info">次操作</wd-button>
<wd-button type="info" size="small">次操作</wd-button>
</view>
<view>
<wd-button plain disabled>幽灵按钮</wd-button>
<wd-button size="small" plain disabled>幽灵按钮</wd-button>
</view>
<view>
<wd-button plain>幽灵按钮</wd-button>
<wd-button size="small" plain>幽灵按钮</wd-button>
</view>
<view>
<wd-button type="info" plain disabled>次操作</wd-button>
<wd-button type="info" size="small" plain disabled>次操作</wd-button>
</view>
<view>
<wd-button type="info" plain>次操作</wd-button>
<wd-button type="info" size="small" plain>次操作</wd-button>
</view>
</demo-block>
</view>
<page-wraper>
<view>
<demo-block title="基本用法">
<wd-button open-type="getUserInfo" @getuserinfo="handleGetuserinfo">主要按钮</wd-button>
<wd-button type="success">成功按钮</wd-button>
<wd-button type="info">信息按钮</wd-button>
<wd-button type="warning">警告按钮</wd-button>
<wd-button type="error">危险按钮</wd-button>
</demo-block>
<demo-block title="禁用按钮">
<wd-button disabled>主要按钮</wd-button>
<wd-button type="success" disabled>成功按钮</wd-button>
<wd-button type="info" disabled>信息按钮</wd-button>
<wd-button type="warning" disabled>警告按钮</wd-button>
<wd-button type="error" disabled>危险按钮</wd-button>
</demo-block>
<demo-block title="幽灵按钮">
<wd-button plain>主要按钮</wd-button>
<wd-button type="success" plain>成功按钮</wd-button>
<wd-button type="info" plain>信息按钮</wd-button>
<wd-button type="warning" plain>警告按钮</wd-button>
<wd-button type="error" plain>危险按钮</wd-button>
</demo-block>
<demo-block title="幽灵按钮禁用状态">
<wd-button plain disabled>主要按钮</wd-button>
<wd-button type="success" plain disabled>成功按钮</wd-button>
<wd-button type="info" plain disabled>信息按钮</wd-button>
<wd-button type="warning" plain disabled>警告按钮</wd-button>
<wd-button type="error" plain disabled>危险按钮</wd-button>
</demo-block>
<demo-block title="按钮大小">
<wd-button size="small">小型按钮</wd-button>
<wd-button size="medium">普通按钮</wd-button>
<wd-button size="large">大型按钮</wd-button>
</demo-block>
<demo-block title="加载中">
<wd-button loading>加载中</wd-button>
<wd-button type="success" loading>加载中</wd-button>
<wd-button type="warning" loading>加载中</wd-button>
<wd-button type="error" loading>加载中</wd-button>
<wd-button type="info" loading>加载中</wd-button>
<wd-button type="info" plain loading>加载中</wd-button>
</demo-block>
<demo-block title="文字按钮">
<wd-button type="text">按钮</wd-button>
<wd-button type="text" disabled>按钮</wd-button>
</demo-block>
<demo-block title="图标按钮">
<wd-button type="icon" icon="delete-thin"></wd-button>
<wd-button type="icon" icon="delete-thin" disabled></wd-button>
</demo-block>
<demo-block title="带图标的基本按钮">
<wd-button icon="download">下载</wd-button>
<wd-button icon="setting">设置</wd-button>
</demo-block>
<demo-block title="块状按钮，宽度100%">
<wd-button block size="large">主要按钮</wd-button>
<wd-button type="success" block size="large">成功按钮</wd-button>
<wd-button type="info" block size="large">信息按钮</wd-button>
<wd-button type="warning" block size="large">警告按钮</wd-button>
<wd-button type="error" block size="large">危险按钮</wd-button>
</demo-block>
<demo-block title="常用按钮：块状+圆角">
<wd-button block size="large" disabled>主要按钮</wd-button>
<wd-button block size="large">主要按钮</wd-button>
<wd-button block size="large" loading>主要按钮</wd-button>
<wd-button type="info" block size="large" disabled>信息按钮</wd-button>
<wd-button type="info" block size="large">信息按钮</wd-button>
</demo-block>
<demo-block title="常用按钮：圆角或圆角+幽灵">
<view>
<wd-button disabled>主操作</wd-button>
<wd-button size="small" disabled>主操作</wd-button>
</view>
<view>
<wd-button>主操作</wd-button>
<wd-button size="small">主操作</wd-button>
</view>
<view>
<wd-button type="info" disabled>次操作</wd-button>
<wd-button type="info" size="small" disabled>次操作</wd-button>
</view>
<view>
<wd-button type="info">次操作</wd-button>
<wd-button type="info" size="small">次操作</wd-button>
</view>
<view>
<wd-button plain disabled>幽灵按钮</wd-button>
<wd-button size="small" plain disabled>幽灵按钮</wd-button>
</view>
<view>
<wd-button plain>幽灵按钮</wd-button>
<wd-button size="small" plain>幽灵按钮</wd-button>
</view>
<view>
<wd-button type="info" plain disabled>次操作</wd-button>
<wd-button type="info" size="small" plain disabled>次操作</wd-button>
</view>
<view>
<wd-button type="info" plain>次操作</wd-button>
<wd-button type="info" size="small" plain>次操作</wd-button>
</view>
</demo-block>
</view>
</page-wraper>
</template>
<script lang="ts" setup>
function handleGetuserinfo(event) {

95
src/pages/calendar/Index.vue
View File

@ -1,49 +1,50 @@
<template>
<wd-toast />
<view style="margin: 20px 0">
<wd-cell-group border>
<wd-calendar label="单个日期选择" v-model="value1" @confirm="handleConfirm1" />
<wd-calendar label="多个日期选择" type="dates" v-model="value2" @confirm="handleConfirm2" />
<wd-calendar label="日期范围选择" type="daterange" v-model="value3" />
<wd-calendar label="日期时间选择" type="datetime" v-model="value4" />
<wd-calendar label="日期时间范围选择" type="datetimerange" v-model="value5" />
<wd-calendar label="周选择" type="week" v-model="value6" />
<wd-calendar label="月选择" type="month" v-model="value7" />
<wd-calendar label="周范围选择" :first-day-of-week="1" type="weekrange" v-model="value8" />
<wd-calendar label="月范围选择" type="monthrange" v-model="value9" />
<wd-calendar label="日周月切换" :first-day-of-week="1" show-type-switch v-model="value10" />
<wd-calendar label="快捷操作" :show-confirm="false" />
<wd-calendar label="日期格式化" type="daterange" v-model="value11" :formatter="formatter" />
<wd-calendar
label="快捷选项"
:shortcuts="shortcuts"
:on-shortcuts-click="onShortcutsClick"
type="daterange"
const
v-model="value12"
@confirm="handleConfirm3"
/>
<wd-calendar
label="自定义展示"
type="daterange"
const
v-model="value13"
:display-format="displayFormat"
:inner-display-format="innerDisplayFormat"
/>
<wd-calendar label="before-confirm" v-model="value14" :before-confirm="beforeConfirm" />
</wd-cell-group>
</view>
<demo-block transparent title="自定义选择器">
<view style="margin: 0 15px">
<view style="margin-bottom: 10px">当前选中日期：{{ formatValue }}</view>
<wd-calendar use-default-slot @confirm="handleConfirm4">
<wd-button>选择日期</wd-button>
</wd-calendar>
<page-wraper>
<wd-toast />
<view style="margin: 20px 0">
<wd-cell-group border>
<wd-calendar label="单个日期选择" v-model="value1" @confirm="handleConfirm1" />
<wd-calendar label="多个日期选择" type="dates" v-model="value2" @confirm="handleConfirm2" />
<wd-calendar label="日期范围选择" type="daterange" v-model="value3" />
<wd-calendar label="日期时间选择" type="datetime" v-model="value4" />
<wd-calendar label="日期时间范围选择" type="datetimerange" v-model="value5" />
<wd-calendar label="周选择" type="week" v-model="value6" />
<wd-calendar label="月选择" type="month" v-model="value7" />
<wd-calendar label="周范围选择" :first-day-of-week="1" type="weekrange" v-model="value8" />
<wd-calendar label="月范围选择" type="monthrange" v-model="value9" />
<wd-calendar label="日周月切换" :first-day-of-week="1" show-type-switch v-model="value10" />
<wd-calendar label="快捷操作" v-model="value10" :show-confirm="false" />
<wd-calendar label="日期格式化" type="daterange" v-model="value11" :formatter="formatter" />
<wd-calendar
label="快捷选项"
:shortcuts="shortcuts"
:on-shortcuts-click="onShortcutsClick"
type="daterange"
const
v-model="value12"
@confirm="handleConfirm3"
/>
<wd-calendar
label="自定义展示"
type="daterange"
const
v-model="value13"
:display-format="displayFormat"
:inner-display-format="innerDisplayFormat"
/>
<wd-calendar label="before-confirm" v-model="value14" :before-confirm="beforeConfirm" />
</wd-cell-group>
</view>
</demo-block>
<demo-block transparent title="自定义选择器">
<view style="margin: 0 15px">
<view style="margin-bottom: 10px">当前选中日期：{{ formatValue }}</view>
<wd-calendar v-model="value15" use-default-slot @confirm="handleConfirm4">
<wd-button>选择日期</wd-button>
</wd-calendar>
</view>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
@ -61,9 +62,11 @@ const value8 = ref<number[]>([Date.now() - 24 * 60 * 60 * 1000 * 14, Date.now()]
const value9 = ref<number[]>([Date.now() - 24 * 60 * 60 * 1000 * 33, Date.now()])
const value10 = ref<number>(Date.now())
const value11 = ref<number[]>([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now()])
const value12 = ref<string>('')
const value12 = ref<number | null>(null)
const value13 = ref<number[]>([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now()])
const value14 = ref<string>('')
const value14 = ref<number | null>(null)
const value15 = ref<number | null>(null)
const formatValue = ref<string>('')
const formatter = (day) => {
const date = new Date(day.date)

97
src/pages/calendarView/Index.vue
View File

@ -1,62 +1,55 @@
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-21 15:50:41
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\calendarView\Index.vue
* 记得注释
-->
<template>
<demo-block title="单个日期选择" :hor="0">
<view style="margin: 0 15px 10px">
<view style="margin-bottom: 10px; font-size: 13px">切换类型：</view>
<wd-radio-group v-model="type1" shape="button">
<wd-radio value="date">date</wd-radio>
<wd-radio value="week">week</wd-radio>
<wd-radio value="month">month</wd-radio>
</wd-radio-group>
</view>
<wd-calendar-view :type="type1" v-model="value1" @change="handleChange1"></wd-calendar-view>
</demo-block>
<demo-block title="多个日期选择" :hor="0">
<wd-calendar-view type="dates" v-model="value2" @change="handleChange2"></wd-calendar-view>
</demo-block>
<demo-block title="日期范围选择" :hor="0">
<view style="margin: 0 24rpx 20rpx">
<view style="margin-bottom: 20rpx; font-size: 26rpx">切换类型：</view>
<wd-radio-group v-model="type2" shape="button" @change="handleTypeChange2">
<wd-radio value="daterange">daterange</wd-radio>
<wd-radio value="weekrange">weekrange</wd-radio>
<wd-radio value="monthrange">monthrange</wd-radio>
</wd-radio-group>
</view>
<wd-calendar-view :type="type2" allow-same-day v-model="value3" @change="handleChange3"></wd-calendar-view>
</demo-block>
<demo-block title="时间类型" :hor="0">
<wd-calendar-view type="datetime" v-model="value4"></wd-calendar-view>
</demo-block>
<demo-block title="时间范围类型" :hor="0">
<wd-calendar-view type="datetimerange" v-model="value5"></wd-calendar-view>
</demo-block>
<demo-block title="限制最大选择范围" :hor="0">
<wd-calendar-view type="daterange" :max-range="3" v-model="value7"></wd-calendar-view>
</demo-block>
<demo-block title="自定义日期" :hor="0">
<wd-calendar-view type="daterange" allow-same-day v-model="value6" :formatter="formatter"></wd-calendar-view>
</demo-block>
<demo-block title="设置周起始日" :hor="0">
<wd-calendar-view :first-day-of-week="1" v-model="value8"></wd-calendar-view>
</demo-block>
<page-wraper>
<demo-block title="单个日期选择" :hor="0">
<view style="margin: 0 15px 10px">
<view style="margin-bottom: 10px; font-size: 13px">切换类型：</view>
<wd-radio-group v-model="type1" shape="button">
<wd-radio value="date">date</wd-radio>
<wd-radio value="week">week</wd-radio>
<wd-radio value="month">month</wd-radio>
</wd-radio-group>
</view>
<wd-calendar-view :type="type1" v-model="value1" @change="handleChange1"></wd-calendar-view>
</demo-block>
<demo-block title="多个日期选择" :hor="0">
<wd-calendar-view type="dates" v-model="value2" @change="handleChange2"></wd-calendar-view>
</demo-block>
<demo-block title="日期范围选择" :hor="0">
<view style="margin: 0 24rpx 20rpx">
<view style="margin-bottom: 20rpx; font-size: 26rpx">切换类型：</view>
<wd-radio-group v-model="type2" shape="button" @change="handleTypeChange2">
<wd-radio value="daterange">daterange</wd-radio>
<wd-radio value="weekrange">weekrange</wd-radio>
<wd-radio value="monthrange">monthrange</wd-radio>
</wd-radio-group>
</view>
<wd-calendar-view :type="type2" allow-same-day v-model="value3" @change="handleChange3"></wd-calendar-view>
</demo-block>
<demo-block title="时间类型" :hor="0">
<wd-calendar-view type="datetime" v-model="value4"></wd-calendar-view>
</demo-block>
<demo-block title="时间范围类型" :hor="0">
<wd-calendar-view type="datetimerange" v-model="value5"></wd-calendar-view>
</demo-block>
<demo-block title="限制最大选择范围" :hor="0">
<wd-calendar-view type="daterange" :max-range="3" v-model="value7"></wd-calendar-view>
</demo-block>
<demo-block title="自定义日期" :hor="0">
<wd-calendar-view type="daterange" allow-same-day v-model="value6" :formatter="formatter"></wd-calendar-view>
</demo-block>
<demo-block title="设置周起始日" :hor="0">
<wd-calendar-view :first-day-of-week="1" v-model="value8"></wd-calendar-view>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const type1 = ref<string>('date')
const type2 = ref<string>('daterange')
const type1 = ref<any>('date')
const type2 = ref<any>('daterange')
const minDate = ref(Date.now())
const value1 = ref(Date.now())
const value2 = ref('')
const value2 = ref(null)
const value3 = ref([Date.now() - 24 * 60 * 60 * 1000 * 33, Date.now()])
const value4 = ref(Date.now())
const value5 = ref([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now() - 24 * 60 * 60 * 1000])

182
src/pages/card/Index.vue
View File

@ -1,98 +1,113 @@
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-21 15:51:04
* @LastEditTime: 2023-08-11 18:49:11
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\card\Index.vue
* 记得注释
-->
<template>
<view>
<demo-block title="基本使用" transparent>
<wd-card title="经营分析">
一般的，检举内容由承办的党的委员会或纪律检查委员会将处理意见或复议、复查结论同申诉人见面，听取其意见。复议、复查的结论和决定，应交给申诉人一份。
<template #footer>
<wd-button size="small" plain>查看详情</wd-button>
</template>
</wd-card>
<wd-card title="新订单">
<view class="content">
<image
src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg"
alt="joy"
style="width: 70px; height: 70px; border-radius: 4px; margin-right: 12px"
/>
<view>
<view>蜜滋兰(mizland)新西兰进口多花种…</view>
<view>数量：1件</view>
<view>金额：29.08</view>
<view>买家昵称：Joy</view>
</view>
</view>
<template #footer>
<wd-button size="small" plain>查看详情</wd-button>
</template>
</wd-card>
</demo-block>
<demo-block title="矩形卡片" transparent>
<wd-card title="2020-02-03服务到期" type="rectangle">
<view style="height: 40px" class="content">
<image
src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg"
width="40"
height="40"
alt="joy"
style="width: 40px; height: 40px; border-radius: 4px; margin-right: 12px"
/>
<view>
<view style="color: rgba(0, 0, 0, 0.85); font-size: 16px">智云好客CRM短信_催评营销</view>
<view style="color: rgba(0, 0, 0, 0.25); font-size: 12px">高级版-快速吸粉 | 周期一年</view>
</view>
</view>
<template #footer>
<view>
<wd-button size="small" plain custom-style="margin-right: 8px">评价</wd-button>
<wd-button size="small">立即使用</wd-button>
</view>
</template>
</wd-card>
<wd-card type="rectangle">
<template #title>
<view class="title">
<view>2020-02-03服务到期</view>
<view class="title-tip">
<wd-icon name="warning" size="14px" custom-style="vertical-align: bottom" />
您可以去电脑上使用该服务
<page-wraper>
<view>
<demo-block title="基本使用" transparent>
<wd-card title="经营分析">
一般的，检举内容由承办的党的委员会或纪律检查委员会将处理意见或复议、复查结论同申诉人见面，听取其意见。复议、复查的结论和决定，应交给申诉人一份。
<template #footer>
<wd-button size="small" plain>查看详情</wd-button>
</template>
</wd-card>
<wd-card title="新订单">
<view class="content">
<image
src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg"
alt="joy"
style="width: 70px; height: 70px; border-radius: 4px; margin-right: 12px"
/>
<view>
<view>蜜滋兰(mizland)新西兰进口多花种…</view>
<view>数量：1件</view>
<view>金额：29.08</view>
<view>买家昵称：Joy</view>
</view>
</view>
</template>
<template #footer>
<wd-button size="small" plain>查看详情</wd-button>
</template>
</wd-card>
</demo-block>
<demo-block title="矩形卡片" transparent>
<wd-card title="2020-02-03服务到期" type="rectangle">
<view style="height: 40px" class="content">
<image
src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg"
width="40"
height="40"
alt="joy"
style="width: 40px; height: 40px; border-radius: 4px; margin-right: 12px"
/>
<view>
<view class="custom-main">智云好客CRM短信_催评营销</view>
<view class="custom-sub">高级版-快速吸粉 | 周期一年</view>
</view>
</view>
<template #footer>
<view>
<wd-button size="small" plain custom-style="margin-right: 8px">评价</wd-button>
<wd-button size="small">立即使用</wd-button>
</view>
</template>
</wd-card>
<wd-card type="rectangle">
<template #title>
<view class="title">
<view>2020-02-03服务到期</view>
<view class="title-tip">
<wd-icon name="warning" size="14px" custom-style="vertical-align: bottom" />
您可以去电脑上使用该服务
</view>
</view>
</template>
<view style="height: 40px" class="content">
<image
src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg"
width="40"
height="40"
alt="joy"
style="width: 40px; height: 40px; border-radius: 4px; margin-right: 12px"
/>
<view>
<view style="color: rgba(0, 0, 0, 0.85); font-size: 16px">智云好客CRM短信_催评营销</view>
<view style="color: rgba(0, 0, 0, 0.25); font-size: 12px">高级版-快速吸粉 | 周期一年</view>
<view style="height: 40px" class="content">
<image
src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg"
width="40"
height="40"
alt="joy"
style="width: 40px; height: 40px; border-radius: 4px; margin-right: 12px"
/>
<view>
<view class="custom-main">智云好客CRM短信_催评营销</view>
<view class="custom-sub">高级版-快速吸粉 | 周期一年</view>
</view>
</view>
</view>
<template #footer>
<view>
<wd-button size="small" plain custom-style="margin-right: 8px">评价</wd-button>
<wd-button size="small">立即使用</wd-button>
</view>
</template>
</wd-card>
</demo-block>
</view>
<template #footer>
<view>
<wd-button size="small" plain custom-style="margin-right: 8px">评价</wd-button>
<wd-button size="small">立即使用</wd-button>
</view>
</template>
</wd-card>
</demo-block>
</view>
</page-wraper>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.wot-theme-dark {
.title-tip {
color: rgba(232, 230, 227, 0.8);
}
.custom-main {
color: $-dark-color;
}
.custom-sub {
color: $-dark-color-gray;
}
}
.content,
.title {
display: flex;
@ -110,4 +125,13 @@
color: rgba(0, 0, 0, 0.25);
font-size: 12px;
}
.custom-main {
color: rgba(0, 0, 0, 0.85);
font-size: 16px;
}
.custom-sub {
color: rgba(0, 0, 0, 0.25);
font-size: 12px;
}
</style>

184
src/pages/cell/Index.vue
View File

@ -1,111 +1,113 @@
<template>
<wd-toast />
<demo-block title="基本用法" transparent>
<wd-cell-group>
<wd-cell title="标题文字" value="内容" />
<wd-cell title="标题文字" label="描述信息" value="内容" />
</wd-cell-group>
</demo-block>
<page-wraper>
<wd-toast />
<demo-block title="基本用法" transparent>
<wd-cell-group>
<wd-cell title="标题文字" value="内容" />
<wd-cell title="标题文字" label="描述信息" value="内容" />
</wd-cell-group>
</demo-block>
<demo-block title="图标" transparent>
<wd-cell-group>
<wd-cell title="标题文字" value="内容" icon="setting" />
<wd-cell title="标题文字" value="内容">
<template #icon>
<view class="cell-icon"></view>
</template>
</wd-cell>
</wd-cell-group>
</demo-block>
<demo-block title="图标" transparent>
<wd-cell-group>
<wd-cell title="标题文字" value="内容" icon="setting" />
<wd-cell title="标题文字" value="内容">
<template #icon>
<view class="cell-icon"></view>
</template>
</wd-cell>
</wd-cell-group>
</demo-block>
<demo-block title="分组标题" transparent>
<wd-cell-group title="交易管理" value="内容">
<wd-cell title="标题文字" value="内容" />
<wd-cell title="标题文字" label="描述信息" value="内容"></wd-cell>
</wd-cell-group>
</demo-block>
<demo-block title="分组标题" transparent>
<wd-cell-group title="交易管理" value="内容">
<wd-cell title="标题文字" value="内容" />
<wd-cell title="标题文字" label="描述信息" value="内容"></wd-cell>
</wd-cell-group>
</demo-block>
<demo-block title="大尺寸" transparent>
<wd-cell-group>
<wd-cell size="large" title="标题文字" value="内容" />
<wd-cell title="标题文字" value="内容" size="large" icon="setting" is-link />
<wd-cell size="large" title="标题文字" label="描述信息" value="内容" />
</wd-cell-group>
</demo-block>
<demo-block title="大尺寸" transparent>
<wd-cell-group>
<wd-cell size="large" title="标题文字" value="内容" />
<wd-cell title="标题文字" value="内容" size="large" icon="setting" is-link />
<wd-cell size="large" title="标题文字" label="描述信息" value="内容" />
</wd-cell-group>
</demo-block>
<demo-block title="展示边框线" transparent>
<wd-cell-group title="交易管理" border>
<wd-cell title="标题文字" value="内容" />
<wd-cell title="标题文字" label="描述信息" value="内容"></wd-cell>
</wd-cell-group>
</demo-block>
<demo-block title="展示边框线" transparent>
<wd-cell-group title="交易管理" border>
<wd-cell title="标题文字" value="内容" />
<wd-cell title="标题文字" label="描述信息" value="内容"></wd-cell>
</wd-cell-group>
</demo-block>
<demo-block title="点击事件" transparent>
<wd-cell-group>
<wd-cell title="标题文字" value="内容" clickable @click="showToast" />
</wd-cell-group>
</demo-block>
<demo-block title="点击事件" transparent>
<wd-cell-group>
<wd-cell title="标题文字" value="内容" clickable @click="showToast" />
</wd-cell-group>
</demo-block>
<demo-block title="页面跳转" transparent>
<wd-cell-group>
<wd-cell title="帮助与反馈" is-link to="/pages/index/Index" />
<wd-cell title="设置" value="内容" is-link to="/pages/button/Index" replace></wd-cell>
</wd-cell-group>
</demo-block>
<demo-block title="页面跳转" transparent>
<wd-cell-group>
<wd-cell title="帮助与反馈" is-link to="/pages/index/Index" />
<wd-cell title="设置" value="内容" is-link to="/pages/button/Index" replace></wd-cell>
</wd-cell-group>
</demo-block>
<demo-block title="垂直居中" transparent>
<wd-cell-group>
<wd-cell title="标题文字" value="内容" center />
<wd-cell title="标题文字" label="描述信息" value="内容" center />
</wd-cell-group>
</demo-block>
<demo-block title="垂直居中" transparent>
<wd-cell-group>
<wd-cell title="标题文字" value="内容" center />
<wd-cell title="标题文字" label="描述信息" value="内容" center />
</wd-cell-group>
</demo-block>
<demo-block title="表单属性" transparent>
<wd-cell-group border>
<wd-cell title="必填" required>
<wd-rate v-model="rate" icon="dong" active-icon="dong" @change="handleRateChange" />
</wd-cell>
<wd-cell title="上下结构" vertical>
<wd-slider v-model="slider" @change="handleSliderChange" />
</wd-cell>
</wd-cell-group>
</demo-block>
<demo-block title="表单属性" transparent>
<wd-cell-group border>
<wd-cell title="必填" required>
<wd-rate v-model="rate" icon="dong" active-icon="dong" @change="handleRateChange" />
</wd-cell>
<wd-cell title="上下结构" vertical>
<wd-slider v-model="slider" @change="handleSliderChange" />
</wd-cell>
</wd-cell-group>
</demo-block>
<demo-block title="设置宽度" transparent>
<wd-cell-group>
<wd-cell title="标题文字" label="这里是文字描述这里是文字描述这里是文字描述" title-width="200px" value="内容" />
</wd-cell-group>
</demo-block>
<demo-block title="设置宽度" transparent>
<wd-cell-group>
<wd-cell title="标题文字" label="这里是文字描述这里是文字描述这里是文字描述" title-width="200px" value="内容" />
</wd-cell-group>
</demo-block>
<demo-block title="自定义slot" transparent>
<wd-cell-group>
<wd-cell title="标题文字" center>
<wd-button custom-class="custom-value" size="small" plain>按钮</wd-button>
</wd-cell>
<wd-cell title="标题文字" center>
<view class="custom-value" style="height: 32px">
<wd-switch v-model="switchValue" @change="handleSwitchChange" />
</view>
</wd-cell>
<wd-cell title="标题文字" is-link to="/pages/index/index">
<view class="custom-text">订购</view>
</wd-cell>
<wd-cell>
<template #title>
<view>
<view style="display: inline-block">标题文字</view>
<view class="end-time">25天后到期</view>
<demo-block title="自定义slot" transparent>
<wd-cell-group>
<wd-cell title="标题文字" center>
<wd-button custom-class="custom-value" size="small" plain>按钮</wd-button>
</wd-cell>
<wd-cell title="标题文字" center>
<view class="custom-value" style="height: 32px">
<wd-switch v-model="switchValue" @change="handleSwitchChange" />
</view>
</template>
</wd-cell>
</wd-cell-group>
</demo-block>
</wd-cell>
<wd-cell title="标题文字" is-link to="/pages/index/index">
<view class="custom-text">订购</view>
</wd-cell>
<wd-cell>
<template #title>
<view>
<view style="display: inline-block">标题文字</view>
<view class="end-time">25天后到期</view>
</view>
</template>
</wd-cell>
</wd-cell-group>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
import { ref } from 'vue'
const rate = ref(0)
const slider = ref('')
const slider = ref(0)
const switchValue = ref('')
function handleRateChange({ value }) {

152
src/pages/checkbox/Index.vue
View File

@ -1,91 +1,93 @@
<template>
<demo-block title="基本用法">
<wd-checkbox v-model="check1">沃特</wd-checkbox>
</demo-block>
<page-wraper>
<demo-block title="基本用法">
<wd-checkbox v-model="check1">沃特</wd-checkbox>
</demo-block>
<demo-block title="修改形状: square">
<wd-checkbox v-model="check2" shape="square">沃特</wd-checkbox>
</demo-block>
<demo-block title="修改形状: square">
<wd-checkbox v-model="check2" shape="square">沃特</wd-checkbox>
</demo-block>
<demo-block title="修改形状: button">
<wd-checkbox v-model="check3" shape="button">沃特</wd-checkbox>
</demo-block>
<demo-block title="修改形状: button">
<wd-checkbox v-model="check3" shape="button">沃特</wd-checkbox>
</demo-block>
<demo-block title="修改选中颜色">
<wd-checkbox v-model="check4" checked-color="rgb(52, 209, 157)">沃特</wd-checkbox>
</demo-block>
<demo-block title="修改选中颜色">
<wd-checkbox v-model="check4" checked-color="rgb(52, 209, 157)">沃特</wd-checkbox>
</demo-block>
<demo-block title="禁用状态">
<view style="margin-bottom: 10px">
<wd-checkbox-group v-model="value1" disabled>
<wd-checkbox :modelValue="1">沃特</wd-checkbox>
<wd-checkbox :modelValue="2" :disabled="false">商家后台</wd-checkbox>
<wd-checkbox :modelValue="3" shape="square">沃特</wd-checkbox>
<wd-checkbox :modelValue="4" shape="square">商家后台</wd-checkbox>
<demo-block title="禁用状态">
<view style="margin-bottom: 10px">
<wd-checkbox-group v-model="value1" disabled>
<wd-checkbox :modelValue="1">沃特</wd-checkbox>
<wd-checkbox :modelValue="2" :disabled="false">商家后台</wd-checkbox>
<wd-checkbox :modelValue="3" shape="square">沃特</wd-checkbox>
<wd-checkbox :modelValue="4" shape="square">商家后台</wd-checkbox>
</wd-checkbox-group>
</view>
<wd-checkbox-group v-model="value2" disabled>
<wd-checkbox :modelValue="1" shape="button">沃特</wd-checkbox>
<wd-checkbox :modelValue="2" shape="button">商家后台</wd-checkbox>
</wd-checkbox-group>
</view>
<wd-checkbox-group v-model="value2" disabled>
<wd-checkbox :modelValue="1" shape="button">沃特</wd-checkbox>
<wd-checkbox :modelValue="2" shape="button">商家后台</wd-checkbox>
</wd-checkbox-group>
</demo-block>
</demo-block>
<demo-block :title="`修改 true-value 和 false-value ${value3}`">
<wd-checkbox v-model="value3" true-value="沃特" false-value="商家后台" @change="handleChange1">复选框</wd-checkbox>
</demo-block>
<demo-block :title="`修改 true-value 和 false-value ${value3}`">
<wd-checkbox v-model="value3" true-value="沃特" false-value="商家后台" @change="handleChange1">复选框</wd-checkbox>
</demo-block>
<demo-block title="同行展示">
<wd-checkbox-group v-model="value4" inline>
<wd-checkbox :modelValue="1">沃特</wd-checkbox>
<wd-checkbox :modelValue="2">商家后台</wd-checkbox>
</wd-checkbox-group>
</demo-block>
<demo-block title="同行展示">
<wd-checkbox-group v-model="value4" inline>
<wd-checkbox :modelValue="1">沃特</wd-checkbox>
<wd-checkbox :modelValue="2">商家后台</wd-checkbox>
</wd-checkbox-group>
</demo-block>
<demo-block title="复选框组">
<wd-checkbox-group v-model="value5">
<wd-checkbox :modelValue="1">沃特</wd-checkbox>
<wd-checkbox :modelValue="2">商家后台</wd-checkbox>
</wd-checkbox-group>
</demo-block>
<demo-block title="复选框组">
<wd-checkbox-group v-model="value5">
<wd-checkbox :modelValue="1">沃特</wd-checkbox>
<wd-checkbox :modelValue="2">商家后台</wd-checkbox>
</wd-checkbox-group>
</demo-block>
<demo-block title="表单模式---复选框组" transparent>
<wd-checkbox-group v-model="value6" cell>
<wd-checkbox :modelValue="1">沃特</wd-checkbox>
<wd-checkbox :modelValue="2">商家后台</wd-checkbox>
</wd-checkbox-group>
</demo-block>
<demo-block title="表单模式---复选框组" transparent>
<wd-checkbox-group v-model="value6" cell>
<wd-checkbox :modelValue="1">沃特</wd-checkbox>
<wd-checkbox :modelValue="2">商家后台</wd-checkbox>
</wd-checkbox-group>
</demo-block>
<demo-block title="表单模式---复选框按钮组" transparent>
<wd-checkbox-group v-model="value7" cell shape="button">
<wd-checkbox :modelValue="1" disabled>选项一</wd-checkbox>
<wd-checkbox :modelValue="2">选项二</wd-checkbox>
<wd-checkbox :modelValue="3">选项三</wd-checkbox>
<wd-checkbox :modelValue="4">选项四</wd-checkbox>
<wd-checkbox :modelValue="5">选项五</wd-checkbox>
<wd-checkbox :modelValue="6">选项六</wd-checkbox>
<wd-checkbox :modelValue="7">选项七</wd-checkbox>
</wd-checkbox-group>
</demo-block>
<demo-block title="表单模式---复选框按钮组" transparent>
<wd-checkbox-group v-model="value7" cell shape="button">
<wd-checkbox :modelValue="1" disabled>选项一</wd-checkbox>
<wd-checkbox :modelValue="2">选项二</wd-checkbox>
<wd-checkbox :modelValue="3">选项三</wd-checkbox>
<wd-checkbox :modelValue="4">选项四</wd-checkbox>
<wd-checkbox :modelValue="5">选项五</wd-checkbox>
<wd-checkbox :modelValue="6">选项六</wd-checkbox>
<wd-checkbox :modelValue="7">选项七</wd-checkbox>
</wd-checkbox-group>
</demo-block>
<demo-block title="设置最小选中数量和最大选中数量" transparent>
<wd-checkbox-group v-model="value8" :min="1" :max="3" cell>
<wd-checkbox :modelValue="1">京东</wd-checkbox>
<wd-checkbox :modelValue="2">沃特</wd-checkbox>
<wd-checkbox :modelValue="3">商家后台</wd-checkbox>
<wd-checkbox :modelValue="4">营销中心</wd-checkbox>
</wd-checkbox-group>
</demo-block>
<demo-block title="设置最小选中数量和最大选中数量" transparent>
<wd-checkbox-group v-model="value8" :min="1" :max="3" cell>
<wd-checkbox :modelValue="1">京东</wd-checkbox>
<wd-checkbox :modelValue="2">沃特</wd-checkbox>
<wd-checkbox :modelValue="3">商家后台</wd-checkbox>
<wd-checkbox :modelValue="4">营销中心</wd-checkbox>
</wd-checkbox-group>
</demo-block>
<demo-block title="大尺寸">
<wd-checkbox-group v-model="value9" inline size="large">
<wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
</wd-checkbox-group>
<wd-checkbox-group v-model="value10" size="large" class="group">
<wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
</wd-checkbox-group>
</demo-block>
<demo-block title="大尺寸">
<wd-checkbox-group v-model="value9" inline size="large">
<wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
</wd-checkbox-group>
<wd-checkbox-group v-model="value10" size="large" class="group">
<wd-checkbox modelValue="jingmai">沃特</wd-checkbox>
<wd-checkbox modelValue="shop">商家后台</wd-checkbox>
</wd-checkbox-group>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

86
src/pages/colPicker/Index.vue
View File

@ -1,47 +1,49 @@
<template>
<wd-toast />
<view style="margin: 20px 0">
<wd-cell-group border>
<wd-col-picker label="选择地址" v-model="value1" :columns="areaData1" :column-change="columnChange1" @confirm="handleValue" />
<wd-col-picker label="初始选项" v-model="value2" :columns="areaData2" :column-change="columnChange1" auto-complete />
<wd-col-picker label="禁用" disabled v-model="value3" :columns="areaData3" :column-change="columnChange1" />
<wd-col-picker label="只读" readonly v-model="value3" :columns="areaData3" :column-change="columnChange1" />
<wd-col-picker label="禁用选项" v-model="value4" :columns="areaData4" :column-change="columnChange1" />
<wd-col-picker label="选项提示信息" v-model="value5" :columns="areaData5" :column-change="columnChange1" />
<wd-col-picker label="展示格式化" v-model="value6" :columns="areaData3" :column-change="columnChange1" :display-format="displayFormat" />
<wd-col-picker label="标题" v-model="value7" title="选择地址" :columns="areaData1" :column-change="columnChange1" />
<wd-col-picker label="before-confirm" v-model="value8" :columns="areaData1" :column-change="columnChange1" :before-confirm="beforeConfirm" />
<wd-col-picker label="错误" error v-model="value9" :columns="areaData1" :column-change="columnChange1" />
<wd-col-picker label="必填" required v-model="value10" :columns="areaData1" :column-change="columnChange1" />
</wd-cell-group>
</view>
<demo-block title="一般column-change是个异步获取数据的操作，触发column-change组件会有默认loading，数据响应后关闭loading" transparent>
<wd-col-picker label="选择地址" v-model="value11" :columns="areaData1" :column-change="columnChange2" />
</demo-block>
<demo-block title="label不传" transparent>
<wd-col-picker v-model="value12" :columns="areaData1" :column-change="columnChange1" />
</demo-block>
<demo-block title="大小" transparent>
<wd-col-picker label="选择地址" v-model="value13" size="large" :columns="areaData1" :column-change="columnChange1" />
</demo-block>
<demo-block title="值靠右展示" transparent>
<wd-col-picker label="选择地址" align-right v-model="value14" :columns="areaData1" :column-change="columnChange1" />
</demo-block>
<demo-block title="自定义选择器" transparent>
<view style="margin-left: 15px">
<view style="margin-bottom: 10px">当前选中项: {{ displayValue }}</view>
<wd-col-picker
v-model="value15"
use-default-slot
:columns="areaData1"
:column-change="columnChange1"
style="display: inline-block"
@confirm="handleConfirm"
>
<wd-button>选择地址</wd-button>
</wd-col-picker>
<page-wraper>
<wd-toast />
<view style="margin: 20px 0">
<wd-cell-group border>
<wd-col-picker label="选择地址" v-model="value1" :columns="areaData1" :column-change="columnChange1" @confirm="handleValue" />
<wd-col-picker label="初始选项" v-model="value2" :columns="areaData2" :column-change="columnChange1" auto-complete />
<wd-col-picker label="禁用" disabled v-model="value3" :columns="areaData3" :column-change="columnChange1" />
<wd-col-picker label="只读" readonly v-model="value3" :columns="areaData3" :column-change="columnChange1" />
<wd-col-picker label="禁用选项" v-model="value4" :columns="areaData4" :column-change="columnChange1" />
<wd-col-picker label="选项提示信息" v-model="value5" :columns="areaData5" :column-change="columnChange1" />
<wd-col-picker label="展示格式化" v-model="value6" :columns="areaData3" :column-change="columnChange1" :display-format="displayFormat" />
<wd-col-picker label="标题" v-model="value7" title="选择地址" :columns="areaData1" :column-change="columnChange1" />
<wd-col-picker label="before-confirm" v-model="value8" :columns="areaData1" :column-change="columnChange1" :before-confirm="beforeConfirm" />
<wd-col-picker label="错误" error v-model="value9" :columns="areaData1" :column-change="columnChange1" />
<wd-col-picker label="必填" required v-model="value10" :columns="areaData1" :column-change="columnChange1" />
</wd-cell-group>
</view>
</demo-block>
<demo-block title="一般column-change是个异步获取数据的操作，触发column-change组件会有默认loading，数据响应后关闭loading" transparent>
<wd-col-picker label="选择地址" v-model="value11" :columns="areaData1" :column-change="columnChange2" />
</demo-block>
<demo-block title="label不传" transparent>
<wd-col-picker v-model="value12" :columns="areaData1" :column-change="columnChange1" />
</demo-block>
<demo-block title="大小" transparent>
<wd-col-picker label="选择地址" v-model="value13" size="large" :columns="areaData1" :column-change="columnChange1" />
</demo-block>
<demo-block title="值靠右展示" transparent>
<wd-col-picker label="选择地址" align-right v-model="value14" :columns="areaData1" :column-change="columnChange1" />
</demo-block>
<demo-block title="自定义选择器" transparent>
<view style="margin-left: 15px">
<view style="margin-bottom: 10px">当前选中项: {{ displayValue }}</view>
<wd-col-picker
v-model="value15"
use-default-slot
:columns="areaData1"
:column-change="columnChange1"
style="display: inline-block"
@confirm="handleConfirm"
>
<wd-button>选择地址</wd-button>
</wd-col-picker>
</view>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

6
src/pages/collapse/Index.vue
View File

@ -1,11 +1,11 @@
<template>
<view>
<page-wraper>
<wd-toast></wd-toast>
<demo-block title="基础用法" transparent>
<wd-collapse v-model="value1" @change="handleChange1">
<wd-collapse-item
v-for="(item, index) in itemList"
:before-expend="index === 2 ? beforeExpend : ''"
:before-expend="index === 2 ? beforeExpend : undefined"
:key="index"
:title="item.title"
:name="item.name"
@ -54,7 +54,7 @@
</template>
</wd-collapse>
</demo-block>
</view>
</page-wraper>
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'

309
src/pages/configProvider/Index.vue Normal file
View File

@ -0,0 +1,309 @@
<template>
<page-wraper>
<wd-message-box />
<wd-toast />
<wd-action-sheet :show="showAction" :actions="actions" @close="closeActions" />
<wd-cell-group>
<wd-cell title="弹出菜单" clickable @click="showActions"></wd-cell>
</wd-cell-group>
<form @submit="formSubmit">
<wd-cell-group custom-class="group" title="基础信息" border>
<wd-input
label="优惠券名称"
label-width="100px"
:maxlength="20"
show-word-limit
name="couponName"
required
suffix-icon="warn-bold"
clearable
v-model="couponName"
placeholder="请输入优惠券名称"
@change="handleCouponName"
@clicksuffixicon="handleIconClick"
/>
<wd-select-picker
label="推广平台"
label-width="100px"
name="platform"
v-model="platform"
:columns="platformList"
placeholder="请选择推广平台"
@confirm="handlePlatform"
/>
<wd-picker label="优惠方式" label-width="100px" name="promotion" align-right v-model="promotion" :columns="promotionlist" />
<wd-cell title="券面额" required title-width="100px" custom-value-class="cell-left">
<view style="text-align: left">
<view class="inline-txt" style="margin-left: 0">满</view>
<wd-input
no-border
custom-style="display: inline-block; width: 70px; vertical-align: middle"
placeholder="请输入金额"
v-model="threshold"
name="threshold"
@change="handleThreshold"
/>
<view class="inline-txt">减</view>
<wd-input
no-border
custom-style="display: inline-block; width: 70px; vertical-align: middle"
placeholder="请输入金额"
v-model="price"
name="price"
@change="handlePrice"
/>
</view>
</wd-cell>
</wd-cell-group>
<wd-cell-group custom-class="group" title="时间和地址" border>
<wd-datetime-picker label="时间" label-width="100px" name="date" v-model="date" @confirm="handleDate" />
<wd-col-picker
label="地址"
label-width="100px"
name="address"
v-model="address"
:columns="area"
:column-change="areaChange"
@confirm="handleAddress"
/>
</wd-cell-group>
<wd-cell-group custom-class="group" title="其他信息" border>
<wd-input
label="活动细则"
label-width="100px"
type="textarea"
v-model="content"
:maxlength="300"
show-word-limit
placeholder="请输入活动细则信息"
clearable
name="content"
@change="handleContent"
/>
<wd-cell title="发货数量" center>
<wd-input-number v-model="count" name="count" @change="handleCount" />
</wd-cell>
<wd-cell title="这里显示的是多文字标题包含非常的文字" title-width="240px" center>
<wd-switch v-model="switchVal" name="switchVal" @change="handleSwitch" />
</wd-cell>
<wd-input
label="卡号"
label-width="100px"
name="cardId"
suffix-icon="camera"
placeholder="请输入卡号"
clearable
v-model="cardId"
@change="handleCardId"
/>
<wd-input label="手机号" label-width="100px" name="phone" placeholder="请输入手机号" clearable v-model="phone" @change="handlePhone" />
</wd-cell-group>
<view class="tip">
<wd-checkbox v-model="read" name="read" @change="handleRead" custom-label-class="label-class">
已阅读并同意
<text style="color: #4d80f0">《借款额度合同及相关授权》</text>
</wd-checkbox>
</view>
<view class="footer">
<button class="wd-button is-primary is-block is-round is-large" form-type="submit">提交</button>
</view>
</form>
</page-wraper>
</template>
<script setup lang="ts">
import { useToast, useMessage } from '@/uni_modules/wot-design-uni'
import { areaData } from '@/utils/area'
import { computed, ref } from 'vue'
const showAction = ref<boolean>(false)
const actions = ref<any[]>([])
const couponName = ref<string>('')
const couponNameErr = ref<boolean>(false)
const platform = ref<any>([])
const platformList = ref<any>([
{
value: '1',
label: '京东'
},
{
value: '2',
label: '开普勒'
},
{
value: '3',
label: '手Q'
},
{
value: '4',
label: '微信'
},
{
value: '5',
label: '1号店'
},
{
value: '6',
label: '十元街'
},
{
value: '7',
label: '京东极速版'
}
])
const promotion = ref<string>('1')
const promotionlist = ref<any[]>([
{
value: '1',
label: '满减'
},
{
value: '2',
label: '无门槛'
}
])
const threshold = ref<string>('')
const price = ref<string>('')
const date = ref<Date>(new Date())
const address = ref<any[]>([])
const count = ref<number>(1)
const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
return {
value: key,
label: areaData[86][key]
}
})
])
const areaChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
return {
value: key,
label: areaData[selectedItem.value][key]
}
})
)
} else {
finish()
}
}
const content = ref<string>('')
const coun = ref<number>(1)
const read = ref<boolean>(false)
const switchVal = ref<boolean>(true)
const cardId = ref<string>('')
const phone = ref<string>('')
const toast = useToast()
const messageBox = useMessage()
function closeActions() {
showAction.value = false
}
function showActions() {
showAction.value = true
actions.value = [
{
name: '选项1'
},
{
name: '选项2'
},
{
name: '选项3',
subname: '描述信息'
}
]
}
function handleCouponName({ value }) {
console.log(value)
couponNameErr.value = false
}
function handlePlatform({ value }) {
console.log(value)
}
function handleThreshold({ value }) {
console.log(value)
}
function handlePrice({ value }) {
console.log(value)
}
function handleAddress({ value }) {
console.log(value)
}
function handleContent({ value }) {
console.log(value)
}
function handleCount({ value }) {
console.log(value)
}
function handleSwitch({ value }) {
console.log(value)
}
function handleRead({ value }) {
read.value = value
}
function handleCardId({ value }) {
console.log(value)
}
function handlePhone({ value }) {
console.log(value)
}
function formSubmit(event) {
console.log(event)
if (!couponName.value) {
toast.error('请填写优惠券名称')
return
}
messageBox.alert('提交成功')
}
function handleIconClick() {
toast.info('优惠券提示信息')
}
function handleDate({ value }) {
console.log(value)
}
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.inline-txt {
color: $-dark-color;
}
}
.custom-value {
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
white-space: nowrap;
}
.inline-txt {
display: inline-block;
font-size: 14px;
margin: 0 8px;
color: rgba(0, 0, 0, 0.45);
vertical-align: middle;
}
:deep(.group) {
margin-top: 12px;
}
.tip {
margin: 10px 15px 21px;
color: #999;
font-size: 12px;
}
.footer {
padding: 0 25px 21px;
}
:deep(.label-class) {
color: #999 !important;
font-size: 12px !important;
}
</style>

20
src/pages/curtain/Index.vue
View File

@ -1,5 +1,5 @@
<template>
<view>
<page-wraper>
<demo-block title="基本用法">
<wd-button @click="handleClick1">关闭按钮在内部</wd-button>
</demo-block>
@ -19,23 +19,23 @@
<wd-button @click="handleClick8">点击遮罩关闭</wd-button>
</demo-block>
<wd-curtain :value="value1" :src="img" :to="link" @close="handleClose1" width="280"></wd-curtain>
<wd-curtain :value="value2" :src="img" :to="link" close-position="top-left" width="200" @close="handleClose2"></wd-curtain>
<wd-curtain :value="value3" :src="img" :to="link" close-position="top" width="200" @close="handleClose3"></wd-curtain>
<wd-curtain :value="value4" :src="img" :to="link" close-position="top-right" width="240" @close="handleClose4"></wd-curtain>
<wd-curtain :value="value5" :src="img" :to="link" close-position="bottom-left" width="240" @close="handleClose5"></wd-curtain>
<wd-curtain :value="value6" :src="img" :to="link" close-position="bottom" width="240" @close="handleClose6"></wd-curtain>
<wd-curtain :value="value7" :src="img" :to="link" close-position="bottom-right" width="240" @close="handleClose7"></wd-curtain>
<wd-curtain :value="value1" :src="img" :to="link" @close="handleClose1" :width="280"></wd-curtain>
<wd-curtain :value="value2" :src="img" :to="link" close-position="top-left" :width="200" @close="handleClose2"></wd-curtain>
<wd-curtain :value="value3" :src="img" :to="link" close-position="top" :width="200" @close="handleClose3"></wd-curtain>
<wd-curtain :value="value4" :src="img" :to="link" close-position="top-right" :width="240" @close="handleClose4"></wd-curtain>
<wd-curtain :value="value5" :src="img" :to="link" close-position="bottom-left" :width="240" @close="handleClose5"></wd-curtain>
<wd-curtain :value="value6" :src="img" :to="link" close-position="bottom" :width="240" @close="handleClose6"></wd-curtain>
<wd-curtain :value="value7" :src="img" :to="link" close-position="bottom-right" :width="240" @close="handleClose7"></wd-curtain>
<wd-curtain
:value="value8"
:src="img"
:to="link"
close-position="bottom-right"
width="240"
:width="240"
@close="handleClose8"
:close-on-click-modal="true"
></wd-curtain>
</view>
</page-wraper>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

64
src/pages/datetimePicker/Index.vue
View File

@ -1,35 +1,37 @@
<template>
<wd-toast />
<demo-block transparent>
<wd-cell-group border>
<wd-datetime-picker label="日期选择" v-model="value1" @confirm="handleConfirm1" />
<wd-datetime-picker label="年月日" v-model="value2" type="date" @confirm="handleConfirm2" />
<wd-datetime-picker label="年月" v-model="value3" type="year-month" @confirm="handleConfirm3" />
<wd-datetime-picker label="时分" v-model="value4" type="time" @confirm="handleConfirm4" />
<wd-datetime-picker label="展示格式" v-model="value5" :display-format="displayFormat" @confirm="handleConfirm5" />
<wd-datetime-picker label="内部格式" v-model="value6" :formatter="formatter" @confirm="handleConfirm6" />
<wd-datetime-picker label="过滤选项" v-model="value7" :filter="filter" @confirm="handleConfirm7" />
<wd-datetime-picker label="before-confirm" v-model="value8" :before-confirm="beforeConfirm" @confirm="handleConfirm8" />
<wd-datetime-picker label="错误" v-model="value9" error @confirm="handleConfirm9" />
<wd-datetime-picker label="必填" v-model="value10" required @confirm="handleConfirm10" />
<wd-datetime-picker label="默认日期" v-model="value2" :default-value="value2" />
</wd-cell-group>
</demo-block>
<demo-block title="label 不传" transparent>
<wd-datetime-picker v-model="value11" @confirm="handleConfirm11" />
</demo-block>
<demo-block title="大小" transparent>
<wd-datetime-picker label="日期选择" size="large" v-model="value12" @confirm="handleConfirm12" />
</demo-block>
<demo-block title="值靠右展示" transparent>
<wd-datetime-picker label="日期选择" align-right v-model="value13" @confirm="handleConfirm13" />
</demo-block>
<demo-block title="区域选择" transparent>
<wd-datetime-picker label="日期选择" v-model="value14" @confirm="handleConfirm14" />
</demo-block>
<demo-block title="范围tab展示格式" transparent>
<wd-datetime-picker label="日期选择" v-model="value15" @confirm="handleConfirm15" :display-format-tab-label="displayFormatTabLabel" />
</demo-block>
<page-wraper>
<wd-toast />
<demo-block transparent>
<wd-cell-group border>
<wd-datetime-picker label="日期选择" v-model="value1" @confirm="handleConfirm1" />
<wd-datetime-picker label="年月日" v-model="value2" type="date" @confirm="handleConfirm2" />
<wd-datetime-picker label="年月" v-model="value3" type="year-month" @confirm="handleConfirm3" />
<wd-datetime-picker label="时分" v-model="value4" type="time" @confirm="handleConfirm4" />
<wd-datetime-picker label="展示格式" v-model="value5" :display-format="displayFormat" @confirm="handleConfirm5" />
<wd-datetime-picker label="内部格式" v-model="value6" :formatter="formatter" @confirm="handleConfirm6" />
<wd-datetime-picker label="过滤选项" v-model="value7" :filter="filter" @confirm="handleConfirm7" />
<wd-datetime-picker label="before-confirm" v-model="value8" :before-confirm="beforeConfirm" @confirm="handleConfirm8" />
<wd-datetime-picker label="错误" v-model="value9" error @confirm="handleConfirm9" />
<wd-datetime-picker label="必填" v-model="value10" required @confirm="handleConfirm10" />
<wd-datetime-picker label="默认日期" v-model="value2" :default-value="value2" />
</wd-cell-group>
</demo-block>
<demo-block title="label 不传" transparent>
<wd-datetime-picker v-model="value11" @confirm="handleConfirm11" />
</demo-block>
<demo-block title="大小" transparent>
<wd-datetime-picker label="日期选择" size="large" v-model="value12" @confirm="handleConfirm12" />
</demo-block>
<demo-block title="值靠右展示" transparent>
<wd-datetime-picker label="日期选择" align-right v-model="value13" @confirm="handleConfirm13" />
</demo-block>
<demo-block title="区域选择" transparent>
<wd-datetime-picker label="日期选择" v-model="value14" @confirm="handleConfirm14" />
</demo-block>
<demo-block title="范围tab展示格式" transparent>
<wd-datetime-picker label="日期选择" v-model="value15" @confirm="handleConfirm15" :display-format-tab-label="displayFormatTabLabel" />
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'

40
src/pages/datetimePickerView/Index.vue
View File

@ -1,28 +1,30 @@
<template>
<wd-toast />
<demo-block title="日期选择" transparent>
<wd-datetime-picker-view v-model="value1" @change="onChange1" />
</demo-block>
<page-wraper>
<wd-toast />
<demo-block title="日期选择" transparent>
<wd-datetime-picker-view v-model="value1" @change="onChange1" />
</demo-block>
<demo-block title="年月日" transparent>
<wd-datetime-picker-view type="date" v-model="value2" @change="onChange2" />
</demo-block>
<demo-block title="年月日" transparent>
<wd-datetime-picker-view type="date" v-model="value2" @change="onChange2" />
</demo-block>
<demo-block title="年月" transparent>
<wd-datetime-picker-view type="year-month" v-model="value3" @change="onChange3" />
</demo-block>
<demo-block title="年月" transparent>
<wd-datetime-picker-view type="year-month" v-model="value3" @change="onChange3" />
</demo-block>
<demo-block title="时分" transparent>
<wd-datetime-picker-view type="time" v-model="value4" @change="onChange4" />
</demo-block>
<demo-block title="时分" transparent>
<wd-datetime-picker-view type="time" v-model="value4" @change="onChange4" />
</demo-block>
<demo-block title="内部格式" transparent>
<wd-datetime-picker-view v-model="value5" :formatter="formatter" @change="onChange5" />
</demo-block>
<demo-block title="内部格式" transparent>
<wd-datetime-picker-view v-model="value5" :formatter="formatter" @change="onChange5" />
</demo-block>
<demo-block title="过滤选项" transparent>
<wd-datetime-picker-view v-model="value6" :filter="filter" @change="onChange6" />
</demo-block>
<demo-block title="过滤选项" transparent>
<wd-datetime-picker-view v-model="value6" :filter="filter" @change="onChange6" />
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'

16
src/pages/divider/Index.vue
View File

@ -1,19 +1,21 @@
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-06-14 18:47:38
* @LastEditTime: 2023-08-07 20:19:49
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\divider\Index.vue
* 记得注释
-->
<template>
<demo-block title="基本用法" transparent>
<wd-divider>这是分割线</wd-divider>
</demo-block>
<demo-block title="自定义颜色" transparent>
<wd-divider color="#4D80F0">自定义颜色</wd-divider>
</demo-block>
<page-wraper>
<demo-block title="基本用法" transparent>
<wd-divider>这是分割线</wd-divider>
</demo-block>
<demo-block title="自定义颜色" transparent>
<wd-divider color="#4D80F0">自定义颜色</wd-divider>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped></style>

101
src/pages/dropMenu/Index.vue
View File

@ -1,48 +1,50 @@
<template>
<view class="demo-body" @click="clickoutside">
<demo-block title="基本用法" transparent>
<wd-drop-menu>
<wd-drop-menu-item v-model="value1" :options="option1" @change="handleChange1" />
<wd-drop-menu-item v-model="value2" :options="option2" @change="handleChange2" />
</wd-drop-menu>
</demo-block>
<demo-block title="自定义菜单内容" transparent>
<wd-drop-menu>
<wd-drop-menu-item v-model="value3" :options="option1" @change="handleChange3" />
<wd-drop-menu-item ref="dropMenu" title="筛选">
<view>
<wd-cell title="标题文字" value="内容" />
<wd-cell title="标题文字" label="描述信息" value="内容" />
<view style="padding: 0 10px 20px; box-sizing: border-box">
<wd-button block size="large" @click="confirm">主要按钮</wd-button>
</view>
</view>
</wd-drop-menu-item>
</wd-drop-menu>
</demo-block>
<demo-block title="自定义菜单选项" transparent>
<view style="display: flex; background: #fff; text-align: center">
<wd-drop-menu style="flex: 1; min-width: 0">
<wd-drop-menu-item v-model="value4" :options="option1" @change="handleChange4" />
<page-wraper>
<view class="demo-body" @click="clickoutside">
<demo-block title="基本用法" transparent>
<wd-drop-menu>
<wd-drop-menu-item v-model="value1" :options="option1" @change="handleChange1" />
<wd-drop-menu-item v-model="value2" :options="option2" @change="handleChange2" />
</wd-drop-menu>
<view style="flex: 1">
<wd-sort-button v-model="value5" title="上架时间" @change="handleChange5" />
</demo-block>
<demo-block title="自定义菜单内容" transparent>
<wd-drop-menu>
<wd-drop-menu-item v-model="value3" :options="option1" @change="handleChange3" />
<wd-drop-menu-item ref="dropMenu" title="筛选">
<view>
<wd-cell title="标题文字" value="内容" />
<wd-cell title="标题文字" label="描述信息" value="内容" />
<view style="padding: 0 10px 20px; box-sizing: border-box">
<wd-button block size="large" @click="confirm">主要按钮</wd-button>
</view>
</view>
</wd-drop-menu-item>
</wd-drop-menu>
</demo-block>
<demo-block title="自定义菜单选项" transparent>
<view class="custom-menu">
<wd-drop-menu style="flex: 1; min-width: 0">
<wd-drop-menu-item v-model="value4" :options="option1" @change="handleChange4" />
</wd-drop-menu>
<view style="flex: 1">
<wd-sort-button v-model="value5" title="上架时间" @change="handleChange5" />
</view>
</view>
</view>
</demo-block>
<demo-block title="向上弹出" transparent>
<wd-drop-menu direction="up">
<wd-drop-menu-item v-model="value6" :options="option1" @change="handleChange6" />
<wd-drop-menu-item v-model="value7" :options="option2" @change="handleChange7" />
</wd-drop-menu>
</demo-block>
<demo-block title="禁用" transparent>
<wd-drop-menu direction="up">
<wd-drop-menu-item v-model="value8" disabled :options="option1" @change="handleChange8" />
<wd-drop-menu-item v-model="value9" :options="option2" @change="handleChange9" />
</wd-drop-menu>
</demo-block>
</view>
</demo-block>
<demo-block title="向上弹出" transparent>
<wd-drop-menu direction="up">
<wd-drop-menu-item v-model="value6" :options="option1" @change="handleChange6" />
<wd-drop-menu-item v-model="value7" :options="option2" @change="handleChange7" />
</wd-drop-menu>
</demo-block>
<demo-block title="禁用" transparent>
<wd-drop-menu direction="up">
<wd-drop-menu-item v-model="value8" disabled :options="option1" @change="handleChange8" />
<wd-drop-menu-item v-model="value9" :options="option2" @change="handleChange9" />
</wd-drop-menu>
</demo-block>
</view>
</page-wraper>
</template>
<script lang="ts" setup>
import { clickOut } from '@/uni_modules/wot-design-uni'
@ -60,12 +62,12 @@ const value6 = ref<number>(0)
const value7 = ref<number>(0)
const value8 = ref<number>(0)
const value9 = ref<number>(0)
const option1 = ref<Record<string, any>>([
const option1 = ref<Record<string, any>[]>([
{ label: '全部商品', value: 0 },
{ label: '新款商品', value: 1, tip: '这是补充信息' },
{ label: '这是比较长的筛选条件这是比较长的筛选条件', value: 2 }
])
const option2 = ref<Record<string, any>>([
const option2 = ref<Record<string, any>[]>([
{ label: '综合', value: 0 },
{ label: '销量', value: 1 },
{ label: '上架时间', value: 2 }
@ -108,7 +110,18 @@ function confirm() {
}
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.custom-menu {
background: $-dark-background2;
}
}
.demo-body {
height: 100vh;
}
.custom-menu {
display: flex;
background: #fff;
text-align: center;
}
</style>

207
src/pages/form/Index.vue
View File

@ -1,108 +1,112 @@
<template>
<wd-message-box id="wd-message-box" />
<wd-toast />
<form @submit="formSubmit">
<wd-cell-group custom-class="group" title="基础信息" border>
<wd-input
label="优惠券名称"
label-width="100px"
:maxlength="20"
show-word-limit
name="couponName"
required
suffix-icon="warn-bold"
clearable
v-model="couponName"
placeholder="请输入优惠券名称"
@change="handleCouponName"
@clicksuffixicon="handleIconClick"
/>
<wd-select-picker
label="推广平台"
label-width="100px"
name="platform"
v-model="platform"
:columns="platformList"
placeholder="请选择推广平台"
@confirm="handlePlatform"
/>
<wd-picker label="优惠方式" label-width="100px" name="promotion" align-right v-model="promotion" :columns="promotionlist" />
<wd-cell title="券面额" required title-width="100px" custom-value-class="cell-left">
<view style="text-align: left">
<view class="inline-txt" style="margin-left: 0">满</view>
<view>
<page-wraper>
<wd-message-box />
<wd-toast />
<form @submit="formSubmit">
<wd-cell-group custom-class="group" title="基础信息" border>
<wd-input
no-border
custom-style="display: inline-block; width: 70px; vertical-align: middle"
placeholder="请输入金额"
v-model="threshold"
name="threshold"
@change="handleThreshold"
label="优惠券名称"
label-width="100px"
:maxlength="20"
show-word-limit
name="couponName"
required
suffix-icon="warn-bold"
clearable
v-model="couponName"
placeholder="请输入优惠券名称"
@change="handleCouponName"
@clicksuffixicon="handleIconClick"
/>
<view class="inline-txt">减</view>
<wd-select-picker
label="推广平台"
label-width="100px"
name="platform"
v-model="platform"
:columns="platformList"
placeholder="请选择推广平台"
@confirm="handlePlatform"
/>
<wd-picker label="优惠方式" label-width="100px" name="promotion" align-right v-model="promotion" :columns="promotionlist" />
<wd-cell title="券面额" required title-width="100px" custom-value-class="cell-left">
<view style="text-align: left">
<view class="inline-txt" style="margin-left: 0">满</view>
<wd-input
no-border
custom-style="display: inline-block; width: 70px; vertical-align: middle"
placeholder="请输入金额"
v-model="threshold"
name="threshold"
@change="handleThreshold"
/>
<view class="inline-txt">减</view>
<wd-input
no-border
custom-style="display: inline-block; width: 70px; vertical-align: middle"
placeholder="请输入金额"
v-model="price"
name="price"
@change="handlePrice"
/>
</view>
</wd-cell>
</wd-cell-group>
<wd-cell-group custom-class="group" title="时间和地址" border>
<wd-datetime-picker label="时间" label-width="100px" name="date" v-model="date" @confirm="handleDate" />
<wd-col-picker
label="地址"
label-width="100px"
name="address"
v-model="address"
:columns="area"
:column-change="areaChange"
@confirm="handleAddress"
/>
</wd-cell-group>
<wd-cell-group custom-class="group" title="其他信息" border>
<wd-input
no-border
custom-style="display: inline-block; width: 70px; vertical-align: middle"
placeholder="请输入金额"
v-model="price"
name="price"
@change="handlePrice"
label="活动细则"
label-width="100px"
type="textarea"
v-model="content"
:maxlength="300"
show-word-limit
placeholder="请输入活动细则信息"
clearable
name="content"
@change="handleContent"
/>
<wd-cell title="发货数量" center>
<wd-input-number v-model="count" name="count" @change="handleCount" />
</wd-cell>
<wd-cell title="这里显示的是多文字标题包含非常的文字" title-width="240px" center>
<wd-switch v-model="switchVal" name="switchVal" @change="handleSwitch" />
</wd-cell>
<wd-input
label="卡号"
label-width="100px"
name="cardId"
suffix-icon="camera"
placeholder="请输入卡号"
clearable
v-model="cardId"
@change="handleCardId"
/>
<wd-input label="手机号" label-width="100px" name="phone" placeholder="请输入手机号" clearable v-model="phone" @change="handlePhone" />
</wd-cell-group>
<view class="tip">
<wd-checkbox v-model="read" name="read" @change="handleRead" custom-label-class="label-class">
已阅读并同意
<text style="color: #4d80f0">《借款额度合同及相关授权》</text>
</wd-checkbox>
</view>
</wd-cell>
</wd-cell-group>
<wd-cell-group custom-class="group" title="时间和地址" border>
<wd-datetime-picker label="时间" label-width="100px" name="date" v-model="date" @confirm="handleDate" />
<wd-col-picker
label="地址"
label-width="100px"
name="address"
v-model="address"
:columns="area"
:column-change="areaChange"
@confirm="handleAddress"
/>
</wd-cell-group>
<wd-cell-group custom-class="group" title="其他信息" border>
<wd-input
label="活动细则"
label-width="100px"
type="textarea"
v-model="content"
:maxlength="300"
show-word-limit
placeholder="请输入活动细则信息"
clearable
name="content"
@change="handleContent"
/>
<wd-cell title="发货数量" center>
<wd-input-number v-model="count" name="count" @change="handleCount" />
</wd-cell>
<wd-cell title="这里显示的是多文字标题包含非常的文字" title-width="240px" center>
<wd-switch v-model="switchVal" name="switchVal" @change="handleSwitch" />
</wd-cell>
<wd-input
label="卡号"
label-width="100px"
name="cardId"
suffix-icon="camera"
placeholder="请输入卡号"
clearable
v-model="cardId"
@change="handleCardId"
/>
<wd-input label="手机号" label-width="100px" name="phone" placeholder="请输入手机号" clearable v-model="phone" @change="handlePhone" />
</wd-cell-group>
<view class="tip">
<wd-checkbox v-model="read" name="read" @change="handleRead" custom-label-class="label-class">
已阅读并同意
<text style="color: #4d80f0">《借款额度合同及相关授权》</text>
</wd-checkbox>
</view>
<view class="footer">
<button class="wd-button is-primary is-block is-round is-large" form-type="submit">提交</button>
</view>
</form>
<view class="footer">
<button class="wd-button is-primary is-block is-round is-large" form-type="submit">提交</button>
</view>
</form>
</page-wraper>
</view>
</template>
<script lang="ts" setup>
import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box'
@ -245,6 +249,11 @@ function handleDate({ value }) {
}
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.inline-txt {
color: $-dark-color3;
}
}
.inline-txt {
display: inline-block;
font-size: 14px;

281
src/pages/grid/Index.vue
View File

@ -1,139 +1,143 @@
<template>
<wd-toast />
<view>
<demo-block title="基本用法" transparent>
<wd-grid>
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
</wd-grid>
</demo-block>
<demo-block title="自定义列数" transparent>
<wd-grid :column="3">
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
</wd-grid>
</demo-block>
<demo-block title="自定义背景颜色">
<wd-grid bg-color="rgba(0, 0, 0, 0.02)">
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
</wd-grid>
</demo-block>
<demo-block title="显示border">
<wd-grid :column="3" border>
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
</wd-grid>
</demo-block>
<demo-block title="内容插槽" transparent>
<wd-grid>
<wd-grid-item use-slot>
<image class="img" :src="joy" />
</wd-grid-item>
<wd-grid-item use-slot>
<image class="img" :src="joy" />
</wd-grid-item>
<wd-grid-item use-slot>
<image class="img" :src="joy" />
</wd-grid-item>
</wd-grid>
</demo-block>
<demo-block title="图标插槽" transparent>
<wd-grid>
<wd-grid-item use-icon-slot text="文字" icon-size="36px">
<template #icon>
<image class="slot-img" :src="img" />
</template>
</wd-grid-item>
<wd-grid-item use-icon-slot text="文字" icon-size="36px">
<template #icon>
<image class="slot-img" :src="img" />
</template>
</wd-grid-item>
<wd-grid-item use-icon-slot text="文字" icon-size="36px">
<template #icon>
<image class="slot-img" :src="img" />
</template>
</wd-grid-item>
</wd-grid>
</demo-block>
<demo-block title="文字插槽" transparent>
<wd-grid>
<wd-grid-item use-text-slot icon="picture">
<template #text>
<view class="text">自定义文字插槽</view>
</template>
</wd-grid-item>
<wd-grid-item use-text-slot icon="picture">
<template #text>
<view class="text">自定义文字插槽</view>
</template>
</wd-grid-item>
<wd-grid-item use-text-slot icon="picture">
<template #text>
<view class="text">自定义文字插槽</view>
</template>
</wd-grid-item>
</wd-grid>
</demo-block>
<demo-block title="自定义样式" transparent>
<wd-grid>
<wd-grid-item
custom-class="custom-item"
icon="search"
text="京东JD.COM-专业的综合网上购物商城，销售超数万品牌、4020万种商品，囊括家电、手机、电脑、母婴、服装等13大品类。"
/>
<wd-grid-item custom-class="custom-item" icon="setting" text="秉承客户为先的理念，京东所售商品为正品行货、全国联保、机打发票。" />
</wd-grid>
</demo-block>
<demo-block title="正方形格子" transparent>
<wd-grid square :column="4" :gutter="10">
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
</wd-grid>
</demo-block>
<demo-block title="设定格间隙" transparent>
<wd-grid :gutter="10" :column="4">
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
</wd-grid>
</demo-block>
<demo-block title="页面导航" transparent>
<wd-grid clickable>
<wd-grid-item link-type="redirectTo" url="/pages/button/index" @itemclick="click" icon="edit-outline" text="Redirect to ..." />
<wd-grid-item link-type="navigateTo" url="/pages/button/index" @itemclick="click" icon="edit-outline" text="Navigate to ..." />
</wd-grid>
</demo-block>
<demo-block title="提示信息" transparent>
<wd-grid>
<wd-grid-item is-dot icon="goods" text="文字" />
<wd-grid-item value="100" :max="99" icon="computer" text="文字" />
</wd-grid>
</demo-block>
<page-wraper>
<wd-toast />
<view class="grid">
<demo-block title="基本用法" transparent>
<wd-grid>
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
</wd-grid>
</demo-block>
<demo-block title="自定义列数" transparent>
<wd-grid :column="3">
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
</wd-grid>
</demo-block>
<demo-block title="自定义背景颜色">
<wd-grid bg-color="rgba(0, 0, 0, 0.02)">
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
</wd-grid>
</demo-block>
<demo-block title="显示border">
<wd-grid :column="3" border>
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
</wd-grid>
</demo-block>
<demo-block title="内容插槽" transparent>
<wd-grid>
<wd-grid-item use-slot>
<image class="img" :src="joy" />
</wd-grid-item>
<wd-grid-item use-slot>
<image class="img" :src="joy" />
</wd-grid-item>
<wd-grid-item use-slot>
<image class="img" :src="joy" />
</wd-grid-item>
</wd-grid>
</demo-block>
<demo-block title="图标插槽" transparent>
<wd-grid>
<wd-grid-item use-icon-slot text="文字" icon-size="36px">
<template #icon>
<image class="slot-img" :src="img" />
</template>
</wd-grid-item>
<wd-grid-item use-icon-slot text="文字" icon-size="36px">
<template #icon>
<image class="slot-img" :src="img" />
</template>
</wd-grid-item>
<wd-grid-item use-icon-slot text="文字" icon-size="36px">
<template #icon>
<image class="slot-img" :src="img" />
</template>
</wd-grid-item>
</wd-grid>
</demo-block>
<demo-block title="文字插槽" transparent>
<wd-grid>
<wd-grid-item use-text-slot icon="picture">
<template #text>
<view class="text">自定义文字插槽</view>
</template>
</wd-grid-item>
<wd-grid-item use-text-slot icon="picture">
<template #text>
<view class="text">自定义文字插槽</view>
</template>
</wd-grid-item>
<wd-grid-item use-text-slot icon="picture">
<template #text>
<view class="text">自定义文字插槽</view>
</template>
</wd-grid-item>
</wd-grid>
</demo-block>
<demo-block title="自定义样式" transparent>
<wd-grid>
<wd-grid-item
custom-class="custom-item"
icon="search"
text="京东JD.COM-专业的综合网上购物商城，销售超数万品牌、4020万种商品，囊括家电、手机、电脑、母婴、服装等13大品类。"
/>
<wd-grid-item custom-class="custom-item" icon="setting" text="秉承客户为先的理念，京东所售商品为正品行货、全国联保、机打发票。" />
</wd-grid>
</demo-block>
<demo-block title="正方形格子" transparent>
<wd-grid square :column="4" :gutter="10">
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
</wd-grid>
</demo-block>
<demo-block title="设定格间隙" transparent>
<wd-grid :gutter="10" :column="4">
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
</wd-grid>
</demo-block>
<demo-block title="页面导航" transparent>
<wd-grid clickable>
<wd-grid-item link-type="redirectTo" url="/pages/button/index" @itemclick="click" icon="edit-outline" text="Redirect to ..." />
<wd-grid-item link-type="navigateTo" url="/pages/button/index" @itemclick="click" icon="edit-outline" text="Navigate to ..." />
</wd-grid>
</demo-block>
<demo-block title="提示信息" transparent>
<wd-grid>
<wd-grid-item is-dot icon="goods" text="文字" />
<wd-grid-item :value="100" :max="99" icon="computer" text="文字" />
</wd-grid>
</demo-block>
</view>
</page-wraper>
</view>
</template>
<script lang="ts" setup>
@ -149,6 +153,15 @@ function click() {
}
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.grid {
:deep(.custom-item) {
color: #e2231a;
background: $-dark-background2;
}
}
}
:deep(.custom-item) {
height: 80px !important;
color: #e2231a;

29
src/pages/icon/Index.vue
View File

@ -1,9 +1,13 @@
<template>
<view class="icon-list">
<view v-for="(icon, index) in icons" :key="index" class="icon-item">
<view><wd-icon :name="icon" size="22px" /></view>
<view class="icon-item-name">{{ icon }}</view>
</view>
<view>
<page-wraper>
<view class="icon-list">
<view v-for="(icon, index) in icons" :key="index" class="icon-item">
<view><wd-icon :name="icon" size="22px" custom-class="icon-item-class" /></view>
<view class="icon-item-name">{{ icon }}</view>
</view>
</view>
</page-wraper>
</view>
</template>
<script setup lang="ts">
@ -75,9 +79,22 @@ const icons = ref([
])
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.icon-list {
background: $-dark-background2;
:deep(.icon-item-class) {
color: $-dark-color;
}
}
.icon-item-name {
color: $-dark-color3;
}
}
.icon-list {
box-sizing: border-box;
display: flex;
margin: 15px;
padding: 15px;
flex-wrap: wrap;
background: #fff;
}

36
src/pages/img/Index.vue
View File

@ -1,21 +1,23 @@
<template>
<demo-block title="基本用法">
<wd-img :width="100" :height="100" :src="joy" />
<!-- 以组件位置为定位原点 -->
<wd-img :width="100" :height="100" :src="img" custom-class="border" />
</demo-block>
<demo-block title="填充">
<view class="col" v-for="(mode, index) in modes" :key="index">
<wd-img width="100%" height="27vw" :src="joy" :mode="mode" />
<view class="center">{{ mode }}</view>
</view>
</demo-block>
<demo-block title="圆形">
<view class="col" v-for="(mode, index) in modes" :key="index">
<wd-img round width="100%" height="27vw" :src="joy" :mode="mode" />
<view class="center">{{ mode }}</view>
</view>
</demo-block>
<page-wraper>
<demo-block title="基本用法">
<wd-img :width="100" :height="100" :src="joy" />
<!-- 以组件位置为定位原点 -->
<wd-img :width="100" :height="100" :src="img" custom-class="border" />
</demo-block>
<demo-block title="填充">
<view class="col" v-for="(mode, index) in modes" :key="index">
<wd-img width="100%" height="27vw" :src="joy" :mode="mode" />
<view class="center">{{ mode }}</view>
</view>
</demo-block>
<demo-block title="圆形">
<view class="col" v-for="(mode, index) in modes" :key="index">
<wd-img round width="100%" height="27vw" :src="joy" :mode="mode" />
<view class="center">{{ mode }}</view>
</view>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { joy } from '../images/joy'

54
src/pages/imgCropper/Index.vue
View File

@ -1,31 +1,24 @@
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-06-26 23:22:26
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\imgCropper\Index.vue
* 记得注释
-->
<template>
<demo-block title="基本用法" style="text-align: center">
<wd-img-cropper
id="wd-img-cropper"
v-model="show"
:img-src="src"
@confirm="handleConfirm"
@cancel="handleCancel"
@imgloaderror="imgLoaderror"
@imgloaded="imgLoaded"
></wd-img-cropper>
<view class="profile">
<view v-if="!imgSrc" class="img" @click="upload">
<wd-icon name="fill-camera" custom-class="img-icon"></wd-icon>
<page-wraper>
<demo-block title="基本用法" style="text-align: center">
<wd-img-cropper
id="wd-img-cropper"
v-model="show"
:img-src="src"
@confirm="handleConfirm"
@cancel="handleCancel"
@imgloaderror="imgLoaderror"
@imgloaded="imgLoaded"
></wd-img-cropper>
<view class="profile">
<view v-if="!imgSrc" class="img" @click="upload">
<wd-icon name="fill-camera" custom-class="img-icon"></wd-icon>
</view>
<wd-img v-if="imgSrc" round width="200px" height="200px" :src="imgSrc" mode="aspectFit" custom-class="profile-img" @click="upload" />
<view style="font-size: 14px">点击上传头像</view>
</view>
<wd-img v-if="imgSrc" round width="200px" height="200px" :src="imgSrc" mode="aspectFit" custom-class="profile-img" @click="upload" />
<view style="font-size: 14px">点击上传头像</view>
</view>
</demo-block>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
@ -59,6 +52,15 @@ function handleCancel(event) {
}
</script>
<style lang="scss" scoped>
.wot-theme-dark {
:deep(.profile-img) {
border: 1px solid $-dark-border-color;
}
.img {
background-color: $-dark-background4;
}
}
.profile {
display: flex;
flex-direction: column;

77
src/pages/index/Index.vue
View File

@ -1,36 +1,38 @@
<template>
<!--index.jxml-->
<view class="page">
<view class="page__hd">
<view class="page__title">
<view class="logo"></view>
<view class="inline">Wot Design Uni</view>
<page-wraper>
<view class="page">
<view class="page__hd">
<view class="page__title">
<view class="logo"></view>
<view class="inline">Wot Design Uni</view>
</view>
<view class="page__desc">
Wot Design Uni 是移动端 Vue 组件库 Wot Design 的 uni-app 版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建 uni-app
应用。
</view>
</view>
<view class="page__desc">
Wot Design Uni 是移动端 Vue 组件库 Wot Design 的 uni-app 版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建 uni-app 应用。
</view>
</view>
<view class="page__bd">
<block v-for="(item, index) in list" :key="index">
<view class="kind-list__item">
<view :id="item.id" class="wd-flex kind-list__item-hd" @click="kindToggle(item.id)">
<view class="wd-flex__item title">{{ item.name }}</view>
<image class="kind-list__img" :src="item.icon"></image>
</view>
<view :class="['kind-list__item-bd', item.open ? 'kind-list__item-bd_show' : '']">
<view :class="['wd-cells', item.open ? 'wd-cells_show' : '']">
<block v-for="(page, j) in item.pages" :key="j">
<navigator :url="`/pages/${page.id}/Index`" class="wd-cell wd-flex wd-cell_access">
<view class="wd-flex__item page-name">{{ page.name }}</view>
<view class="wd-cell__ft wd-tool-right-line-angle"></view>
</navigator>
</block>
<view class="page__bd">
<block v-for="(item, index) in list" :key="index">
<view class="kind-list__item">
<view :id="item.id" class="wd-flex kind-list__item-hd" @click="kindToggle(item.id)">
<view class="wd-flex__item title">{{ item.name }}</view>
<image class="kind-list__img" :src="item.icon"></image>
</view>
<view :class="['kind-list__item-bd', item.open ? 'kind-list__item-bd_show' : '']">
<view :class="['wd-cells', item.open ? 'wd-cells_show' : '']">
<block v-for="(page, j) in item.pages" :key="j">
<navigator :url="`/pages/${page.id}/Index`" class="wd-cell wd-flex wd-cell_access">
<view class="wd-flex__item page-name">{{ page.name }}</view>
<view class="wd-cell__ft wd-tool-right-line-angle"></view>
</navigator>
</block>
</view>
</view>
</view>
</view>
</block>
</block>
</view>
</view>
</view>
</page-wraper>
</template>
<script lang="ts" setup>
@ -56,6 +58,10 @@ const list = ref([
id: 'layout',
name: 'Layout 布局'
},
{
id: 'configProvider',
name: 'configProvider 全局配置'
},
{
id: 'popup',
name: 'Popup 弹出层'
@ -298,6 +304,21 @@ function kindToggle(id: string) {
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.page__hd,
.kind-list__item {
background: $-dark-background2;
}
.title {
color: $-dark-color;
}
.page-name {
color: $-dark-color3;
}
.kind-list__img {
filter: invert(100%);
}
}
.page__hd {
padding: 40px 40px 30px;
margin-bottom: 30px;

17
src/pages/input/Index.vue
View File

@ -1,10 +1,10 @@
<template>
<view>
<page-wraper>
<demo-block title="基本用法">
<wd-input type="text" v-model="value" placeholder="请输入用户名" @change="handleChange" @blur="handleBlur" />
</demo-block>
<demo-block title="禁用状态">
<wd-input type="text" v-model="value1" disabled="true" />
<wd-input type="text" v-model="value1" disabled />
</demo-block>
<demo-block title="只读状态">
<wd-input type="text" v-model="value2" readonly />
@ -22,11 +22,11 @@
<wd-input type="text" v-model="value6" prefix-icon="dong" suffix-icon="list" clearable @change="handleChange3" />
</demo-block>
<demo-block title="字数限制">
<wd-input type="text" v-model="value7" maxlength="20" show-word-limit />
<wd-input type="text" v-model="value7" :maxlength="20" show-word-limit />
</demo-block>
<demo-block title="取消底部边框，自定义使用">
<wd-input v-model="value8" no-border placeholder="请输入价格" custom-style="display: inline-block; width: 70px; vertical-align: middle;" />
<text style="display: inline-block; vertical-align: middle; font-size: 14px">元</text>
<text class="custom-txt" style="display: inline-block; vertical-align: middle; font-size: 14px">元</text>
</demo-block>
<demo-block title="textarea" transparent>
<wd-input type="textarea" v-model="value9" placeholder="请填写评价" @blur="handleBlur" />
@ -35,7 +35,7 @@
<wd-input type="textarea" v-model="value10" :maxlength="120" clearable show-word-limit />
</demo-block>
<demo-block title="textarea 高度自适应">
<wd-input type="textarea" v-model="value11" auto-height="true" clearable></wd-input>
<wd-input type="textarea" v-model="value11" auto-height clearable></wd-input>
</demo-block>
<demo-block title="cell 类型" transparent>
<wd-cell-group border>
@ -53,7 +53,7 @@
<wd-input type="text" label="大尺寸" size="large" v-model="value19" placeholder="请输入..." />
</wd-cell-group>
</demo-block>
</view>
</page-wraper>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
@ -96,6 +96,11 @@ function handleBlur(event) {
}
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.custom-txt {
color: $-dark-color;
}
}
.flex {
display: flex;
justify-content: space-between;

62
src/pages/inputNumber/Index.vue
View File

@ -1,34 +1,36 @@
<template>
<demo-block title="基本用法">
<wd-input-number v-model="value1" @change="handleChange1" />
</demo-block>
<demo-block title="设置步长">
<wd-input-number v-model="value2" @change="handleChange2" :step="2" />
</demo-block>
<demo-block title="限制最大最小值">
<wd-input-number v-model="value3" @change="handleChange3" :min="3" :max="10" />
</demo-block>
<demo-block title="禁用">
<wd-input-number v-model="value4" @change="handleChange4" disabled />
</demo-block>
<demo-block title="无输入框">
<view class="flex">
<view>数量：{{ value5 }}</view>
<wd-input-number v-model="value5" @change="handleChange5" without-input />
</view>
</demo-block>
<demo-block title="设置小数精度">
<wd-input-number v-model="value6" @change="handleChange6" :precision="2" :step="0.1" />
</demo-block>
<demo-block title="输入严格为步数的倍数">
<wd-input-number v-model="value7" @change="handleChange7" step-strictly :step="2" />
</demo-block>
<demo-block title="修改输入框宽度">
<wd-input-number v-model="value8" input-width="70px" @change="handleChange8" />
</demo-block>
<demo-block title="允许空值，并设置 placeholder">
<wd-input-number v-model="value9" allow-null placeholder="不限" input-width="70px" @change="handleChange9" />
</demo-block>
<page-wraper>
<demo-block title="基本用法">
<wd-input-number v-model="value1" @change="handleChange1" />
</demo-block>
<demo-block title="设置步长">
<wd-input-number v-model="value2" @change="handleChange2" :step="2" />
</demo-block>
<demo-block title="限制最大最小值">
<wd-input-number v-model="value3" @change="handleChange3" :min="3" :max="10" />
</demo-block>
<demo-block title="禁用">
<wd-input-number v-model="value4" @change="handleChange4" disabled />
</demo-block>
<demo-block title="无输入框">
<view class="flex">
<view>数量：{{ value5 }}</view>
<wd-input-number v-model="value5" @change="handleChange5" without-input />
</view>
</demo-block>
<demo-block title="设置小数精度">
<wd-input-number v-model="value6" @change="handleChange6" :precision="2" :step="0.1" />
</demo-block>
<demo-block title="输入严格为步数的倍数">
<wd-input-number v-model="value7" @change="handleChange7" step-strictly :step="2" />
</demo-block>
<demo-block title="修改输入框宽度">
<wd-input-number v-model="value8" input-width="70px" @change="handleChange8" />
</demo-block>
<demo-block title="允许空值，并设置 placeholder">
<wd-input-number v-model="value9" allow-null placeholder="不限" input-width="70px" @change="handleChange9" />
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

85
src/pages/layout/Index.vue
View File

@ -1,50 +1,43 @@
<!--
* @Author: weisheng
* @Date: 2023-06-12 23:12:56
* @LastEditTime: 2023-06-12 23:21:34
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\layout\Layout.vue
* 记得注释
-->
<template>
<demo-block title="基础用法">
<wd-row>
<wd-col :span="24"><view class="bg-dark1">span: 24</view></wd-col>
</wd-row>
<wd-row>
<wd-col :span="12"><view class="bg-dark">span: 12</view></wd-col>
<wd-col :span="12"><view class="bg-light">span: 12</view></wd-col>
</wd-row>
<wd-row>
<wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col>
<wd-col :span="8"><view class="bg-light">span: 8</view></wd-col>
<wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col>
</wd-row>
<wd-row>
<wd-col :span="6"><view class="bg-dark">span: 6</view></wd-col>
<wd-col :span="6"><view class="bg-light">span: 6</view></wd-col>
<wd-col :span="6"><view class="bg-dark">span: 6</view></wd-col>
<wd-col :span="6"><view class="bg-light">span: 6</view></wd-col>
</wd-row>
</demo-block>
<demo-block title="分栏偏移">
<wd-row>
<wd-col :span="4"><view class="bg-dark">span: 4</view></wd-col>
<wd-col :span="8" :offset="4"><view class="bg-light">span: 8 offset: 4</view></wd-col>
</wd-row>
<wd-row>
<wd-col :span="8" :offset="4"><view class="bg-dark">span: 8 offset: 4</view></wd-col>
<wd-col :span="8" :offset="4"><view class="bg-light">span: 8 offset: 4</view></wd-col>
</wd-row>
</demo-block>
<demo-block title="分栏间隔">
<wd-row :gutter="20">
<wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col>
<wd-col :span="8"><view class="bg-light">span: 8</view></wd-col>
<wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col>
</wd-row>
</demo-block>
<page-wraper>
<demo-block title="基础用法">
<wd-row>
<wd-col :span="24"><view class="bg-dark1">span: 24</view></wd-col>
</wd-row>
<wd-row>
<wd-col :span="12"><view class="bg-dark">span: 12</view></wd-col>
<wd-col :span="12"><view class="bg-light">span: 12</view></wd-col>
</wd-row>
<wd-row>
<wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col>
<wd-col :span="8"><view class="bg-light">span: 8</view></wd-col>
<wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col>
</wd-row>
<wd-row>
<wd-col :span="6"><view class="bg-dark">span: 6</view></wd-col>
<wd-col :span="6"><view class="bg-light">span: 6</view></wd-col>
<wd-col :span="6"><view class="bg-dark">span: 6</view></wd-col>
<wd-col :span="6"><view class="bg-light">span: 6</view></wd-col>
</wd-row>
</demo-block>
<demo-block title="分栏偏移">
<wd-row>
<wd-col :span="4"><view class="bg-dark">span: 4</view></wd-col>
<wd-col :span="8" :offset="4"><view class="bg-light">span: 8 offset: 4</view></wd-col>
</wd-row>
<wd-row>
<wd-col :span="8" :offset="4"><view class="bg-dark">span: 8 offset: 4</view></wd-col>
<wd-col :span="8" :offset="4"><view class="bg-light">span: 8 offset: 4</view></wd-col>
</wd-row>
</demo-block>
<demo-block title="分栏间隔">
<wd-row :gutter="20">
<wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col>
<wd-col :span="8"><view class="bg-light">span: 8</view></wd-col>
<wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col>
</wd-row>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>

46
src/pages/loading/Index.vue
View File

@ -1,29 +1,31 @@
<template>
<demo-block title="基本用法（适用于按钮加载状态和页面轻提示）">
<view class="flex">
<wd-loading custom-class="loading" />
</view>
</demo-block>
<page-wraper>
<demo-block title="基本用法（适用于按钮加载状态和页面轻提示）">
<view class="flex">
<wd-loading custom-class="loading" />
</view>
</demo-block>
<demo-block title="outline 类型（适用于通用模块加载）">
<view class="flex">
<wd-loading type="outline" custom-class="loading" />
</view>
</demo-block>
<demo-block title="outline 类型（适用于通用模块加载）">
<view class="flex">
<wd-loading type="outline" custom-class="loading" />
</view>
</demo-block>
<demo-block title="修改颜色">
<view class="flex">
<wd-loading custom-class="loading" color="#fa34aa" />
</view>
</demo-block>
<demo-block title="修改颜色">
<view class="flex">
<wd-loading custom-class="loading" color="#fa34aa" />
</view>
</demo-block>
<demo-block title="修改指示器大小">
<view class="flex">
<wd-loading custom-class="loading" :size="20" />
<wd-loading custom-class="loading" :size="30" />
<wd-loading custom-class="loading" size="50px" />
</view>
</demo-block>
<demo-block title="修改指示器大小">
<view class="flex">
<wd-loading custom-class="loading" :size="20" />
<wd-loading custom-class="loading" :size="30" />
<wd-loading custom-class="loading" size="50px" />
</view>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>

26
src/pages/loadmore/Index.vue
View File

@ -1,17 +1,19 @@
<template>
<view class="container">
<view v-for="index in num" :key="index" class="list-item">
<image src="https://img10.360buyimg.com/jmadvertisement/jfs/t1/70325/36/14954/36690/5dcd3e3bEee5006e0/aed1ccf6d5ffc764.png" />
<view class="right">这是一条测试{{ index + 1 }}</view>
<page-wraper>
<view class="container">
<view v-for="index in num" :key="index" class="list-item">
<image src="https://img10.360buyimg.com/jmadvertisement/jfs/t1/70325/36/14954/36690/5dcd3e3bEee5006e0/aed1ccf6d5ffc764.png" />
<view class="right">这是一条测试{{ index + 1 }}</view>
</view>
<wd-loadmore :state="state" @reload="loadmore" />
</view>
<wd-loadmore :state="state" @reload="loadmore" />
</view>
</page-wraper>
</template>
<script lang="ts" setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { ref } from 'vue'
const state = ref<string>('loading')
const state = ref<any>('loading')
const num = ref<number>(0)
const max = ref<number>(60)
@ -37,6 +39,16 @@ function loadmore() {
}
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.list-item {
background: $-dark-background2;
color: $-dark-color;
}
.list-item:after {
background: $-dark-border-color;
}
}
.list-item {
position: relative;
display: flex;

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

@ -1,32 +1,34 @@
<template>
<wd-message-box></wd-message-box>
<wd-toast id="wd-toast"></wd-toast>
<wd-message-box selector="wd-message-box-slot" use-slot>
<wd-rate custom-class="custom-rate-class" v-model="value" />
</wd-message-box>
<demo-block title="alert">
<wd-button @click="alert">alert</wd-button>
</demo-block>
<page-wraper>
<wd-message-box></wd-message-box>
<wd-toast></wd-toast>
<wd-message-box selector="wd-message-box-slot" use-slot>
<wd-rate custom-class="custom-rate-class" v-model="value" />
</wd-message-box>
<demo-block title="alert">
<wd-button @click="alert">alert</wd-button>
</demo-block>
<demo-block title="显示标题">
<wd-button @click="alertWithTitle">alert</wd-button>
</demo-block>
<demo-block title="显示标题">
<wd-button @click="alertWithTitle">alert</wd-button>
</demo-block>
<demo-block title="confirm">
<wd-button @click="confirm">confirm</wd-button>
</demo-block>
<demo-block title="confirm">
<wd-button @click="confirm">confirm</wd-button>
</demo-block>
<demo-block title="prompt">
<wd-button @click="prompt">prompt</wd-button>
</demo-block>
<demo-block title="prompt">
<wd-button @click="prompt">prompt</wd-button>
</demo-block>
<demo-block title="当文案过长时，弹框的高度不再增加，而是将文案内容设置成滚动">
<wd-button @click="alertWithLongChar">alert</wd-button>
</demo-block>
<demo-block title="当文案过长时，弹框的高度不再增加，而是将文案内容设置成滚动">
<wd-button @click="alertWithLongChar">alert</wd-button>
</demo-block>
<demo-block title="使用wd-message-box组件，通过slot插入其他组件内容">
<wd-button @click="withSlot">custom</wd-button>
</demo-block>
<demo-block title="使用wd-message-box组件，通过slot插入其他组件内容">
<wd-button @click="withSlot">custom</wd-button>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box'

6
src/pages/noticeBar/Index.vue
View File

@ -1,14 +1,14 @@
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-31 21:27:54
* @LastEditTime: 2023-08-07 20:24:04
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\noticeBar\Index.vue
* 记得注释
-->
<template>
<view>
<page-wraper>
<demo-block title="基本用法">
<wd-notice-bar text="这是一条消息提示信息这是一条消息提示信息这是一条消息提示信息" prefix="warn-bold" />
</demo-block>
@ -57,7 +57,7 @@
background-color="#f0f9eb"
></wd-notice-bar>
</demo-block>
</view>
</page-wraper>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>

4
src/pages/pagination/Index.vue
View File

@ -1,5 +1,5 @@
<template>
<view>
<page-wraper>
<demo-block title="基本用法" transparent>
<wd-pagination v-model="page1" :total="total1" @change="handleChange1"></wd-pagination>
</demo-block>
@ -9,7 +9,7 @@
<demo-block title="文字提示" transparent>
<wd-pagination v-model="page3" :total="total3" :page-size="pageSize3" @change="handleChange3" show-icon show-message></wd-pagination>
</demo-block>
</view>
</page-wraper>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

85
src/pages/picker/Index.vue
View File

@ -1,40 +1,42 @@
<template>
<wd-toast />
<demo-block transparent>
<wd-cell-group border>
<wd-picker label="单列选项" :columns="columns0" />
<wd-picker label="禁用" disabled v-model="value1" :columns="columns1" />
<wd-picker label="只读" readonly v-model="value2" :columns="columns2" />
<wd-picker label="loading" loading :columns="columns3" />
<wd-picker label="多列" v-model="value4" :columns="columns4" />
<wd-picker label="多级联动" v-model="value5" :columns="columns5" :column-change="onChangeDistrict" />
<wd-picker label="分隔符" v-model="value6" :columns="columns6" :display-format="displayFormat" />
<wd-picker label="标题" :columns="columns7" title="文案标题" />
<wd-picker label="before-confirm" :columns="columns0" v-model="value7" :before-confirm="beforeConfirm" />
<wd-picker label="错误" error :columns="columns0" />
<wd-picker label="必填" :columns="columns0" required />
</wd-cell-group>
</demo-block>
<demo-block title="label 不传" transparent>
<wd-picker :columns="columns0" />
</demo-block>
<demo-block title="大小" transparent>
<wd-picker label="单列选项" size="large" :columns="columns0" />
</demo-block>
<demo-block title="值靠右显示" transparent>
<wd-picker label="单列选项" align-right :columns="columns0" />
</demo-block>
<demo-block title="默认插槽" transparent>
<view class="default-slot">
<view style="margin-bottom: 10px; color: rgba(0, 0, 0, 0.45)">
选中值：
<text style="color: #34d19d">{{ value8 }}</text>
<page-wraper>
<wd-toast />
<demo-block transparent>
<wd-cell-group border>
<wd-picker label="单列选项" :columns="columns0" />
<wd-picker label="禁用" disabled v-model="value1" :columns="columns1" />
<wd-picker label="只读" readonly v-model="value2" :columns="columns2" />
<wd-picker label="loading" loading :columns="columns3" />
<wd-picker label="多列" v-model="value4" :columns="columns4" />
<wd-picker label="多级联动" v-model="value5" :columns="columns5" :column-change="onChangeDistrict" />
<wd-picker label="分隔符" v-model="value6" :columns="columns6" :display-format="displayFormat" />
<wd-picker label="标题" :columns="columns7" title="文案标题" />
<wd-picker label="before-confirm" :columns="columns0" v-model="value7" :before-confirm="beforeConfirm" />
<wd-picker label="错误" error :columns="columns0" />
<wd-picker label="必填" :columns="columns0" required />
</wd-cell-group>
</demo-block>
<demo-block title="label 不传" transparent>
<wd-picker :columns="columns0" />
</demo-block>
<demo-block title="大小" transparent>
<wd-picker label="单列选项" size="large" :columns="columns0" />
</demo-block>
<demo-block title="值靠右显示" transparent>
<wd-picker label="单列选项" align-right :columns="columns0" />
</demo-block>
<demo-block title="默认插槽" transparent>
<view class="default-slot">
<view class="default-slot-txt">
选中值：
<text style="color: #34d19d">{{ value8 }}</text>
</view>
<wd-picker :columns="columns0" v-model="value8" use-default-slot @confirm="handleConfirm">
<wd-button>插槽唤起</wd-button>
</wd-picker>
</view>
<wd-picker :columns="columns0" v-model="value8" use-default-slot @confirm="handleConfirm">
<wd-button>插槽唤起</wd-button>
</wd-picker>
</view>
</demo-block>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
@ -146,8 +148,21 @@ function handleConfirm({ value }) {
}
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.default-slot {
background: $-dark-background2;
}
.default-slot-txt {
color: $-dark-color3;
}
}
.default-slot {
background: #fff;
padding: 15px;
}
.default-slot-txt {
margin-bottom: 10px;
color: rgba(0, 0, 0, 0.45);
}
</style>

34
src/pages/pickerView/Index.vue
View File

@ -1,24 +1,26 @@
<template>
<wd-toast />
<demo-block :title="`基本用法，数值: ${value1}`" transparent>
<wd-picker-view v-model="value1" :columns="columns1" @change="(e) => onChange(1, e)" />
</demo-block>
<page-wraper>
<wd-toast />
<demo-block :title="`基本用法，数值: ${value1}`" transparent>
<wd-picker-view v-model="value1" :columns="columns1" @change="(e) => onChange(1, e)" />
</demo-block>
<demo-block :title="`禁用选项，数值: ${value2}`" transparent>
<wd-picker-view v-model="value2" :columns="columns2" @change="(e) => onChange(2, e)" />
</demo-block>
<demo-block :title="`禁用选项，数值: ${value2}`" transparent>
<wd-picker-view v-model="value2" :columns="columns2" @change="(e) => onChange(2, e)" />
</demo-block>
<demo-block :title="`加载中，数值: ${value3}`" transparent>
<wd-picker-view v-model="value3" :columns="columns3" loading @change="(e) => onChange(3, e)" />
</demo-block>
<demo-block :title="`加载中，数值: ${value3}`" transparent>
<wd-picker-view v-model="value3" :columns="columns3" loading @change="(e) => onChange(3, e)" />
</demo-block>
<demo-block :title="`多列，数值: [${value4}]`" transparent>
<wd-picker-view v-model="value4" :columns="columns4" @change="(e) => onChange(4, e)" />
</demo-block>
<demo-block :title="`多列，数值: [${value4}]`" transparent>
<wd-picker-view v-model="value4" :columns="columns4" @change="(e) => onChange(4, e)" />
</demo-block>
<demo-block :title="`多级联动，数值: [${value5}]`" transparent>
<wd-picker-view v-model="value5" :columns="columns5" :column-change="onChangeDistrict" @change="(e) => onChange(5, e)" />
</demo-block>
<demo-block :title="`多级联动，数值: [${value5}]`" transparent>
<wd-picker-view v-model="value5" :columns="columns5" :column-change="onChangeDistrict" @change="(e) => onChange(5, e)" />
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'

56
src/pages/popover/Index.vue
View File

@ -1,34 +1,36 @@
<template>
<wd-toast />
<page-wraper>
<wd-toast />
<view @click="clickOutside" class="wrapper">
<demo-block custom-class="pop" title="基本用法">
<view class="center">
<wd-popover id="pop1" content="这是一段内容。" v-model="show1" @change="handleChange1">
<wd-button data-id="pop1">点击展示</wd-button>
</wd-popover>
</view>
</demo-block>
<view @click="clickOutside" class="wrapper">
<demo-block custom-class="pop" title="基本用法">
<view class="center">
<wd-popover id="pop1" content="这是一段内容。" v-model="show1" @change="handleChange1">
<wd-button data-id="pop1">点击展示</wd-button>
</wd-popover>
</view>
</demo-block>
<demo-block custom-class="pop" title="嵌套信息">
<view class="center list">
<wd-popover v-model="show2" use-content-slot @change="handleChange2">
<template #content>
<view class="pop-content">这是一段自定义样式的内容。</view>
</template>
<wd-button>点击展示</wd-button>
</wd-popover>
</view>
</demo-block>
<demo-block custom-class="pop" title="嵌套信息">
<view class="center list">
<wd-popover v-model="show2" use-content-slot @change="handleChange2">
<template #content>
<view class="pop-content">这是一段自定义样式的内容。</view>
</template>
<wd-button>点击展示</wd-button>
</wd-popover>
</view>
</demo-block>
<demo-block custom-class="pop" title="列表展示">
<view class="center list">
<wd-popover v-model="show3" mode="menu" :content="menu" @menuclick="link" @change="handleChange3">
<wd-button>列表</wd-button>
</wd-popover>
</view>
</demo-block>
</view>
<demo-block custom-class="pop" title="列表展示">
<view class="center list">
<wd-popover v-model="show3" mode="menu" :content="menu" @menuclick="link" @change="handleChange3">
<wd-button>列表</wd-button>
</wd-popover>
</view>
</demo-block>
</view>
</page-wraper>
</template>
<script lang="ts" setup>
import { clickOut, useToast } from '@/uni_modules/wot-design-uni'

57
src/pages/popup/Index.vue
View File

@ -1,24 +1,35 @@
<!--
* @Author: weisheng
* @Date: 2023-08-01 11:12:05
* @LastEditTime: 2023-08-15 11:54:31
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\popup\Index.vue
* 记得注释
-->
<template>
<view>
<demo-block title="基本用法">
<wd-button @click="handleClick1">弹出层</wd-button>
</demo-block>
<demo-block title="弹出位置">
<wd-button @click="handleClick2">顶部</wd-button>
<wd-button @click="handleClick3">右侧</wd-button>
<wd-button @click="handleClick4">底部</wd-button>
<wd-button @click="handleClick5">左侧</wd-button>
</demo-block>
<demo-block title="关闭按钮">
<wd-button @click="handleClick6">关闭按钮</wd-button>
</demo-block>
<page-wraper>
<demo-block title="基本用法">
<wd-button @click="handleClick1">弹出层</wd-button>
</demo-block>
<demo-block title="弹出位置">
<wd-button @click="handleClick2">顶部</wd-button>
<wd-button @click="handleClick3">右侧</wd-button>
<wd-button @click="handleClick4">底部</wd-button>
<wd-button @click="handleClick5">左侧</wd-button>
</demo-block>
<demo-block title="关闭按钮">
<wd-button @click="handleClick6">关闭按钮</wd-button>
</demo-block>
<wd-popup v-model="show1" custom-style="padding: 30px 40px;" @close="handleClose1">内容</wd-popup>
<wd-popup v-model="show2" position="top" custom-style="height: 200px;" @close="handleClose2"></wd-popup>
<wd-popup v-model="show3" position="right" custom-style="width: 200px;" @close="handleClose3"></wd-popup>
<wd-popup v-model="show4" position="bottom" custom-style="height: 200px;" @close="handleClose4"></wd-popup>
<wd-popup v-model="show5" position="left" custom-style="width: 200px;" @close="handleClose5"></wd-popup>
<wd-popup v-model="show6" position="bottom" closable custom-style="height: 200px;" @close="handleClose6"></wd-popup>
<wd-popup v-model="show1" custom-style="padding: 30px 40px;" @close="handleClose1"><text class="custom-txt">内容</text></wd-popup>
<wd-popup v-model="show2" position="top" custom-style="height: 200px;" @close="handleClose2"></wd-popup>
<wd-popup v-model="show3" position="right" custom-style="width: 200px;" @close="handleClose3"></wd-popup>
<wd-popup v-model="show4" position="bottom" custom-style="height: 200px;" @close="handleClose4"></wd-popup>
<wd-popup v-model="show5" position="left" custom-style="width: 200px;" @close="handleClose5"></wd-popup>
<wd-popup v-model="show6" position="bottom" closable custom-style="height: 200px;" @close="handleClose6"></wd-popup>
</page-wraper>
</view>
</template>
<script lang="ts" setup>
@ -72,4 +83,14 @@ function handleClose6() {
:deep(button) {
margin: 0 10px 10px 0;
}
.wot-theme-dark {
.custom-txt {
color: $-dark-color;
}
}
.custom-txt {
color: black;
}
</style>

36
src/pages/progress/Index.vue
View File

@ -1,25 +1,27 @@
<template>
<demo-block title="基本用法">
<wd-progress :percentage="30" />
</demo-block>
<page-wraper>
<demo-block title="基本用法">
<wd-progress :percentage="30" />
</demo-block>
<demo-block title="不显示进度文字">
<wd-progress :percentage="60" hide-text />
</demo-block>
<demo-block title="不显示进度文字">
<wd-progress :percentage="60" hide-text />
</demo-block>
<demo-block title="进度条状态">
<wd-progress :percentage="100" hide-text status="success" />
<wd-progress :percentage="80" hide-text status="danger" />
</demo-block>
<demo-block title="进度条状态">
<wd-progress :percentage="100" hide-text status="success" />
<wd-progress :percentage="80" hide-text status="danger" />
</demo-block>
<demo-block title="修改颜色">
<wd-progress :percentage="80" color="#00c740" />
</demo-block>
<demo-block title="修改颜色">
<wd-progress :percentage="80" color="#00c740" />
</demo-block>
<demo-block title="颜色数组">
<wd-progress :percentage="100" :color="['#00c740', '#ffb300', '#e2231a', '#0083ff']" />
<wd-progress :percentage="percentage" :color="colorObject" />
</demo-block>
<demo-block title="颜色数组">
<wd-progress :percentage="100" :color="['#00c740', '#ffb300', '#e2231a', '#0083ff']" />
<wd-progress :percentage="percentage" :color="colorObject" />
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

200
src/pages/radio/Index.vue
View File

@ -1,112 +1,114 @@
<template>
<demo-block title="基本用法">
<view>
1、内容项在3项以内，且有比较重要的信息备选（如付款类型选择等）可考虑采用圆形组件。因为会跟圆形复选框容易混淆，且会造成当前表单页页面结构不统一，
<text style="color: #f0883a">一般情况不建议使用点状单选。</text>
</view>
<view style="margin-bottom: 10px">
2、单选框基本使用未对高度进行扩充，
<text style="color: #f0883a">一般情况建议使用表单--单选组。</text>
</view>
<wd-radio-group v-model="value0" @change="change">
<wd-radio :value="1">单选框1</wd-radio>
<wd-radio :value="2">单选框2</wd-radio>
</wd-radio-group>
</demo-block>
<page-wraper>
<demo-block title="基本用法">
<view>
1、内容项在3项以内，且有比较重要的信息备选（如付款类型选择等）可考虑采用圆形组件。因为会跟圆形复选框容易混淆，且会造成当前表单页页面结构不统一，
<text style="color: #f0883a">一般情况不建议使用点状单选。</text>
</view>
<view style="margin-bottom: 10px">
2、单选框基本使用未对高度进行扩充，
<text style="color: #f0883a">一般情况建议使用表单--单选组。</text>
</view>
<wd-radio-group v-model="value0" @change="change">
<wd-radio :value="1">单选框1</wd-radio>
<wd-radio :value="2">单选框2</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="修改形状--button">
<wd-radio-group shape="button" v-model="value1" @change="change">
<wd-radio :value="1">沃特</wd-radio>
<wd-radio :value="2">商家后台</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="修改形状--button">
<wd-radio-group shape="button" v-model="value1" @change="change">
<wd-radio :value="1">沃特</wd-radio>
<wd-radio :value="2">商家后台</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="修改形状--dot">
<wd-radio-group shape="dot" v-model="value2" @change="change">
<wd-radio :value="1">沃特</wd-radio>
<wd-radio :value="2">商家后台</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="修改形状--dot">
<wd-radio-group shape="dot" v-model="value2" @change="change">
<wd-radio :value="1">沃特</wd-radio>
<wd-radio :value="2">商家后台</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="表单---单选组" transparent>
<wd-radio-group cell v-model="value3" @change="change">
<wd-radio :value="1">沃特</wd-radio>
<wd-radio :value="2">商家后台</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="表单---单选组" transparent>
<wd-radio-group cell v-model="value3" @change="change">
<wd-radio :value="1">沃特</wd-radio>
<wd-radio :value="2">商家后台</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="表单--单选按钮组" transparent>
<wd-radio-group v-model="value4" cell shape="button">
<wd-radio :value="1">选项一</wd-radio>
<wd-radio :value="2">选项二</wd-radio>
<wd-radio :value="3">选项三</wd-radio>
<wd-radio :value="4">选项四</wd-radio>
<wd-radio :value="5">选项五</wd-radio>
<wd-radio :value="6">选项六</wd-radio>
<wd-radio :value="7">选项七</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="表单--单选按钮组" transparent>
<wd-radio-group v-model="value4" cell shape="button">
<wd-radio :value="1">选项一</wd-radio>
<wd-radio :value="2">选项二</wd-radio>
<wd-radio :value="3">选项三</wd-radio>
<wd-radio :value="4">选项四</wd-radio>
<wd-radio :value="5">选项五</wd-radio>
<wd-radio :value="6">选项六</wd-radio>
<wd-radio :value="7">选项七</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="同行展示">
<wd-radio-group v-model="value5" inline>
<wd-radio :value="1">单选框1</wd-radio>
<wd-radio :value="2">单选框2</wd-radio>
</wd-radio-group>
<view class="divider"></view>
<wd-radio-group v-model="value6" inline shape="dot">
<wd-radio :value="1">单选框1</wd-radio>
<wd-radio :value="2">单选框2</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="同行展示">
<wd-radio-group v-model="value5" inline>
<wd-radio :value="1">单选框1</wd-radio>
<wd-radio :value="2">单选框2</wd-radio>
</wd-radio-group>
<view class="divider"></view>
<wd-radio-group v-model="value6" inline shape="dot">
<wd-radio :value="1">单选框1</wd-radio>
<wd-radio :value="2">单选框2</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="修改选中颜色">
<wd-radio-group v-model="value7" @change="change">
<wd-radio :value="1" checked-color="#fa4350">沃特</wd-radio>
<wd-radio :value="2" checked-color="#fa4350">商家后台</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="修改选中颜色">
<wd-radio-group v-model="value7" @change="change">
<wd-radio :value="1" checked-color="#fa4350">沃特</wd-radio>
<wd-radio :value="2" checked-color="#fa4350">商家后台</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="禁用">
<wd-radio-group v-model="value1" disabled shape="dot">
<wd-radio :value="1">沃特</wd-radio>
<wd-radio :value="2">商家后台</wd-radio>
</wd-radio-group>
<view class="divider"></view>
<wd-radio-group v-model="value1" disabled>
<wd-radio :value="1">沃特</wd-radio>
<wd-radio :value="2">商家后台</wd-radio>
</wd-radio-group>
<view class="divider"></view>
<wd-radio-group v-model="value1" disabled shape="button">
<wd-radio :value="1">沃特</wd-radio>
<wd-radio :value="2">商家后台</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="禁用">
<wd-radio-group v-model="value1" disabled shape="dot">
<wd-radio :value="1">沃特</wd-radio>
<wd-radio :value="2">商家后台</wd-radio>
</wd-radio-group>
<view class="divider"></view>
<wd-radio-group v-model="value1" disabled>
<wd-radio :value="1">沃特</wd-radio>
<wd-radio :value="2">商家后台</wd-radio>
</wd-radio-group>
<view class="divider"></view>
<wd-radio-group v-model="value1" disabled shape="button">
<wd-radio :value="1">沃特</wd-radio>
<wd-radio :value="2">商家后台</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="大尺寸">
<wd-radio-group v-model="value8" size="large">
<wd-radio :value="1">单选框1</wd-radio>
<wd-radio :value="2">单选框2</wd-radio>
</wd-radio-group>
<view class="divider"></view>
<wd-radio-group v-model="value9" size="large" shape="dot">
<wd-radio :value="1">单选框1</wd-radio>
<wd-radio :value="2">单选框2</wd-radio>
</wd-radio-group>
<view class="divider"></view>
<wd-radio-group v-model="value10" size="large" inline custom-class="group">
<wd-radio :value="1">单选框1</wd-radio>
<wd-radio :value="2">单选框2</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="大尺寸">
<wd-radio-group v-model="value8" size="large">
<wd-radio :value="1">单选框1</wd-radio>
<wd-radio :value="2">单选框2</wd-radio>
</wd-radio-group>
<view class="divider"></view>
<wd-radio-group v-model="value9" size="large" shape="dot">
<wd-radio :value="1">单选框1</wd-radio>
<wd-radio :value="2">单选框2</wd-radio>
</wd-radio-group>
<view class="divider"></view>
<wd-radio-group v-model="value10" size="large" inline custom-class="group">
<wd-radio :value="1">单选框1</wd-radio>
<wd-radio :value="2">单选框2</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="radio的props比radioGroup的优先级高">
<wd-radio-group hape="button" disabled checked-color="#fa4350" v-model="value11" @change="change">
<wd-radio :value="1" checked-color="#000" :disabled="false">商家前端</wd-radio>
<wd-radio :value="2" :disabled="false">沃特</wd-radio>
<wd-radio :value="3">商家智能</wd-radio>
</wd-radio-group>
</demo-block>
<demo-block title="radio的props比radioGroup的优先级高">
<wd-radio-group hape="button" disabled checked-color="#fa4350" v-model="value11" @change="change">
<wd-radio :value="1" checked-color="#000" :disabled="false">商家前端</wd-radio>
<wd-radio :value="2" :disabled="false">沃特</wd-radio>
<wd-radio :value="3">商家智能</wd-radio>
</wd-radio-group>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

58
src/pages/rate/Index.vue
View File

@ -1,45 +1,47 @@
<!--
* @Author: weisheng
* @Date: 2023-07-29 17:03:39
* @LastEditTime: 2023-08-01 23:46:20
* @LastEditTime: 2023-08-07 20:28:16
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\rate\Index.vue
* 记得注释
-->
<template>
<demo-block title="基本用法">
<wd-rate v-model="value1" @change="changeValue1" />
</demo-block>
<page-wraper>
<demo-block title="基本用法">
<wd-rate v-model="value1" @change="changeValue1" />
</demo-block>
<demo-block title="只读状态 readonly">
<wd-rate v-model="value2" readonly />
</demo-block>
<demo-block title="只读状态 readonly">
<wd-rate v-model="value2" readonly />
</demo-block>
<demo-block title="禁用状态">
<wd-rate v-model="value3" disabled />
</demo-block>
<demo-block title="禁用状态">
<wd-rate v-model="value3" disabled />
</demo-block>
<demo-block title="修改选中颜色">
<view style="margin-bottom: 10px">
<wd-rate v-model="value4" active-color="linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)" @change="changeValue2" />
</view>
<wd-rate
v-model="value5"
:active-color="[
'linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)',
'linear-gradient(315deg, rgba(245,34,34,1) 0%,rgba(255,117,102,1) 100%)'
]"
/>
</demo-block>
<demo-block title="修改选中颜色">
<view style="margin-bottom: 10px">
<wd-rate v-model="value4" active-color="linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)" @change="changeValue2" />
</view>
<wd-rate
v-model="value5"
:active-color="[
'linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)',
'linear-gradient(315deg, rgba(245,34,34,1) 0%,rgba(255,117,102,1) 100%)'
]"
/>
</demo-block>
<demo-block title="修改icon和选中颜色">
<wd-rate v-model="value6" icon="dong" active-icon="dong" active-color="#4D80F0" />
</demo-block>
<demo-block title="修改icon和选中颜色">
<wd-rate v-model="value6" icon="dong" active-icon="dong" active-color="#4D80F0" />
</demo-block>
<demo-block title="修改size、space">
<wd-rate v-model="value7" space="10px" size="30px" />
</demo-block>
<demo-block title="修改size、space">
<wd-rate v-model="value7" space="10px" size="30px" />
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

89
src/pages/resize/Index.vue
View File

@ -1,45 +1,47 @@
<template>
<demo-block title="基础用法">
<wd-resize @resize="handleResize">
<view :style="`background: #4d80f0; width: ${width};height: ${height}`"></view>
</wd-resize>
<view class="tip-item">
<view class="tip-label">width:</view>
{{ lastWidth }}
<wd-icon name="arrow-thin-up" custom-class="icon"></wd-icon>
{{ sizeWidth }}
</view>
<view class="tip-item">
<view class="tip-label">height:</view>
{{ lastHeight }}
<wd-icon name="arrow-thin-up" custom-class="icon"></wd-icon>
{{ sizeHeight }}
</view>
<view class="tip-item">
<view class="tip-label">top:</view>
{{ lastTop }}
<wd-icon name="arrow-thin-up" custom-class="icon"></wd-icon>
{{ sizeTop }}
</view>
<view class="tip-item">
<view class="tip-label">right:</view>
{{ lastRight }}
<wd-icon name="arrow-thin-up" custom-class="icon"></wd-icon>
{{ sizeRight }}
</view>
<view class="tip-item">
<view class="tip-label">bottom:</view>
{{ lastBottom }}
<wd-icon name="arrow-thin-up" custom-class="icon"></wd-icon>
{{ sizeBottom }}
</view>
<view class="tip-item">
<view class="tip-label">left:</view>
{{ lastLeft }}
<wd-icon name="arrow-thin-up" custom-class="icon"></wd-icon>
{{ sizeLeft }}
</view>
</demo-block>
<page-wraper>
<demo-block title="基础用法">
<wd-resize @resize="handleResize">
<view :style="`background: #4d80f0; width: ${width};height: ${height}`"></view>
</wd-resize>
<view class="tip-item">
<view class="tip-label">width:</view>
{{ lastWidth }}
<wd-icon name="arrow-thin-up" custom-class="icon"></wd-icon>
{{ sizeWidth }}
</view>
<view class="tip-item">
<view class="tip-label">height:</view>
{{ lastHeight }}
<wd-icon name="arrow-thin-up" custom-class="icon"></wd-icon>
{{ sizeHeight }}
</view>
<view class="tip-item">
<view class="tip-label">top:</view>
{{ lastTop }}
<wd-icon name="arrow-thin-up" custom-class="icon"></wd-icon>
{{ sizeTop }}
</view>
<view class="tip-item">
<view class="tip-label">right:</view>
{{ lastRight }}
<wd-icon name="arrow-thin-up" custom-class="icon"></wd-icon>
{{ sizeRight }}
</view>
<view class="tip-item">
<view class="tip-label">bottom:</view>
{{ lastBottom }}
<wd-icon name="arrow-thin-up" custom-class="icon"></wd-icon>
{{ sizeBottom }}
</view>
<view class="tip-item">
<view class="tip-label">left:</view>
{{ lastLeft }}
<wd-icon name="arrow-thin-up" custom-class="icon"></wd-icon>
{{ sizeLeft }}
</view>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { onReady } from '@dcloudio/uni-app'
@ -82,6 +84,11 @@ function handleResize(detail: Record<string, string | number>) {
}
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.tip-item {
color: $-dark-color;
}
}
.tip-item {
margin-top: 15px;
color: rgba(0, 0, 0, 0.45);

89
src/pages/search/Index.vue
View File

@ -1,46 +1,55 @@
<template>
<wd-toast />
<demo-block title="基本用法" transparent>
<wd-search v-model="value1" @search="search" @change="change" @cancel="cancel" @clear="clear" />
</demo-block>
<view @click="clickoutside">
<wd-toast />
<page-wraper>
<demo-block title="基本用法" transparent>
<wd-search v-model="value1" @search="search" @change="change" @cancel="cancel" @clear="clear" />
</demo-block>
<demo-block title="白色输入框" transparent>
<wd-search light />
</demo-block>
<demo-block title="白色输入框" transparent>
<wd-search light />
</demo-block>
<demo-block title="搜索占位符居左" transparent>
<wd-search placeholder-left />
</demo-block>
<demo-block title="搜索占位符居左" transparent>
<wd-search placeholder-left />
</demo-block>
<demo-block title="禁用且隐藏取消按钮" transparent>
<wd-search disabled hide-cancel />
</demo-block>
<demo-block title="禁用且隐藏取消按钮" transparent>
<wd-search disabled hide-cancel />
</demo-block>
<view style="margin: 15px 0; color: #666">
<view style="padding: 0 15px; margin: 10px 0; font-size: 13px">自定义左侧插槽</view>
<wd-search v-model="value3">
<template #prefix>
<wd-popover mode="menu" :content="menu" @menuclick="changeSearchType">
<view class="search-type">
<text>{{ searchType }}</text>
<wd-icon class="icon-arrow" name="fill-arrow-down"></wd-icon>
</view>
</wd-popover>
</template>
</wd-search>
<view style="margin: 15px 0; color: #666">
<view style="padding: 0 15px; margin: 10px 0; font-size: 13px">自定义左侧插槽</view>
<wd-search v-model="value3">
<template #prefix>
<wd-popover v-model="showPopover" mode="menu" :content="menu" @menuclick="changeSearchType">
<view class="search-type">
<text>{{ searchType }}</text>
<wd-icon class="icon-arrow" name="fill-arrow-down"></wd-icon>
</view>
</wd-popover>
</template>
</wd-search>
</view>
<demo-block title="自定义右侧文案" transparent>
<wd-search placeholder="请输入订单号/订单名称" cancel-txt="搜索" />
</demo-block>
<demo-block title="设置最大长度" transparent>
<wd-search v-model="value2" :maxlength="4" />
</demo-block>
</page-wraper>
</view>
<demo-block title="自定义右侧文案" transparent>
<wd-search placeholder="请输入订单号/订单名称" cancel-txt="搜索" />
</demo-block>
<demo-block title="设置最大长度" transparent>
<wd-search v-model="value2" :maxlength="4" />
</demo-block>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { clickOut } from '@/uni_modules/wot-design-uni'
function clickoutside() {
clickOut.closeOutside()
}
const showPopover = ref<boolean>(false)
const value1 = ref<string>('')
const value2 = ref<string>('初始文案')
const value3 = ref<string>('')
@ -76,6 +85,20 @@ function changeSearchType({ item, index }) {
}
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.search-type {
color: #f5f5f5;
}
.search-type::after {
color: #f5f5f5;
}
.search-type .icon-arrow {
color: #f5f5f5;
}
}
.search-type {
position: relative;
height: 30px;

74
src/pages/selectPicker/Index.vue
View File

@ -1,45 +1,47 @@
<template>
<wd-toast />
<view style="margin: 20px 0">
<wd-cell-group border>
<wd-select-picker label="选择地址" v-model="value1" :columns="columns1" @confirm="handleConfirm1" />
<wd-select-picker label="类型切换" type="radio" v-model="value2" :columns="columns1" @confirm="handleConfirm2" />
<wd-select-picker label="禁用" disabled v-model="value3" :columns="columns1" @confirm="handleConfirm3" />
<wd-select-picker label="只读" readonly v-model="value4" :columns="columns1" @confirm="handleConfirm4" />
<wd-select-picker label="禁用选项" v-model="value5" :columns="columns2" @confirm="handleConfirm5" />
<wd-select-picker label="loading" loading v-model="value6" :columns="columns1" @confirm="handleConfirm6" />
<wd-select-picker label="选择器change" v-model="value6" :columns="columns1" @change="handleChange" @confirm="handleConfirm7" />
<wd-select-picker label="展示格式化" v-model="value8" :columns="columns1" @confirm="handleConfirm8" :display-format="displayFormat" />
<wd-select-picker label="before-confirm" v-model="value9" :columns="columns1" @confirm="handleConfirm9" :before-confirm="beforeConfirm" />
<wd-select-picker label="标题" v-model="value10" title="多选" :columns="columns1" @confirm="handleConfirm10" />
<wd-select-picker label="错误" error v-model="value11" :columns="columns1" @confirm="handleConfirm11" />
<wd-select-picker label="必填" required v-model="value12" :columns="columns1" @confirm="handleConfirm12" />
<wd-select-picker label="可搜索" filterable v-model="value13" :columns="columns1" @confirm="handleConfirm13" />
</wd-cell-group>
</view>
<demo-block title="label不传" transparent>
<wd-select-picker v-model="value14" :columns="columns1" @confirm="handleConfirm14" />
</demo-block>
<demo-block title="大小" transparent>
<wd-select-picker label="大尺寸" v-model="value15" size="large" :columns="columns1" @confirm="handleConfirm15" />
</demo-block>
<demo-block title="值靠右展示" transparent>
<wd-select-picker label="值靠右展示" align-right v-model="value16" :columns="columns1" @confirm="handleConfirm16" />
</demo-block>
<demo-block title="自定义选择器" transparent>
<view style="margin-left: 15px">
<view style="margin-bottom: 10px">当前选中项: {{ customShow }}</view>
<wd-select-picker v-model="value17" use-default-slot :columns="columns1" @confirm="handleConfirm17" style="display: inline-block">
<wd-button>唤起多选</wd-button>
</wd-select-picker>
<page-wraper>
<wd-toast />
<view style="margin: 20px 0">
<wd-cell-group border>
<wd-select-picker label="选择地址" v-model="value1" :columns="columns1" @confirm="handleConfirm1" />
<wd-select-picker label="类型切换" type="radio" v-model="value2" :columns="columns1" @confirm="handleConfirm2" />
<wd-select-picker label="禁用" disabled v-model="value3" :columns="columns1" @confirm="handleConfirm3" />
<wd-select-picker label="只读" readonly v-model="value4" :columns="columns1" @confirm="handleConfirm4" />
<wd-select-picker label="禁用选项" v-model="value5" :columns="columns2" @confirm="handleConfirm5" />
<wd-select-picker label="loading" loading v-model="value6" :columns="columns1" @confirm="handleConfirm6" />
<wd-select-picker label="选择器change" v-model="value6" :columns="columns1" @change="handleChange" @confirm="handleConfirm7" />
<wd-select-picker label="展示格式化" v-model="value8" :columns="columns1" @confirm="handleConfirm8" :display-format="displayFormat" />
<wd-select-picker label="before-confirm" v-model="value9" :columns="columns1" @confirm="handleConfirm9" :before-confirm="beforeConfirm" />
<wd-select-picker label="标题" v-model="value10" title="多选" :columns="columns1" @confirm="handleConfirm10" />
<wd-select-picker label="错误" error v-model="value11" :columns="columns1" @confirm="handleConfirm11" />
<wd-select-picker label="必填" required v-model="value12" :columns="columns1" @confirm="handleConfirm12" />
<wd-select-picker label="可搜索" filterable v-model="value13" :columns="columns1" @confirm="handleConfirm13" />
</wd-cell-group>
</view>
</demo-block>
<demo-block title="label不传" transparent>
<wd-select-picker v-model="value14" :columns="columns1" @confirm="handleConfirm14" />
</demo-block>
<demo-block title="大小" transparent>
<wd-select-picker label="大尺寸" v-model="value15" size="large" :columns="columns1" @confirm="handleConfirm15" />
</demo-block>
<demo-block title="值靠右展示" transparent>
<wd-select-picker label="值靠右展示" align-right v-model="value16" :columns="columns1" @confirm="handleConfirm16" />
</demo-block>
<demo-block title="自定义选择器" transparent>
<view style="margin-left: 15px">
<view style="margin-bottom: 10px">当前选中项: {{ customShow }}</view>
<wd-select-picker v-model="value17" use-default-slot :columns="columns1" @confirm="handleConfirm17" style="display: inline-block">
<wd-button>唤起多选</wd-button>
</wd-select-picker>
</view>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
import { ref } from 'vue'
const columns1 = ref<Record<string, any>>([
const columns1 = ref<Record<string, any>[]>([
{
value: '101',
label: '男装'
@ -89,7 +91,7 @@ const columns1 = ref<Record<string, any>>([
label: '电脑办公'
}
])
const columns2 = ref<Record<string, any>>([
const columns2 = ref<Record<string, any>[]>([
{
value: '101',
label: '男装',

32
src/pages/slider/Index.vue
View File

@ -1,19 +1,21 @@
<template>
<demo-block title="基础用法">
<wd-slider v-model="value1" />
</demo-block>
<demo-block title="指定选择范围">
<wd-slider v-model="value2" :min="4" :max="1000" />
</demo-block>
<demo-block title="指定步长">
<wd-slider v-model="value4" hide-min-max :step="10" />
</demo-block>
<demo-block title="禁用状态">
<wd-slider v-model="value5" disabled />
</demo-block>
<demo-block title="双向滑块">
<wd-slider v-model="value6" />
</demo-block>
<page-wraper>
<demo-block title="基础用法">
<wd-slider v-model="value1" />
</demo-block>
<demo-block title="指定选择范围">
<wd-slider v-model="value2" :min="4" :max="1000" />
</demo-block>
<demo-block title="指定步长">
<wd-slider v-model="value4" hide-min-max :step="10" />
</demo-block>
<demo-block title="禁用状态">
<wd-slider v-model="value5" disabled />
</demo-block>
<demo-block title="双向滑块">
<wd-slider v-model="value6" />
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

26
src/pages/sortButton/Index.vue
View File

@ -1,19 +1,21 @@
<template>
<demo-block title="基础用法">
<wd-sort-button v-model="value1" title="价格" @change="handleChange1" />
</demo-block>
<page-wraper>
<demo-block title="基础用法">
<wd-sort-button v-model="value1" title="价格" @change="handleChange1" />
</demo-block>
<demo-block title="设置 allow-reset 允许重置按钮">
<wd-sort-button v-model="value2" title="价格" allow-reset @change="handleChange2" />
</demo-block>
<demo-block title="设置 allow-reset 允许重置按钮">
<wd-sort-button v-model="value2" title="价格" allow-reset @change="handleChange2" />
</demo-block>
<demo-block title="设置 desc-first 优先切换为降序">
<wd-sort-button v-model="value3" title="价格" desc-first @change="handleChange3" />
</demo-block>
<demo-block title="设置 desc-first 优先切换为降序">
<wd-sort-button v-model="value3" title="价格" desc-first @change="handleChange3" />
</demo-block>
<demo-block title="不展示下划线（当只有一个排序按钮时，应取消展示下划线）">
<wd-sort-button v-model="value4" title="价格" :line="false" @change="handleChange4" />
</demo-block>
<demo-block title="不展示下划线（当只有一个排序按钮时，应取消展示下划线）">
<wd-sort-button v-model="value4" title="价格" :line="false" @change="handleChange4" />
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

44
src/pages/statusTip/Index.vue
View File

@ -1,31 +1,33 @@
<template>
<demo-block title="搜索无结果">
<wd-status-tip type="search" tip="当前搜索无结果" />
</demo-block>
<page-wraper>
<demo-block title="搜索无结果">
<wd-status-tip type="search" tip="当前搜索无结果" />
</demo-block>
<demo-block title="404页面">
<wd-status-tip type="network" tip="当前网络不可用，请检查你的网络设置" />
</demo-block>
<demo-block title="404页面">
<wd-status-tip type="network" tip="当前网络不可用，请检查你的网络设置" />
</demo-block>
<demo-block title="页面无数据">
<wd-status-tip type="content" tip="暂无内容" />
</demo-block>
<demo-block title="页面无数据">
<wd-status-tip type="content" tip="暂无内容" />
</demo-block>
<demo-block title="我的收藏为空">
<wd-status-tip type="collect" tip="暂无收藏" />
</demo-block>
<demo-block title="我的收藏为空">
<wd-status-tip type="collect" tip="暂无收藏" />
</demo-block>
<demo-block title="我的评论为空">
<wd-status-tip type="comment" tip="暂无评论" />
</demo-block>
<demo-block title="我的评论为空">
<wd-status-tip type="comment" tip="暂无评论" />
</demo-block>
<demo-block title="支付失败">
<wd-status-tip type="halo" tip="支付失败，请重新订购" />
</demo-block>
<demo-block title="支付失败">
<wd-status-tip type="halo" tip="支付失败，请重新订购" />
</demo-block>
<demo-block title="已订阅全部消息">
<wd-status-tip type="message" tip="已订阅全部消息" />
</demo-block>
<demo-block title="已订阅全部消息">
<wd-status-tip type="message" tip="已订阅全部消息" />
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped></style>

13
src/pages/steps/Index.vue
View File

@ -1,14 +1,5 @@
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-14 11:37:57
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\steps\Index.vue
* 记得注释
-->
<template>
<view>
<page-wraper>
<demo-block title="基本用法">
<wd-steps :active="0">
<wd-step></wd-step>
@ -61,7 +52,7 @@
<wd-step title="步骤3" />
</wd-steps>
</demo-block>
</view>
</page-wraper>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

107
src/pages/sticky/Index.vue
View File

@ -1,68 +1,70 @@
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-05 13:29:17
* @LastEditTime: 2023-08-14 21:51:11
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\sticky\Index.vue
* 记得注释
-->
<template>
<view style="height: 250vh">
<view class="demo-block">
<view class="demo-title">基本用法</view>
<view class="demo-container">
<wd-sticky custom-style="margin-left: 20px">
<wd-button type="success">基础用法</wd-button>
</wd-sticky>
<page-wraper>
<view style="height: 250vh">
<view class="demo-block">
<view class="demo-title">基本用法</view>
<view class="demo-container">
<wd-sticky custom-style="margin-left: 20px">
<wd-button type="success">基础用法</wd-button>
</wd-sticky>
</view>
</view>
</view>
<view class="demo-block">
<view class="demo-title">吸顶距离</view>
<view class="demo-container">
<wd-sticky :offset-top="50" style="margin-left: 120px">
<wd-button>吸顶距离</wd-button>
</wd-sticky>
<view class="demo-block">
<view class="demo-title">吸顶距离</view>
<view class="demo-container">
<wd-sticky :offset-top="50" style="margin-left: 120px">
<wd-button>吸顶距离</wd-button>
</wd-sticky>
</view>
</view>
</view>
<view class="demo-block">
<view class="demo-title">相对容器</view>
<view class="demo-container">
<wd-sticky-box>
<view style="height: 120px; width: 100vw; background-color: #ffffff">
<wd-sticky custom-style="margin-left: 220px">
<wd-button type="warning">相对容器</wd-button>
</wd-sticky>
</view>
</wd-sticky-box>
<view class="demo-block">
<view class="demo-title">相对容器</view>
<view class="demo-container">
<wd-sticky-box>
<view class="custom-container">
<wd-sticky custom-style="margin-left: 220px">
<wd-button type="warning">相对容器</wd-button>
</wd-sticky>
</view>
</wd-sticky-box>
</view>
</view>
</view>
<view class="demo-block">
<view class="demo-title">动态插入</view>
<view class="demo-container">
<wd-button type="info" plain @click="insert">点击插入</wd-button>
<wd-sticky custom-style="margin-left: 220px">
<wd-button type="error" v-if="show">动态生成</wd-button>
</wd-sticky>
<view class="demo-block">
<view class="demo-title">动态插入</view>
<view class="demo-container">
<wd-button type="info" plain @click="insert">点击插入</wd-button>
<wd-sticky custom-style="margin-left: 220px">
<wd-button type="error" v-if="show">动态生成</wd-button>
</wd-sticky>
</view>
</view>
</view>
<view class="demo-block">
<view class="demo-title">相对容器+吸顶距离</view>
<view class="demo-container">
<wd-sticky-box>
<view style="height: 120px; width: 100vw; background-color: #ffffff">
<wd-sticky :offset-top="150">
<wd-button type="warning">相对容器+吸顶距离</wd-button>
</wd-sticky>
</view>
</wd-sticky-box>
<view class="demo-block">
<view class="demo-title">相对容器+吸顶距离</view>
<view class="demo-container">
<wd-sticky-box>
<view class="custom-container">
<wd-sticky :offset-top="150">
<wd-button type="warning">相对容器+吸顶距离</wd-button>
</wd-sticky>
</view>
</wd-sticky-box>
</view>
</view>
</view>
</view>
</page-wraper>
</template>
<script lang="ts" setup>
import { onShow } from '@dcloudio/uni-app'
@ -80,10 +82,21 @@ onShow(() => {
})
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.custom-container {
background: $-dark-background2;
}
}
.demo-block {
margin: 15px 0;
padding: 15px 0;
color: #666;
}
.custom-container {
height: 120px;
width: 100vw;
background-color: #ffffff;
}
.is-white {
background: #fff;
}

187
src/pages/swipeAction/Index.vue
View File

@ -1,103 +1,105 @@
<template>
<wd-toast />
<page-wraper>
<wd-toast />
<view @click.stop="clickoutside">
<demo-block transparent title="基本用法">
<wd-swipe-action>
<wd-cell title="标题文字" value="内容" />
<template #right>
<view class="action">
<view class="button" style="background: #fa4350" @click="handleAction('操作1')">操作1</view>
<view class="button" style="background: #f0883a" @click="handleAction('操作2')">操作2</view>
<view class="button" style="background: #4d80f0" @click="handleAction('操作3')">操作3</view>
</view>
</template>
</wd-swipe-action>
</demo-block>
<view @click.stop="clickoutside">
<demo-block transparent title="基本用法">
<wd-swipe-action>
<wd-cell title="标题文字" value="内容" />
<template #right>
<view class="action">
<view class="button" style="background: #fa4350" @click="handleAction('操作1')">操作1</view>
<view class="button" style="background: #f0883a" @click="handleAction('操作2')">操作2</view>
<view class="button" style="background: #4d80f0" @click="handleAction('操作3')">操作3</view>
</view>
</template>
</wd-swipe-action>
</demo-block>
<demo-block transparent title="左右滑动">
<wd-swipe-action>
<template #left>
<view class="action">
<view class="button" style="background: #fa4350">操作1</view>
<view class="button" style="background: #f0883a">操作2</view>
<view class="button" style="background: #4d80f0">操作3</view>
</view>
</template>
<demo-block transparent title="左右滑动">
<wd-swipe-action>
<template #left>
<view class="action">
<view class="button" style="background: #fa4350">操作1</view>
<view class="button" style="background: #f0883a">操作2</view>
<view class="button" style="background: #4d80f0">操作3</view>
</view>
</template>
<wd-cell title="标题文字" value="内容" />
<wd-cell title="标题文字" value="内容" />
<template #right>
<view class="action">
<view class="button" style="background: #fa4350">操作4</view>
<view class="button" style="background: #f0883a">操作5</view>
<view class="button" style="background: #4d80f0">操作6</view>
</view>
</template>
</wd-swipe-action>
</demo-block>
<template #right>
<view class="action">
<view class="button" style="background: #fa4350">操作4</view>
<view class="button" style="background: #f0883a">操作5</view>
<view class="button" style="background: #4d80f0">操作6</view>
</view>
</template>
</wd-swipe-action>
</demo-block>
<demo-block transparent title="切换按钮">
<wd-swipe-action v-model="value" :before-close="beforeClose">
<template #left>
<view class="action">
<view class="button" style="background: #fa4350">操作1</view>
<view class="button" style="background: #f0883a">操作2</view>
<view class="button" style="background: #4d80f0">操作3</view>
</view>
</template>
<demo-block transparent title="切换按钮">
<wd-swipe-action v-model="value" :before-close="beforeClose">
<template #left>
<view class="action">
<view class="button" style="background: #fa4350">操作1</view>
<view class="button" style="background: #f0883a">操作2</view>
<view class="button" style="background: #4d80f0">操作3</view>
</view>
</template>
<wd-cell title="标题文字" value="内容" />
<wd-cell title="标题文字" value="内容" />
<template #right>
<view class="action">
<view class="button" style="background: #fa4350">操作4</view>
<view class="button" style="background: #f0883a">操作5</view>
<view class="button" style="background: #4d80f0">操作6</view>
</view>
</template>
</wd-swipe-action>
</demo-block>
<view class="button-group">
<view @click.stop="noop">
<wd-button size="small" @click="changeState('left')">打开左边</wd-button>
</view>
<view @click.stop="noop">
<wd-button size="small" @click="changeState('close')">关闭所有</wd-button>
</view>
<view @click.stop="noop">
<wd-button size="small" @click="changeState('right')">打开右边</wd-button>
<template #right>
<view class="action">
<view class="button" style="background: #fa4350">操作4</view>
<view class="button" style="background: #f0883a">操作5</view>
<view class="button" style="background: #4d80f0">操作6</view>
</view>
</template>
</wd-swipe-action>
</demo-block>
<view class="button-group">
<view @click.stop="noop">
<wd-button size="small" @click="changeState('left')">打开左边</wd-button>
</view>
<view @click.stop="noop">
<wd-button size="small" @click="changeState('close')">关闭所有</wd-button>
</view>
<view @click.stop="noop">
<wd-button size="small" @click="changeState('right')">打开右边</wd-button>
</view>
</view>
<demo-block transparent title="点击事件">
<wd-swipe-action @click="handleClick">
<wd-cell title="标题文字" value="内容" />
<template #right>
<view class="action">
<view class="button" style="background: #fa4350">操作1</view>
<view class="button" style="background: #f0883a">操作2</view>
<view class="button" style="background: #4d80f0">操作3</view>
</view>
</template>
</wd-swipe-action>
</demo-block>
<demo-block transparent title="禁用滑动按钮">
<wd-swipe-action disabled>
<wd-cell title="标题文字" value="内容" />
<template #right>
<view class="action">
<view class="button" style="background: #fa4350">操作1</view>
<view class="button" style="background: #f0883a">操作2</view>
<view class="button" style="background: #4d80f0">操作3</view>
</view>
</template>
</wd-swipe-action>
</demo-block>
</view>
<demo-block transparent title="点击事件">
<wd-swipe-action @click="handleClick">
<wd-cell title="标题文字" value="内容" />
<template #right>
<view class="action">
<view class="button" style="background: #fa4350">操作1</view>
<view class="button" style="background: #f0883a">操作2</view>
<view class="button" style="background: #4d80f0">操作3</view>
</view>
</template>
</wd-swipe-action>
</demo-block>
<demo-block transparent title="禁用滑动按钮">
<wd-swipe-action disabled>
<wd-cell title="标题文字" value="内容" />
<template #right>
<view class="action">
<view class="button" style="background: #fa4350">操作1</view>
<view class="button" style="background: #f0883a">操作2</view>
<view class="button" style="background: #4d80f0">操作3</view>
</view>
</template>
</wd-swipe-action>
</demo-block>
</view>
</page-wraper>
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
@ -132,6 +134,11 @@ function handleAction(action: string) {
function noop() {}
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.button-group {
background: $-dark-background2;
}
}
.action {
height: 100%;
}

70
src/pages/switch/Index.vue
View File

@ -1,47 +1,31 @@
<!--
* @Author: weisheng
* @Date: 2023-08-01 11:12:05
* @LastEditTime: 2023-08-02 13:14:32
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\switch\Index.vue
* 记得注释
-->
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-03 16:23:26
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\switch\Index.vue
* 记得注释
-->
<template>
<wd-message-box id="wd-message-box"></wd-message-box>
<view>
<demo-block title="基本用法">
<wd-switch v-model="checked1" @change="handleChange1" />
</demo-block>
<demo-block title="修改值 active-value 、 inactive-value">
<view style="margin-bottom: 10px">{{ checked2 }}</view>
<wd-switch v-model="checked2" active-value="沃特" inactive-value="商家后台" @change="handleChange2" />
</demo-block>
<demo-block title="自定义颜色 active-color 、 inactive-color">
<wd-switch v-model="checked3" active-color="#13ce66" inactive-color="#f00" @change="handleChange3" />
</demo-block>
<demo-block title="修改大小">
<wd-switch v-model="checked4" size="20px" @change="handleChange4" />
</demo-block>
<demo-block title="选中禁用">
<wd-switch v-model="checked5" disabled />
</demo-block>
<demo-block title="非选中禁用">
<wd-switch v-model="checked6" disabled />
</demo-block>
<demo-block title="before-change 修改前钩子函数">
<wd-switch v-model="checked7" :before-change="beforeChange" @change="handleChange5" />
</demo-block>
</view>
<page-wraper>
<wd-message-box></wd-message-box>
<view>
<demo-block title="基本用法">
<wd-switch v-model="checked1" @change="handleChange1" />
</demo-block>
<demo-block title="修改值 active-value 、 inactive-value">
<view style="margin-bottom: 10px">{{ checked2 }}</view>
<wd-switch v-model="checked2" active-value="沃特" inactive-value="商家后台" @change="handleChange2" />
</demo-block>
<demo-block title="自定义颜色 active-color 、 inactive-color">
<wd-switch v-model="checked3" active-color="#13ce66" inactive-color="#f00" @change="handleChange3" />
</demo-block>
<demo-block title="修改大小">
<wd-switch v-model="checked4" size="20px" @change="handleChange4" />
</demo-block>
<demo-block title="选中禁用">
<wd-switch v-model="checked5" disabled />
</demo-block>
<demo-block title="非选中禁用">
<wd-switch v-model="checked6" disabled />
</demo-block>
<demo-block title="before-change 修改前钩子函数">
<wd-switch v-model="checked7" :before-change="beforeChange" @change="handleChange5" />
</demo-block>
</view>
</page-wraper>
</template>
<script lang="ts" setup>
import { useMessage } from '@/uni_modules/wot-design-uni'

130
src/pages/tabs/Index.vue
View File

@ -1,74 +1,76 @@
<template>
<wd-toast />
<demo-block title="基本用法" transparent>
<wd-tabs v-model="tab1" @change="handleChange">
<block v-for="item in 4" :key="item">
<wd-tab :title="`标签${item}`" :name="item">
<view class="content">内容{{ item }}</view>
</wd-tab>
</block>
</wd-tabs>
</demo-block>
<page-wraper>
<wd-toast />
<demo-block title="基本用法" transparent>
<wd-tabs v-model="tab1" @change="handleChange">
<block v-for="item in 4" :key="item">
<wd-tab :title="`标签${item}`" :name="item">
<view class="content">内容{{ item }}</view>
</wd-tab>
</block>
</wd-tabs>
</demo-block>
<demo-block title="粘性布局" transparent>
<wd-tabs v-model="tab2" sticky>
<block v-for="item in 4" :key="item">
<wd-tab :title="`标签${item}`" :name="item">
<view class="content">内容{{ item }}</view>
</wd-tab>
</block>
</wd-tabs>
</demo-block>
<demo-block title="粘性布局" transparent>
<wd-tabs v-model="tab2" sticky>
<block v-for="item in 4" :key="item">
<wd-tab :title="`标签${item}`" :name="item">
<view class="content">内容{{ item }}</view>
</wd-tab>
</block>
</wd-tabs>
</demo-block>
<demo-block title="禁用tab" transparent>
<wd-tabs v-model="tab3">
<block v-for="item in 4" :key="item">
<wd-tab :title="`标签${item}`" :disabled="item === 1" :name="item">
<view class="content">内容{{ item }}</view>
</wd-tab>
</block>
</wd-tabs>
</demo-block>
<demo-block title="禁用tab" transparent>
<wd-tabs v-model="tab3">
<block v-for="item in 4" :key="item">
<wd-tab :title="`标签${item}`" :disabled="item === 1" :name="item">
<view class="content">内容{{ item }}</view>
</wd-tab>
</block>
</wd-tabs>
</demo-block>
<demo-block title="点击事件" transparent>
<wd-tabs v-model="tab4" @click="handleClick">
<block v-for="item in 4" :key="item">
<wd-tab :title="`标签${item}`" :name="item">
<view class="content">内容{{ item }}</view>
</wd-tab>
</block>
</wd-tabs>
</demo-block>
<demo-block title="点击事件" transparent>
<wd-tabs v-model="tab4" @click="handleClick">
<block v-for="item in 4" :key="item">
<wd-tab :title="`标签${item}`" :name="item">
<view class="content">内容{{ item }}</view>
</wd-tab>
</block>
</wd-tabs>
</demo-block>
<demo-block title="手势滑动" transparent>
<wd-tabs v-model="tab5" swipeable>
<block v-for="item in 4" :key="item">
<wd-tab :title="`标签${item}`" :name="item">
<view class="content">内容{{ item }}</view>
</wd-tab>
</block>
</wd-tabs>
</demo-block>
<demo-block title="手势滑动" transparent>
<wd-tabs v-model="tab5" swipeable>
<block v-for="item in 4" :key="item">
<wd-tab :title="`标签${item}`" :name="item">
<view class="content">内容{{ item }}</view>
</wd-tab>
</block>
</wd-tabs>
</demo-block>
<demo-block title="数量大于6时可滚动" transparent>
<wd-tabs v-model="tab6" lazy-render>
<block v-for="item in 7" :key="item">
<wd-tab :title="`标签${item}`" :name="item">
<view class="content">内容{{ item }}</view>
</wd-tab>
</block>
</wd-tabs>
</demo-block>
<demo-block title="数量大于6时可滚动" transparent>
<wd-tabs v-model="tab6" lazy-render>
<block v-for="item in 7" :key="item">
<wd-tab :title="`标签${item}`" :name="item">
<view class="content">内容{{ item }}</view>
</wd-tab>
</block>
</wd-tabs>
</demo-block>
<demo-block title="数量大于10时出现导航地图" transparent>
<wd-tabs v-model="tab7">
<block v-for="item in 11" :key="item">
<wd-tab :title="`标签${item}`" :name="item">
<view class="large">内容{{ item }}</view>
</wd-tab>
</block>
</wd-tabs>
</demo-block>
<demo-block title="数量大于10时出现导航地图" transparent>
<wd-tabs v-model="tab7">
<block v-for="item in 11" :key="item">
<wd-tab :title="`标签${item}`" :name="item">
<view class="large">内容{{ item }}</view>
</wd-tab>
</block>
</wd-tabs>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'

174
src/pages/tag/Index.vue
View File

@ -1,88 +1,108 @@
<template>
<demo-block title="基本用法">
<view>
<wd-tag custom-class="space">标签</wd-tag>
<wd-tag custom-class="space" type="primary">标签</wd-tag>
<wd-tag custom-class="space" type="danger">标签</wd-tag>
<wd-tag custom-class="space" type="warning">标签</wd-tag>
<wd-tag custom-class="space" type="success">标签</wd-tag>
</view>
</demo-block>
<view>
<page-wraper>
<demo-block title="基本用法">
<view>
<wd-tag custom-class="space">标签</wd-tag>
<wd-tag custom-class="space" type="primary">标签</wd-tag>
<wd-tag custom-class="space" type="danger">标签</wd-tag>
<wd-tag custom-class="space" type="warning">标签</wd-tag>
<wd-tag custom-class="space" type="success">标签</wd-tag>
</view>
</demo-block>
<demo-block title="幽灵标签">
<view>
<wd-tag custom-class="space" plain>标签</wd-tag>
<wd-tag custom-class="space" plain type="primary">标签</wd-tag>
<wd-tag custom-class="space" plain type="danger">标签</wd-tag>
<wd-tag custom-class="space" plain type="warning">标签</wd-tag>
<wd-tag custom-class="space" plain type="success">标签</wd-tag>
</view>
</demo-block>
<demo-block title="幽灵标签">
<view>
<wd-tag custom-class="space" plain>标签</wd-tag>
<wd-tag custom-class="space" plain type="primary">标签</wd-tag>
<wd-tag custom-class="space" plain type="danger">标签</wd-tag>
<wd-tag custom-class="space" plain type="warning">标签</wd-tag>
<wd-tag custom-class="space" plain type="success">标签</wd-tag>
</view>
</demo-block>
<demo-block title="标记标签">
<view>
<wd-tag custom-class="space" mark>标签</wd-tag>
<wd-tag custom-class="space" type="primary" mark>标签</wd-tag>
<wd-tag custom-class="space" type="danger" mark>标签</wd-tag>
<wd-tag custom-class="space" type="warning" mark>标签</wd-tag>
<wd-tag custom-class="space" type="success" mark>标签</wd-tag>
</view>
</demo-block>
<demo-block title="标记标签">
<view>
<wd-tag custom-class="space" mark>标签</wd-tag>
<wd-tag custom-class="space" type="primary" mark>标签</wd-tag>
<wd-tag custom-class="space" type="danger" mark>标签</wd-tag>
<wd-tag custom-class="space" type="warning" mark>标签</wd-tag>
<wd-tag custom-class="space" type="success" mark>标签</wd-tag>
</view>
</demo-block>
<demo-block title="幽灵标记标签">
<view>
<wd-tag custom-class="space" mark plain>标签</wd-tag>
<wd-tag custom-class="space" type="primary" mark plain>标签</wd-tag>
<wd-tag custom-class="space" type="danger" mark plain>标签</wd-tag>
<wd-tag custom-class="space" type="warning" mark plain>标签</wd-tag>
<wd-tag custom-class="space" type="success" mark plain>标签</wd-tag>
</view>
</demo-block>
<demo-block title="幽灵标记标签">
<view>
<wd-tag custom-class="space" mark plain>标签</wd-tag>
<wd-tag custom-class="space" type="primary" mark plain>标签</wd-tag>
<wd-tag custom-class="space" type="danger" mark plain>标签</wd-tag>
<wd-tag custom-class="space" type="warning" mark plain>标签</wd-tag>
<wd-tag custom-class="space" type="success" mark plain>标签</wd-tag>
</view>
</demo-block>
<demo-block title="圆角标签">
<view>
<wd-tag custom-class="space" round>标签</wd-tag>
<wd-tag custom-class="space" type="primary" round>标签</wd-tag>
<wd-tag custom-class="space" type="danger" round>标签</wd-tag>
<wd-tag custom-class="space" type="warning" round>标签</wd-tag>
<wd-tag custom-class="space" type="success" round>标签</wd-tag>
</view>
</demo-block>
<demo-block title="圆角标签">
<view>
<wd-tag custom-class="space" round>标签</wd-tag>
<wd-tag custom-class="space" type="primary" round>标签</wd-tag>
<wd-tag custom-class="space" type="danger" round>标签</wd-tag>
<wd-tag custom-class="space" type="warning" round>标签</wd-tag>
<wd-tag custom-class="space" type="success" round>标签</wd-tag>
</view>
</demo-block>
<demo-block title="设置图标">
<view>
<wd-tag custom-class="space" icon="clock" mark>标签</wd-tag>
<wd-tag custom-class="space" mark use-icon-slot>
<text>插槽</text>
<template #icon>
<wd-icon name="dong" />
</template>
</wd-tag>
</view>
</demo-block>
<demo-block title="设置图标">
<view>
<wd-tag custom-class="space" icon="clock" mark>标签</wd-tag>
<wd-tag custom-class="space" mark use-icon-slot>
<text>插槽</text>
<template #icon>
<wd-icon name="dong" />
</template>
</wd-tag>
</view>
</demo-block>
<demo-block title="自定义颜色">
<view>
<wd-tag custom-class="space" color="#0083ff" bg-color="#d0e8ff">标签</wd-tag>
<wd-tag custom-class="space" color="#FAA21E" bg-color="#FAA21E" plain>标签</wd-tag>
</view>
</demo-block>
<demo-block title="自定义颜色">
<view>
<wd-tag custom-class="space" color="#0083ff" bg-color="#d0e8ff">标签</wd-tag>
<wd-tag custom-class="space" color="#FAA21E" bg-color="#FAA21E" plain>标签</wd-tag>
</view>
</demo-block>
<demo-block title="可关闭">
<view>
<wd-tag v-for="(tag, index) in tags" :key="index" custom-class="space" round closable @click="handleClick(index)" @close="handleClose(index)">
{{ tag.value }}
</wd-tag>
</view>
</demo-block>
<demo-block title="新增标签">
<view>
<wd-tag v-for="(tag, index) in dynamicTags" :key="index" custom-class="space" round closable :data-index="index" @close="handleClose1(index)">
{{ tag }}
</wd-tag>
<wd-tag custom-class="space" round dynamic @confirm="handleConfirm"></wd-tag>
</view>
</demo-block>
<demo-block title="可关闭">
<view>
<wd-tag
v-for="(tag, index) in tags"
:key="index"
custom-class="space"
round
closable
@click="handleClick(index)"
@close="handleClose(index)"
>
{{ tag.value }}
</wd-tag>
</view>
</demo-block>
<demo-block title="新增标签">
<view>
<wd-tag
v-for="(tag, index) in dynamicTags"
:key="index"
custom-class="space"
round
closable
:data-index="index"
@close="handleClose1(index)"
>
{{ tag }}
</wd-tag>
<wd-tag custom-class="space" round dynamic @confirm="handleConfirm"></wd-tag>
</view>
</demo-block>
</page-wraper>
</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

42
src/pages/toast/Index.vue
View File

@ -1,23 +1,27 @@
<template>
<wd-toast />
<demo-block title="基本用法">
<wd-button @click="showToast">toast</wd-button>
<wd-button @click="showLongToast">长文案</wd-button>
</demo-block>
<demo-block title="类型toast">
<wd-button @click="showSuccessToast">成功toast</wd-button>
<wd-button @click="showErrorToast">错误toast</wd-button>
<wd-button @click="showWarnToast">警告toast</wd-button>
<wd-button @click="showNormalToast">常规toast</wd-button>
</demo-block>
<demo-block title="提示位置">
<wd-button @click="showTopToast">顶部toast</wd-button>
<wd-button @click="showBottomToast">底部toast</wd-button>
</demo-block>
<demo-block title="Loading">
<wd-button @click="showLoadingToast">Loading加载</wd-button>
<wd-button @click="showLoadingToast2">ring类型loading</wd-button>
</demo-block>
<view>
<page-wraper>
<wd-toast />
<demo-block title="基本用法">
<wd-button @click="showToast">toast</wd-button>
<wd-button @click="showLongToast">长文案</wd-button>
</demo-block>
<demo-block title="类型toast">
<wd-button @click="showSuccessToast">成功toast</wd-button>
<wd-button @click="showErrorToast">错误toast</wd-button>
<wd-button @click="showWarnToast">警告toast</wd-button>
<wd-button @click="showNormalToast">常规toast</wd-button>
</demo-block>
<demo-block title="提示位置">
<wd-button @click="showTopToast">顶部toast</wd-button>
<wd-button @click="showBottomToast">底部toast</wd-button>
</demo-block>
<demo-block title="Loading">
<wd-button @click="showLoadingToast">Loading加载</wd-button>
<wd-button @click="showLoadingToast2">ring类型loading</wd-button>
</demo-block>
</page-wraper>
</view>
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'

193
src/pages/tooltip/Index.vue
View File

@ -1,98 +1,104 @@
<template>
<wd-toast />
<view @click.stop="clickOutside">
<demo-block title="基本用法">
<view class="top">
<wd-tooltip v-model="show1" placement="bottom-start" content="bottom-start 提示文字" @change="handleChange1">
<wd-button :round="false">bottom-start</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show2" placement="bottom" content="bottom 提示文字" @change="handleChange2">
<wd-button :round="false">bottom</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show3" placement="bottom-end" content="bottom-end 提示文字" @change="handleChange3">
<wd-button :round="false">bottom-end</wd-button>
</wd-tooltip>
<view>
<wd-toast />
<page-wraper>
<view @click.stop="clickOutside">
<demo-block title="基本用法">
<view class="top">
<wd-tooltip v-model="show1" placement="bottom-start" content="bottom-start 提示文字" @change="handleChange1">
<wd-button :round="false">bottom-start</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show2" placement="bottom" content="bottom 提示文字" @change="handleChange2">
<wd-button :round="false">bottom</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show3" placement="bottom-end" content="bottom-end 提示文字" @change="handleChange3">
<wd-button :round="false">bottom-end</wd-button>
</wd-tooltip>
</view>
<view class="left">
<wd-tooltip v-model="show4" placement="right-start" content="right-start 提示文字" @change="handleChange4">
<wd-button :round="false">right-start</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show5" placement="right" content="right 提示文字" customStyle="margin: 20px 0" @change="handleChange5">
<wd-button :round="false">right</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show6" placement="right-end" content="right-end 提示文字" @change="handleChange6">
<wd-button :round="false">right-end</wd-button>
</wd-tooltip>
</view>
<view class="right">
<wd-tooltip v-model="show7" placement="left-start" content="left-start 提示文字" @change="handleChange7">
<wd-button :round="false">
left-start
<wd-icon name="setting" />
</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show8" placement="left" content="left 提示文字" customStyle="margin: 20px 0" @change="handleChange8">
<wd-button :round="false">left</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show9" placement="left-end" content="left-end 提示文字" @change="handleChange9">
<wd-button :round="false">left-end</wd-button>
</wd-tooltip>
</view>
<view class="bottom">
<wd-tooltip v-model="show10" placement="top-start" content="top-start 提示文字" @change="handleChange10">
<wd-button :round="false">top-start</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show11" placement="top" content="top 提示文字" @change="handleChange11">
<wd-button :round="false">top</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show12" placement="top-end" content="top-end 提示文字" @change="handleChange12">
<wd-button :round="false">top-end</wd-button>
</wd-tooltip>
</view>
</demo-block>
<demo-block title="显示关闭按钮">
<view class="demo-left">
<wd-tooltip v-model="show13" content="显示关闭按钮" placement="right" show-close @change="handleChange13">
<wd-button :round="false">显示关闭按钮</wd-button>
</wd-tooltip>
</view>
</demo-block>
<demo-block title="多行文本">
<view class="demo-left lines-demo">
<wd-tooltip v-model="show14" placement="right" use-content-slot @change="handleChange14">
<wd-button :round="false">多行文本</wd-button>
<template #content>
<view class="lines-content">
<view>多行文本1</view>
<view>多行文本2</view>
<view>多行文本3</view>
</view>
</template>
</wd-tooltip>
</view>
</demo-block>
<demo-block title="控制显隐">
<view @click.stop="control">
<wd-button plain size="small" class="button-control">{{ show15 ? '关闭' : '打开' }}</wd-button>
</view>
<view class="demo-left demo-control">
<wd-tooltip placement="top" content="控制显隐" v-model="show15">
<wd-button :round="false">top</wd-button>
</wd-tooltip>
</view>
</demo-block>
<demo-block title="绑定事件">
<view class="demo-left">
<wd-tooltip v-model="show16" placement="right-end" :content="content" @open="onShow" @close="onHide" @change="handleChange16">
<wd-button :round="false">事件</wd-button>
</wd-tooltip>
</view>
</demo-block>
<demo-block title="禁用">
<view class="demo-left">
<wd-tooltip v-model="show17" placement="right-end" content="禁用" disabled @change="handleChange17">
<wd-button :round="false">禁用</wd-button>
</wd-tooltip>
</view>
</demo-block>
</view>
<view class="left">
<wd-tooltip v-model="show4" placement="right-start" content="right-start 提示文字" @change="handleChange4">
<wd-button :round="false">right-start</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show5" placement="right" content="right 提示文字" style="margin: 20px 0" @change="handleChange5">
<wd-button :round="false">right</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show6" placement="right-end" content="right-end 提示文字" @change="handleChange6">
<wd-button :round="false">right-end</wd-button>
</wd-tooltip>
</view>
<view class="right">
<wd-tooltip v-model="show7" placement="left-start" content="left-start 提示文字" @change="handleChange7">
<wd-button :round="false">
left-start
<wd-icon name="setting" />
</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show8" placement="left" content="left 提示文字" style="margin: 20px 0" @change="handleChange8">
<wd-button :round="false">left</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show9" placement="left-end" content="left-end 提示文字" @change="handleChange9">
<wd-button :round="false">left-end</wd-button>
</wd-tooltip>
</view>
<view class="bottom">
<wd-tooltip v-model="show10" placement="top-start" content="top-start 提示文字" @change="handleChange10">
<wd-button :round="false">top-start</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show11" placement="top" content="top 提示文字" @change="handleChange11">
<wd-button :round="false">top</wd-button>
</wd-tooltip>
<wd-tooltip v-model="show12" placement="top-end" content="top-end 提示文字" @change="handleChange12">
<wd-button :round="false">top-end</wd-button>
</wd-tooltip>
</view>
</demo-block>
<demo-block title="显示关闭按钮">
<view class="demo-left">
<wd-tooltip v-model="show13" content="显示关闭按钮" placement="right" show-close @change="handleChange13">
<wd-button :round="false">显示关闭按钮</wd-button>
</wd-tooltip>
</view>
</demo-block>
<demo-block title="多行文本">
<view class="demo-left lines-demo">
<wd-tooltip v-model="show14" placement="right" use-content-slot @change="handleChange14">
<wd-button :round="false">多行文本</wd-button>
<template #content>
<view class="lines-content">
<view>多行文本1</view>
<view>多行文本2</view>
<view>多行文本3</view>
</view>
</template>
</wd-tooltip>
</view>
</demo-block>
<demo-block title="控制显隐">
<wd-button plain @click="control" size="small" class="button-control">{{ show15 ? '关闭' : '打开' }}</wd-button>
<view class="demo-left demo-control">
<wd-tooltip placement="top" content="控制显隐" v-model="show15">
<wd-button :round="false">top</wd-button>
</wd-tooltip>
</view>
</demo-block>
<demo-block title="绑定事件">
<view class="demo-left">
<wd-tooltip v-model="show16" placement="right-end" :content="content" @open="onShow" @close="onHide" @change="handleChange16">
<wd-button :round="false">事件</wd-button>
</wd-tooltip>
</view>
</demo-block>
<demo-block title="禁用">
<view class="demo-left">
<wd-tooltip v-model="show17" placement="right-end" content="禁用" disabled @change="handleChange17">
<wd-button :round="false">禁用</wd-button>
</wd-tooltip>
</view>
</demo-block>
</page-wraper>
</view>
</template>
<script lang="ts" setup>
@ -122,6 +128,7 @@ const content = ref<string>('显示内容')
const toast = useToast()
function control() {
show15.value = !show15.value
// this.setData({ show15: !this.data.show15 })
}
function onShow() {

66
src/pages/transition/Index.vue
View File

@ -1,45 +1,47 @@
<template>
<view>
<demo-block title="Fade 动画">
<wd-button @click="fade">fade</wd-button>
<wd-button @click="fadeUp">fade-up</wd-button>
<wd-button @click="fadeDown">fade-down</wd-button>
<wd-button @click="fadeLeft">fade-left</wd-button>
<wd-button @click="fadeRight">fade-right</wd-button>
</demo-block>
<demo-block title="Slide 动画">
<wd-button @click="slideUp">slide-up</wd-button>
<wd-button @click="slideDown">slide-down</wd-button>
<wd-button @click="slideLeft">slide-left</wd-button>
<wd-button @click="slideRight">slide-right</wd-button>
</demo-block>
<demo-block title="Zoom 动画">
<wd-button @click="zoomIn">zoom-in</wd-button>
</demo-block>
<demo-block title="自定义动画">
<wd-button @click="custom">custom</wd-button>
</demo-block>
<page-wraper>
<demo-block title="Fade 动画">
<wd-button @click="fade">fade</wd-button>
<wd-button @click="fadeUp">fade-up</wd-button>
<wd-button @click="fadeDown">fade-down</wd-button>
<wd-button @click="fadeLeft">fade-left</wd-button>
<wd-button @click="fadeRight">fade-right</wd-button>
</demo-block>
<demo-block title="Slide 动画">
<wd-button @click="slideUp">slide-up</wd-button>
<wd-button @click="slideDown">slide-down</wd-button>
<wd-button @click="slideLeft">slide-left</wd-button>
<wd-button @click="slideRight">slide-right</wd-button>
</demo-block>
<demo-block title="Zoom 动画">
<wd-button @click="zoomIn">zoom-in</wd-button>
</demo-block>
<demo-block title="自定义动画">
<wd-button @click="custom">custom</wd-button>
</demo-block>
<wd-transition :show="show" :name="name" custom-class="block" />
<wd-transition :show="show" :name="name" custom-class="block" />
<wd-transition
:show="customShow"
:duration="{ enter: 700, leave: 1000 }"
enter-class="custom-enter"
enter-active-class="custom-enter-active"
enter-to-class="custom-enter-to"
leave-class="custom-leave"
leave-active-class="custom-leave-active"
leave-to-class="custom-leave-to"
custom-class="block"
/>
<wd-transition
:show="customShow"
:duration="{ enter: 700, leave: 1000 }"
enter-class="custom-enter"
enter-active-class="custom-enter-active"
enter-to-class="custom-enter-to"
leave-class="custom-leave"
leave-active-class="custom-leave-active"
leave-to-class="custom-leave-to"
custom-class="block"
/>
</page-wraper>
</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const show = ref<boolean>(false)
const name = ref<string>('')
const name = ref<any>('')
const customShow = ref<boolean>(false)
function fade() {
transition('fade')

111
src/pages/upload/Index.vue
View File

@ -1,54 +1,47 @@
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-14 12:40:09
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\upload\Index.vue
* 记得注释
-->
<template>
<wd-message-box id="wd-message-box"></wd-message-box>
<wd-toast id="wd-toast"></wd-toast>
<demo-block title="基本用法">
<wd-upload :file-list="fileList1" :action="action" @change="handleChange1"></wd-upload>
</demo-block>
<demo-block title="多选上传">
<wd-upload :file-list="fileList2" multiple :action="action" @change="handleChange2"></wd-upload>
</demo-block>
<demo-block title="最大上传数限制">
<wd-upload :file-list="fileList3" :limit="3" :action="action" @change="handleChange3"></wd-upload>
</demo-block>
<demo-block title="拦截预览图片操作">
<wd-upload :file-list="fileList4" :action="action" @change="handleChange4" :before-preview="beforePreview"></wd-upload>
</demo-block>
<demo-block title="上传前置处理">
<wd-upload :file-list="fileList5" :action="action" @change="handleChange5" :before-upload="beforeUpload"></wd-upload>
</demo-block>
<demo-block title="移除图片前置处理">
<wd-upload :file-list="fileList6" :action="action" @change="handleChange6" :before-remove="beforeRemove"></wd-upload>
</demo-block>
<demo-block title="上传状态钩子">
<wd-upload
:file-list="fileList7"
:action="action"
@change="handleChange7"
@success="handleSuccess"
@fail="handleFail"
@progress="handleProgess"
></wd-upload>
</demo-block>
<demo-block title="禁用">
<wd-upload :file-list="fileList8" disabled :action="action" @change="handleChange8"></wd-upload>
</demo-block>
<demo-block title="自定义唤起上传样式">
<wd-upload :file-list="fileList9" :action="action" @change="handleChange9" use-default-slot>
<wd-button>自定义唤起样式</wd-button>
</wd-upload>
</demo-block>
<demo-block title="选择文件前置处理">
<wd-upload :file-list="fileList10" :action="action" @change="handleChange10" :before-choose="beforeChoose"></wd-upload>
</demo-block>
<page-wraper>
<wd-message-box></wd-message-box>
<wd-toast id="wd-toast"></wd-toast>
<demo-block title="基本用法">
<wd-upload :file-list="fileList1" :action="action" @change="handleChange1"></wd-upload>
</demo-block>
<demo-block title="多选上传">
<wd-upload :file-list="fileList2" multiple :action="action" @change="handleChange2"></wd-upload>
</demo-block>
<demo-block title="最大上传数限制">
<wd-upload :file-list="fileList3" :limit="3" :action="action" @change="handleChange3"></wd-upload>
</demo-block>
<demo-block title="拦截预览图片操作">
<wd-upload :file-list="fileList4" :action="action" @change="handleChange4" :before-preview="beforePreview"></wd-upload>
</demo-block>
<demo-block title="上传前置处理">
<wd-upload :file-list="fileList5" :action="action" @change="handleChange5" :before-upload="beforeUpload"></wd-upload>
</demo-block>
<demo-block title="移除图片前置处理">
<wd-upload :file-list="fileList6" :action="action" @change="handleChange6" :before-remove="beforeRemove"></wd-upload>
</demo-block>
<demo-block title="上传状态钩子">
<wd-upload
:file-list="fileList7"
:action="action"
@change="handleChange7"
@success="handleSuccess"
@fail="handleFail"
@progress="handleProgess"
></wd-upload>
</demo-block>
<demo-block title="禁用">
<wd-upload :file-list="fileList8" disabled :action="action" @change="handleChange8"></wd-upload>
</demo-block>
<demo-block title="自定义唤起上传样式">
<wd-upload :file-list="fileList9" :action="action" @change="handleChange9" use-default-slot>
<wd-button>自定义唤起样式</wd-button>
</wd-upload>
</demo-block>
<demo-block title="选择文件前置处理">
<wd-upload :file-list="fileList10" :action="action" @change="handleChange10" :before-choose="beforeChoose"></wd-upload>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
import { useToast, useMessage } from '@/uni_modules/wot-design-uni'
@ -65,15 +58,15 @@ const fileList2 = ref<any[]>([
url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg'
}
])
const fileList3 = ref<string[]>([])
const fileList4 = ref<string[]>([])
const fileList5 = ref<string[]>([])
const fileList6 = ref<string[]>([])
const fileList7 = ref<string[]>([])
const fileList8 = ref<string[]>([])
const fileList9 = ref<string[]>([])
const fileList10 = ref<string[]>([])
const fileList11 = ref<string[]>([])
const fileList3 = ref<Record<string, any>[]>([])
const fileList4 = ref<Record<string, any>[]>([])
const fileList5 = ref<Record<string, any>[]>([])
const fileList6 = ref<Record<string, any>[]>([])
const fileList7 = ref<Record<string, any>[]>([])
const fileList8 = ref<Record<string, any>[]>([])
const fileList9 = ref<Record<string, any>[]>([])
const fileList10 = ref<Record<string, any>[]>([])
const fileList11 = ref<Record<string, any>[]>([])
const messageBox = useMessage()
const toast = useToast()

90
src/static/touch-emulator.js Normal file
View File

@ -0,0 +1,90 @@
/**
* Minified by jsDelivr using Terser v5.14.1.
* Original file: /npm/@vant/touch-emulator@1.4.0/dist/index.js
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
!(function () {
if ('undefined' != typeof window) {
var e,
t = 'ontouchstart' in window
document.createTouch ||
(document.createTouch = function (e, t, o, u, c, i, r) {
return new n(t, o, { pageX: u, pageY: c, screenX: i, screenY: r, clientX: u - window.pageXOffset, clientY: c - window.pageYOffset }, 0, 0)
}),
document.createTouchList ||
(document.createTouchList = function () {
for (var e = u(), t = 0; t < arguments.length; t++) e[t] = arguments[t]
return (e.length = arguments.length), e
}),
Element.prototype.matches || (Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector),
Element.prototype.closest ||
(Element.prototype.closest = function (e) {
var t = this
do {
if (t.matches(e)) return t
t = t.parentElement || t.parentNode
} while (null !== t && 1 === t.nodeType)
return null
})
var n = function (e, t, n, o, u) {
;(o = o || 0),
(u = u || 0),
(this.identifier = t),
(this.target = e),
(this.clientX = n.clientX + o),
(this.clientY = n.clientY + u),
(this.screenX = n.screenX + o),
(this.screenY = n.screenY + u),
(this.pageX = n.pageX + o),
(this.pageY = n.pageY + u)
},
o = !1
;(s.multiTouchOffset = 75), t || new s()
}
function u() {
var e = []
return (
(e.item = function (e) {
return this[e] || null
}),
(e.identifiedTouch = function (e) {
return this[e + 1] || null
}),
e
)
}
function c(t) {
return function (n) {
var u, c, s
;('mousedown' === n.type && (o = !0), 'mouseup' === n.type && (o = !1), 'mousemove' !== n.type || o) &&
(('mousedown' === n.type || !e || (e && !e.dispatchEvent)) && (e = n.target),
null == e.closest('[data-no-touch-simulate]') &&
((u = t),
(c = n),
(s = document.createEvent('Event')).initEvent(u, !0, !0),
(s.altKey = c.altKey),
(s.ctrlKey = c.ctrlKey),
(s.metaKey = c.metaKey),
(s.shiftKey = c.shiftKey),
(s.touches = r(c)),
(s.targetTouches = r(c)),
(s.changedTouches = i(c)),
e.dispatchEvent(s)),
'mouseup' === n.type && (e = null))
}
}
function i(t) {
var o = u()
return o.push(new n(e, 1, t, 0, 0)), o
}
function r(e) {
return 'mouseup' === e.type ? u() : i(e)
}
function s() {
window.addEventListener('mousedown', c('touchstart'), !0),
window.addEventListener('mousemove', c('touchmove'), !0),
window.addEventListener('mouseup', c('touchend'), !0)
}
})()
//# sourceMappingURL=/sm/09d4343b52fa585c57a1a2c7344e01acc2c39070e2053d5939820b8f1140409d.map

15
src/store/index.ts Normal file
View File

@ -0,0 +1,15 @@
import { ref } from 'vue'
const isDark = ref<boolean>(false)
function setDark(dark: boolean) {
isDark.value = dark
process.env.NODE_ENV === 'development' && uni.setStorageSync('isDark', dark)
}
export function useDark() {
process.env.NODE_ENV === 'development'
? setDark(Boolean(uni.getStorageSync('isDark')))
: localStorage.getItem('vitepress-theme-appearance') === 'dark'
return { isDark, setDark }
}

18
src/theme.json Normal file
View File

@ -0,0 +1,18 @@
{
"dark": {
"navBgColor": "#292929",
"navTxtStyle": "white",
"bgColor": "#000",
"bgTxtStyle": "light",
"bgColorTop": "#000",
"bgColorBottom": "#000"
},
"light": {
"navBgColor": "#FFF",
"navTxtStyle": "black",
"bgColor": "#F8F8F8",
"bgTxtStyle": "dark",
"bgColorTop": "#F8F8F8",
"bgColorBottom": "#F8F8F8"
}
}

14
src/uni.scss
View File

@ -1 +1,13 @@
/* 暗黑模式 */
$-dark-background: #131313 !default;
$-dark-background2: #1b1b1b !default;
$-dark-background3: #141414 !default;
$-dark-background4: #323233 !default;
$-dark-background5: #646566 !default;
$-dark-background6: #380e08 !default;
$-dark-background7: #707070 !default;
$-dark-color: #ffffff !default;
$-dark-color2: #f2270c !default;
$-dark-color3: rgba(232, 230, 227, 0.8) !default;
$-dark-color-gray: #595959 !default;
$-dark-border-color:var(--wot-dark-border-color, #3a3a3c) !default;

16
src/uni_modules/wot-design-uni/components/common/abstracts/_mixin.scss
View File

@ -213,28 +213,28 @@
border-right: $size solid transparent;
border-top: $size solid $bg;
transform: translateX(-50%);
bottom: -$size;
bottom: calc(-1 * $size)
}
@include e(arrow-up) {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid $bg;
transform: translateX(-50%);
top: -$size;
top: calc(-1 * $size)
}
@include e(arrow-left) {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-right: $size solid $bg;
transform: translateY(-50%);
left: -$size;
left: calc(-1 * $size)
}
@include e(arrow-right) {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $bg;
transform: translateY(-50%);
right: -$size;
right: calc(-1 * $size)
}
}
@ -263,7 +263,7 @@
height: $size;
background-color: $bg;
position: absolute;
bottom: - calc($size / 2);
bottom: calc(-1 * $size / 2);
transform: rotateZ(45deg);
box-shadow: $box-shadow;
}
@ -276,7 +276,7 @@
height: $size;
background-color: $bg;
position: absolute;
top: - calc($size / 2);
top: calc(-1 * $size / 2);
transform: rotateZ(45deg);
box-shadow: $box-shadow;
}
@ -289,7 +289,7 @@
height: $size;
background-color: $bg;
position: absolute;
left: - calc($size / 2);
left: calc(-1 * $size / 2);
transform: rotateZ(45deg);
box-shadow: $box-shadow;
}
@ -302,7 +302,7 @@
height: $size;
background-color: $bg;
position: absolute;
right: - calc($size / 2);
right: calc(-1 * $size / 2);
transform: rotateZ(45deg);
box-shadow: $box-shadow;
}

1279
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
View File

File diff suppressed because it is too large Load Diff

45
src/uni_modules/wot-design-uni/components/wd-action-sheet/index.scss
View File

@ -1,19 +1,62 @@
@import '../common/abstracts/variable';
@import '../common/abstracts/mixin';
.wot-theme-dark {
@include b(action-sheet) {
background-color: $-dark-background2;
color: $-dark-color;
@include e(action) {
color: $-dark-color;
background: $-dark-background2;
&:active {
background: $-dark-background4;
}
}
@include e(subname) {
color: $-dark-color3;
}
@include e(cancel) {
color: $-dark-color;
background: $-dark-background4;
&:active {
background: $-dark-background5;
}
}
:deep(.wd-action-sheet__close) {
color: $-dark-color3;
}
@include e(panel-title) {
color: $-dark-color;
}
@include e(header) {
color: $-dark-color;
}
}
}
@include b(action-sheet) {
background-color: #fff;
background-color: $-color-white;
padding-bottom: 1px;
@include edeep(popup) {
border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
}
@include e(actions) {
padding: 8px 0;
max-height: 50vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@include e(action) {
position: relative;
display: block;

8
src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
View File

@ -25,7 +25,6 @@
</view>
<view class="wd-action-sheet__actions" v-if="actions && actions.length">
<button
jd:for="{{ actions }}"
v-for="(action, rowIndex) in actions"
:key="rowIndex"
:class="`wd-action-sheet__action ${action.disabled ? 'wd-action-sheet__action--disabled' : ''} ${
@ -56,7 +55,9 @@
</template>
<script lang="ts">
export default {
name: 'wd-action-sheet',
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
@ -93,8 +94,8 @@ interface Props {
show: boolean
actions: Array<Action>
panels: Array<Panel>
title: string
cancelText: string
title?: string
cancelText?: string
closeOnClickAction: boolean
closeOnClickModal: boolean
duration: number
@ -112,6 +113,7 @@ const props = withDefaults(defineProps<Props>(), {
closeOnClickAction: true,
closeOnClickModal: true,
duration: 200,
zIndex: 10,
lazyRender: false,
safeAreaInsetBottom: true
})

17
src/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: weisheng
* @Date: 2023-06-12 18:40:59
* @LastEditTime: 2023-07-15 16:21:15
* @LastEditTime: 2023-08-15 15:47:51
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-badge\wd-badge.vue
@ -21,18 +21,19 @@
</template>
<script lang="ts">
export default {
// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签
name: 'wd-badge',
options: {
virtualHost: true
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
interface Props {
modelValue: number | null
modelValue: number | string | null
bgColor?: string
max?: number
isDot?: boolean
@ -40,13 +41,13 @@ interface Props {
type?: BadgeType
top?: number
right?: number
customClass?: string
customClass: string
}
const props = withDefaults(defineProps<Props>(), {
customClass: '',
modelValue: null
})
const content = ref<number | null>(null)
const content = ref<number | string | null>(null)
watch(
[() => props.modelValue, () => props.max, () => props.isDot],
@ -64,7 +65,7 @@ function notice() {
if (props.isDot) return
let value = props.modelValue
const max = props.max
if (value && max && !Number.isNaN(value) && !Number.isNaN(max)) {
if (value && max && typeof value === 'number' && !Number.isNaN(value) && !Number.isNaN(max)) {
value = max < value ? max : value
}
content.value = value

65
src/uni_modules/wot-design-uni/components/wd-button/index.scss
View File

@ -82,6 +82,67 @@
}
}
}
.wot-theme-dark {
@include b(button) {
@include when(info) {
@include button-type-style($-dark-color,
$-dark-background4,
$-dark-background5,
$-dark-background7,
$-dark-color3);
}
@include when(plain) {
@include when(info) {
@include button-plain-style($-dark-color, $-dark-background5, $-dark-color, $-dark-color-gray);
}
@include when(primary) {
&.wd-button--active {
background: transparent;
color: themeColor($-color-theme, "light", #9DB9F6);
}
@include when(disabled) {
background-color: transparent;
&.wd-button--active {
background-color: transparent;
}
}
}
}
@include when(text) {
@include when(disabled) {
color: $-dark-color-gray;
background: transparent;
}
}
@include when(icon) {
color: $-dark-color;
&.wd-button--active {
background: $-dark-background4;
}
@include when(disabled) {
color: $-dark-color-gray;
background: transparent;
&.wd-button--active {
background: transparent;
}
}
}
}
}
@include b(button) {
position: relative;
display: inline-flex;
@ -204,7 +265,7 @@
font-size: $-button-medium-fs;
&::after {
border-radius: $-button-medium-radius * 2;
border-radius: calc($-button-medium-radius * 2);
}
@include when(primary) {
box-shadow: $-button-medium-box-shadow-size $-button-primary-box-shadow-color;
@ -256,7 +317,7 @@
font-size: $-button-large-fs;
&::after {
border-radius: $-button-large-radius * 2;
border-radius: calc($-button-large-radius * 2);
}
&:not(.is-plain) {
@include when(primary) {

32
src/uni_modules/wot-design-uni/components/wd-button/wd-button.vue
View File

@ -44,7 +44,9 @@
<script lang="ts">
export default {
name: 'wd-button',
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
@ -65,7 +67,7 @@ const loadingIcon = (color = '#4D80F0', reverse = true) => {
reverse ? '#fff' : color
}"/><path d="M4.599 21c0 9.044 7.332 16.376 16.376 16.376 9.045 0 16.376-7.332 16.376-16.376" stroke="url(#a)" stroke-width="3.5" stroke-linecap="round"/></g></svg>`
}
type ButtonType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'
type ButtonType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'text' | 'icon'
type ButtonSize = 'small' | 'medium' | 'large'
interface Props {
@ -76,19 +78,19 @@ interface Props {
block: boolean
type: ButtonType
size: ButtonSize
icon: string
icon?: string
loading: boolean
loadingColor: string
openType: string
formType: string
hoverStopPropagation: boolean
lang: string
sessionFrom: string
sendMessageTitle: string
sendMessagePath: string
sendMessageImg: string
appParameter: string
showMessageCard: boolean
loadingColor?: string
openType?: string
formType?: string
hoverStopPropagation?: boolean
lang?: string
sessionFrom?: string
sendMessageTitle?: string
sendMessagePath?: string
sendMessageImg?: string
appParameter?: string
showMessageCard?: boolean
customClass: string
customStyle: string
}
@ -100,7 +102,9 @@ const props = withDefaults(defineProps<Props>(), {
loading: false,
suck: false,
block: false,
disabled: false
disabled: false,
customClass: '',
customStyle: ''
})
const hoverStartTime = ref<number>(20)

35
src/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss
View File

@ -1,6 +1,26 @@
@import '../../common/abstracts/variable';
@import '../../common/abstracts/mixin';
.wot-theme-dark {
@include b(month) {
@include e(title) {
color: $-dark-color;
}
@include e(days) {
color: $-dark-color;
}
@include e(day) {
@include when(disabled) {
.wd-month__day-text {
color: $-dark-color-gray;
}
}
}
}
}
@include b(month) {
@include e(title) {
padding: 13px 0;
@ -8,12 +28,14 @@
font-size: $-calendar-panel-title-fs;
color: $-calendar-panel-title-color;
}
@include e(days) {
display: flex;
flex-wrap: wrap;
font-size: $-calendar-day-fs;
color: $-calendar-day-color;
}
@include e(day) {
position: relative;
width: 14.285%;
@ -26,9 +48,11 @@
color: $-calendar-disabled-color;
}
}
@include when(current) {
color: $-calendar-active-color;
}
@include when(selected) {
.wd-month__day-container {
border-radius: $-calendar-active-border;
@ -36,11 +60,13 @@
color: #fff;
}
}
@include when(middle) {
.wd-month__day-container {
background: $-calendar-range-color;
}
}
@include when(start) {
&::after {
position: absolute;
@ -52,15 +78,18 @@
background: $-calendar-range-color;
z-index: 1;
}
&.is-without-end::after {
display: none;
}
.wd-month__day-container {
background: $-calendar-active-color;
color: #fff;
border-radius: $-calendar-active-border;
}
}
@include when(end) {
&::after {
position: absolute;
@ -72,12 +101,14 @@
background: $-calendar-range-color;
z-index: 1;
}
.wd-month__day-container {
background: $-calendar-active-color;
color: #fff;
border-radius: $-calendar-active-border;
}
}
@include when(same) {
.wd-month__day-container {
background: $-calendar-active-color;
@ -86,13 +117,16 @@
}
}
}
@include e(day-container) {
position: relative;
z-index: 2;
}
@include e(day-text) {
font-weight: $-calendar-day-fw;
}
@include e(day-top) {
position: absolute;
top: 10px;
@ -102,6 +136,7 @@
font-size: $-calendar-info-fs;
text-align: center;
}
@include e(day-bottom) {
position: absolute;
bottom: 10px;

16
src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue
View File

@ -24,6 +24,16 @@
</view>
</template>
<script lang="ts">
export default {
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import {
@ -48,9 +58,9 @@ interface Props {
maxDate: number
firstDayOfWeek: number
// eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function
maxRange: number
rangePrompt: string
formatter?: Function
maxRange?: number
rangePrompt?: string
allowSameDay: boolean
defaultTime: Array<number>
}

27
src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/index.scss
View File

@ -1,6 +1,26 @@
@import '../../common/abstracts/variable';
@import '../../common/abstracts/mixin';
.wot-theme-dark {
@include b(month-panel) {
@include e(title) {
color: $-dark-color;
}
@include e(weeks) {
box-shadow: 0px 4px 8px 0 rgba(255, 255, 255, 0.02);
color: $-dark-color;
}
@include e(time-label) {
color: $-dark-color;
&::after{
background: $-dark-background4;
}
}
}
}
@include b(month-panel) {
font-size: $-calendar-fs;
@ -11,6 +31,7 @@
color: $-calendar-panel-title-color;
padding: $-calendar-panel-padding;
}
@include e(weeks) {
display: flex;
height: $-calendar-week-height;
@ -20,18 +41,22 @@
font-size: $-calendar-week-fs;
padding: $-calendar-panel-padding;
}
@include e(week) {
flex: 1;
text-align: center;
}
@include e(container) {
padding: $-calendar-panel-padding;
box-sizing: border-box;
}
@include e(time) {
display: flex;
box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.02);
}
@include e(time-label) {
position: relative;
flex: 1;
@ -52,10 +77,12 @@
z-index: 0;
}
}
@include e(time-text) {
position: relative;
z-index: 1;
}
@include e(time-picker) {
flex: 3;
}

18
src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
View File

@ -51,6 +51,16 @@
</view>
</template>
<script lang="ts">
export default {
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
import { debounce, getType, isEqual } from '../../common/util'
@ -64,15 +74,15 @@ interface Props {
maxDate: number
firstDayOfWeek: number
// eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function
maxRange: number
rangePrompt: string
formatter?: Function
maxRange?: number
rangePrompt?: string
allowSameDay: boolean
showPanelTitle: boolean
defaultTime: Array<number>
panelHeight: number
// eslint-disable-next-line @typescript-eslint/ban-types
timeFilter: Function
timeFilter?: Function
hideSecond: boolean
// 是否展示picker（兼容支付宝和钉钉）
showPicker: boolean

16
src/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue
View File

@ -42,7 +42,13 @@
</template>
<script lang="ts">
export default {
behaviors: ['uni://form-field']
name: 'wd-calendar-view',
behaviors: ['uni://form-field'],
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
@ -68,11 +74,11 @@ interface Props {
firstDayOfWeek: number
// 日期格式化函数
// eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function
formatter?: Function
// type 为范围选择时有效，最大日期范围
maxRange: number
maxRange?: number
// type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
rangePrompt: string
rangePrompt?: string
// type 为范围选择时有效，是否允许选择同一天
allowSameDay: boolean
// 是否展示面板标题，自动计算当前滚动的日期月份
@ -83,7 +89,7 @@ interface Props {
panelHeight: number
// type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
// eslint-disable-next-line @typescript-eslint/ban-types
timeFilter: Function
timeFilter?: Function
// type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
hideSecond: boolean
// 是否展示picker（兼容支付宝和钉钉）

35
src/uni_modules/wot-design-uni/components/wd-calendar-view/year/index.scss
View File

@ -1,6 +1,27 @@
@import '../../common/abstracts/variable';
@import '../../common/abstracts/mixin';
.wot-theme-dark {
@include b(year) {
@include e(title) {
color: $-dark-color;
}
@include e(months) {
color: $-dark-color;
}
@include e(month) {
@include when(disabled) {
.wd-year__month-text {
color: $-dark-color-gray;
}
}
}
}
}
@include b(year) {
@include e(title) {
padding: 13px 0;
@ -8,12 +29,14 @@
font-size: $-calendar-panel-title-fs;
color: $-calendar-panel-title-color;
}
@include e(months) {
display: flex;
flex-wrap: wrap;
font-size: $-calendar-day-fs;
color: $-calendar-day-color;
}
@include e(month) {
position: relative;
width: 25%;
@ -26,9 +49,11 @@
color: $-calendar-disabled-color;
}
}
@include when(current) {
color: $-calendar-active-color;
}
@include when(selected) {
color: #fff;
@ -37,9 +62,11 @@
background: $-calendar-active-color;
}
}
@include when(middle) {
background: $-calendar-range-color;
}
@include when(start) {
color: #fff;
@ -52,14 +79,17 @@
content: '';
background: $-calendar-range-color;
}
.wd-year__month-text {
background: $-calendar-active-color;
border-radius: $-calendar-active-border;
}
&.is-without-end::after {
display: none;
}
}
@include when(end) {
color: #fff;
@ -72,11 +102,13 @@
content: '';
background: $-calendar-range-color;
}
.wd-year__month-text {
background: $-calendar-active-color;
border-radius: $-calendar-active-border;
}
}
@include when(same) {
color: #fff;
@ -86,11 +118,13 @@
}
}
}
@include e(month-text) {
width: $-calendar-month-width;
margin: 0 auto;
text-align: center;
}
@include e(month-top) {
position: absolute;
top: 10px;
@ -100,6 +134,7 @@
font-size: $-calendar-info-fs;
text-align: center;
}
@include e(month-bottom) {
position: absolute;
bottom: 10px;

15
src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue
View File

@ -17,6 +17,15 @@
</view>
</view>
</template>
<script lang="ts">
export default {
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
@ -31,9 +40,9 @@ interface Props {
minDate: number
maxDate: number
// eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function
maxRange: number
rangePrompt: string
formatter?: Function
maxRange?: number
rangePrompt?: string
allowSameDay: boolean
defaultTime: Array<number>
}

9
src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/index.scss
View File

@ -1,6 +1,15 @@
@import '../../common/abstracts/variable';
@import '../../common/abstracts/mixin';
.wot-theme-dark {
@include b(year-panel) {
@include e(title) {
color: $-dark-color;
box-shadow: 0px 4px 8px 0 rgba(255, 255,255, 0.02);
}
}
}
@include b(year-panel) {
font-size: $-calendar-fs;
padding: $-calendar-panel-padding;

15
src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
View File

@ -27,6 +27,15 @@
</scroll-view>
</view>
</template>
<script lang="ts">
export default {
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
import { computed, getCurrentInstance, onMounted, ref, nextTick } from 'vue'
@ -40,9 +49,9 @@ interface Props {
minDate: number
maxDate: number
// eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function
maxRange: number
rangePrompt: string
formatter?: Function
maxRange?: number
rangePrompt?: string
allowSameDay: boolean
showPanelTitle: boolean
defaultTime: Array<number>

64
src/uni_modules/wot-design-uni/components/wd-calendar/index.scss
View File

@ -1,12 +1,54 @@
@import '../common/abstracts/variable';
@import '../common/abstracts/mixin';
.wot-theme-dark {
@include b(calendar) {
@include e(cell) {
background-color: $-dark-background2;
color: $-dark-color;
}
@include e(value) {
color: $-dark-color;
}
@include e(title) {
color: $-dark-color;
}
:deep(.wd-calendar__arrow),
:deep(.wd-calendar__close) {
color: $-dark-color;
}
@include when(border) {
.wd-calendar__cell {
@include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
}
}
@include e(range-label-item) {
color: $-dark-color;
@include when(placeholder) {
color: $-dark-color-gray;
}
}
@include e(range-sperator) {
color: $-dark-color-gray;
}
}
}
@include b(calendar) {
@include when(border) {
.wd-calendar__cell {
@include halfPixelBorder('top', $-cell-padding);
}
}
@include e(cell) {
position: relative;
display: flex;
@ -18,25 +60,30 @@
overflow: hidden;
line-height: $-cell-ling-height;
}
@include e(cell) {
@include when(disabled) {
.wd-calendar__value {
color: $-input-disabled-color;
}
}
@include when(align-right) {
.wd-calendar__value {
text-align: right;
}
}
@include when(error) {
.wd-calendar__value {
color: $-input-error-color;
}
:deep(.wd-calendar__arrow) {
color: $-input-error-color;
}
}
@include when(large) {
font-size: $-cell-title-fs-large;
@ -44,6 +91,7 @@
font-size: $-cell-icon-size-large;
}
}
@include when(center) {
align-items: center;
@ -52,6 +100,7 @@
}
}
}
@include e(label) {
position: relative;
width: $-input-cell-label-width;
@ -65,7 +114,7 @@
&::after {
position: absolute;
left: 0;
top: $-cell-wrapper-padding + 2px;
top: calc($-cell-wrapper-padding + 2px);
content: '*';
font-size: $-cell-required-size;
line-height: 1.1;
@ -73,6 +122,7 @@
}
}
}
@include e(value) {
flex: 1;
padding: $-cell-wrapper-padding 0;
@ -83,10 +133,12 @@
@include when(ellipsis) {
@include lineEllipsis;
}
@include m(placeholder) {
color: $-input-placeholder-color;
}
}
@include edeep(arrow) {
display: block;
margin-top: $-cell-wrapper-padding;
@ -99,6 +151,7 @@
position: relative;
overflow: hidden;
}
@include e(title) {
color: $-action-sheet-color;
height: $-action-sheet-title-height;
@ -107,6 +160,7 @@
font-size: $-action-sheet-title-fs;
font-weight: $-action-sheet-weight;
}
@include edeep(close) {
position: absolute;
top: $-action-sheet-close-top;
@ -116,17 +170,21 @@
transform: rotate(-45deg);
line-height: 1.1;
}
@include e(tabs) {
width: 222px;
margin: 10px auto 12px;
}
@include e(shortcuts) {
padding: 20px 0;
text-align: center;
}
@include edeep(tag) {
margin-right: 8px;
}
@include e(view) {
@include when(show-confirm) {
height: 394px;
@ -136,6 +194,7 @@
}
}
}
@include e(range-label) {
display: flex;
justify-content: center;
@ -147,6 +206,7 @@
box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
}
}
@include e(range-label-item) {
flex: 1;
color: rgba(0, 0, 0, 0.85);
@ -155,10 +215,12 @@
color: rgba(0, 0, 0, 0.25);
}
}
@include e(range-sperator) {
margin: 0 24px;
color: rgba(0, 0, 0, 0.25);
}
@include e(confirm) {
padding: 12px 25px 14px;
}

78
src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
View File

@ -100,8 +100,10 @@
<script lang="ts">
export default {
name: 'wd-calendar',
behaviors: ['uni://form-field'],
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
@ -189,48 +191,48 @@ interface Props {
customLabelClass?: string
customValueClass?: string
modelValue: null | number | Array<number>
type: CalendarType
minDate: number
maxDate: number
firstDayOfWeek: number
type?: CalendarType
minDate?: number
maxDate?: number
firstDayOfWeek?: number
// eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function
maxRange: number
rangePrompt: string
allowSameDay: boolean
defaultTime: string | Array<string>
formatter?: Function
maxRange?: number
rangePrompt?: string
allowSameDay?: boolean
defaultTime?: string | Array<string>
// eslint-disable-next-line @typescript-eslint/ban-types
timeFilter: Function
hideSecond: boolean
label: string
labelWidth: string
useLabelSlot: boolean
useDefaultSlot: boolean
disabled: boolean
readonly: boolean
placeholder: string
title: string
alignRight: boolean
error: boolean
required: boolean
size: string
center: boolean
closeOnClickModal: boolean
zIndex: number
showConfirm: boolean
confirmText: string
timeFilter?: Function
hideSecond?: boolean
label?: string
labelWidth?: string
useLabelSlot?: boolean
useDefaultSlot?: boolean
disabled?: boolean
readonly?: boolean
placeholder?: string
title?: string
alignRight?: boolean
error?: boolean
required?: boolean
size?: string
center?: boolean
closeOnClickModal?: boolean
zIndex?: number
showConfirm?: boolean
confirmText?: string
// eslint-disable-next-line @typescript-eslint/ban-types
displayFormat: Function
displayFormat?: Function
// eslint-disable-next-line @typescript-eslint/ban-types
innerDisplayFormat: Function
ellipsis: boolean
showTypeSwitch: boolean
shortcuts: Array<Record<string, any>>
innerDisplayFormat?: Function
ellipsis?: boolean
showTypeSwitch?: boolean
shortcuts?: Array<Record<string, any>>
// eslint-disable-next-line @typescript-eslint/ban-types
onShortcutsClick: Function
safeAreaInsetBottom: boolean
onShortcutsClick?: Function
safeAreaInsetBottom?: boolean
// eslint-disable-next-line @typescript-eslint/ban-types
beforeConfirm: Function
beforeConfirm?: Function
}
const props = withDefaults(defineProps<Props>(), {
customClass: '',
@ -261,8 +263,8 @@ const props = withDefaults(defineProps<Props>(), {
})
const pickerShow = ref<boolean>(false)
const calendarValue = ref<null | number | number[]>()
const lastCalendarValue = ref<null | number | number[]>()
const calendarValue = ref<null | number | number[]>(null)
const lastCalendarValue = ref<null | number | number[]>(null)
const panelHeight = ref<number>(338)
const confirmBtnDisabled = ref<boolean>(true)
const showValue = ref<string>('')

22
src/uni_modules/wot-design-uni/components/wd-card/index.scss
View File

@ -1,5 +1,27 @@
@import "../common/abstracts/variable.scss";
@import "../common/abstracts/_mixin.scss";
.wot-theme-dark {
@include b(card) {
background-color: $-dark-background2;
@include when(rectangle) {
.wd-card__content {
@include halfPixelBorder('top', 0, $-dark-border-color);
}
.wd-card__footer {
@include halfPixelBorder('top', 0, $-dark-border-color);
}
}
@include e(title-content) {
color: $-dark-color;
}
@include e(content) {
color: $-dark-color3;
}
}
}
@include b(card) {
padding: $-card-padding;

20
src/uni_modules/wot-design-uni/components/wd-card/wd-card.vue
View File

@ -1,12 +1,3 @@
<!--
* @Author: weisheng
* @Date: 2023-07-20 00:34:54
* @LastEditTime: 2023-07-20 12:56:29
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-card\wd-card.vue
* 记得注释
-->
<template>
<view :class="['wd-card', type == 'rectangle' ? 'is-rectangle' : '', customClass]">
<view :class="['wd-card__title-content', customTitleClass]">
@ -24,6 +15,17 @@
</view>
</template>
<script lang="ts">
export default {
name: 'wd-card',
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
interface Props {
title?: string

26
src/uni_modules/wot-design-uni/components/wd-cell-group/index.scss
View File

@ -1,6 +1,32 @@
@import '../common/abstracts/variable.scss';
@import '../common/abstracts/_mixin.scss';
.wot-theme-dark {
@include b(cell-group) {
background-color: $-dark-background2;
@include when(border) {
.wd-cell-group__title {
@include halfPixelBorder('bottom', 0, $-dark-border-color);
}
}
@include e(title) {
background: $-dark-background2;
color: $-dark-color;
}
@include e(right) {
color: $-dark-color3;
}
@include e(body) {
background: $-dark-background2;
}
}
}
@include b(cell-group) {
background-color: $-color-white;

20
src/uni_modules/wot-design-uni/components/wd-cell-group/wd-cell-group.vue
View File

@ -1,3 +1,12 @@
<!--
* @Author: weisheng
* @Date: 2023-08-01 11:12:05
* @LastEditTime: 2023-08-15 16:12:36
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-cell-group\wd-cell-group.vue
* 记得注释
-->
<template>
<view :class="['wd-cell-group', border ? 'is-border' : '', customClass]">
<view v-if="title || value || useSlot" class="wd-cell-group__title">
@ -20,9 +29,11 @@
<script lang="ts">
export default {
// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签
name: 'wd-cell-group',
options: {
virtualHost: true
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
@ -32,13 +43,14 @@ import { getCurrentInstance, provide, ref } from 'vue'
interface Props {
customClass?: string
title: string
value: string
title?: string
value?: string
useSlot: boolean
border: boolean
}
const props = withDefaults(defineProps<Props>(), {
useSlot: false,
border: false,
customClass: ''
})

45
src/uni_modules/wot-design-uni/components/wd-cell/index.scss
View File

@ -1,6 +1,35 @@
@import '../common/abstracts/variable.scss';
@import '../common/abstracts/_mixin.scss';
.wot-theme-dark {
@include b(cell) {
background-color: $-dark-background2;
color: $-dark-color;
@include e(value) {
color: $-dark-color3;
}
@include e(label) {
color: $-dark-color3;
}
@include when(hover) {
background-color: $-dark-background4;
}
@include when(border) {
.wd-cell__wrapper {
@include halfPixelBorder('top', 0, $-dark-border-color);
}
}
:deep(.wd-cell__arrow-right){
color: $-dark-color;
}
}
}
@include b(cell) {
position: relative;
padding-left: $-cell-padding;
@ -15,6 +44,7 @@
@include halfPixelBorder('top');
}
}
@include e(wrapper) {
position: relative;
display: flex;
@ -28,14 +58,17 @@
.wd-cell__right {
margin-top: $-cell-vertical-top;
}
.wd-cell__value {
text-align: left;
}
}
@include when(label) {
padding: $-cell-wrapper-padding-with-label $-cell-padding $-cell-wrapper-padding-with-label 0;
}
}
@include e(left) {
position: relative;
flex: 1;
@ -58,23 +91,27 @@
}
}
}
@include e(right) {
position: relative;
display: flex;
flex: 1;
}
@include e(title) {
flex: 1;
width: 100%;
font-size: $-cell-title-fs;
margin-right: $-cell-padding;
}
@include e(label) {
margin-top: 2px;
font-size: $-cell-label-fs;
color: $-cell-label-color;
@include lineEllipsis;
}
@include edeep(icon) {
display: block;
position: relative;
@ -84,6 +121,7 @@
margin-right: $-cell-icon-right;
font-size: $-cell-icon-size;
}
@include e(value) {
position: relative;
flex: 1;
@ -93,6 +131,7 @@
line-height: $-cell-value-line-height;
vertical-align: top;
}
@include edeep(arrow-right) {
display: inline-block;
margin-left: 8px;
@ -102,25 +141,31 @@
color: $-cell-arrow-color;
vertical-align: top;
}
@include when(link) {
-webkit-tap-highlight-color: $-cell-tap-bg;
}
@include when(hover) {
background-color: $-cell-tap-bg;
}
@include when(large) {
.wd-cell__title {
font-size: $-cell-title-fs-large;
}
.wd-cell__label {
font-size: $-cell-label-fs-large;
}
.wd-cell__icon {
font-size: $-cell-icon-size-large;
width: $-cell-icon-size-large;
height: $-cell-icon-size-large;
}
}
@include when(center) {
.wd-cell__wrapper {
align-items: center;

17
src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue
View File

@ -47,7 +47,9 @@
<script lang="ts">
export default {
name: 'wd-cell',
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
@ -58,17 +60,16 @@ export default {
import { useCell } from '../mixins/useCell'
interface Props {
title: string
value: string
icon: string
label: string
isLabel: string
title?: string
value?: string
icon?: string
label?: string
isLink: boolean
to: string
to?: string
replace: boolean
clickable: boolean
size: string
titleWidth: string
size?: string
titleWidth?: string
center: boolean
required: boolean
vertical: boolean

5
src/uni_modules/wot-design-uni/components/wd-checkbox-group/index.scss
View File

@ -1,6 +1,11 @@
@import "./../common/abstracts/_mixin.scss";
@import "./../common/abstracts/variable.scss";
.wot-theme-dark {
@include b(checkbox-group) {
background-color: $-dark-background2;
}
}
@include b(checkbox-group) {
background-color: $-checkbox-bg;

21
src/uni_modules/wot-design-uni/components/wd-checkbox-group/wd-checkbox-group.vue
View File

@ -5,7 +5,13 @@
</template>
<script lang="ts">
export default {
behaviors: ['uni://form-field']
name: 'wd-checkbox-group',
behaviors: ['uni://form-field'],
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
@ -17,20 +23,21 @@ type checkShape = 'circle' | 'square' | 'button'
interface Props {
customClass?: string
modelValue: Array<string | number | boolean>
cell: boolean | null
cell: boolean
shape: checkShape
checkedColor: string
disabled: boolean | null
disabled: boolean
min: number
max: number
inline: boolean | null
size: string
name: string
inline: boolean
size?: string
name?: string
}
const props = withDefaults(defineProps<Props>(), {
customClass: '',
value: () => [],
modelValue: () => [],
cell: false,
shape: 'circle',
checkedColor: '#4D80F0',
disabled: false,

91
src/uni_modules/wot-design-uni/components/wd-checkbox/index.scss
View File

@ -1,6 +1,75 @@
@import "./../common/abstracts/_mixin.scss";
@import "./../common/abstracts/variable.scss";
.wot-theme-dark {
@include b(checkbox) {
@include e(shape) {
background: transparent;
border-color: $-checkbox-border-color;
color: $-checkbox-check-color;
}
@include e(label) {
color: $-dark-color;
}
@include when(disabled) {
.wd-checkbox__shape {
border-color: $-dark-color-gray;
background: $-dark-background4;
}
.wd-checkbox__label {
color: $-dark-color-gray;
}
:deep(.wd-checkbox__check) {
color: $-dark-color-gray;
}
@include when(checked) {
.wd-checkbox__shape {
color: $-dark-color-gray;
}
.wd-checkbox__label {
color: $-dark-color-gray;
}
}
@include when(button) {
.wd-checkbox__label {
border-color: #c8c9cc;
background: #3a3a3c;
color: $-dark-color-gray;
}
@include when(checked) {
.wd-checkbox__label {
border-color: #c8c9cc;
background: #3a3a3c;
color: #c8c9cc;
}
}
}
}
@include when(button) {
.wd-checkbox__label {
background-color: $-dark-background;
}
@include when(checked) {
.wd-checkbox__label {
background-color: $-dark-background2;
}
}
}
}
}
@include b(checkbox) {
display: block;
margin-bottom: $-checkbox-margin;
@ -29,6 +98,7 @@
border-radius: $-checkbox-square-radius;
}
}
@include e(input) {
position: absolute;
width: 0;
@ -36,6 +106,7 @@
margin: 0;
opacity: 0;
}
@include edeep(btn-check) {
display: inline-block;
font-size: $-checkbox-icon-size;
@ -44,12 +115,14 @@
width: $-checkbox-icon-size;
vertical-align: middle;
}
@include e(txt) {
display: inline-block;
vertical-align: middle;
line-height: 20px;
@include lineEllipsis;
}
@include e(label) {
position: relative;
display: inline-block;
@ -58,18 +131,21 @@
font-size: $-checkbox-label-fs;
color: $-checkbox-label-color;
}
@include edeep(check) {
color: $-checkbox-check-color;
font-size: $-checkbox-icon-size;
opacity: 0;
transition: opacity 0.2s;
}
@include when(checked) {
.wd-checkbox__shape {
color: $-checkbox-checked-color;
background: currentColor;
border-color: currentColor;
}
:deep(.wd-checkbox__check) {
opacity: 1;
position: absolute;
@ -89,6 +165,7 @@
@include when(last-child) {
margin-right: 0;
}
.wd-checkbox__shape {
width: 0;
height: 0;
@ -96,6 +173,7 @@
opacity: 0;
border: none;
}
.wd-checkbox__label {
display: inline-flex;
flex-direction: row;
@ -112,6 +190,7 @@
transition: color 0.2s, border 0.2s;
box-sizing: border-box;
}
@include when(checked) {
.wd-checkbox__label {
color: $-checkbox-checked-color;
@ -137,23 +216,28 @@
border-color: $-checkbox-border-color;
background: $-checkbox-disabled-check-bg;
}
.wd-checkbox__label {
color: $-checkbox-disabled-label-color;
}
@include when(checked) {
.wd-checkbox__shape {
color: $-checkbox-disabled-check-color;
}
.wd-checkbox__label {
color: $-checkbox-disabled-label-color;
}
}
@include when(button) {
.wd-checkbox__label {
background: $-checkbox-disabled-color;
border-color: $-checkbox-button-border;
color: $-checkbox-disabled-label-color;
}
@include when(checked) {
.wd-checkbox__label {
border-color: $-checkbox-button-disabled-border;
@ -161,6 +245,7 @@
}
}
}
// 以下内容用于解决父子组件样式隔离的问题 —— START
@include when(cell-box) {
padding: 13px 15px;
@ -170,6 +255,7 @@
padding: 14px 15px;
}
}
@include when(button-box) {
display: inline-flex;
width: 33.3333%;
@ -186,18 +272,21 @@
clear: both;
}
}
@include when(large) {
.wd-checkbox__shape {
width: $-checkbox-large-size;
height: $-checkbox-large-size;
font-size: $-checkbox-large-size;
}
.wd-checkbox__label {
font-size: $-checkbox-large-label-fs;
}
:deep(.wd-checkbox__check) {
top: 0;
left: 1px;
}
}
}
}

15
src/uni_modules/wot-design-uni/components/wd-checkbox/wd-checkbox.vue
View File

@ -13,7 +13,7 @@
:class="`wd-checkbox__shape ${innerShape === 'square' ? 'is-square' : ''} ${customShapeClass}`"
:style="isChecked && !innerDisabled && innerCheckedColor ? 'color :' + innerCheckedColor : ''"
>
<wd-icon custom-class="wd-checkbox__check" name="check-bold" size="14px" color="#ffffff" />
<wd-icon custom-class="wd-checkbox__check" name="check-bold" size="14px" />
</view>
<!--shape为button时只保留wd-checkbox__label-->
<view
@ -32,8 +32,10 @@
<script lang="ts">
export default {
name: 'wd-checkbox',
behaviors: ['uni://form-field'],
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
@ -50,21 +52,22 @@ interface Props {
customClass?: string
modelValue: string | number | boolean
shape: checkShape
checkedColor: string
disabled: boolean | null
checkedColor?: string
disabled: boolean
trueValue: string | number | boolean
falseValue: string | number | boolean
size: string
maxWidth: string
size?: string
maxWidth?: string
}
const props = withDefaults(defineProps<Props>(), {
customLabelClass: '',
customShapeClass: '',
customClass: '',
shape: 'circle',
trueValue: true,
falseValue: false,
disabled: null
disabled: false
})
const isChecked = ref<boolean>(false) // 是否被选中

45
src/uni_modules/wot-design-uni/components/wd-col-picker/index.scss
View File

@ -1,6 +1,47 @@
@import '../common/abstracts/variable';
@import '../common/abstracts/mixin';
@import '../wd-action-sheet/index.scss';
.wot-theme-dark {
@include b(col-picker) {
@include when(border) {
.wd-col-picker__cell {
@include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
}
}
@include e(cell) {
background-color: $-dark-background2;
color: $-dark-color;
@include when(disabled) {
.wd-col-picker__value {
color: $-dark-color3;
}
}
}
@include e(value) {
color: $-dark-color;
@include m(placeholder) {
color: $-dark-color-gray;
}
}
:deep(.wd-col-picker__arrow) {
color: $-dark-color;
}
@include e(list) {
color: $-dark-color;
}
@include e(selected) {
color: $-dark-color;
}
}
}
@include b(col-picker) {
@include when(border) {
@ -60,7 +101,7 @@
&::after {
position: absolute;
left: 0;
top: $-cell-wrapper-padding + 2px;
top: calc($-cell-wrapper-padding + 2px);
content: '*';
font-size: $-cell-required-size;
line-height: 1.1;

125
src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
View File

@ -79,8 +79,10 @@
</template>
<script lang="ts">
export default {
name: 'wd-col-picker',
behaviors: ['uni://form-field'],
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
@ -102,26 +104,26 @@ interface Props {
customValueClass?: string
modelValue: Array<Record<string, any>>
columns: Array<Array<Record<string, any>>>
label: string
label?: string
labelWidth: string
useLabelSlot: boolean
useDefaultSlot: boolean
disabled: boolean
readonly: boolean
placeholder: string
title: string
title?: string
// 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish
// eslint-disable-next-line @typescript-eslint/ban-types
columnChange: Function
columnChange?: Function
// 外部展示格式化函数
// eslint-disable-next-line @typescript-eslint/ban-types
displayFormat: Function
displayFormat?: Function
// eslint-disable-next-line @typescript-eslint/ban-types
beforeConfirm: Function
beforeConfirm?: Function
alignRight: boolean
error: boolean
required: boolean
size: string
size?: string
valueKey: string
labelKey: string
tipKey: string
@ -138,6 +140,7 @@ const props = withDefaults(defineProps<Props>(), {
customViewClass: '',
customLabelClass: '',
customValueClass: '',
columns: () => [],
useLabelSlot: false,
useDefaultSlot: false,
disabled: false,
@ -214,6 +217,8 @@ watch(
selectShowList.value = pickerColSelected.value.map((item, colIndex) => {
return getSelectedItem(item, colIndex, newSelectedList)[props.labelKey]
})
console.log(selectShowList.value, 'watch props.columns')
lastSelectList.value = newSelectedList
if (newSelectedList.length > 0) {
@ -310,7 +315,6 @@ function showPicker() {
function getSelectedItem(value, colIndex, selectList) {
const { valueKey, labelKey } = props
if (selectList[colIndex]) {
const selecteds = selectList[colIndex].filter((item) => {
return item[valueKey] === value
@ -337,70 +341,73 @@ function chooseItem(colIndex, index) {
pickerColSelected.value = newPickerColSelected
selectList.value = selectList.value.slice(0, colIndex + 1)
selectShowList.value = newPickerColSelected.map((item, colIndex) => {
return getSelectedItem(item, colIndex, selectList)[props.labelKey]
return getSelectedItem(item, colIndex, selectList.value)[props.labelKey]
})
handleColChange(colIndex, item, index)
}
function handleColChange(colIndex, item, index, callback?) {
loading.value = true
const { columnChange, beforeConfirm } = props
columnChange({
selectedItem: item,
index: colIndex,
rowIndex: index,
resolve: (nextColumn) => {
if (!(nextColumn instanceof Array)) {
console.error('[wot design] error(wd-col-picker): the data of each column of wd-col-picker should be an array')
return
}
columnChange &&
columnChange({
selectedItem: item,
index: colIndex,
rowIndex: index,
resolve: (nextColumn) => {
if (!(nextColumn instanceof Array)) {
console.error('[wot design] error(wd-col-picker): the data of each column of wd-col-picker should be an array')
return
}
const newSelectList = selectList.value.slice(0)
newSelectList[colIndex + 1] = nextColumn
const newSelectList = selectList.value.slice(0)
newSelectList[colIndex + 1] = nextColumn
selectList.value = newSelectList
loading.value = false
currentCol.value = colIndex + 1
updateLineAndScroll(true)
if (typeof callback === 'function') {
isCompleting.value = false
selectShowList.value = pickerColSelected.value.map((item, colIndex) => {
return getSelectedItem(item, colIndex, selectList.value)[props.labelKey]
})
callback()
}
},
finish: (isOk) => {
// 每设置展示数据回显
if (typeof callback === 'function') {
selectList.value = newSelectList
loading.value = false
isCompleting.value = false
return
}
if (getType(isOk) === 'boolean' && !isOk) {
loading.value = false
return
}
currentCol.value = colIndex + 1
if (beforeConfirm) {
beforeConfirm(
pickerColSelected.value,
pickerColSelected.value.map((item, colIndex) => {
return getSelectedItem(item, colIndex, selectList.value)
}),
(isPass) => {
if (isPass) {
onConfirm()
} else {
loading.value = false
updateLineAndScroll(true)
if (typeof callback === 'function') {
isCompleting.value = false
selectShowList.value = pickerColSelected.value.map((item, colIndex) => {
return getSelectedItem(item, colIndex, selectList.value)[props.labelKey]
})
console.log(selectShowList.value, 'handleColChange')
callback()
}
},
finish: (isOk) => {
// 每设置展示数据回显
if (typeof callback === 'function') {
loading.value = false
isCompleting.value = false
return
}
if (getType(isOk) === 'boolean' && !isOk) {
loading.value = false
return
}
if (beforeConfirm) {
beforeConfirm(
pickerColSelected.value,
pickerColSelected.value.map((item, colIndex) => {
return getSelectedItem(item, colIndex, selectList.value)
}),
(isPass) => {
if (isPass) {
onConfirm()
} else {
loading.value = false
}
}
}
)
} else {
onConfirm()
)
} else {
onConfirm()
}
}
}
})
})
}
function onConfirm() {
isChange.value = false

10
src/uni_modules/wot-design-uni/components/wd-col/index.scss
View File

@ -9,7 +9,11 @@ $i: 1;
}
@while $i <= 24 {
.wd-col__#{$i} { width: 100% / 24 * $i; }
.wd-col__offset-#{$i} { margin-left: 100% / 24 * $i; }
$i : $i + 1;
.wd-col__#{$i} {
width: calc(100% / 24 * $i);
}
.wd-col__offset-#{$i} {
margin-left: calc(100% / 24 * $i);
}
$i: $i + 1;
}

32
src/uni_modules/wot-design-uni/components/wd-col/wd-col.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:34:35
* @LastEditTime: 2023-06-13 12:42:43
* @LastEditTime: 2023-08-15 13:06:34
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-col\wd-col.vue
@ -13,6 +13,16 @@
<slot />
</view>
</template>
<script lang="ts">
export default {
name: 'wd-col',
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
import { inject, provide, watch } from 'vue'
@ -63,23 +73,5 @@ provide('setGutter', setGutter) // 将设置子项方法导出
</script>
<style lang="scss" scoped>
@import '../common/abstracts/variable';
@import '../common/abstracts/mixin';
$i: 1;
@include b(col) {
float: left;
box-sizing: border-box;
}
@while $i <= 24 {
.wd-col__#{$i} {
width: calc(100% / 24 * $i);
}
.wd-col__offset-#{$i} {
margin-left: calc(100% / 24 * $i);
}
$i: $i + 1;
}
@import './index.scss';
</style>

21
src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss
View File

@ -1,6 +1,27 @@
@import '../common/abstracts/variable';
@import '../common/abstracts/mixin';
.wot-theme-dark {
@include b(collapse-item) {
@include e(title) {
color: $-dark-color;
}
@include e(body) {
color: $-dark-color3;
}
@include when(disabled) {
.wd-collapse-item__title {
color: $-dark-color-gray;
}
.wd-collapse-item__arrow {
color: $-dark-color-gray;
}
}
}
}
@include b(collapse-item) {
@include e(header) {
position: relative;

14
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: weisheng
* @Date: 2023-08-01 11:12:05
* @LastEditTime: 2023-08-04 13:34:54
* @LastEditTime: 2023-08-15 16:30:17
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-collapse-item\wd-collapse-item.vue
@ -20,6 +20,16 @@
</view>
</view>
</template>
<script lang="ts">
export default {
name: 'wd-collapse-item',
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
import { computed, getCurrentInstance, inject, onMounted, ref, watch } from 'vue'
@ -30,7 +40,7 @@ const $body = '.wd-collapse-item__body'
interface Props {
customClass?: string
title: string
title?: string
disabled: boolean
name: string
// 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise

10
src/uni_modules/wot-design-uni/components/wd-collapse/index.scss
View File

@ -1,6 +1,16 @@
@import "../common/abstracts/variable";
@import "../common/abstracts/mixin";
.wot-theme-dark {
@include b(collapse) {
background: $-dark-background2;
@include e(content) {
color: $-dark-color3;
}
}
}
@include b(collapse) {
background: $-color-white;

Some files were not shown because too many files have changed in this diff Show More