admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-07 01:28:30 +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> <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> </template>
<script setup> <script setup lang="ts">
import { useRoute } from 'vitepress'; import { useRoute, useData } from 'vitepress';
import { computed } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
const baseUrl = process.env.NODE_ENV === 'production' ? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/` : 'http://localhost:5173/#/' const baseUrl = process.env.NODE_ENV === 'production' ? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/` : 'http://localhost:5173/demo/#/'
const route = useRoute() const route = useRoute()
const href = computed(() => { const href = computed(() => {
const path = route.path const path = route.path
@ -28,6 +19,15 @@ const href = computed(() => {
return href 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> </script>
<style scoped> <style scoped>
::-webkit-scrollbar { ::-webkit-scrollbar {

2
docs/component/form.md
View File

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

3
index.html
View File

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

27
src/App.vue
View File

@ -1,15 +1,37 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-03-09 19:23:03 * @Date: 2023-03-09 19:23:03
* @LastEditTime: 2023-07-22 17:56:50 * @LastEditTime: 2023-08-15 23:20:15
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\App.vue * @FilePath: \wot-design-uni\src\App.vue
* 记得注释 * 记得注释
--> -->
<script setup lang="ts"> <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) => { 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') console.log('App Launch')
}) })
onShow(() => { onShow(() => {
@ -24,6 +46,7 @@ onHide(() => {
width: 0; width: 0;
height: 0; height: 0;
} }
page { page {
margin: 0; margin: 0;
padding: 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> <template>
<view :class="['demo-block', transparent ? '' : 'is-white', customClass]"> <view :class="['demo-block', transparent ? '' : 'is-white', customClass]">
<view class="demo-title">{{ title }}</view> <view class="demo-title">{{ title }}</view>
@ -8,9 +17,10 @@
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签
options: { options: {
virtualHost: true addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
} }
} }
</script> </script>
@ -46,14 +56,28 @@ function setStyle() {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.is-white {
background: $-dark-background2;
}
.demo-block {
color: $-dark-color3;
}
}
.demo-block { .demo-block {
margin: 15px 0; margin-bottom: 15px;
&:not(:first-child) {
margin: 15px 0;
}
color: #666; color: #666;
overflow: hidden; overflow: hidden;
} }
.is-white { .is-white {
background: #fff; background: #fff;
} }
.demo-title { .demo-title {
padding: 0 15px; padding: 0 15px;
margin: 10px 0; 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" : "", "name": "",
"appid" : "", "appid": "",
"description" : "", "description": "",
"versionName" : "1.0.0", "versionName": "1.0.0",
"versionCode" : "100", "versionCode": "100",
"transformPx" : false, "transformPx": false,
/* 5+App特有相关 */ /* 5+App特有相关 */
"app-plus" : { "app-plus": {
"usingComponents" : true, "darkmode": true,
"nvueStyleCompiler" : "uni-app", "usingComponents": true,
"compilerVersion" : 3, "nvueStyleCompiler": "uni-app",
"splashscreen" : { "compilerVersion": 3,
"alwaysShowBeforeRender" : true, "splashscreen": {
"waiting" : true, "alwaysShowBeforeRender": true,
"autoclose" : true, "waiting": true,
"delay" : 0 "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\"/>"
]
}, },
/* 模块配置 */ /* ios打包配置 */
"modules" : {}, "ios": {},
/* 应用发布信息 */ /* SDK配置 */
"distribute" : { "sdkConfigs": {}
/* 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" : {}
}
}, },
/* 快应用特有相关 */ /* 快应用特有相关 */
"quickapp" : {}, "quickapp": {},
/* 小程序特有相关 */ /* 小程序特有相关 */
"mp-weixin" : { "mp-weixin": {
"appid" : "wx18107b71aa1672e2", "darkmode": true,
"setting" : { "themeLocation": "theme.json",
"urlCheck" : false "appid": "wx18107b71aa1672e2",
}, "setting": {
"usingComponents" : true "urlCheck": false
},
"usingComponents": true
}, },
"mp-alipay" : { "mp-alipay": {
"usingComponents" : true "darkmode": true,
"themeLocation": "theme.json",
"usingComponents": true
}, },
"mp-baidu" : { "h5": {
"usingComponents" : true "darkmode": true,
"themeLocation": "theme.json"
}, },
"mp-toutiao" : { "mp-baidu": {
"usingComponents" : true "usingComponents": true
}, },
"uniStatistics": { "mp-toutiao": {
"enable": false "usingComponents": true
}, },
"vueVersion" : "3" "uniStatistics": {
} "enable": false
},
"vueVersion": "3"
}

25
src/pages.json
View File

@ -520,6 +520,16 @@
}, },
"navigationBarTitleText": "Collapse 折叠面板" "navigationBarTitleText": "Collapse 折叠面板"
} }
},
{
"path": "pages/configProvider/Index",
"name": "configProvider",
"style": {
"mp-alipay": {
"allowsBounceVertical": "NO"
},
"navigationBarTitleText": "ConfigProvider 全局配置"
}
} }
], ],
// "tabBar": { // "tabBar": {
@ -529,8 +539,17 @@
// "list": [ ] // "list": [ ]
// }, // },
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarBackgroundColor": "@navBgColor",
"navigationBarBackgroundColor": "#FFF", "navigationBarTextStyle": "@navTxtStyle",
"backgroundColor": "#F8F8F8" "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> <template>
<wd-toast /> <page-wraper>
<view> <wd-toast />
<demo-block title="基本用法"> <view>
<wd-button @click="showActions1">弹出菜单</wd-button> <demo-block title="基本用法">
<wd-action-sheet :show="show" :actions="actions" @close="close" /> <wd-button @click="showActions1">弹出菜单</wd-button>
</demo-block> <wd-action-sheet :show="show" :actions="actions" @close="close" />
<demo-block title="选项状态"> </demo-block>
<wd-button @click="showActions2">弹出菜单</wd-button> <demo-block title="选项状态">
</demo-block> <wd-button @click="showActions2">弹出菜单</wd-button>
<demo-block title="取消按钮"> </demo-block>
<wd-button @click="showActions3">弹出菜单</wd-button> <demo-block title="取消按钮">
<wd-action-sheet :show="show1" :actions="actions" cancel-text="取消" @close="close1" /> <wd-button @click="showActions3">弹出菜单</wd-button>
</demo-block> <wd-action-sheet :show="show1" :actions="actions" cancel-text="取消" @close="close1" />
<demo-block title="自定义面板单行"> </demo-block>
<wd-button @click="showActions4">弹出菜单</wd-button> <demo-block title="自定义面板单行">
<wd-action-sheet :show="show2" :panels="panels" cancel-text="取消" @close="close2" @select="select" /> <wd-button @click="showActions4">弹出菜单</wd-button>
</demo-block> <wd-action-sheet :show="show2" :panels="panels" cancel-text="取消" @close="close2" @select="select" />
<demo-block title="自定义面板多行"> </demo-block>
<wd-button @click="showActions5">弹出菜单</wd-button> <demo-block title="自定义面板多行">
<wd-action-sheet :show="show3" :panels="panels" cancel-text="取消" @close="close3" @select="select1" /> <wd-button @click="showActions5">弹出菜单</wd-button>
</demo-block> <wd-action-sheet :show="show3" :panels="panels" cancel-text="取消" @close="close3" @select="select1" />
<demo-block title="标题"> </demo-block>
<wd-button @click="showActions6">弹出菜单</wd-button> <demo-block title="标题">
</demo-block> <wd-button @click="showActions6">弹出菜单</wd-button>
<wd-action-sheet :show="show4" title="标题" @close="close4" :cancelText="cancelText"> </demo-block>
<view style="padding: 15px 15px 150px 15px">内容</view> <wd-action-sheet :show="show4" title="标题" @close="close4" :cancelText="cancelText">
</wd-action-sheet> <view style="padding: 15px 15px 150px 15px">内容</view>
</view> </wd-action-sheet>
</view>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'

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

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

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

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

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

@ -1,49 +1,50 @@
<template> <template>
<wd-toast /> <page-wraper>
<wd-toast />
<view style="margin: 20px 0"> <view style="margin: 20px 0">
<wd-cell-group border> <wd-cell-group border>
<wd-calendar label="单个日期选择" v-model="value1" @confirm="handleConfirm1" /> <wd-calendar label="单个日期选择" v-model="value1" @confirm="handleConfirm1" />
<wd-calendar label="多个日期选择" type="dates" v-model="value2" @confirm="handleConfirm2" /> <wd-calendar label="多个日期选择" type="dates" v-model="value2" @confirm="handleConfirm2" />
<wd-calendar label="日期范围选择" type="daterange" v-model="value3" /> <wd-calendar label="日期范围选择" type="daterange" v-model="value3" />
<wd-calendar label="日期时间选择" type="datetime" v-model="value4" /> <wd-calendar label="日期时间选择" type="datetime" v-model="value4" />
<wd-calendar label="日期时间范围选择" type="datetimerange" v-model="value5" /> <wd-calendar label="日期时间范围选择" type="datetimerange" v-model="value5" />
<wd-calendar label="周选择" type="week" v-model="value6" /> <wd-calendar label="周选择" type="week" v-model="value6" />
<wd-calendar label="月选择" type="month" v-model="value7" /> <wd-calendar label="月选择" type="month" v-model="value7" />
<wd-calendar label="周范围选择" :first-day-of-week="1" type="weekrange" v-model="value8" /> <wd-calendar label="周范围选择" :first-day-of-week="1" type="weekrange" v-model="value8" />
<wd-calendar label="月范围选择" type="monthrange" v-model="value9" /> <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="日周月切换" :first-day-of-week="1" show-type-switch v-model="value10" />
<wd-calendar label="快捷操作" :show-confirm="false" /> <wd-calendar label="快捷操作" v-model="value10" :show-confirm="false" />
<wd-calendar label="日期格式化" type="daterange" v-model="value11" :formatter="formatter" /> <wd-calendar label="日期格式化" type="daterange" v-model="value11" :formatter="formatter" />
<wd-calendar <wd-calendar
label="快捷选项" label="快捷选项"
:shortcuts="shortcuts" :shortcuts="shortcuts"
:on-shortcuts-click="onShortcutsClick" :on-shortcuts-click="onShortcutsClick"
type="daterange" type="daterange"
const const
v-model="value12" v-model="value12"
@confirm="handleConfirm3" @confirm="handleConfirm3"
/> />
<wd-calendar <wd-calendar
label="自定义展示" label="自定义展示"
type="daterange" type="daterange"
const const
v-model="value13" v-model="value13"
:display-format="displayFormat" :display-format="displayFormat"
:inner-display-format="innerDisplayFormat" :inner-display-format="innerDisplayFormat"
/> />
<wd-calendar label="before-confirm" v-model="value14" :before-confirm="beforeConfirm" /> <wd-calendar label="before-confirm" v-model="value14" :before-confirm="beforeConfirm" />
</wd-cell-group> </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>
</view> </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> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' 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 value9 = ref<number[]>([Date.now() - 24 * 60 * 60 * 1000 * 33, Date.now()])
const value10 = ref<number>(Date.now()) const value10 = ref<number>(Date.now())
const value11 = ref<number[]>([Date.now() - 24 * 60 * 60 * 1000 * 3, 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 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 formatValue = ref<string>('')
const formatter = (day) => { const formatter = (day) => {
const date = new Date(day.date) 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> <template>
<demo-block title="单个日期选择" :hor="0"> <page-wraper>
<view style="margin: 0 15px 10px"> <demo-block title="单个日期选择" :hor="0">
<view style="margin-bottom: 10px; font-size: 13px">切换类型：</view> <view style="margin: 0 15px 10px">
<wd-radio-group v-model="type1" shape="button"> <view style="margin-bottom: 10px; font-size: 13px">切换类型：</view>
<wd-radio value="date">date</wd-radio> <wd-radio-group v-model="type1" shape="button">
<wd-radio value="week">week</wd-radio> <wd-radio value="date">date</wd-radio>
<wd-radio value="month">month</wd-radio> <wd-radio value="week">week</wd-radio>
</wd-radio-group> <wd-radio value="month">month</wd-radio>
</view> </wd-radio-group>
<wd-calendar-view :type="type1" v-model="value1" @change="handleChange1"></wd-calendar-view> </view>
</demo-block> <wd-calendar-view :type="type1" v-model="value1" @change="handleChange1"></wd-calendar-view>
<demo-block title="多个日期选择" :hor="0"> </demo-block>
<wd-calendar-view type="dates" v-model="value2" @change="handleChange2"></wd-calendar-view> <demo-block title="多个日期选择" :hor="0">
</demo-block> <wd-calendar-view type="dates" v-model="value2" @change="handleChange2"></wd-calendar-view>
<demo-block title="日期范围选择" :hor="0"> </demo-block>
<view style="margin: 0 24rpx 20rpx"> <demo-block title="日期范围选择" :hor="0">
<view style="margin-bottom: 20rpx; font-size: 26rpx">切换类型：</view> <view style="margin: 0 24rpx 20rpx">
<wd-radio-group v-model="type2" shape="button" @change="handleTypeChange2"> <view style="margin-bottom: 20rpx; font-size: 26rpx">切换类型：</view>
<wd-radio value="daterange">daterange</wd-radio> <wd-radio-group v-model="type2" shape="button" @change="handleTypeChange2">
<wd-radio value="weekrange">weekrange</wd-radio> <wd-radio value="daterange">daterange</wd-radio>
<wd-radio value="monthrange">monthrange</wd-radio> <wd-radio value="weekrange">weekrange</wd-radio>
</wd-radio-group> <wd-radio value="monthrange">monthrange</wd-radio>
</view> </wd-radio-group>
<wd-calendar-view :type="type2" allow-same-day v-model="value3" @change="handleChange3"></wd-calendar-view> </view>
</demo-block> <wd-calendar-view :type="type2" allow-same-day v-model="value3" @change="handleChange3"></wd-calendar-view>
<demo-block title="时间类型" :hor="0"> </demo-block>
<wd-calendar-view type="datetime" v-model="value4"></wd-calendar-view> <demo-block title="时间类型" :hor="0">
</demo-block> <wd-calendar-view type="datetime" v-model="value4"></wd-calendar-view>
<demo-block title="时间范围类型" :hor="0"> </demo-block>
<wd-calendar-view type="datetimerange" v-model="value5"></wd-calendar-view> <demo-block title="时间范围类型" :hor="0">
</demo-block> <wd-calendar-view type="datetimerange" v-model="value5"></wd-calendar-view>
<demo-block title="限制最大选择范围" :hor="0"> </demo-block>
<wd-calendar-view type="daterange" :max-range="3" v-model="value7"></wd-calendar-view> <demo-block title="限制最大选择范围" :hor="0">
</demo-block> <wd-calendar-view type="daterange" :max-range="3" v-model="value7"></wd-calendar-view>
<demo-block title="自定义日期" :hor="0"> </demo-block>
<wd-calendar-view type="daterange" allow-same-day v-model="value6" :formatter="formatter"></wd-calendar-view> <demo-block title="自定义日期" :hor="0">
</demo-block> <wd-calendar-view type="daterange" allow-same-day v-model="value6" :formatter="formatter"></wd-calendar-view>
<demo-block title="设置周起始日" :hor="0"> </demo-block>
<wd-calendar-view :first-day-of-week="1" v-model="value8"></wd-calendar-view> <demo-block title="设置周起始日" :hor="0">
</demo-block> <wd-calendar-view :first-day-of-week="1" v-model="value8"></wd-calendar-view>
</demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
const type1 = ref<string>('date') const type1 = ref<any>('date')
const type2 = ref<string>('daterange') const type2 = ref<any>('daterange')
const minDate = ref(Date.now()) const minDate = ref(Date.now())
const value1 = 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 value3 = ref([Date.now() - 24 * 60 * 60 * 1000 * 33, Date.now()])
const value4 = ref(Date.now()) const value4 = ref(Date.now())
const value5 = ref([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now() - 24 * 60 * 60 * 1000]) 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 * @Author: weisheng
* @Date: 2023-06-13 11:47:12 * @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-21 15:51:04 * @LastEditTime: 2023-08-11 18:49:11
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\pages\card\Index.vue * @FilePath: \wot-design-uni\src\pages\card\Index.vue
* 记得注释 * 记得注释
--> -->
<template> <template>
<view> <page-wraper>
<demo-block title="基本使用" transparent> <view>
<wd-card title="经营分析"> <demo-block title="基本使用" transparent>
一般的，检举内容由承办的党的委员会或纪律检查委员会将处理意见或复议、复查结论同申诉人见面，听取其意见。复议、复查的结论和决定，应交给申诉人一份。 <wd-card title="经营分析">
<template #footer> 一般的，检举内容由承办的党的委员会或纪律检查委员会将处理意见或复议、复查结论同申诉人见面，听取其意见。复议、复查的结论和决定，应交给申诉人一份。
<wd-button size="small" plain>查看详情</wd-button> <template #footer>
</template> <wd-button size="small" plain>查看详情</wd-button>
</wd-card> </template>
<wd-card title="新订单"> </wd-card>
<view class="content"> <wd-card title="新订单">
<image <view class="content">
src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg" <image
alt="joy" src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg"
style="width: 70px; height: 70px; border-radius: 4px; margin-right: 12px" alt="joy"
/> style="width: 70px; height: 70px; border-radius: 4px; margin-right: 12px"
<view> />
<view>蜜滋兰(mizland)新西兰进口多花种…</view> <view>
<view>数量：1件</view> <view>蜜滋兰(mizland)新西兰进口多花种…</view>
<view>金额：29.08</view> <view>数量：1件</view>
<view>买家昵称：Joy</view> <view>金额：29.08</view>
</view> <view>买家昵称：Joy</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" />
您可以去电脑上使用该服务
</view> </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"> <view style="height: 40px" class="content">
<image <image
src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg" src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg"
width="40" width="40"
height="40" height="40"
alt="joy" alt="joy"
style="width: 40px; height: 40px; border-radius: 4px; margin-right: 12px" style="width: 40px; height: 40px; border-radius: 4px; margin-right: 12px"
/> />
<view> <view>
<view style="color: rgba(0, 0, 0, 0.85); font-size: 16px">智云好客CRM短信_催评营销</view> <view class="custom-main">智云好客CRM短信_催评营销</view>
<view style="color: rgba(0, 0, 0, 0.25); font-size: 12px">高级版-快速吸粉 | 周期一年</view> <view class="custom-sub">高级版-快速吸粉 | 周期一年</view>
</view>
</view> </view>
</view> <template #footer>
<template #footer> <view>
<view> <wd-button size="small" plain custom-style="margin-right: 8px">评价</wd-button>
<wd-button size="small" plain custom-style="margin-right: 8px">评价</wd-button> <wd-button size="small">立即使用</wd-button>
<wd-button size="small">立即使用</wd-button> </view>
</view> </template>
</template> </wd-card>
</wd-card> </demo-block>
</demo-block> </view>
</view> </page-wraper>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup></script>
<style lang="scss" scoped> <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, .content,
.title { .title {
display: flex; display: flex;
@ -110,4 +125,13 @@
color: rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.25);
font-size: 12px; 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> </style>

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

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

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

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

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

@ -1,47 +1,49 @@
<template> <template>
<wd-toast /> <page-wraper>
<view style="margin: 20px 0"> <wd-toast />
<wd-cell-group border> <view style="margin: 20px 0">
<wd-col-picker label="选择地址" v-model="value1" :columns="areaData1" :column-change="columnChange1" @confirm="handleValue" /> <wd-cell-group border>
<wd-col-picker label="初始选项" v-model="value2" :columns="areaData2" :column-change="columnChange1" auto-complete /> <wd-col-picker label="选择地址" v-model="value1" :columns="areaData1" :column-change="columnChange1" @confirm="handleValue" />
<wd-col-picker label="禁用" disabled v-model="value3" :columns="areaData3" :column-change="columnChange1" /> <wd-col-picker label="初始选项" v-model="value2" :columns="areaData2" :column-change="columnChange1" auto-complete />
<wd-col-picker label="只读" readonly v-model="value3" :columns="areaData3" :column-change="columnChange1" /> <wd-col-picker label="禁用" disabled v-model="value3" :columns="areaData3" :column-change="columnChange1" />
<wd-col-picker label="禁用选项" v-model="value4" :columns="areaData4" :column-change="columnChange1" /> <wd-col-picker label="只读" readonly v-model="value3" :columns="areaData3" :column-change="columnChange1" />
<wd-col-picker label="选项提示信息" v-model="value5" :columns="areaData5" :column-change="columnChange1" /> <wd-col-picker label="禁用选项" v-model="value4" :columns="areaData4" :column-change="columnChange1" />
<wd-col-picker label="展示格式化" v-model="value6" :columns="areaData3" :column-change="columnChange1" :display-format="displayFormat" /> <wd-col-picker label="选项提示信息" v-model="value5" :columns="areaData5" :column-change="columnChange1" />
<wd-col-picker label="标题" v-model="value7" title="选择地址" :columns="areaData1" :column-change="columnChange1" /> <wd-col-picker label="展示格式化" v-model="value6" :columns="areaData3" :column-change="columnChange1" :display-format="displayFormat" />
<wd-col-picker label="before-confirm" v-model="value8" :columns="areaData1" :column-change="columnChange1" :before-confirm="beforeConfirm" /> <wd-col-picker label="标题" v-model="value7" title="选择地址" :columns="areaData1" :column-change="columnChange1" />
<wd-col-picker label="错误" error v-model="value9" :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="必填" required v-model="value10" :columns="areaData1" :column-change="columnChange1" /> <wd-col-picker label="错误" error v-model="value9" :columns="areaData1" :column-change="columnChange1" />
</wd-cell-group> <wd-col-picker label="必填" required v-model="value10" :columns="areaData1" :column-change="columnChange1" />
</view> </wd-cell-group>
<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> </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> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'

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

@ -1,11 +1,11 @@
<template> <template>
<view> <page-wraper>
<wd-toast></wd-toast> <wd-toast></wd-toast>
<demo-block title="基础用法" transparent> <demo-block title="基础用法" transparent>
<wd-collapse v-model="value1" @change="handleChange1"> <wd-collapse v-model="value1" @change="handleChange1">
<wd-collapse-item <wd-collapse-item
v-for="(item, index) in itemList" v-for="(item, index) in itemList"
:before-expend="index === 2 ? beforeExpend : ''" :before-expend="index === 2 ? beforeExpend : undefined"
:key="index" :key="index"
:title="item.title" :title="item.title"
:name="item.name" :name="item.name"
@ -54,7 +54,7 @@
</template> </template>
</wd-collapse> </wd-collapse>
</demo-block> </demo-block>
</view> </page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' 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> <template>
<view> <page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-button @click="handleClick1">关闭按钮在内部</wd-button> <wd-button @click="handleClick1">关闭按钮在内部</wd-button>
</demo-block> </demo-block>
@ -19,23 +19,23 @@
<wd-button @click="handleClick8">点击遮罩关闭</wd-button> <wd-button @click="handleClick8">点击遮罩关闭</wd-button>
</demo-block> </demo-block>
<wd-curtain :value="value1" :src="img" :to="link" @close="handleClose1" width="280"></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="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="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="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="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="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="value7" :src="img" :to="link" close-position="bottom-right" :width="240" @close="handleClose7"></wd-curtain>
<wd-curtain <wd-curtain
:value="value8" :value="value8"
:src="img" :src="img"
:to="link" :to="link"
close-position="bottom-right" close-position="bottom-right"
width="240" :width="240"
@close="handleClose8" @close="handleClose8"
:close-on-click-modal="true" :close-on-click-modal="true"
></wd-curtain> ></wd-curtain>
</view> </page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'

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

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

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

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

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

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

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

@ -1,48 +1,50 @@
<template> <template>
<view class="demo-body" @click="clickoutside"> <page-wraper>
<demo-block title="基本用法" transparent> <view class="demo-body" @click="clickoutside">
<wd-drop-menu> <demo-block title="基本用法" transparent>
<wd-drop-menu-item v-model="value1" :options="option1" @change="handleChange1" /> <wd-drop-menu>
<wd-drop-menu-item v-model="value2" :options="option2" @change="handleChange2" /> <wd-drop-menu-item v-model="value1" :options="option1" @change="handleChange1" />
</wd-drop-menu> <wd-drop-menu-item v-model="value2" :options="option2" @change="handleChange2" />
</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" />
</wd-drop-menu> </wd-drop-menu>
<view style="flex: 1"> </demo-block>
<wd-sort-button v-model="value5" title="上架时间" @change="handleChange5" /> <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>
</view> </demo-block>
</demo-block> <demo-block title="向上弹出" transparent>
<demo-block title="向上弹出" transparent> <wd-drop-menu direction="up">
<wd-drop-menu direction="up"> <wd-drop-menu-item v-model="value6" :options="option1" @change="handleChange6" />
<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-item v-model="value7" :options="option2" @change="handleChange7" /> </wd-drop-menu>
</wd-drop-menu> </demo-block>
</demo-block> <demo-block title="禁用" transparent>
<demo-block title="禁用" transparent> <wd-drop-menu direction="up">
<wd-drop-menu direction="up"> <wd-drop-menu-item v-model="value8" disabled :options="option1" @change="handleChange8" />
<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-item v-model="value9" :options="option2" @change="handleChange9" /> </wd-drop-menu>
</wd-drop-menu> </demo-block>
</demo-block> </view>
</view> </page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { clickOut } from '@/uni_modules/wot-design-uni' import { clickOut } from '@/uni_modules/wot-design-uni'
@ -60,12 +62,12 @@ const value6 = ref<number>(0)
const value7 = ref<number>(0) const value7 = ref<number>(0)
const value8 = ref<number>(0) const value8 = ref<number>(0)
const value9 = 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: 0 },
{ label: '新款商品', value: 1, tip: '这是补充信息' }, { label: '新款商品', value: 1, tip: '这是补充信息' },
{ label: '这是比较长的筛选条件这是比较长的筛选条件', value: 2 } { label: '这是比较长的筛选条件这是比较长的筛选条件', value: 2 }
]) ])
const option2 = ref<Record<string, any>>([ const option2 = ref<Record<string, any>[]>([
{ label: '综合', value: 0 }, { label: '综合', value: 0 },
{ label: '销量', value: 1 }, { label: '销量', value: 1 },
{ label: '上架时间', value: 2 } { label: '上架时间', value: 2 }
@ -108,7 +110,18 @@ function confirm() {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.custom-menu {
background: $-dark-background2;
}
}
.demo-body { .demo-body {
height: 100vh; height: 100vh;
} }
.custom-menu {
display: flex;
background: #fff;
text-align: center;
}
</style> </style>

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

@ -1,108 +1,112 @@
<template> <template>
<wd-message-box id="wd-message-box" /> <view>
<wd-toast /> <page-wraper>
<form @submit="formSubmit"> <wd-message-box />
<wd-cell-group custom-class="group" title="基础信息" border> <wd-toast />
<wd-input <form @submit="formSubmit">
label="优惠券名称" <wd-cell-group custom-class="group" title="基础信息" border>
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 <wd-input
no-border label="优惠券名称"
custom-style="display: inline-block; width: 70px; vertical-align: middle" label-width="100px"
placeholder="请输入金额" :maxlength="20"
v-model="threshold" show-word-limit
name="threshold" name="couponName"
@change="handleThreshold" 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 <wd-input
no-border label="活动细则"
custom-style="display: inline-block; width: 70px; vertical-align: middle" label-width="100px"
placeholder="请输入金额" type="textarea"
v-model="price" v-model="content"
name="price" :maxlength="300"
@change="handlePrice" 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>
</wd-cell> <view class="footer">
</wd-cell-group> <button class="wd-button is-primary is-block is-round is-large" form-type="submit">提交</button>
<wd-cell-group custom-class="group" title="时间和地址" border> </view>
<wd-datetime-picker label="时间" label-width="100px" name="date" v-model="date" @confirm="handleDate" /> </form>
<wd-col-picker </page-wraper>
label="地址" </view>
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>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box' import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box'
@ -245,6 +249,11 @@ function handleDate({ value }) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.inline-txt {
color: $-dark-color3;
}
}
.inline-txt { .inline-txt {
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;

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

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

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

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

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

@ -1,21 +1,23 @@
<template> <template>
<demo-block title="基本用法"> <page-wraper>
<wd-img :width="100" :height="100" :src="joy" /> <demo-block title="基本用法">
<!-- 以组件位置为定位原点 --> <wd-img :width="100" :height="100" :src="joy" />
<wd-img :width="100" :height="100" :src="img" custom-class="border" /> <!-- 以组件位置为定位原点 -->
</demo-block> <wd-img :width="100" :height="100" :src="img" custom-class="border" />
<demo-block title="填充"> </demo-block>
<view class="col" v-for="(mode, index) in modes" :key="index"> <demo-block title="填充">
<wd-img width="100%" height="27vw" :src="joy" :mode="mode" /> <view class="col" v-for="(mode, index) in modes" :key="index">
<view class="center">{{ mode }}</view> <wd-img width="100%" height="27vw" :src="joy" :mode="mode" />
</view> <view class="center">{{ mode }}</view>
</demo-block> </view>
<demo-block title="圆形"> </demo-block>
<view class="col" v-for="(mode, index) in modes" :key="index"> <demo-block title="圆形">
<wd-img round width="100%" height="27vw" :src="joy" :mode="mode" /> <view class="col" v-for="(mode, index) in modes" :key="index">
<view class="center">{{ mode }}</view> <wd-img round width="100%" height="27vw" :src="joy" :mode="mode" />
</view> <view class="center">{{ mode }}</view>
</demo-block> </view>
</demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { joy } from '../images/joy' 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> <template>
<demo-block title="基本用法" style="text-align: center"> <page-wraper>
<wd-img-cropper <demo-block title="基本用法" style="text-align: center">
id="wd-img-cropper" <wd-img-cropper
v-model="show" id="wd-img-cropper"
:img-src="src" v-model="show"
@confirm="handleConfirm" :img-src="src"
@cancel="handleCancel" @confirm="handleConfirm"
@imgloaderror="imgLoaderror" @cancel="handleCancel"
@imgloaded="imgLoaded" @imgloaderror="imgLoaderror"
></wd-img-cropper> @imgloaded="imgLoaded"
<view class="profile"> ></wd-img-cropper>
<view v-if="!imgSrc" class="img" @click="upload"> <view class="profile">
<wd-icon name="fill-camera" custom-class="img-icon"></wd-icon> <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> </view>
<wd-img v-if="imgSrc" round width="200px" height="200px" :src="imgSrc" mode="aspectFit" custom-class="profile-img" @click="upload" /> </demo-block>
<view style="font-size: 14px">点击上传头像</view> </page-wraper>
</view>
</demo-block>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
@ -59,6 +52,15 @@ function handleCancel(event) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
:deep(.profile-img) {
border: 1px solid $-dark-border-color;
}
.img {
background-color: $-dark-background4;
}
}
.profile { .profile {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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

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

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

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

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

@ -1,34 +1,36 @@
<template> <template>
<demo-block title="基本用法"> <page-wraper>
<wd-input-number v-model="value1" @change="handleChange1" /> <demo-block title="基本用法">
</demo-block> <wd-input-number v-model="value1" @change="handleChange1" />
<demo-block title="设置步长"> </demo-block>
<wd-input-number v-model="value2" @change="handleChange2" :step="2" /> <demo-block title="设置步长">
</demo-block> <wd-input-number v-model="value2" @change="handleChange2" :step="2" />
<demo-block title="限制最大最小值"> </demo-block>
<wd-input-number v-model="value3" @change="handleChange3" :min="3" :max="10" /> <demo-block title="限制最大最小值">
</demo-block> <wd-input-number v-model="value3" @change="handleChange3" :min="3" :max="10" />
<demo-block title="禁用"> </demo-block>
<wd-input-number v-model="value4" @change="handleChange4" disabled /> <demo-block title="禁用">
</demo-block> <wd-input-number v-model="value4" @change="handleChange4" disabled />
<demo-block title="无输入框"> </demo-block>
<view class="flex"> <demo-block title="无输入框">
<view>数量：{{ value5 }}</view> <view class="flex">
<wd-input-number v-model="value5" @change="handleChange5" without-input /> <view>数量：{{ value5 }}</view>
</view> <wd-input-number v-model="value5" @change="handleChange5" without-input />
</demo-block> </view>
<demo-block title="设置小数精度"> </demo-block>
<wd-input-number v-model="value6" @change="handleChange6" :precision="2" :step="0.1" /> <demo-block title="设置小数精度">
</demo-block> <wd-input-number v-model="value6" @change="handleChange6" :precision="2" :step="0.1" />
<demo-block title="输入严格为步数的倍数"> </demo-block>
<wd-input-number v-model="value7" @change="handleChange7" step-strictly :step="2" /> <demo-block title="输入严格为步数的倍数">
</demo-block> <wd-input-number v-model="value7" @change="handleChange7" step-strictly :step="2" />
<demo-block title="修改输入框宽度"> </demo-block>
<wd-input-number v-model="value8" input-width="70px" @change="handleChange8" /> <demo-block title="修改输入框宽度">
</demo-block> <wd-input-number v-model="value8" input-width="70px" @change="handleChange8" />
<demo-block title="允许空值，并设置 placeholder"> </demo-block>
<wd-input-number v-model="value9" allow-null placeholder="不限" input-width="70px" @change="handleChange9" /> <demo-block title="允许空值，并设置 placeholder">
</demo-block> <wd-input-number v-model="value9" allow-null placeholder="不限" input-width="70px" @change="handleChange9" />
</demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' 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> <template>
<demo-block title="基础用法"> <page-wraper>
<wd-row> <demo-block title="基础用法">
<wd-col :span="24"><view class="bg-dark1">span: 24</view></wd-col> <wd-row>
</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-row>
<wd-col :span="12"><view class="bg-light">span: 12</view></wd-col> <wd-col :span="12"><view class="bg-dark">span: 12</view></wd-col>
</wd-row> <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-row>
<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-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-row> <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-row>
<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-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-light">span: 6</view></wd-col> <wd-col :span="6"><view class="bg-dark">span: 6</view></wd-col>
</wd-row> <wd-col :span="6"><view class="bg-light">span: 6</view></wd-col>
</demo-block> </wd-row>
<demo-block title="分栏偏移"> </demo-block>
<wd-row> <demo-block title="分栏偏移">
<wd-col :span="4"><view class="bg-dark">span: 4</view></wd-col> <wd-row>
<wd-col :span="8" :offset="4"><view class="bg-light">span: 8 offset: 4</view></wd-col> <wd-col :span="4"><view class="bg-dark">span: 4</view></wd-col>
</wd-row> <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-row>
<wd-col :span="8" :offset="4"><view class="bg-light">span: 8 offset: 4</view></wd-col> <wd-col :span="8" :offset="4"><view class="bg-dark">span: 8 offset: 4</view></wd-col>
</wd-row> <wd-col :span="8" :offset="4"><view class="bg-light">span: 8 offset: 4</view></wd-col>
</demo-block> </wd-row>
<demo-block title="分栏间隔"> </demo-block>
<wd-row :gutter="20"> <demo-block title="分栏间隔">
<wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col> <wd-row :gutter="20">
<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-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-row> <wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col>
</demo-block> </wd-row>
</demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup></script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

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

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

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

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

@ -1,32 +1,34 @@
<template> <template>
<wd-message-box></wd-message-box> <page-wraper>
<wd-toast id="wd-toast"></wd-toast> <wd-message-box></wd-message-box>
<wd-message-box selector="wd-message-box-slot" use-slot> <wd-toast></wd-toast>
<wd-rate custom-class="custom-rate-class" v-model="value" /> <wd-message-box selector="wd-message-box-slot" use-slot>
</wd-message-box> <wd-rate custom-class="custom-rate-class" v-model="value" />
<demo-block title="alert"> </wd-message-box>
<wd-button @click="alert">alert</wd-button> <demo-block title="alert">
</demo-block> <wd-button @click="alert">alert</wd-button>
</demo-block>
<demo-block title="显示标题"> <demo-block title="显示标题">
<wd-button @click="alertWithTitle">alert</wd-button> <wd-button @click="alertWithTitle">alert</wd-button>
</demo-block> </demo-block>
<demo-block title="confirm"> <demo-block title="confirm">
<wd-button @click="confirm">confirm</wd-button> <wd-button @click="confirm">confirm</wd-button>
</demo-block> </demo-block>
<demo-block title="prompt"> <demo-block title="prompt">
<wd-button @click="prompt">prompt</wd-button> <wd-button @click="prompt">prompt</wd-button>
</demo-block> </demo-block>
<demo-block title="当文案过长时，弹框的高度不再增加，而是将文案内容设置成滚动"> <demo-block title="当文案过长时，弹框的高度不再增加，而是将文案内容设置成滚动">
<wd-button @click="alertWithLongChar">alert</wd-button> <wd-button @click="alertWithLongChar">alert</wd-button>
</demo-block> </demo-block>
<demo-block title="使用wd-message-box组件，通过slot插入其他组件内容"> <demo-block title="使用wd-message-box组件，通过slot插入其他组件内容">
<wd-button @click="withSlot">custom</wd-button> <wd-button @click="withSlot">custom</wd-button>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box' 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 * @Author: weisheng
* @Date: 2023-06-13 11:47:12 * @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-31 21:27:54 * @LastEditTime: 2023-08-07 20:24:04
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\pages\noticeBar\Index.vue * @FilePath: \wot-design-uni\src\pages\noticeBar\Index.vue
* 记得注释 * 记得注释
--> -->
<template> <template>
<view> <page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-notice-bar text="这是一条消息提示信息这是一条消息提示信息这是一条消息提示信息" prefix="warn-bold" /> <wd-notice-bar text="这是一条消息提示信息这是一条消息提示信息这是一条消息提示信息" prefix="warn-bold" />
</demo-block> </demo-block>
@ -57,7 +57,7 @@
background-color="#f0f9eb" background-color="#f0f9eb"
></wd-notice-bar> ></wd-notice-bar>
</demo-block> </demo-block>
</view> </page-wraper>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup></script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

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

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

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

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

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

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

@ -1,34 +1,36 @@
<template> <template>
<wd-toast /> <page-wraper>
<wd-toast />
<view @click="clickOutside" class="wrapper"> <view @click="clickOutside" class="wrapper">
<demo-block custom-class="pop" title="基本用法"> <demo-block custom-class="pop" title="基本用法">
<view class="center"> <view class="center">
<wd-popover id="pop1" content="这是一段内容。" v-model="show1" @change="handleChange1"> <wd-popover id="pop1" content="这是一段内容。" v-model="show1" @change="handleChange1">
<wd-button data-id="pop1">点击展示</wd-button> <wd-button data-id="pop1">点击展示</wd-button>
</wd-popover> </wd-popover>
</view> </view>
</demo-block> </demo-block>
<demo-block custom-class="pop" title="嵌套信息"> <demo-block custom-class="pop" title="嵌套信息">
<view class="center list"> <view class="center list">
<wd-popover v-model="show2" use-content-slot @change="handleChange2"> <wd-popover v-model="show2" use-content-slot @change="handleChange2">
<template #content> <template #content>
<view class="pop-content">这是一段自定义样式的内容。</view> <view class="pop-content">这是一段自定义样式的内容。</view>
</template> </template>
<wd-button>点击展示</wd-button> <wd-button>点击展示</wd-button>
</wd-popover> </wd-popover>
</view> </view>
</demo-block> </demo-block>
<demo-block custom-class="pop" title="列表展示"> <demo-block custom-class="pop" title="列表展示">
<view class="center list"> <view class="center list">
<wd-popover v-model="show3" mode="menu" :content="menu" @menuclick="link" @change="handleChange3"> <wd-popover v-model="show3" mode="menu" :content="menu" @menuclick="link" @change="handleChange3">
<wd-button>列表</wd-button> <wd-button>列表</wd-button>
</wd-popover> </wd-popover>
</view> </view>
</demo-block> </demo-block>
</view> </view>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { clickOut, useToast } from '@/uni_modules/wot-design-uni' 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> <template>
<view> <view>
<demo-block title="基本用法"> <page-wraper>
<wd-button @click="handleClick1">弹出层</wd-button> <demo-block title="基本用法">
</demo-block> <wd-button @click="handleClick1">弹出层</wd-button>
<demo-block title="弹出位置"> </demo-block>
<wd-button @click="handleClick2">顶部</wd-button> <demo-block title="弹出位置">
<wd-button @click="handleClick3">右侧</wd-button> <wd-button @click="handleClick2">顶部</wd-button>
<wd-button @click="handleClick4">底部</wd-button> <wd-button @click="handleClick3">右侧</wd-button>
<wd-button @click="handleClick5">左侧</wd-button> <wd-button @click="handleClick4">底部</wd-button>
</demo-block> <wd-button @click="handleClick5">左侧</wd-button>
<demo-block title="关闭按钮"> </demo-block>
<wd-button @click="handleClick6">关闭按钮</wd-button> <demo-block title="关闭按钮">
</demo-block> <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="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="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="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="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="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="show6" position="bottom" closable custom-style="height: 200px;" @close="handleClose6"></wd-popup>
</page-wraper>
</view> </view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -72,4 +83,14 @@ function handleClose6() {
:deep(button) { :deep(button) {
margin: 0 10px 10px 0; margin: 0 10px 10px 0;
} }
.wot-theme-dark {
.custom-txt {
color: $-dark-color;
}
}
.custom-txt {
color: black;
}
</style> </style>

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

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

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

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

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

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

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

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

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

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

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

@ -1,45 +1,47 @@
<template> <template>
<wd-toast /> <page-wraper>
<view style="margin: 20px 0"> <wd-toast />
<wd-cell-group border> <view style="margin: 20px 0">
<wd-select-picker label="选择地址" v-model="value1" :columns="columns1" @confirm="handleConfirm1" /> <wd-cell-group border>
<wd-select-picker label="类型切换" type="radio" v-model="value2" :columns="columns1" @confirm="handleConfirm2" /> <wd-select-picker label="选择地址" v-model="value1" :columns="columns1" @confirm="handleConfirm1" />
<wd-select-picker label="禁用" disabled v-model="value3" :columns="columns1" @confirm="handleConfirm3" /> <wd-select-picker label="类型切换" type="radio" v-model="value2" :columns="columns1" @confirm="handleConfirm2" />
<wd-select-picker label="只读" readonly v-model="value4" :columns="columns1" @confirm="handleConfirm4" /> <wd-select-picker label="禁用" disabled v-model="value3" :columns="columns1" @confirm="handleConfirm3" />
<wd-select-picker label="禁用选项" v-model="value5" :columns="columns2" @confirm="handleConfirm5" /> <wd-select-picker label="只读" readonly v-model="value4" :columns="columns1" @confirm="handleConfirm4" />
<wd-select-picker label="loading" loading v-model="value6" :columns="columns1" @confirm="handleConfirm6" /> <wd-select-picker label="禁用选项" v-model="value5" :columns="columns2" @confirm="handleConfirm5" />
<wd-select-picker label="选择器change" v-model="value6" :columns="columns1" @change="handleChange" @confirm="handleConfirm7" /> <wd-select-picker label="loading" loading v-model="value6" :columns="columns1" @confirm="handleConfirm6" />
<wd-select-picker label="展示格式化" v-model="value8" :columns="columns1" @confirm="handleConfirm8" :display-format="displayFormat" /> <wd-select-picker label="选择器change" v-model="value6" :columns="columns1" @change="handleChange" @confirm="handleConfirm7" />
<wd-select-picker label="before-confirm" v-model="value9" :columns="columns1" @confirm="handleConfirm9" :before-confirm="beforeConfirm" /> <wd-select-picker label="展示格式化" v-model="value8" :columns="columns1" @confirm="handleConfirm8" :display-format="displayFormat" />
<wd-select-picker label="标题" v-model="value10" title="多选" :columns="columns1" @confirm="handleConfirm10" /> <wd-select-picker label="before-confirm" v-model="value9" :columns="columns1" @confirm="handleConfirm9" :before-confirm="beforeConfirm" />
<wd-select-picker label="错误" error v-model="value11" :columns="columns1" @confirm="handleConfirm11" /> <wd-select-picker label="标题" v-model="value10" title="多选" :columns="columns1" @confirm="handleConfirm10" />
<wd-select-picker label="必填" required v-model="value12" :columns="columns1" @confirm="handleConfirm12" /> <wd-select-picker label="错误" error v-model="value11" :columns="columns1" @confirm="handleConfirm11" />
<wd-select-picker label="可搜索" filterable v-model="value13" :columns="columns1" @confirm="handleConfirm13" /> <wd-select-picker label="必填" required v-model="value12" :columns="columns1" @confirm="handleConfirm12" />
</wd-cell-group> <wd-select-picker label="可搜索" filterable v-model="value13" :columns="columns1" @confirm="handleConfirm13" />
</view> </wd-cell-group>
<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> </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> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
import { ref } from 'vue' import { ref } from 'vue'
const columns1 = ref<Record<string, any>>([ const columns1 = ref<Record<string, any>[]>([
{ {
value: '101', value: '101',
label: '男装' label: '男装'
@ -89,7 +91,7 @@ const columns1 = ref<Record<string, any>>([
label: '电脑办公' label: '电脑办公'
} }
]) ])
const columns2 = ref<Record<string, any>>([ const columns2 = ref<Record<string, any>[]>([
{ {
value: '101', value: '101',
label: '男装', label: '男装',

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

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

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

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

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

@ -1,31 +1,33 @@
<template> <template>
<demo-block title="搜索无结果"> <page-wraper>
<wd-status-tip type="search" tip="当前搜索无结果" /> <demo-block title="搜索无结果">
</demo-block> <wd-status-tip type="search" tip="当前搜索无结果" />
</demo-block>
<demo-block title="404页面"> <demo-block title="404页面">
<wd-status-tip type="network" tip="当前网络不可用，请检查你的网络设置" /> <wd-status-tip type="network" tip="当前网络不可用，请检查你的网络设置" />
</demo-block> </demo-block>
<demo-block title="页面无数据"> <demo-block title="页面无数据">
<wd-status-tip type="content" tip="暂无内容" /> <wd-status-tip type="content" tip="暂无内容" />
</demo-block> </demo-block>
<demo-block title="我的收藏为空"> <demo-block title="我的收藏为空">
<wd-status-tip type="collect" tip="暂无收藏" /> <wd-status-tip type="collect" tip="暂无收藏" />
</demo-block> </demo-block>
<demo-block title="我的评论为空"> <demo-block title="我的评论为空">
<wd-status-tip type="comment" tip="暂无评论" /> <wd-status-tip type="comment" tip="暂无评论" />
</demo-block> </demo-block>
<demo-block title="支付失败"> <demo-block title="支付失败">
<wd-status-tip type="halo" tip="支付失败，请重新订购" /> <wd-status-tip type="halo" tip="支付失败，请重新订购" />
</demo-block> </demo-block>
<demo-block title="已订阅全部消息"> <demo-block title="已订阅全部消息">
<wd-status-tip type="message" tip="已订阅全部消息" /> <wd-status-tip type="message" tip="已订阅全部消息" />
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup></script>
<style lang="scss" scoped></style> <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> <template>
<view> <page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-steps :active="0"> <wd-steps :active="0">
<wd-step></wd-step> <wd-step></wd-step>
@ -61,7 +52,7 @@
<wd-step title="步骤3" /> <wd-step title="步骤3" />
</wd-steps> </wd-steps>
</demo-block> </demo-block>
</view> </page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'

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

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

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

@ -1,103 +1,105 @@
<template> <template>
<wd-toast /> <page-wraper>
<wd-toast />
<view @click.stop="clickoutside"> <view @click.stop="clickoutside">
<demo-block transparent title="基本用法"> <demo-block transparent title="基本用法">
<wd-swipe-action> <wd-swipe-action>
<wd-cell title="标题文字" value="内容" /> <wd-cell title="标题文字" value="内容" />
<template #right> <template #right>
<view class="action"> <view class="action">
<view class="button" style="background: #fa4350" @click="handleAction('操作1')">操作1</view> <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: #f0883a" @click="handleAction('操作2')">操作2</view>
<view class="button" style="background: #4d80f0" @click="handleAction('操作3')">操作3</view> <view class="button" style="background: #4d80f0" @click="handleAction('操作3')">操作3</view>
</view> </view>
</template> </template>
</wd-swipe-action> </wd-swipe-action>
</demo-block> </demo-block>
<demo-block transparent title="左右滑动"> <demo-block transparent title="左右滑动">
<wd-swipe-action> <wd-swipe-action>
<template #left> <template #left>
<view class="action"> <view class="action">
<view class="button" style="background: #fa4350">操作1</view> <view class="button" style="background: #fa4350">操作1</view>
<view class="button" style="background: #f0883a">操作2</view> <view class="button" style="background: #f0883a">操作2</view>
<view class="button" style="background: #4d80f0">操作3</view> <view class="button" style="background: #4d80f0">操作3</view>
</view> </view>
</template> </template>
<wd-cell title="标题文字" value="内容" /> <wd-cell title="标题文字" value="内容" />
<template #right> <template #right>
<view class="action"> <view class="action">
<view class="button" style="background: #fa4350">操作4</view> <view class="button" style="background: #fa4350">操作4</view>
<view class="button" style="background: #f0883a">操作5</view> <view class="button" style="background: #f0883a">操作5</view>
<view class="button" style="background: #4d80f0">操作6</view> <view class="button" style="background: #4d80f0">操作6</view>
</view> </view>
</template> </template>
</wd-swipe-action> </wd-swipe-action>
</demo-block> </demo-block>
<demo-block transparent title="切换按钮"> <demo-block transparent title="切换按钮">
<wd-swipe-action v-model="value" :before-close="beforeClose"> <wd-swipe-action v-model="value" :before-close="beforeClose">
<template #left> <template #left>
<view class="action"> <view class="action">
<view class="button" style="background: #fa4350">操作1</view> <view class="button" style="background: #fa4350">操作1</view>
<view class="button" style="background: #f0883a">操作2</view> <view class="button" style="background: #f0883a">操作2</view>
<view class="button" style="background: #4d80f0">操作3</view> <view class="button" style="background: #4d80f0">操作3</view>
</view> </view>
</template> </template>
<wd-cell title="标题文字" value="内容" /> <wd-cell title="标题文字" value="内容" />
<template #right> <template #right>
<view class="action"> <view class="action">
<view class="button" style="background: #fa4350">操作4</view> <view class="button" style="background: #fa4350">操作4</view>
<view class="button" style="background: #f0883a">操作5</view> <view class="button" style="background: #f0883a">操作5</view>
<view class="button" style="background: #4d80f0">操作6</view> <view class="button" style="background: #4d80f0">操作6</view>
</view> </view>
</template> </template>
</wd-swipe-action> </wd-swipe-action>
</demo-block> </demo-block>
<view class="button-group"> <view class="button-group">
<view @click.stop="noop"> <view @click.stop="noop">
<wd-button size="small" @click="changeState('left')">打开左边</wd-button> <wd-button size="small" @click="changeState('left')">打开左边</wd-button>
</view> </view>
<view @click.stop="noop"> <view @click.stop="noop">
<wd-button size="small" @click="changeState('close')">关闭所有</wd-button> <wd-button size="small" @click="changeState('close')">关闭所有</wd-button>
</view> </view>
<view @click.stop="noop"> <view @click.stop="noop">
<wd-button size="small" @click="changeState('right')">打开右边</wd-button> <wd-button size="small" @click="changeState('right')">打开右边</wd-button>
</view>
</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> </view>
</page-wraper>
<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>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
@ -132,6 +134,11 @@ function handleAction(action: string) {
function noop() {} function noop() {}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.button-group {
background: $-dark-background2;
}
}
.action { .action {
height: 100%; 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> <template>
<wd-message-box id="wd-message-box"></wd-message-box> <page-wraper>
<view> <wd-message-box></wd-message-box>
<demo-block title="基本用法"> <view>
<wd-switch v-model="checked1" @change="handleChange1" /> <demo-block title="基本用法">
</demo-block> <wd-switch v-model="checked1" @change="handleChange1" />
<demo-block title="修改值 active-value 、 inactive-value"> </demo-block>
<view style="margin-bottom: 10px">{{ checked2 }}</view> <demo-block title="修改值 active-value 、 inactive-value">
<wd-switch v-model="checked2" active-value="沃特" inactive-value="商家后台" @change="handleChange2" /> <view style="margin-bottom: 10px">{{ checked2 }}</view>
</demo-block> <wd-switch v-model="checked2" active-value="沃特" inactive-value="商家后台" @change="handleChange2" />
<demo-block title="自定义颜色 active-color 、 inactive-color"> </demo-block>
<wd-switch v-model="checked3" active-color="#13ce66" inactive-color="#f00" @change="handleChange3" /> <demo-block title="自定义颜色 active-color 、 inactive-color">
</demo-block> <wd-switch v-model="checked3" active-color="#13ce66" inactive-color="#f00" @change="handleChange3" />
<demo-block title="修改大小"> </demo-block>
<wd-switch v-model="checked4" size="20px" @change="handleChange4" /> <demo-block title="修改大小">
</demo-block> <wd-switch v-model="checked4" size="20px" @change="handleChange4" />
<demo-block title="选中禁用"> </demo-block>
<wd-switch v-model="checked5" disabled /> <demo-block title="选中禁用">
</demo-block> <wd-switch v-model="checked5" disabled />
<demo-block title="非选中禁用"> </demo-block>
<wd-switch v-model="checked6" disabled /> <demo-block title="非选中禁用">
</demo-block> <wd-switch v-model="checked6" disabled />
<demo-block title="before-change 修改前钩子函数"> </demo-block>
<wd-switch v-model="checked7" :before-change="beforeChange" @change="handleChange5" /> <demo-block title="before-change 修改前钩子函数">
</demo-block> <wd-switch v-model="checked7" :before-change="beforeChange" @change="handleChange5" />
</view> </demo-block>
</view>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useMessage } from '@/uni_modules/wot-design-uni' import { useMessage } from '@/uni_modules/wot-design-uni'

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

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

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

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

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

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

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

@ -1,98 +1,104 @@
<template> <template>
<wd-toast /> <view>
<view @click.stop="clickOutside"> <wd-toast />
<demo-block title="基本用法"> <page-wraper>
<view class="top"> <view @click.stop="clickOutside">
<wd-tooltip v-model="show1" placement="bottom-start" content="bottom-start 提示文字" @change="handleChange1"> <demo-block title="基本用法">
<wd-button :round="false">bottom-start</wd-button> <view class="top">
</wd-tooltip> <wd-tooltip v-model="show1" placement="bottom-start" content="bottom-start 提示文字" @change="handleChange1">
<wd-tooltip v-model="show2" placement="bottom" content="bottom 提示文字" @change="handleChange2"> <wd-button :round="false">bottom-start</wd-button>
<wd-button :round="false">bottom</wd-button> </wd-tooltip>
</wd-tooltip> <wd-tooltip v-model="show2" placement="bottom" content="bottom 提示文字" @change="handleChange2">
<wd-tooltip v-model="show3" placement="bottom-end" content="bottom-end 提示文字" @change="handleChange3"> <wd-button :round="false">bottom</wd-button>
<wd-button :round="false">bottom-end</wd-button> </wd-tooltip>
</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>
<view class="left"> </page-wraper>
<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>
</view> </view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -122,6 +128,7 @@ const content = ref<string>('显示内容')
const toast = useToast() const toast = useToast()
function control() { function control() {
show15.value = !show15.value
// this.setData({ show15: !this.data.show15 }) // this.setData({ show15: !this.data.show15 })
} }
function onShow() { function onShow() {

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

@ -1,45 +1,47 @@
<template> <template>
<view> <view>
<demo-block title="Fade 动画"> <page-wraper>
<wd-button @click="fade">fade</wd-button> <demo-block title="Fade 动画">
<wd-button @click="fadeUp">fade-up</wd-button> <wd-button @click="fade">fade</wd-button>
<wd-button @click="fadeDown">fade-down</wd-button> <wd-button @click="fadeUp">fade-up</wd-button>
<wd-button @click="fadeLeft">fade-left</wd-button> <wd-button @click="fadeDown">fade-down</wd-button>
<wd-button @click="fadeRight">fade-right</wd-button> <wd-button @click="fadeLeft">fade-left</wd-button>
</demo-block> <wd-button @click="fadeRight">fade-right</wd-button>
<demo-block title="Slide 动画"> </demo-block>
<wd-button @click="slideUp">slide-up</wd-button> <demo-block title="Slide 动画">
<wd-button @click="slideDown">slide-down</wd-button> <wd-button @click="slideUp">slide-up</wd-button>
<wd-button @click="slideLeft">slide-left</wd-button> <wd-button @click="slideDown">slide-down</wd-button>
<wd-button @click="slideRight">slide-right</wd-button> <wd-button @click="slideLeft">slide-left</wd-button>
</demo-block> <wd-button @click="slideRight">slide-right</wd-button>
<demo-block title="Zoom 动画"> </demo-block>
<wd-button @click="zoomIn">zoom-in</wd-button> <demo-block title="Zoom 动画">
</demo-block> <wd-button @click="zoomIn">zoom-in</wd-button>
<demo-block title="自定义动画"> </demo-block>
<wd-button @click="custom">custom</wd-button> <demo-block title="自定义动画">
</demo-block> <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 <wd-transition
:show="customShow" :show="customShow"
:duration="{ enter: 700, leave: 1000 }" :duration="{ enter: 700, leave: 1000 }"
enter-class="custom-enter" enter-class="custom-enter"
enter-active-class="custom-enter-active" enter-active-class="custom-enter-active"
enter-to-class="custom-enter-to" enter-to-class="custom-enter-to"
leave-class="custom-leave" leave-class="custom-leave"
leave-active-class="custom-leave-active" leave-active-class="custom-leave-active"
leave-to-class="custom-leave-to" leave-to-class="custom-leave-to"
custom-class="block" custom-class="block"
/> />
</page-wraper>
</view> </view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
const show = ref<boolean>(false) const show = ref<boolean>(false)
const name = ref<string>('') const name = ref<any>('')
const customShow = ref<boolean>(false) const customShow = ref<boolean>(false)
function fade() { function fade() {
transition('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> <template>
<wd-message-box id="wd-message-box"></wd-message-box> <page-wraper>
<wd-toast id="wd-toast"></wd-toast> <wd-message-box></wd-message-box>
<demo-block title="基本用法"> <wd-toast id="wd-toast"></wd-toast>
<wd-upload :file-list="fileList1" :action="action" @change="handleChange1"></wd-upload> <demo-block title="基本用法">
</demo-block> <wd-upload :file-list="fileList1" :action="action" @change="handleChange1"></wd-upload>
<demo-block title="多选上传"> </demo-block>
<wd-upload :file-list="fileList2" multiple :action="action" @change="handleChange2"></wd-upload> <demo-block title="多选上传">
</demo-block> <wd-upload :file-list="fileList2" multiple :action="action" @change="handleChange2"></wd-upload>
<demo-block title="最大上传数限制"> </demo-block>
<wd-upload :file-list="fileList3" :limit="3" :action="action" @change="handleChange3"></wd-upload> <demo-block title="最大上传数限制">
</demo-block> <wd-upload :file-list="fileList3" :limit="3" :action="action" @change="handleChange3"></wd-upload>
<demo-block title="拦截预览图片操作"> </demo-block>
<wd-upload :file-list="fileList4" :action="action" @change="handleChange4" :before-preview="beforePreview"></wd-upload> <demo-block title="拦截预览图片操作">
</demo-block> <wd-upload :file-list="fileList4" :action="action" @change="handleChange4" :before-preview="beforePreview"></wd-upload>
<demo-block title="上传前置处理"> </demo-block>
<wd-upload :file-list="fileList5" :action="action" @change="handleChange5" :before-upload="beforeUpload"></wd-upload> <demo-block title="上传前置处理">
</demo-block> <wd-upload :file-list="fileList5" :action="action" @change="handleChange5" :before-upload="beforeUpload"></wd-upload>
<demo-block title="移除图片前置处理"> </demo-block>
<wd-upload :file-list="fileList6" :action="action" @change="handleChange6" :before-remove="beforeRemove"></wd-upload> <demo-block title="移除图片前置处理">
</demo-block> <wd-upload :file-list="fileList6" :action="action" @change="handleChange6" :before-remove="beforeRemove"></wd-upload>
<demo-block title="上传状态钩子"> </demo-block>
<wd-upload <demo-block title="上传状态钩子">
:file-list="fileList7" <wd-upload
:action="action" :file-list="fileList7"
@change="handleChange7" :action="action"
@success="handleSuccess" @change="handleChange7"
@fail="handleFail" @success="handleSuccess"
@progress="handleProgess" @fail="handleFail"
></wd-upload> @progress="handleProgess"
</demo-block> ></wd-upload>
<demo-block title="禁用"> </demo-block>
<wd-upload :file-list="fileList8" disabled :action="action" @change="handleChange8"></wd-upload> <demo-block title="禁用">
</demo-block> <wd-upload :file-list="fileList8" disabled :action="action" @change="handleChange8"></wd-upload>
<demo-block title="自定义唤起上传样式"> </demo-block>
<wd-upload :file-list="fileList9" :action="action" @change="handleChange9" use-default-slot> <demo-block title="自定义唤起上传样式">
<wd-button>自定义唤起样式</wd-button> <wd-upload :file-list="fileList9" :action="action" @change="handleChange9" use-default-slot>
</wd-upload> <wd-button>自定义唤起样式</wd-button>
</demo-block> </wd-upload>
<demo-block title="选择文件前置处理"> </demo-block>
<wd-upload :file-list="fileList10" :action="action" @change="handleChange10" :before-choose="beforeChoose"></wd-upload> <demo-block title="选择文件前置处理">
</demo-block> <wd-upload :file-list="fileList10" :action="action" @change="handleChange10" :before-choose="beforeChoose"></wd-upload>
</demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast, useMessage } from '@/uni_modules/wot-design-uni' 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' url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg'
} }
]) ])
const fileList3 = ref<string[]>([]) const fileList3 = ref<Record<string, any>[]>([])
const fileList4 = ref<string[]>([]) const fileList4 = ref<Record<string, any>[]>([])
const fileList5 = ref<string[]>([]) const fileList5 = ref<Record<string, any>[]>([])
const fileList6 = ref<string[]>([]) const fileList6 = ref<Record<string, any>[]>([])
const fileList7 = ref<string[]>([]) const fileList7 = ref<Record<string, any>[]>([])
const fileList8 = ref<string[]>([]) const fileList8 = ref<Record<string, any>[]>([])
const fileList9 = ref<string[]>([]) const fileList9 = ref<Record<string, any>[]>([])
const fileList10 = ref<string[]>([]) const fileList10 = ref<Record<string, any>[]>([])
const fileList11 = ref<string[]>([]) const fileList11 = ref<Record<string, any>[]>([])
const messageBox = useMessage() const messageBox = useMessage()
const toast = useToast() 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-right: $size solid transparent;
border-top: $size solid $bg; border-top: $size solid $bg;
transform: translateX(-50%); transform: translateX(-50%);
bottom: -$size; bottom: calc(-1 * $size)
} }
@include e(arrow-up) { @include e(arrow-up) {
border-left: $size solid transparent; border-left: $size solid transparent;
border-right: $size solid transparent; border-right: $size solid transparent;
border-bottom: $size solid $bg; border-bottom: $size solid $bg;
transform: translateX(-50%); transform: translateX(-50%);
top: -$size; top: calc(-1 * $size)
} }
@include e(arrow-left) { @include e(arrow-left) {
border-top: $size solid transparent; border-top: $size solid transparent;
border-bottom: $size solid transparent; border-bottom: $size solid transparent;
border-right: $size solid $bg; border-right: $size solid $bg;
transform: translateY(-50%); transform: translateY(-50%);
left: -$size; left: calc(-1 * $size)
} }
@include e(arrow-right) { @include e(arrow-right) {
border-top: $size solid transparent; border-top: $size solid transparent;
border-bottom: $size solid transparent; border-bottom: $size solid transparent;
border-left: $size solid $bg; border-left: $size solid $bg;
transform: translateY(-50%); transform: translateY(-50%);
right: -$size; right: calc(-1 * $size)
} }
} }
@ -263,7 +263,7 @@
height: $size; height: $size;
background-color: $bg; background-color: $bg;
position: absolute; position: absolute;
bottom: - calc($size / 2); bottom: calc(-1 * $size / 2);
transform: rotateZ(45deg); transform: rotateZ(45deg);
box-shadow: $box-shadow; box-shadow: $box-shadow;
} }
@ -276,7 +276,7 @@
height: $size; height: $size;
background-color: $bg; background-color: $bg;
position: absolute; position: absolute;
top: - calc($size / 2); top: calc(-1 * $size / 2);
transform: rotateZ(45deg); transform: rotateZ(45deg);
box-shadow: $box-shadow; box-shadow: $box-shadow;
} }
@ -289,7 +289,7 @@
height: $size; height: $size;
background-color: $bg; background-color: $bg;
position: absolute; position: absolute;
left: - calc($size / 2); left: calc(-1 * $size / 2);
transform: rotateZ(45deg); transform: rotateZ(45deg);
box-shadow: $box-shadow; box-shadow: $box-shadow;
} }
@ -302,7 +302,7 @@
height: $size; height: $size;
background-color: $bg; background-color: $bg;
position: absolute; position: absolute;
right: - calc($size / 2); right: calc(-1 * $size / 2);
transform: rotateZ(45deg); transform: rotateZ(45deg);
box-shadow: $box-shadow; 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/variable';
@import '../common/abstracts/mixin'; @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) { @include b(action-sheet) {
background-color: #fff; background-color: $-color-white;
padding-bottom: 1px; padding-bottom: 1px;
@include edeep(popup) { @include edeep(popup) {
border-radius: $-action-sheet-radius $-action-sheet-radius 0 0; border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
} }
@include e(actions) { @include e(actions) {
padding: 8px 0; padding: 8px 0;
max-height: 50vh; max-height: 50vh;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
@include e(action) { @include e(action) {
position: relative; position: relative;
display: block; 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>
<view class="wd-action-sheet__actions" v-if="actions && actions.length"> <view class="wd-action-sheet__actions" v-if="actions && actions.length">
<button <button
jd:for="{{ actions }}"
v-for="(action, rowIndex) in actions" v-for="(action, rowIndex) in actions"
:key="rowIndex" :key="rowIndex"
:class="`wd-action-sheet__action ${action.disabled ? 'wd-action-sheet__action--disabled' : ''} ${ :class="`wd-action-sheet__action ${action.disabled ? 'wd-action-sheet__action--disabled' : ''} ${
@ -56,7 +55,9 @@
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'wd-action-sheet',
options: { options: {
addGlobalClass: true,
virtualHost: true, virtualHost: true,
styleIsolation: 'shared' styleIsolation: 'shared'
} }
@ -93,8 +94,8 @@ interface Props {
show: boolean show: boolean
actions: Array<Action> actions: Array<Action>
panels: Array<Panel> panels: Array<Panel>
title: string title?: string
cancelText: string cancelText?: string
closeOnClickAction: boolean closeOnClickAction: boolean
closeOnClickModal: boolean closeOnClickModal: boolean
duration: number duration: number
@ -112,6 +113,7 @@ const props = withDefaults(defineProps<Props>(), {
closeOnClickAction: true, closeOnClickAction: true,
closeOnClickModal: true, closeOnClickModal: true,
duration: 200, duration: 200,
zIndex: 10,
lazyRender: false, lazyRender: false,
safeAreaInsetBottom: true safeAreaInsetBottom: true
}) })

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

@ -1,7 +1,7 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-06-12 18:40:59 * @Date: 2023-06-12 18:40:59
* @LastEditTime: 2023-07-15 16:21:15 * @LastEditTime: 2023-08-15 15:47:51
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-badge\wd-badge.vue * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-badge\wd-badge.vue
@ -21,18 +21,19 @@
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签 name: 'wd-badge',
options: { options: {
virtualHost: true addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
} }
} }
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info' type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
interface Props { interface Props {
modelValue: number | null modelValue: number | string | null
bgColor?: string bgColor?: string
max?: number max?: number
isDot?: boolean isDot?: boolean
@ -40,13 +41,13 @@ interface Props {
type?: BadgeType type?: BadgeType
top?: number top?: number
right?: number right?: number
customClass?: string customClass: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
customClass: '', customClass: '',
modelValue: null modelValue: null
}) })
const content = ref<number | null>(null) const content = ref<number | string | null>(null)
watch( watch(
[() => props.modelValue, () => props.max, () => props.isDot], [() => props.modelValue, () => props.max, () => props.isDot],
@ -64,7 +65,7 @@ function notice() {
if (props.isDot) return if (props.isDot) return
let value = props.modelValue let value = props.modelValue
const max = props.max 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 value = max < value ? max : value
} }
content.value = 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) { @include b(button) {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -204,7 +265,7 @@
font-size: $-button-medium-fs; font-size: $-button-medium-fs;
&::after { &::after {
border-radius: $-button-medium-radius * 2; border-radius: calc($-button-medium-radius * 2);
} }
@include when(primary) { @include when(primary) {
box-shadow: $-button-medium-box-shadow-size $-button-primary-box-shadow-color; box-shadow: $-button-medium-box-shadow-size $-button-primary-box-shadow-color;
@ -256,7 +317,7 @@
font-size: $-button-large-fs; font-size: $-button-large-fs;
&::after { &::after {
border-radius: $-button-large-radius * 2; border-radius: calc($-button-large-radius * 2);
} }
&:not(.is-plain) { &:not(.is-plain) {
@include when(primary) { @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"> <script lang="ts">
export default { export default {
name: 'wd-button',
options: { options: {
addGlobalClass: true,
virtualHost: true, virtualHost: true,
styleIsolation: 'shared' styleIsolation: 'shared'
} }
@ -65,7 +67,7 @@ const loadingIcon = (color = '#4D80F0', reverse = true) => {
reverse ? '#fff' : color 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>` }"/><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' type ButtonSize = 'small' | 'medium' | 'large'
interface Props { interface Props {
@ -76,19 +78,19 @@ interface Props {
block: boolean block: boolean
type: ButtonType type: ButtonType
size: ButtonSize size: ButtonSize
icon: string icon?: string
loading: boolean loading: boolean
loadingColor: string loadingColor?: string
openType: string openType?: string
formType: string formType?: string
hoverStopPropagation: boolean hoverStopPropagation?: boolean
lang: string lang?: string
sessionFrom: string sessionFrom?: string
sendMessageTitle: string sendMessageTitle?: string
sendMessagePath: string sendMessagePath?: string
sendMessageImg: string sendMessageImg?: string
appParameter: string appParameter?: string
showMessageCard: boolean showMessageCard?: boolean
customClass: string customClass: string
customStyle: string customStyle: string
} }
@ -100,7 +102,9 @@ const props = withDefaults(defineProps<Props>(), {
loading: false, loading: false,
suck: false, suck: false,
block: false, block: false,
disabled: false disabled: false,
customClass: '',
customStyle: ''
}) })
const hoverStartTime = ref<number>(20) 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/variable';
@import '../../common/abstracts/mixin'; @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 b(month) {
@include e(title) { @include e(title) {
padding: 13px 0; padding: 13px 0;
@ -8,12 +28,14 @@
font-size: $-calendar-panel-title-fs; font-size: $-calendar-panel-title-fs;
color: $-calendar-panel-title-color; color: $-calendar-panel-title-color;
} }
@include e(days) { @include e(days) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-size: $-calendar-day-fs; font-size: $-calendar-day-fs;
color: $-calendar-day-color; color: $-calendar-day-color;
} }
@include e(day) { @include e(day) {
position: relative; position: relative;
width: 14.285%; width: 14.285%;
@ -26,9 +48,11 @@
color: $-calendar-disabled-color; color: $-calendar-disabled-color;
} }
} }
@include when(current) { @include when(current) {
color: $-calendar-active-color; color: $-calendar-active-color;
} }
@include when(selected) { @include when(selected) {
.wd-month__day-container { .wd-month__day-container {
border-radius: $-calendar-active-border; border-radius: $-calendar-active-border;
@ -36,11 +60,13 @@
color: #fff; color: #fff;
} }
} }
@include when(middle) { @include when(middle) {
.wd-month__day-container { .wd-month__day-container {
background: $-calendar-range-color; background: $-calendar-range-color;
} }
} }
@include when(start) { @include when(start) {
&::after { &::after {
position: absolute; position: absolute;
@ -52,15 +78,18 @@
background: $-calendar-range-color; background: $-calendar-range-color;
z-index: 1; z-index: 1;
} }
&.is-without-end::after { &.is-without-end::after {
display: none; display: none;
} }
.wd-month__day-container { .wd-month__day-container {
background: $-calendar-active-color; background: $-calendar-active-color;
color: #fff; color: #fff;
border-radius: $-calendar-active-border; border-radius: $-calendar-active-border;
} }
} }
@include when(end) { @include when(end) {
&::after { &::after {
position: absolute; position: absolute;
@ -72,12 +101,14 @@
background: $-calendar-range-color; background: $-calendar-range-color;
z-index: 1; z-index: 1;
} }
.wd-month__day-container { .wd-month__day-container {
background: $-calendar-active-color; background: $-calendar-active-color;
color: #fff; color: #fff;
border-radius: $-calendar-active-border; border-radius: $-calendar-active-border;
} }
} }
@include when(same) { @include when(same) {
.wd-month__day-container { .wd-month__day-container {
background: $-calendar-active-color; background: $-calendar-active-color;
@ -86,13 +117,16 @@
} }
} }
} }
@include e(day-container) { @include e(day-container) {
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
@include e(day-text) { @include e(day-text) {
font-weight: $-calendar-day-fw; font-weight: $-calendar-day-fw;
} }
@include e(day-top) { @include e(day-top) {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -102,6 +136,7 @@
font-size: $-calendar-info-fs; font-size: $-calendar-info-fs;
text-align: center; text-align: center;
} }
@include e(day-bottom) { @include e(day-bottom) {
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;

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

@ -24,6 +24,16 @@
</view> </view>
</template> </template>
<script lang="ts">
export default {
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
import { import {
@ -48,9 +58,9 @@ interface Props {
maxDate: number maxDate: number
firstDayOfWeek: number firstDayOfWeek: number
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function formatter?: Function
maxRange: number maxRange?: number
rangePrompt: string rangePrompt?: string
allowSameDay: boolean allowSameDay: boolean
defaultTime: Array<number> 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/variable';
@import '../../common/abstracts/mixin'; @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) { @include b(month-panel) {
font-size: $-calendar-fs; font-size: $-calendar-fs;
@ -11,6 +31,7 @@
color: $-calendar-panel-title-color; color: $-calendar-panel-title-color;
padding: $-calendar-panel-padding; padding: $-calendar-panel-padding;
} }
@include e(weeks) { @include e(weeks) {
display: flex; display: flex;
height: $-calendar-week-height; height: $-calendar-week-height;
@ -20,18 +41,22 @@
font-size: $-calendar-week-fs; font-size: $-calendar-week-fs;
padding: $-calendar-panel-padding; padding: $-calendar-panel-padding;
} }
@include e(week) { @include e(week) {
flex: 1; flex: 1;
text-align: center; text-align: center;
} }
@include e(container) { @include e(container) {
padding: $-calendar-panel-padding; padding: $-calendar-panel-padding;
box-sizing: border-box; box-sizing: border-box;
} }
@include e(time) { @include e(time) {
display: flex; display: flex;
box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.02); box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.02);
} }
@include e(time-label) { @include e(time-label) {
position: relative; position: relative;
flex: 1; flex: 1;
@ -52,10 +77,12 @@
z-index: 0; z-index: 0;
} }
} }
@include e(time-text) { @include e(time-text) {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@include e(time-picker) { @include e(time-picker) {
flex: 3; flex: 3;
} }

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

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

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

@ -42,7 +42,13 @@
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
behaviors: ['uni://form-field'] name: 'wd-calendar-view',
behaviors: ['uni://form-field'],
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
} }
</script> </script>
@ -68,11 +74,11 @@ interface Props {
firstDayOfWeek: number firstDayOfWeek: number
// 日期格式化函数 // 日期格式化函数
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function formatter?: Function
// type 为范围选择时有效，最大日期范围 // type 为范围选择时有效，最大日期范围
maxRange: number maxRange?: number
// type 为范围选择时有效，选择超出最大日期范围时的错误提示文案 // type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
rangePrompt: string rangePrompt?: string
// type 为范围选择时有效，是否允许选择同一天 // type 为范围选择时有效，是否允许选择同一天
allowSameDay: boolean allowSameDay: boolean
// 是否展示面板标题，自动计算当前滚动的日期月份 // 是否展示面板标题，自动计算当前滚动的日期月份
@ -83,7 +89,7 @@ interface Props {
panelHeight: number panelHeight: number
// type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据 // type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
timeFilter: Function timeFilter?: Function
// type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改 // type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
hideSecond: boolean hideSecond: boolean
// 是否展示picker（兼容支付宝和钉钉） // 是否展示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/variable';
@import '../../common/abstracts/mixin'; @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 b(year) {
@include e(title) { @include e(title) {
padding: 13px 0; padding: 13px 0;
@ -8,12 +29,14 @@
font-size: $-calendar-panel-title-fs; font-size: $-calendar-panel-title-fs;
color: $-calendar-panel-title-color; color: $-calendar-panel-title-color;
} }
@include e(months) { @include e(months) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-size: $-calendar-day-fs; font-size: $-calendar-day-fs;
color: $-calendar-day-color; color: $-calendar-day-color;
} }
@include e(month) { @include e(month) {
position: relative; position: relative;
width: 25%; width: 25%;
@ -26,9 +49,11 @@
color: $-calendar-disabled-color; color: $-calendar-disabled-color;
} }
} }
@include when(current) { @include when(current) {
color: $-calendar-active-color; color: $-calendar-active-color;
} }
@include when(selected) { @include when(selected) {
color: #fff; color: #fff;
@ -37,9 +62,11 @@
background: $-calendar-active-color; background: $-calendar-active-color;
} }
} }
@include when(middle) { @include when(middle) {
background: $-calendar-range-color; background: $-calendar-range-color;
} }
@include when(start) { @include when(start) {
color: #fff; color: #fff;
@ -52,14 +79,17 @@
content: ''; content: '';
background: $-calendar-range-color; background: $-calendar-range-color;
} }
.wd-year__month-text { .wd-year__month-text {
background: $-calendar-active-color; background: $-calendar-active-color;
border-radius: $-calendar-active-border; border-radius: $-calendar-active-border;
} }
&.is-without-end::after { &.is-without-end::after {
display: none; display: none;
} }
} }
@include when(end) { @include when(end) {
color: #fff; color: #fff;
@ -72,11 +102,13 @@
content: ''; content: '';
background: $-calendar-range-color; background: $-calendar-range-color;
} }
.wd-year__month-text { .wd-year__month-text {
background: $-calendar-active-color; background: $-calendar-active-color;
border-radius: $-calendar-active-border; border-radius: $-calendar-active-border;
} }
} }
@include when(same) { @include when(same) {
color: #fff; color: #fff;
@ -86,11 +118,13 @@
} }
} }
} }
@include e(month-text) { @include e(month-text) {
width: $-calendar-month-width; width: $-calendar-month-width;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
@include e(month-top) { @include e(month-top) {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -100,6 +134,7 @@
font-size: $-calendar-info-fs; font-size: $-calendar-info-fs;
text-align: center; text-align: center;
} }
@include e(month-bottom) { @include e(month-bottom) {
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;

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

@ -17,6 +17,15 @@
</view> </view>
</view> </view>
</template> </template>
<script lang="ts">
export default {
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
@ -31,9 +40,9 @@ interface Props {
minDate: number minDate: number
maxDate: number maxDate: number
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function formatter?: Function
maxRange: number maxRange?: number
rangePrompt: string rangePrompt?: string
allowSameDay: boolean allowSameDay: boolean
defaultTime: Array<number> 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/variable';
@import '../../common/abstracts/mixin'; @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) { @include b(year-panel) {
font-size: $-calendar-fs; font-size: $-calendar-fs;
padding: $-calendar-panel-padding; 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> </scroll-view>
</view> </view>
</template> </template>
<script lang="ts">
export default {
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, getCurrentInstance, onMounted, ref, nextTick } from 'vue' import { computed, getCurrentInstance, onMounted, ref, nextTick } from 'vue'
@ -40,9 +49,9 @@ interface Props {
minDate: number minDate: number
maxDate: number maxDate: number
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function formatter?: Function
maxRange: number maxRange?: number
rangePrompt: string rangePrompt?: string
allowSameDay: boolean allowSameDay: boolean
showPanelTitle: boolean showPanelTitle: boolean
defaultTime: Array<number> 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/variable';
@import '../common/abstracts/mixin'; @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 b(calendar) {
@include when(border) { @include when(border) {
.wd-calendar__cell { .wd-calendar__cell {
@include halfPixelBorder('top', $-cell-padding); @include halfPixelBorder('top', $-cell-padding);
} }
} }
@include e(cell) { @include e(cell) {
position: relative; position: relative;
display: flex; display: flex;
@ -18,25 +60,30 @@
overflow: hidden; overflow: hidden;
line-height: $-cell-ling-height; line-height: $-cell-ling-height;
} }
@include e(cell) { @include e(cell) {
@include when(disabled) { @include when(disabled) {
.wd-calendar__value { .wd-calendar__value {
color: $-input-disabled-color; color: $-input-disabled-color;
} }
} }
@include when(align-right) { @include when(align-right) {
.wd-calendar__value { .wd-calendar__value {
text-align: right; text-align: right;
} }
} }
@include when(error) { @include when(error) {
.wd-calendar__value { .wd-calendar__value {
color: $-input-error-color; color: $-input-error-color;
} }
:deep(.wd-calendar__arrow) { :deep(.wd-calendar__arrow) {
color: $-input-error-color; color: $-input-error-color;
} }
} }
@include when(large) { @include when(large) {
font-size: $-cell-title-fs-large; font-size: $-cell-title-fs-large;
@ -44,6 +91,7 @@
font-size: $-cell-icon-size-large; font-size: $-cell-icon-size-large;
} }
} }
@include when(center) { @include when(center) {
align-items: center; align-items: center;
@ -52,6 +100,7 @@
} }
} }
} }
@include e(label) { @include e(label) {
position: relative; position: relative;
width: $-input-cell-label-width; width: $-input-cell-label-width;
@ -65,7 +114,7 @@
&::after { &::after {
position: absolute; position: absolute;
left: 0; left: 0;
top: $-cell-wrapper-padding + 2px; top: calc($-cell-wrapper-padding + 2px);
content: '*'; content: '*';
font-size: $-cell-required-size; font-size: $-cell-required-size;
line-height: 1.1; line-height: 1.1;
@ -73,6 +122,7 @@
} }
} }
} }
@include e(value) { @include e(value) {
flex: 1; flex: 1;
padding: $-cell-wrapper-padding 0; padding: $-cell-wrapper-padding 0;
@ -83,10 +133,12 @@
@include when(ellipsis) { @include when(ellipsis) {
@include lineEllipsis; @include lineEllipsis;
} }
@include m(placeholder) { @include m(placeholder) {
color: $-input-placeholder-color; color: $-input-placeholder-color;
} }
} }
@include edeep(arrow) { @include edeep(arrow) {
display: block; display: block;
margin-top: $-cell-wrapper-padding; margin-top: $-cell-wrapper-padding;
@ -99,6 +151,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@include e(title) { @include e(title) {
color: $-action-sheet-color; color: $-action-sheet-color;
height: $-action-sheet-title-height; height: $-action-sheet-title-height;
@ -107,6 +160,7 @@
font-size: $-action-sheet-title-fs; font-size: $-action-sheet-title-fs;
font-weight: $-action-sheet-weight; font-weight: $-action-sheet-weight;
} }
@include edeep(close) { @include edeep(close) {
position: absolute; position: absolute;
top: $-action-sheet-close-top; top: $-action-sheet-close-top;
@ -116,17 +170,21 @@
transform: rotate(-45deg); transform: rotate(-45deg);
line-height: 1.1; line-height: 1.1;
} }
@include e(tabs) { @include e(tabs) {
width: 222px; width: 222px;
margin: 10px auto 12px; margin: 10px auto 12px;
} }
@include e(shortcuts) { @include e(shortcuts) {
padding: 20px 0; padding: 20px 0;
text-align: center; text-align: center;
} }
@include edeep(tag) { @include edeep(tag) {
margin-right: 8px; margin-right: 8px;
} }
@include e(view) { @include e(view) {
@include when(show-confirm) { @include when(show-confirm) {
height: 394px; height: 394px;
@ -136,6 +194,7 @@
} }
} }
} }
@include e(range-label) { @include e(range-label) {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -147,6 +206,7 @@
box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02); box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
} }
} }
@include e(range-label-item) { @include e(range-label-item) {
flex: 1; flex: 1;
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
@ -155,10 +215,12 @@
color: rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.25);
} }
} }
@include e(range-sperator) { @include e(range-sperator) {
margin: 0 24px; margin: 0 24px;
color: rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.25);
} }
@include e(confirm) { @include e(confirm) {
padding: 12px 25px 14px; 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"> <script lang="ts">
export default { export default {
name: 'wd-calendar',
behaviors: ['uni://form-field'], behaviors: ['uni://form-field'],
options: { options: {
addGlobalClass: true,
virtualHost: true, virtualHost: true,
styleIsolation: 'shared' styleIsolation: 'shared'
} }
@ -189,48 +191,48 @@ interface Props {
customLabelClass?: string customLabelClass?: string
customValueClass?: string customValueClass?: string
modelValue: null | number | Array<number> modelValue: null | number | Array<number>
type: CalendarType type?: CalendarType
minDate: number minDate?: number
maxDate: number maxDate?: number
firstDayOfWeek: number firstDayOfWeek?: number
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function formatter?: Function
maxRange: number maxRange?: number
rangePrompt: string rangePrompt?: string
allowSameDay: boolean allowSameDay?: boolean
defaultTime: string | Array<string> defaultTime?: string | Array<string>
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
timeFilter: Function timeFilter?: Function
hideSecond: boolean hideSecond?: boolean
label: string label?: string
labelWidth: string labelWidth?: string
useLabelSlot: boolean useLabelSlot?: boolean
useDefaultSlot: boolean useDefaultSlot?: boolean
disabled: boolean disabled?: boolean
readonly: boolean readonly?: boolean
placeholder: string placeholder?: string
title: string title?: string
alignRight: boolean alignRight?: boolean
error: boolean error?: boolean
required: boolean required?: boolean
size: string size?: string
center: boolean center?: boolean
closeOnClickModal: boolean closeOnClickModal?: boolean
zIndex: number zIndex?: number
showConfirm: boolean showConfirm?: boolean
confirmText: string confirmText?: string
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
displayFormat: Function displayFormat?: Function
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
innerDisplayFormat: Function innerDisplayFormat?: Function
ellipsis: boolean ellipsis?: boolean
showTypeSwitch: boolean showTypeSwitch?: boolean
shortcuts: Array<Record<string, any>> shortcuts?: Array<Record<string, any>>
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
onShortcutsClick: Function onShortcutsClick?: Function
safeAreaInsetBottom: boolean safeAreaInsetBottom?: boolean
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
beforeConfirm: Function beforeConfirm?: Function
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
customClass: '', customClass: '',
@ -261,8 +263,8 @@ const props = withDefaults(defineProps<Props>(), {
}) })
const pickerShow = ref<boolean>(false) const pickerShow = ref<boolean>(false)
const calendarValue = ref<null | number | number[]>() const calendarValue = ref<null | number | number[]>(null)
const lastCalendarValue = ref<null | number | number[]>() const lastCalendarValue = ref<null | number | number[]>(null)
const panelHeight = ref<number>(338) const panelHeight = ref<number>(338)
const confirmBtnDisabled = ref<boolean>(true) const confirmBtnDisabled = ref<boolean>(true)
const showValue = ref<string>('') 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/variable.scss";
@import "../common/abstracts/_mixin.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) { @include b(card) {
padding: $-card-padding; 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> <template>
<view :class="['wd-card', type == 'rectangle' ? 'is-rectangle' : '', customClass]"> <view :class="['wd-card', type == 'rectangle' ? 'is-rectangle' : '', customClass]">
<view :class="['wd-card__title-content', customTitleClass]"> <view :class="['wd-card__title-content', customTitleClass]">
@ -24,6 +15,17 @@
</view> </view>
</template> </template>
<script lang="ts">
export default {
name: 'wd-card',
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup> <script lang="ts" setup>
interface Props { interface Props {
title?: string 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/variable.scss';
@import '../common/abstracts/_mixin.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) { @include b(cell-group) {
background-color: $-color-white; 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> <template>
<view :class="['wd-cell-group', border ? 'is-border' : '', customClass]"> <view :class="['wd-cell-group', border ? 'is-border' : '', customClass]">
<view v-if="title || value || useSlot" class="wd-cell-group__title"> <view v-if="title || value || useSlot" class="wd-cell-group__title">
@ -20,9 +29,11 @@
<script lang="ts"> <script lang="ts">
export default { export default {
// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签 name: 'wd-cell-group',
options: { options: {
virtualHost: true addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
} }
} }
</script> </script>
@ -32,13 +43,14 @@ import { getCurrentInstance, provide, ref } from 'vue'
interface Props { interface Props {
customClass?: string customClass?: string
title: string title?: string
value: string value?: string
useSlot: boolean useSlot: boolean
border: boolean border: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
useSlot: false, useSlot: false,
border: false,
customClass: '' 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/variable.scss';
@import '../common/abstracts/_mixin.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) { @include b(cell) {
position: relative; position: relative;
padding-left: $-cell-padding; padding-left: $-cell-padding;
@ -15,6 +44,7 @@
@include halfPixelBorder('top'); @include halfPixelBorder('top');
} }
} }
@include e(wrapper) { @include e(wrapper) {
position: relative; position: relative;
display: flex; display: flex;
@ -28,14 +58,17 @@
.wd-cell__right { .wd-cell__right {
margin-top: $-cell-vertical-top; margin-top: $-cell-vertical-top;
} }
.wd-cell__value { .wd-cell__value {
text-align: left; text-align: left;
} }
} }
@include when(label) { @include when(label) {
padding: $-cell-wrapper-padding-with-label $-cell-padding $-cell-wrapper-padding-with-label 0; padding: $-cell-wrapper-padding-with-label $-cell-padding $-cell-wrapper-padding-with-label 0;
} }
} }
@include e(left) { @include e(left) {
position: relative; position: relative;
flex: 1; flex: 1;
@ -58,23 +91,27 @@
} }
} }
} }
@include e(right) { @include e(right) {
position: relative; position: relative;
display: flex; display: flex;
flex: 1; flex: 1;
} }
@include e(title) { @include e(title) {
flex: 1; flex: 1;
width: 100%; width: 100%;
font-size: $-cell-title-fs; font-size: $-cell-title-fs;
margin-right: $-cell-padding; margin-right: $-cell-padding;
} }
@include e(label) { @include e(label) {
margin-top: 2px; margin-top: 2px;
font-size: $-cell-label-fs; font-size: $-cell-label-fs;
color: $-cell-label-color; color: $-cell-label-color;
@include lineEllipsis; @include lineEllipsis;
} }
@include edeep(icon) { @include edeep(icon) {
display: block; display: block;
position: relative; position: relative;
@ -84,6 +121,7 @@
margin-right: $-cell-icon-right; margin-right: $-cell-icon-right;
font-size: $-cell-icon-size; font-size: $-cell-icon-size;
} }
@include e(value) { @include e(value) {
position: relative; position: relative;
flex: 1; flex: 1;
@ -93,6 +131,7 @@
line-height: $-cell-value-line-height; line-height: $-cell-value-line-height;
vertical-align: top; vertical-align: top;
} }
@include edeep(arrow-right) { @include edeep(arrow-right) {
display: inline-block; display: inline-block;
margin-left: 8px; margin-left: 8px;
@ -102,25 +141,31 @@
color: $-cell-arrow-color; color: $-cell-arrow-color;
vertical-align: top; vertical-align: top;
} }
@include when(link) { @include when(link) {
-webkit-tap-highlight-color: $-cell-tap-bg; -webkit-tap-highlight-color: $-cell-tap-bg;
} }
@include when(hover) { @include when(hover) {
background-color: $-cell-tap-bg; background-color: $-cell-tap-bg;
} }
@include when(large) { @include when(large) {
.wd-cell__title { .wd-cell__title {
font-size: $-cell-title-fs-large; font-size: $-cell-title-fs-large;
} }
.wd-cell__label { .wd-cell__label {
font-size: $-cell-label-fs-large; font-size: $-cell-label-fs-large;
} }
.wd-cell__icon { .wd-cell__icon {
font-size: $-cell-icon-size-large; font-size: $-cell-icon-size-large;
width: $-cell-icon-size-large; width: $-cell-icon-size-large;
height: $-cell-icon-size-large; height: $-cell-icon-size-large;
} }
} }
@include when(center) { @include when(center) {
.wd-cell__wrapper { .wd-cell__wrapper {
align-items: center; 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"> <script lang="ts">
export default { export default {
name: 'wd-cell',
options: { options: {
addGlobalClass: true,
virtualHost: true, virtualHost: true,
styleIsolation: 'shared' styleIsolation: 'shared'
} }
@ -58,17 +60,16 @@ export default {
import { useCell } from '../mixins/useCell' import { useCell } from '../mixins/useCell'
interface Props { interface Props {
title: string title?: string
value: string value?: string
icon: string icon?: string
label: string label?: string
isLabel: string
isLink: boolean isLink: boolean
to: string to?: string
replace: boolean replace: boolean
clickable: boolean clickable: boolean
size: string size?: string
titleWidth: string titleWidth?: string
center: boolean center: boolean
required: boolean required: boolean
vertical: 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/_mixin.scss";
@import "./../common/abstracts/variable.scss"; @import "./../common/abstracts/variable.scss";
.wot-theme-dark {
@include b(checkbox-group) {
background-color: $-dark-background2;
}
}
@include b(checkbox-group) { @include b(checkbox-group) {
background-color: $-checkbox-bg; 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> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
behaviors: ['uni://form-field'] name: 'wd-checkbox-group',
behaviors: ['uni://form-field'],
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
} }
</script> </script>
@ -17,20 +23,21 @@ type checkShape = 'circle' | 'square' | 'button'
interface Props { interface Props {
customClass?: string customClass?: string
modelValue: Array<string | number | boolean> modelValue: Array<string | number | boolean>
cell: boolean | null cell: boolean
shape: checkShape shape: checkShape
checkedColor: string checkedColor: string
disabled: boolean | null disabled: boolean
min: number min: number
max: number max: number
inline: boolean | null inline: boolean
size: string size?: string
name: string name?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
customClass: '', customClass: '',
value: () => [], modelValue: () => [],
cell: false,
shape: 'circle', shape: 'circle',
checkedColor: '#4D80F0', checkedColor: '#4D80F0',
disabled: false, 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/_mixin.scss";
@import "./../common/abstracts/variable.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) { @include b(checkbox) {
display: block; display: block;
margin-bottom: $-checkbox-margin; margin-bottom: $-checkbox-margin;
@ -29,6 +98,7 @@
border-radius: $-checkbox-square-radius; border-radius: $-checkbox-square-radius;
} }
} }
@include e(input) { @include e(input) {
position: absolute; position: absolute;
width: 0; width: 0;
@ -36,6 +106,7 @@
margin: 0; margin: 0;
opacity: 0; opacity: 0;
} }
@include edeep(btn-check) { @include edeep(btn-check) {
display: inline-block; display: inline-block;
font-size: $-checkbox-icon-size; font-size: $-checkbox-icon-size;
@ -44,12 +115,14 @@
width: $-checkbox-icon-size; width: $-checkbox-icon-size;
vertical-align: middle; vertical-align: middle;
} }
@include e(txt) { @include e(txt) {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
line-height: 20px; line-height: 20px;
@include lineEllipsis; @include lineEllipsis;
} }
@include e(label) { @include e(label) {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -58,18 +131,21 @@
font-size: $-checkbox-label-fs; font-size: $-checkbox-label-fs;
color: $-checkbox-label-color; color: $-checkbox-label-color;
} }
@include edeep(check) { @include edeep(check) {
color: $-checkbox-check-color; color: $-checkbox-check-color;
font-size: $-checkbox-icon-size; font-size: $-checkbox-icon-size;
opacity: 0; opacity: 0;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
@include when(checked) { @include when(checked) {
.wd-checkbox__shape { .wd-checkbox__shape {
color: $-checkbox-checked-color; color: $-checkbox-checked-color;
background: currentColor; background: currentColor;
border-color: currentColor; border-color: currentColor;
} }
:deep(.wd-checkbox__check) { :deep(.wd-checkbox__check) {
opacity: 1; opacity: 1;
position: absolute; position: absolute;
@ -89,6 +165,7 @@
@include when(last-child) { @include when(last-child) {
margin-right: 0; margin-right: 0;
} }
.wd-checkbox__shape { .wd-checkbox__shape {
width: 0; width: 0;
height: 0; height: 0;
@ -96,6 +173,7 @@
opacity: 0; opacity: 0;
border: none; border: none;
} }
.wd-checkbox__label { .wd-checkbox__label {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
@ -112,6 +190,7 @@
transition: color 0.2s, border 0.2s; transition: color 0.2s, border 0.2s;
box-sizing: border-box; box-sizing: border-box;
} }
@include when(checked) { @include when(checked) {
.wd-checkbox__label { .wd-checkbox__label {
color: $-checkbox-checked-color; color: $-checkbox-checked-color;
@ -137,23 +216,28 @@
border-color: $-checkbox-border-color; border-color: $-checkbox-border-color;
background: $-checkbox-disabled-check-bg; background: $-checkbox-disabled-check-bg;
} }
.wd-checkbox__label { .wd-checkbox__label {
color: $-checkbox-disabled-label-color; color: $-checkbox-disabled-label-color;
} }
@include when(checked) { @include when(checked) {
.wd-checkbox__shape { .wd-checkbox__shape {
color: $-checkbox-disabled-check-color; color: $-checkbox-disabled-check-color;
} }
.wd-checkbox__label { .wd-checkbox__label {
color: $-checkbox-disabled-label-color; color: $-checkbox-disabled-label-color;
} }
} }
@include when(button) { @include when(button) {
.wd-checkbox__label { .wd-checkbox__label {
background: $-checkbox-disabled-color; background: $-checkbox-disabled-color;
border-color: $-checkbox-button-border; border-color: $-checkbox-button-border;
color: $-checkbox-disabled-label-color; color: $-checkbox-disabled-label-color;
} }
@include when(checked) { @include when(checked) {
.wd-checkbox__label { .wd-checkbox__label {
border-color: $-checkbox-button-disabled-border; border-color: $-checkbox-button-disabled-border;
@ -161,6 +245,7 @@
} }
} }
} }
// 以下内容用于解决父子组件样式隔离的问题 —— START // 以下内容用于解决父子组件样式隔离的问题 —— START
@include when(cell-box) { @include when(cell-box) {
padding: 13px 15px; padding: 13px 15px;
@ -170,6 +255,7 @@
padding: 14px 15px; padding: 14px 15px;
} }
} }
@include when(button-box) { @include when(button-box) {
display: inline-flex; display: inline-flex;
width: 33.3333%; width: 33.3333%;
@ -186,18 +272,21 @@
clear: both; clear: both;
} }
} }
@include when(large) { @include when(large) {
.wd-checkbox__shape { .wd-checkbox__shape {
width: $-checkbox-large-size; width: $-checkbox-large-size;
height: $-checkbox-large-size; height: $-checkbox-large-size;
font-size: $-checkbox-large-size; font-size: $-checkbox-large-size;
} }
.wd-checkbox__label { .wd-checkbox__label {
font-size: $-checkbox-large-label-fs; font-size: $-checkbox-large-label-fs;
} }
:deep(.wd-checkbox__check) { :deep(.wd-checkbox__check) {
top: 0; top: 0;
left: 1px; 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}`" :class="`wd-checkbox__shape ${innerShape === 'square' ? 'is-square' : ''} ${customShapeClass}`"
:style="isChecked && !innerDisabled && innerCheckedColor ? 'color :' + innerCheckedColor : ''" :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> </view>
<!--shape为button时只保留wd-checkbox__label--> <!--shape为button时只保留wd-checkbox__label-->
<view <view
@ -32,8 +32,10 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'wd-checkbox',
behaviors: ['uni://form-field'], behaviors: ['uni://form-field'],
options: { options: {
addGlobalClass: true,
virtualHost: true, virtualHost: true,
styleIsolation: 'shared' styleIsolation: 'shared'
} }
@ -50,21 +52,22 @@ interface Props {
customClass?: string customClass?: string
modelValue: string | number | boolean modelValue: string | number | boolean
shape: checkShape shape: checkShape
checkedColor: string checkedColor?: string
disabled: boolean | null disabled: boolean
trueValue: string | number | boolean trueValue: string | number | boolean
falseValue: string | number | boolean falseValue: string | number | boolean
size: string size?: string
maxWidth: string maxWidth?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
customLabelClass: '', customLabelClass: '',
customShapeClass: '', customShapeClass: '',
customClass: '', customClass: '',
shape: 'circle',
trueValue: true, trueValue: true,
falseValue: false, falseValue: false,
disabled: null disabled: false
}) })
const isChecked = ref<boolean>(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/variable';
@import '../common/abstracts/mixin'; @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 b(col-picker) {
@include when(border) { @include when(border) {
@ -60,7 +101,7 @@
&::after { &::after {
position: absolute; position: absolute;
left: 0; left: 0;
top: $-cell-wrapper-padding + 2px; top: calc($-cell-wrapper-padding + 2px);
content: '*'; content: '*';
font-size: $-cell-required-size; font-size: $-cell-required-size;
line-height: 1.1; 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> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'wd-col-picker',
behaviors: ['uni://form-field'], behaviors: ['uni://form-field'],
options: { options: {
addGlobalClass: true,
virtualHost: true, virtualHost: true,
styleIsolation: 'shared' styleIsolation: 'shared'
} }
@ -102,26 +104,26 @@ interface Props {
customValueClass?: string customValueClass?: string
modelValue: Array<Record<string, any>> modelValue: Array<Record<string, any>>
columns: Array<Array<Record<string, any>>> columns: Array<Array<Record<string, any>>>
label: string label?: string
labelWidth: string labelWidth: string
useLabelSlot: boolean useLabelSlot: boolean
useDefaultSlot: boolean useDefaultSlot: boolean
disabled: boolean disabled: boolean
readonly: boolean readonly: boolean
placeholder: string placeholder: string
title: string title?: string
// 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish // 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
columnChange: Function columnChange?: Function
// 外部展示格式化函数 // 外部展示格式化函数
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
displayFormat: Function displayFormat?: Function
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
beforeConfirm: Function beforeConfirm?: Function
alignRight: boolean alignRight: boolean
error: boolean error: boolean
required: boolean required: boolean
size: string size?: string
valueKey: string valueKey: string
labelKey: string labelKey: string
tipKey: string tipKey: string
@ -138,6 +140,7 @@ const props = withDefaults(defineProps<Props>(), {
customViewClass: '', customViewClass: '',
customLabelClass: '', customLabelClass: '',
customValueClass: '', customValueClass: '',
columns: () => [],
useLabelSlot: false, useLabelSlot: false,
useDefaultSlot: false, useDefaultSlot: false,
disabled: false, disabled: false,
@ -214,6 +217,8 @@ watch(
selectShowList.value = pickerColSelected.value.map((item, colIndex) => { selectShowList.value = pickerColSelected.value.map((item, colIndex) => {
return getSelectedItem(item, colIndex, newSelectedList)[props.labelKey] return getSelectedItem(item, colIndex, newSelectedList)[props.labelKey]
}) })
console.log(selectShowList.value, 'watch props.columns')
lastSelectList.value = newSelectedList lastSelectList.value = newSelectedList
if (newSelectedList.length > 0) { if (newSelectedList.length > 0) {
@ -310,7 +315,6 @@ function showPicker() {
function getSelectedItem(value, colIndex, selectList) { function getSelectedItem(value, colIndex, selectList) {
const { valueKey, labelKey } = props const { valueKey, labelKey } = props
if (selectList[colIndex]) { if (selectList[colIndex]) {
const selecteds = selectList[colIndex].filter((item) => { const selecteds = selectList[colIndex].filter((item) => {
return item[valueKey] === value return item[valueKey] === value
@ -337,70 +341,73 @@ function chooseItem(colIndex, index) {
pickerColSelected.value = newPickerColSelected pickerColSelected.value = newPickerColSelected
selectList.value = selectList.value.slice(0, colIndex + 1) selectList.value = selectList.value.slice(0, colIndex + 1)
selectShowList.value = newPickerColSelected.map((item, colIndex) => { 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) handleColChange(colIndex, item, index)
} }
function handleColChange(colIndex, item, index, callback?) { function handleColChange(colIndex, item, index, callback?) {
loading.value = true loading.value = true
const { columnChange, beforeConfirm } = props const { columnChange, beforeConfirm } = props
columnChange({ columnChange &&
selectedItem: item, columnChange({
index: colIndex, selectedItem: item,
rowIndex: index, index: colIndex,
resolve: (nextColumn) => { rowIndex: index,
if (!(nextColumn instanceof Array)) { resolve: (nextColumn) => {
console.error('[wot design] error(wd-col-picker): the data of each column of wd-col-picker should be an array') if (!(nextColumn instanceof Array)) {
return 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) const newSelectList = selectList.value.slice(0)
newSelectList[colIndex + 1] = nextColumn newSelectList[colIndex + 1] = nextColumn
selectList.value = newSelectList 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') {
loading.value = false loading.value = false
isCompleting.value = false currentCol.value = colIndex + 1
return
}
if (getType(isOk) === 'boolean' && !isOk) {
loading.value = false
return
}
if (beforeConfirm) { updateLineAndScroll(true)
beforeConfirm( if (typeof callback === 'function') {
pickerColSelected.value, isCompleting.value = false
pickerColSelected.value.map((item, colIndex) => { selectShowList.value = pickerColSelected.value.map((item, colIndex) => {
return getSelectedItem(item, colIndex, selectList.value) return getSelectedItem(item, colIndex, selectList.value)[props.labelKey]
}), })
(isPass) => { console.log(selectShowList.value, 'handleColChange')
if (isPass) {
onConfirm() callback()
} else { }
loading.value = false },
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 {
} else { onConfirm()
onConfirm() }
} }
} })
})
} }
function onConfirm() { function onConfirm() {
isChange.value = false 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 { @while $i <= 24 {
.wd-col__#{$i} { width: 100% / 24 * $i; } .wd-col__#{$i} {
.wd-col__offset-#{$i} { margin-left: 100% / 24 * $i; } width: calc(100% / 24 * $i);
$i : $i + 1; }
.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 * @Author: weisheng
* @Date: 2023-06-13 11:34:35 * @Date: 2023-06-13 11:34:35
* @LastEditTime: 2023-06-13 12:42:43 * @LastEditTime: 2023-08-15 13:06:34
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-col\wd-col.vue * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-col\wd-col.vue
@ -13,6 +13,16 @@
<slot /> <slot />
</view> </view>
</template> </template>
<script lang="ts">
export default {
name: 'wd-col',
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup> <script lang="ts" setup>
import { inject, provide, watch } from 'vue' import { inject, provide, watch } from 'vue'
@ -63,23 +73,5 @@ provide('setGutter', setGutter) // 将设置子项方法导出
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../common/abstracts/variable'; @import './index.scss';
@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;
}
</style> </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/variable';
@import '../common/abstracts/mixin'; @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 b(collapse-item) {
@include e(header) { @include e(header) {
position: relative; 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 * @Author: weisheng
* @Date: 2023-08-01 11:12:05 * @Date: 2023-08-01 11:12:05
* @LastEditTime: 2023-08-04 13:34:54 * @LastEditTime: 2023-08-15 16:30:17
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-collapse-item\wd-collapse-item.vue * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-collapse-item\wd-collapse-item.vue
@ -20,6 +20,16 @@
</view> </view>
</view> </view>
</template> </template>
<script lang="ts">
export default {
name: 'wd-collapse-item',
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, getCurrentInstance, inject, onMounted, ref, watch } from 'vue' import { computed, getCurrentInstance, inject, onMounted, ref, watch } from 'vue'
@ -30,7 +40,7 @@ const $body = '.wd-collapse-item__body'
interface Props { interface Props {
customClass?: string customClass?: string
title: string title?: string
disabled: boolean disabled: boolean
name: string name: string
// 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise // 打开前的回调函数，返回 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/variable";
@import "../common/abstracts/mixin"; @import "../common/abstracts/mixin";
.wot-theme-dark {
@include b(collapse) {
background: $-dark-background2;
@include e(content) {
color: $-dark-color3;
}
}
}
@include b(collapse) { @include b(collapse) {
background: $-color-white; background: $-color-white;

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