Coder Social home page Coder Social logo

moonofweisheng / wot-design-uni Goto Github PK

View Code? Open in Web Editor NEW
396.0 5.0 59.0 5.7 MB

一个基于Vue3+TS开发的uni-app组件库,提供60+高质量组件,支持暗黑模式、国际化和自定义主题。

Home Page: https://wot-design-uni.gitee.io

License: MIT License

JavaScript 0.82% Shell 0.01% HTML 0.06% Vue 52.77% TypeScript 27.99% SCSS 18.35%
uni-app vue3 wot-design wot-design-uni components vue3-components dark-mode mini-program miniprogram

wot-design-uni's Introduction

About me

我的 GitHub stats

我的技能树

wot-design-uni's People

Contributors

beginnerdone avatar chenxiaqu avatar daofeng-1998 avatar dzye avatar g-spurs avatar gjssss avatar jamarion126 avatar jasper-ops avatar jiajtgit avatar landejin avatar moonofweisheng avatar pdiee avatar rjqinghuan avatar uphkcrnqmafqwcssssss avatar vanisper avatar wangruistart avatar xiao-shenghui avatar yils-lin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

wot-design-uni's Issues

[Bug 上报] picker组件中value为0不显示

Wot Design Uni 版本号

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

[Bug 上报] PickerView 的 wd-picker-view-column__item--active 在H5下失效,未展示出选中色

Wot Design Uni 版本号

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组件一样正常展示选中项

实际的结果是什么?

截屏2023-09-19 16 38 57

环境信息

No response

其他补充信息

No response

[Bug 上报] Grid组件和Cell组件在可跳转的情况下编译到H5跳转方法失效

Wot Design Uni 版本号

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

日期选择器组件显示事件无法跟随新值动态展示

Wot Design Uni 版本号

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

[Bug 上报] 请在此填写标题

Wot Design Uni 版本号

0.1.27

平台

h5, 微信小程序

重现链接

https://wot-design-uni.netlify.app/component/tabs.html

重现步骤

当前选中值{{cur}} 选中选项1 选中选项2 选中选项3 <script setup> import {onLoad,onShow, onReady} from "@dcloudio/uni-app"; import {ref,reactive,getCurrentInstance} from 'vue'; const {proxy} = getCurrentInstance(),cur=ref(0),arr=ref(['选项1','选项2','选项3']); </script> <style> </style>

期望的结果是什么?

动态切换组件绑定值 修改选中项

实际的结果是什么?

选中项无变化

环境信息

No response

其他补充信息

No response

tabs使用sticky报错

Wot Design Uni 版本号

0.1.21

平台

APP

重现链接

https://wot-design-uni.cn/component/tabs.html

重现步骤

{{item.nickName}} {{item.documentTitle}} {{item.desc}}

{{item.likeNumber}}

{{item.nickName}} {{item.documentTitle}} {{item.desc}}

{{item.likeNumber}} <script lang="ts" setup> import { ref } from "vue"; const tab = ref(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: "一个不", 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> .container{ height: 150px;width: 100vw; } .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; } .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

✍️贡献指南

本文讲述如何参与到wot-design-uni的开发工作

修改代码请阅读我们的 贡献指南

使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR

欢迎你的加入!

[Bug 上报] picker组件在ios上渲染有误

Wot Design Uni 版本号

0.1.69

平台

APP

重现链接

重现步骤

iphone 8上picker唤起后是只有一个选项,选项值为传入的columns。安卓可正常解析并渲染成多个选项。

期望的结果是什么?

picker正常渲染

实际的结果是什么?

唤起picker只有一个columns数组的选项

环境信息

No response

其他补充信息

No response

vue3 wd-tabs使用粘性布局报错

Wot Design Uni 版本号

0.1.21

平台

APP

重现链接

xx

重现步骤

{{item.nickName}} {{item.documentTitle}} {{item.desc}}

{{item.likeNumber}}

{{item.nickName}} {{item.documentTitle}} {{item.desc}}

