moonofweisheng / wot-design-uni Goto Github PK
View Code? Open in Web Editor NEW一个基于Vue3+TS开发的uni-app组件库,提供60+高质量组件,支持暗黑模式、国际化和自定义主题。
Home Page: https://wot-design-uni.gitee.io
License: MIT License
一个基于Vue3+TS开发的uni-app组件库,提供60+高质量组件,支持暗黑模式、国际化和自定义主题。
Home Page: https://wot-design-uni.gitee.io
License: MIT License
0.1.69
h5, APP
无
picker组件[{label: "重量",value: 0},{label: "数量",value: 1]
这样数字0或字符串为0,第一次选择不回显。或从其他选项切到为0的选项也不会回显。需要加类型判断。
picker选择为value的0选项正常回显
picker选择为value的0选项第一次不回显
No response
No response
可以便捷的看到选中值,如果是多选方便取消选中值
每次打开弹窗遍历选项并定位到第一个选中值
0.1.14
h5, APP
暂无
<wd-message-box selector="wd-message-box-slot" use-slot>
<wd-picker-view :columns="state.columns" v-model="state.variable" />
</wd-message-box>
在message中使用pickerview,wd-picker-view-column__item--active这个类的颜色无法显示
如同Picker组件一样正常展示选中项
No response
No response
0.1.41
h5
https://gitee.com/Moonofweisheng/wot-design-uni/blob/master/src/pages/search/Index.vue
设置size没用
可以改变大小
没改变
No response
No response
0.1.18
h5
https://wot-design-uni.cn/component/grid.html https://wot-design-uni.cn/component/cell.html
在可跳转的Cell和Grid组件编译到H5端均可复现,以下为复现代码:
<wd-cell title="帮助与反馈" is-link to="/pages/index/index" />
<wd-grid clickable>
<wd-grid-item link-type="redirectTo" url="/pages/button/index" @itemclick="click" icon="search" text="Redirect to ..." />
<wd-grid-item link-type="navigateTo" url="/pages/button/index" @itemclick="click" icon="setting" text="Navigate to ..." />
</wd-grid>
可跳转的Cell和Grid组件编译到H5端,可以正常跳转
现在跳转报错提示跳转方法不正确
No response
No response
0.1.38
微信小程序
https://wot-design-uni.netlify.app/component/datetime-picker.html
选择器绑定change事件 @change="termMobileChange"
//wd-datetime-picker组件
<wd-datetime-picker
v-model="planStateTime"
:default-value="defaultValue"
:minDate="minDate"
:maxDate="maxDate"
label="预约时间:"
@confirm="planStateTimeConfirm"
@OPEN="openPicker"
/>
let planStateTime = ref(Date.now())//绑定时间
let defaultValue = ref(Date.now())//默认时间
changeDevice(){//切换设备
通过设备号调用设备信息查询接口()
getDviceInfo()
}
getDviceInfo(){
。。。。。获取设备信息 提取时间 时间为零时区时间
planStateTime.value = new Date(res.result.planStateTime).getTime() + 8 * 60 * 60
isShowPicker.value = false
}
组件展示值跟随更改最新值动态展示
实际是自己获取一个新值 当前时间,并且不会跟随时间动态修改。
No response
No response
^0.1.68
h5
无
H5端 无法滑动
小程序没问题
可上下滑动页面
无法滑动
No response
No response
建议把文档放在gitee上,netlify基本打不开
0.1.27
h5, 微信小程序
https://wot-design-uni.netlify.app/component/tabs.html
动态切换组件绑定值 修改选中项
选中项无变化
No response
No response
0.1.21
APP
https://wot-design-uni.cn/component/tabs.html
下滑视图时tab吸顶
可以实现吸顶但是会报错
[JS Framework] Failed to execute the callback function:
TypeError: Cannot read property 'height' of null
17:07:51.243 reportJSException >>>> exception function:WEEX_CALL_JAVASCRIPT, exception:JavaScript execute error!Uncaught TypeError: Cannot read property 'height' of null
at (app-service.js:12796:38)
App
android9
No response
0.1.69
APP
无
iphone 8上picker唤起后是只有一个选项,选项值为传入的columns。安卓可正常解析并渲染成多个选项。
picker正常渲染
唤起picker只有一个columns数组的选项
No response
No response
0.1.21
APP
xx
滚动视图,tab吸顶
可以实现吸顶但是报错
[JS Framework] Failed to execute the callback function:
TypeError: Cannot read property 'height' of null
16:59:36.343 reportJSException >>>> exception function:WEEX_CALL_JAVASCRIPT, exception:JavaScript execute error!Uncaught TypeError: Cannot read property 'height' of null
at (app-service.js:12796:38)
App
Android9
No response
wd-loadmore遇到深色背景色时无法调整字颜色
类似于驾考宝典,可以左右滑动来切换题目
类似于驾考宝典,可以左右滑动来切换题目
在不同环境时选项标签可能会有不同的内容需求
变更组件的选项数组值,组件自动渲染最新数据
0.1.51
h5, 微信小程序, APP
无
无
暗色模式下徽标的边框也是暗色系的
暗色模式下徽标的边框是白色的
No response
No response
选中tag时,希望type采用success样式,取消选中时,希望type回复默认的样式,但目前没有提供 default 合法值,导致切换并不成功
<wd-tag :type="selected ? 'success' : 'default'" @click="selected = !selected">
tag
</wd-tag>
0.1.7
h5, 微信小程序
https://wot-design-uni.netlify.app/component/select-picker.html
组件设置type为radio并且开启搜索 搜索关键词时会报错
正常搜索
报错
No response
No response
分段器
返回顶部
横向滚动列表
页面加载动画
按钮自定义颜色及形状
select下拉选择
参考uview及element ui已有功能
能够解决轮播图首页加载不畅的问题。
<wd-swiper :fade="true"></wd-swiper>
or
<wd-swiper :loading="true"></wd-swiper>
等你养好病,能不能开发个类似uview的富文本解析器啊,大哥😊
0.1.19
APP
xxx
不需要传入rowCol对象
xxx
No response
No response
希望选中的tab字体font-weight:bold,未选中的tab字体font-weight: normal且颜色为灰色
字体样式
想使用rpx的单位,该库好像默认使用的是px,rpx可以适配不同屏幕的手机让组件自适应屏幕,可以增加一个配置入口吗
类似于uview的 uni.$u.config.unit = 'rpx'
0.1.20
APP
https://wot-design-uni.cn/component/tabs.html
<template>
<view class="tab">
<wd-tabs v-model="tab" swipeable animated sticky>
<block v-for="(item,index) in tabList" :key="index">
<wd-tab :title="`${item.title}`" :name="item.title">
<view v-if="index === 0">
<view class="sharing-container" v-for="(item,index) in recommendList" :key="index">
<view class="sharing-box">
<view class="avatar-box">
<image class="user-avatar" mode="scaleToFill" :src="item.avatar" />
<text class="tj-nickname">{{item.nickName}}</text>
</view>
<view class="title-box">
<text class="title1">{{item.documentTitle}}</text>
</view>
<view class="desc-box">
<view>
<text class="desc">{{item.desc}}</text>
</view>
<view v-show="item.descImage != '' " class="desc-image">
<image class="image" mode="widthFix" :src="item.descImage" />
</view>
</view>
<view class="like-box">
<view class="like-icon">
<uni-icons type="hand-up" size="20"></uni-icons>
</view>
<view class="like-number">
<text>{{item.likeNumber}}</text>
</view>
</view>
<view class="kb"></view>
</view>
</view>
</view>
<view v-else>
<view>
<view class="sharing-container" v-for="(item,index) in followList" :key="index">
<view class="sharing-box">
<view class="avatar-box">
<image class="user-avatar" mode="scaleToFill" :src="item.avatar" />
<text class="tj-nickname">{{item.nickName}}</text>
</view>
<view class="title-box">
<text class="title1">{{item.documentTitle}}</text>
</view>
<view class="desc-box">
<view>
<text class="desc">{{item.desc}}</text>
</view>
<view v-show="item.descImage != '' " class="desc-image">
<image class="image" mode="widthFix" :src="item.descImage" />
</view>
</view>
<view class="like-box">
<view class="like-icon">
<uni-icons type="hand-up" size="20"></uni-icons>
</view>
<view class="like-number">
<text>{{item.likeNumber}}</text>
</view>
</view>
<view class="kb"></view>
</view>
</view>
</view>
</view>
</wd-tab>
</block>
</wd-tabs>
</view>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const tab = ref<number>(0);
const tabList = ref([{
id: 1,
title: "推荐",
},
{
id: 2,
title: "关注",
},]);
const recommendList = ref([
{
id: "272203820doaoc8302",
avatar: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
nickName: "研学app",
documentTitle: "如何提高工作效率",
desc: "一个不会设计和写作的程序员不会是好的产品经理,做正确的事,用心做显而易见的会提高工作效率",
descImage: "https://img1.baidu.com/it/u=1699929707,733321099&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
likeNumber: 26
}
]);
const followList = ref([
{
id: "dahodo320380r7927",
avatar: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
nickName: "研学app",
documentTitle: "如何提高工作效率",
desc: "一个不会设计和写作的程序员不会是好的产品经理,做正确的事,用心做显而易见的会提高工作效率,用正式施恩噶九年是v黄金时间段就是手机待机时间十九点黄山警方四年...",
descImage: "https://img1.baidu.com/it/u=1699929707,733321099&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
likeNumber: 26
}
]);
</script>
<style>
.user-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
}
.sharing-container {
display: flex;
justify-content: center;
}
.sharing-box {
width: 90%;
opacity: 1;
margin-top: 15px;
border-radius: 13px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(229, 229, 229, 1);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.avatar-box {
display: flex;
margin-top: 15px;
margin-left: 15px;
}
.tj-nickname {
display: flex;
align-items: center;
margin-left: 8px;
}
.title-box {
margin-left: 15px;
margin-top: 10px;
}
.title1 {
font-size: 15px;
font-weight: 550;
color: rgba(0, 0, 0, 1);
}
.desc-box {
display: flex;
margin-top: 10px;
margin-left: 15px;
}
.desc {
font-size: 13px;
color: rgba(128, 128, 128, 1);
letter-spacing: 1px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-right: 10px;
}
.desc-image {
margin-left: auto;
display: flex;
margin-right: 10px;
height: 65px;
opacity: 1;
}
.image {
width: 100px;
border-radius: 10px;
}
.kb {
height: 10px;
}
.like-box {
display: flex;
margin-top: 10px;
margin-left: 15px;
}
.like-icon {
display: flex;
justify-content: center;
align-items: center;
}
.like-number {
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
}
</style>
下滑视图tab栏吸顶
能实现吸顶,但是会报错
[JS Framework] Failed to execute the callback function:
TypeError: Cannot read property 'height' of null
17:07:51.243 reportJSException >>>> exception function:__WEEX_CALL_JAVASCRIPT__, exception:JavaScript execute error!Uncaught TypeError: Cannot read property 'height' of null
at (app-service.js:12796:38)
App
Android9
No response
0.1.23
h5
https://wot-design-uni.netlify.app/component/sticky.html
吸顶组件可以再滚动条超过顶部位置时吸附在最顶部 不超过时随页面滚动
有概率一直吸在顶部无法随滚动恢复
No response
No response
有小部分求情况需要用到年选择 或者年范围 不需要 月和日
type='year' 和你之前代码风格一样就行
0.1.19
h5, 微信小程序
无
按照文档操作
显示正确
<wd-tag round>标签</wd-tag>
目前发现圆角标签样式不太对, 内部的文字不居中, 应该是.wd-tag.is-round
这个样式的line-height: 1.2;
导致的<wd-tag round closable>标签</wd-tag>
可关闭标签的关闭按钮位置也不对<wd-tag round dynamic @confirm="handleConfirm"></wd-tag>
新增标签的宽度被限制死为88px
, 导致文字换行No response
No response
0.1.36
h5
https://gitee.com/Moonofweisheng/wot-design-uni/blob/master/src/pages/search/Index.vue
希望不卡顿
卡顿
No response
No response
^0.1.68
h5
无
<wd-notify />
import { useMessage, useNotify } from "wot-design-uni";
showNotify({ type: "success", message: "success" });
notify显示在页面
无显示
无
这样通过一个配置文件就可以配置各组件的默认值,免去在每个页面中多写一些参数
大概像这样, 就是通过组件库向外抛出一个接口,可以直接覆盖组件内置的props默认值
// main.js
import config from 'config.js'
const { setConfig } = useConfig()
setConfig(config)
有上下滚动需求的
0.1.19
微信小程序
https://github.com/Moonofweisheng/wot-design-uni/
修复bug
hide-min-max属性未生效,最大值与默认值相同时,滑块不在最右侧
No response
No response
使用自定义导航栏可以让页面更加酷炫,脱离原生导航栏的限制!
<Navbar fixed> 顶部导航栏 </Navbar>
<Tabbar
v-model="currentTabbar"
fixed
>
<TabbarItem
v-for="(item, index) in tabbarData"
:key="index"
:icon="item.icon"
:active-icon="item.activeIcon"
:text="item.name"
/>
</Tabbar>
可以实现分开 看起来不难受 更好区分 上一个 和 下一个
让开发者可以 自由选择就行
大家好,
为了提供更好的开发体验和技术支持,我们希望各路大佬们能一起贡献优秀的 Demo 与案例,让 Wot Design Uni 更加优雅,更加好用。
对于各位大佬们的提交,我们会保持跟进与回复,采纳后的项目将在 README 的重要位置展示,感谢你的支持!
用作不同视图的切换显示
和fantUI的一样
<hd-section :list="list"></hd-section>
0.015
微信小程序
https://wot-design-uni.netlify.app/guide/changelog.html
自定义设置最大值最小值可以实现
不起作用
No response
No response
自定义上传
调用自己的上传方法
0.1.20
APP
xx
tab使用粘性布局不报 [JS Framework] Failed to execute the callback function:
TypeError: Cannot read property 'height' of null
16:32:11.861 reportJSException >>>> exception function:WEEX_CALL_JAVASCRIPT, exception:JavaScript execute error!Uncaught TypeError: Cannot read property 'height' of null
at (app-service.js:13632:38)
xx
No response
No response
根据表单rule,支持表单change,blur,submit时候校验必填属性,并暴露出api,支持自定义组件必填属性校验
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.