{{item.likeNumber}} <script lang="ts" setup> import { ref } from "vue"; import Empty from "@/components/empty/empty.vue"; const db = uniCloud.database(); const tab = ref(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 }, { id: "271201ceod23u20u00e", avatar: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg", nickName: "研学app", documentTitle: "如何提高工作效率", desc: "一个不会设计和写作的程序员不会是好的产品经理", descImage: "", likeNumber: 26 }, { id: "18029038r2802su302", 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 } ]); 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> .container{ height: 150px;width: 100vw; } .user-avatar { width: 30px; height: 30px; border-radius: 50%; } .tab { margin-top: 15px; } .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
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

徽标边框在暗色模式下是白色的,有点不和谐

Wot Design Uni 版本号

0.1.51

平台

h5, 微信小程序, APP

重现链接

重现步骤

期望的结果是什么?

暗色模式下徽标的边框也是暗色系的

实际的结果是什么?

暗色模式下徽标的边框是白色的

环境信息

No response

其他补充信息

No response

tag组件的type属性增加default值

这个功能解决了什么问题?

选中tag时,希望type采用success样式,取消选中时,希望type回复默认的样式,但目前没有提供 default 合法值,导致切换并不成功

你期望的 API 是什么样子的?

<wd-tag  :type="selected ? 'success' : 'default'" @click="selected = !selected">
    tag
</wd-tag>

[Bug 上报] wd-picker组件用于选择出生年份,在Android上回显不成功,小程序上回显正常

Wot Design Uni 版本号

0.1.66

平台

APP

重现链接

暂时没有

重现步骤

1、选中日期,显示成功
2、退出该界面,重新界面此界面,没有回显之前选中的值
(小程序上是正常的)

期望的结果是什么?

能够正常回显
image

实际的结果是什么?

不能正常回显
Screenshot_20231226_182828

环境信息

发行平台:Android
uniapp: 3.0.0-3081220230817001
操作系统:鸿蒙4.0

其他补充信息

No response

Skeleton 骨架屏

Wot Design Uni 版本号

0.1.19

平台

APP

重现链接

xxx

重现步骤

如果没有传入rowCol对象会报 TypeError: Object.hasOwn is not a function

期望的结果是什么?

不需要传入rowCol对象

实际的结果是什么?

xxx

环境信息

No response

其他补充信息

No response

[Bug 上报] 在windows中开发会出现换行符报错

Wot Design Uni 版本号

0.1.32

平台

h5, 微信小程序

重现链接

重现步骤

image
在windows中会出现eslint与prettier对换行符报错

可能需要更改一下eslint与prettier配置
image
image

期望的结果是什么?

实际的结果是什么?

环境信息

No response

其他补充信息

No response

tab切换字体大小颜色变化

这个功能解决了什么问题?

希望选中的tab字体font-weight:bold,未选中的tab字体font-weight: normal且颜色为灰色

你期望的 API 是什么样子的?

字体样式

增加单位可配置功能

这个功能解决了什么问题?

想使用rpx的单位,该库好像默认使用的是px,rpx可以适配不同屏幕的手机让组件自适应屏幕,可以增加一个配置入口吗

你期望的 API 是什么样子的?

类似于uview的 uni.$u.config.unit = 'rpx'

tabs使用粘性布局报错

Wot Design Uni 版本号

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

Sticky 粘性布局组件在H5中吸顶后有概率一直吸在顶部无法随滚动恢复

Wot Design Uni 版本号

0.1.23

平台

h5

重现链接

https://wot-design-uni.netlify.app/component/sticky.html

重现步骤

上述代码为复现代码 吸顶组件嵌套分段器组件 在下滑列表页时 吸顶组件有概率一直吸在顶部无法随滚动恢复,只有再次滑倒吸顶位置才能恢复

期望的结果是什么?

吸顶组件可以再滚动条超过顶部位置时吸附在最顶部 不超过时随页面滚动

实际的结果是什么?

有概率一直吸在顶部无法随滚动恢复

环境信息

No response

其他补充信息

No response

下拉选择框

这个功能解决了什么问题?

MOEB~(_~K{K6CU6NP2FXICW

类似于这样

你期望的 API 是什么样子的?

如上图

日期选择希望新增年选择

这个功能解决了什么问题?

有小部分求情况需要用到年选择 或者年范围 不需要 月和日

你期望的 API 是什么样子的?

type='year' 和你之前代码风格一样就行

Tag标签组件样式问题

Wot Design Uni 版本号

0.1.19

平台

h5, 微信小程序

重现链接

重现步骤

按照文档操作

期望的结果是什么?

显示正确

实际的结果是什么?

  1. <wd-tag round>标签</wd-tag> 目前发现圆角标签样式不太对, 内部的文字不居中, 应该是.wd-tag.is-round这个样式的line-height: 1.2;导致的
  2. <wd-tag round closable>标签</wd-tag>可关闭标签的关闭按钮位置也不对
  3. <wd-tag round dynamic @confirm="handleConfirm"></wd-tag>新增标签的宽度被限制死为88px, 导致文字换行

环境信息

No response

其他补充信息

No response

notify 无效

Wot Design Uni 版本号

^0.1.68

平台

h5

重现链接

重现步骤

  1. 引入 notify 组件在 template
<wd-notify />
  1. 导入hooks
import { useMessage, useNotify } from "wot-design-uni";
  1. 使用hooks
showNotify({ type: "success", message: "success" });

期望的结果是什么?

notify显示在页面

实际的结果是什么?

无显示

环境信息

  • H5平台
  • Google Chrome 120.0.6099.71
  • vue cli
  • uniapp版本 3.0.0-3081220230817001

其他补充信息

希望可以自定义每个组件的props默认值

这个功能解决了什么问题?

这样通过一个配置文件就可以配置各组件的默认值,免去在每个页面中多写一些参数

你期望的 API 是什么样子的?

大概像这样, 就是通过组件库向外抛出一个接口,可以直接覆盖组件内置的props默认值

// main.js
import config from 'config.js'
const { setConfig } = useConfig()
setConfig(config)

[Bug 上报] picker赋值问题

Wot Design Uni 版本号

0.1.65

平台

h5

重现链接

重现步骤

picker赋值问题

期望的结果是什么?

解决

实际的结果是什么?

解决

环境信息

No response

其他补充信息

No response

[Bug 上报] wd-slider组件hide-min-max属性未生效,最大值与默认值相同时,滑块不在最右侧

Wot Design Uni 版本号

0.1.19

平台

微信小程序

重现链接

https://github.com/Moonofweisheng/wot-design-uni/

重现步骤

b439d86bd45d96ff5b266a5f9e29352 1143e9d8e24793694669688aaa2f1a5 0bc58fb21d80b6c7b7b364cc32a4e59 hide-min-max属性未生效,最大值与默认值相同时,滑块不在最右侧

期望的结果是什么?

修复bug

实际的结果是什么?

hide-min-max属性未生效,最大值与默认值相同时,滑块不在最右侧

环境信息

No response

其他补充信息

No response

[新功能需求] 希望增加"顶部导航栏"和"底部导航栏"

这个功能解决了什么问题?

使用自定义导航栏可以让页面更加酷炫,脱离原生导航栏的限制!

你期望的 API 是什么样子的?

  <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>

Collapse 折叠面板 需要添加隔离线

这个功能解决了什么问题?

可以实现分开 看起来不难受 更好区分 上一个 和 下一个

你期望的 API 是什么样子的?

让开发者可以 自由选择就行

📳优秀案例征集

大家好,

为了提供更好的开发体验和技术支持,我们希望各路大佬们能一起贡献优秀的 Demo 与案例,让 Wot Design Uni 更加优雅,更加好用。

对于各位大佬们的提交,我们会保持跟进与回复,采纳后的项目将在 README 的重要位置展示,感谢你的支持!

Section 分段器

这个功能解决了什么问题?

用作不同视图的切换显示

你期望的 API 是什么样子的?

和fantUI的一样
<hd-section :list="list"></hd-section>

[Bug 上报] input中设置readonly不显示placeholder和suffix-icon

Wot Design Uni 版本号

0.1.69

平台

h5, APP

重现链接

重现步骤

image

图中红框是设置readonly和没设置readonly的对比,disabled没问题,readonly就会这样

期望的结果是什么?

设置readonly显示placeholder和suffix-icon

实际的结果是什么?

input中设置readonly不显示placeholder和suffix-icon

环境信息

No response

其他补充信息

No response

Tab 标签页使用sticky粘性布局报错

Wot Design Uni 版本号

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

Tabs 的v-model 不生效啊

Wot Design Uni 版本号

0.1.33

平台

h5

重现链接

http://localhost:5173

重现步骤

这Tabs 的v-model 怎么绑定都是显示的是下标啊,而且下标还不太对
image
image
而且我传标签名的话,直接报错
image

期望的结果是什么?

v-model的值是tab的name 来决定的

实际的结果是什么?

v-model的值是tab的name 来决定的

环境信息

No response

其他补充信息

No response

希望能增加form表单 以及form表单校验

这个功能解决了什么问题?

根据表单rule,支持表单change,blur,submit时候校验必填属性,并暴露出api,支持自定义组件必填属性校验

你期望的 API 是什么样子的?

删除

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.