Git Product home page Git Product logo

uview2.0's People

Contributors

alwaysloveme avatar beiqiaot avatar blancokitsune avatar chenliupng avatar earlysummer2018 avatar eternallunadial avatar etxin avatar funnyboycode avatar hobeas avatar huyikai avatar hzbnb avatar iamxiyang avatar jay-qianjue avatar jiangmaniu avatar jinkaiqin avatar lei-mu avatar liao976526980 avatar lx0427 avatar nottwoc avatar orangepro11 avatar silverfox008 avatar six-teen avatar startline-05 avatar thelostword avatar tttao7 avatar wlxuqu avatar xiaokonglongya avatar xzd-inc avatar yatoku avatar zzy-life 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

uview2.0's Issues

APP中,u-popup大概率收縮時會產生閃爍

mode指定top|bottom時,
APP中大概率出現收縮後閃爍一下的情況
比如當mode為top時候,
關閉時候popup會向上收,當收完的時候會自動彈出閃爍一下再隱藏。
H5下沒有這個情況,
測試機型華為mate30p

checkbox修改字体问题

2.0 h5 checkbox 修改css无法修改字体大小,发现页面会自动添加font-size等属性。
难道要一个个checkbox去修改labelsize 和 labelcolor吗?不能通过css统一修改吗?如果要增加important才能修改,那岂不是会增加维护难度?

image

getRect不支持nvue

getRect 底層是通過nodesRef.boundingClientRect的方式進行的,
但是nodesRef.boundingClientRect並不支持nvue,
建議文檔中進行說明,
另外的還有vuex,
明白工作上的強度問題,
希望不支持或不兼容的在文檔中進行說明或把對應文檔頁面先下架,後續兼容或支持後在補充。

Album 单张图片无法显示宽高

image

修改成这样才可以

`imageWidth() {

			return this.urls.length === 1 ? this.$u.addUnit(this.singleWidth) : this.$u.addUnit(this.multipleSize)
		},
		imageHeight() {
			
			return this.urls.length === 1 ? this.$u.addUnit(this.singleHeight) : this.$u.addUnit(this.multipleSize)
		},`

Calendar问题

在H5端中,mode模式为single、multiple时会出现排版错误,一排只有六个,并且当日计算的星期也是错误的,在range模式下正常

Picker组件cancelText及confirmText无法使用的问题

版本:2.X
组件路径:uview-ui/components/u-picker.vue
u-toolbar中没有添加
:cancelText="cancelText" :confirmText="confirmText"
属性,导致设置cancelText和confirmText时无法更改对应文字
image

改为
<u-toolbar v-if="showToolbar" :cancelColor="cancelColor" :confirmColor="confirmColor" :cancelText="cancelText" :confirmText="confirmText" :title="title" @cancel="cancel" @confirm="confirm" ></u-toolbar>
后,可正常设置
image

关于插槽判断的兼容性问题与思考

问题描述

在 uniapp 的 v3.x 的文档中,注明 APP 端不支持 $slots

image

意味着整个UI库的 $slots.xxx 的判断都无法生效,就会导致在 APP 端,使用自定义插槽时,组件内无法判断。

例如在 u-cell 组件中使用自定义插槽 right-icon 时,组件由于拿不到 $slots 的值,无法通过 v-if 判断显示

<view class="u-cell__right-icon-wrap" v-if="$slots['right-icon'] || isLink"

以上只是其中一个例子,整个库中有多个地方都有使用到 $slots.xxx,可能都会有该问题

解决思路

我在自己写组件的时候也有遇到这个问题,我目前想到两种方案

1. 添加 props 属性来注明是否使用自定义插槽

继续上个例子举例,在 props 中添加 customRightIcon 属性,在模板中替换掉 $slots.xxx 的判断

props: {
    customRightIcon: { type: Boolean, default: false } 
}
<view class="u-cell__right-icon-wrap" v-if="customRightIcon || isLink">
...
</view>

该方案的好处在于:已知的兼容性好,全平台都可兼容
该方案的坏处在于:每个需要 v-if 判断的自定义的插槽都需要定义 props,使用者每次都需要写上自定义插槽的同时,添加对应的判断 props 属性,增加使用者的心智负担,并且会使不需要兼容 APP 的开发者也需要添加自定义属性。

针对不需要兼容 APP 的方案

props 定义的判断属性,不在替换代替 $slot.xxx,而是在原有 v-if 的判断条件上添加 props 属性

<view class="u-cell__right-icon-wrap" v-if="$slots['right-icon'] || isLink || customRightIcon ">
...
</view>

需要兼容 APP 的开发者,在写插槽的同时添加上插槽对应的自定义 props 属性,否则直接写上插槽即可

2. 通过 vm.$scopedSlots 判断是否使用

根据上面 v3.x 的介绍可得,v3.x 是兼容 $scopedSlots,并且在 APP 中粗略测试后,发现在不指定 slot-scope 的情况下也能获取到传入的插槽

<!-- 业务 -->
<u-cell>
  <view>这是 default 插槽</view>
  <template #right-icon>
    <view>这是 right-icon 插槽</view>
  </template>
</u-cell>

<!-- u-cell -->
mounted() {
 console.log(this.$scopedSlots)
}

image

由此可在原有 v-if 判断条件基础添加 $scopedSlots.xxxx 条件,即可兼容 APP 端

该方案的问题在于:只是简单的看了一下 $scopedSlots api 拥有传入 slot,没有完整测试跨平台的兼容性。

最后

以上思路的可行性如被通过,我很乐意为此方案提交 PR!如果有更好的实现思路,欢迎留言一起探讨学习。

u-image,u-navbar的一点建议

u-image 在ios手机中的微信小程序企业微信小程序中,因为安卓手机拍摄的照片如果手机发生了翻转,会导致ios中显示不正常,建议做一下兼容;

u-navbar的标题在安卓ios中的居中 居左的兼容希望做一下;

Subsection 分段器 选中分段文字被遮挡

uView版本 :2.0.3
平台:h5
问题: Subsection 分段器active滑块叠放顺序有问题

image

解决方法:当前选中的段文字被遮挡,手动加上任意大于0的z-index可显示,如下图

image
image

u-navbar

navbar第一个示例
navbar

<u-navbar 
          title="剑未配妥,出门已是江湖" 
          left-text="返回" 
          right-text="帮助" 
          @click-left="onClickBack" 
          @click-right="onClickRight"
      ></u-navbar>

click-left,click-right应该是leftClick和rightClick

u-tabs

1.当tabs 定义list数组为空时,再去接口请求数据赋值list数组 下滑快会往左偏移切换tabs后则正常了
2.current 定义为2 ,tabs还是在默认0,动态切换current 也没有变化
3.name属性没有作用

Calendar 日历 日期与星期错位

uview版本:2.0.3
平台:h5
问题:Calendar 日历组件 日期外层有padding导致与星期错位(猜测是不同平台box-sizing 的问题)

image
image

解决方式:删除padding值

image
image

2.0.2版uni.$u.http有问题

uni.$u.http.post() 的 then 和 catch 是不是封装反了啊??
在 async中 await uni.$u.http.post(url,data) 居然没办法往下运行,报错 Unhandled promise rejection

建议加快2.0版本自定义图标功能实现

感觉1.0版本给我一个比较大的方便点就是我可以快速的从iconfont中添加图标进行使用,感谢大佬为我们带来的2.0,如果方便可否先行将自定义图标功能实现,nvue不支持可以后续再想办法嘛,不能因为nvue不支持就放弃这么好的功能。

form表单labelWidth导致小程序页面中label宽度闪烁

QQ图片20211118094611
labelWidth写在u--formu-form-item上,在小程序里会产生一些不一样的效果:
写在前者上面,小程序里的label宽度一开始是窄的,而后变宽,有时候时间很短,但是明显有闪烁。写在后者就没有这种情况。
另外这个单位也不是文档里的rpx,而是px

vview2难让人爱起来

感觉和uview1不是一个级别的东西,文档不全,各种奇怪的问题,用它开发h5和小程序简直是给自己找麻烦,不建议大家迁移过来

u-modal的文档问题

其中文档的Event事件中,确认的事件名为confirm,但是正确的调用方法是confrim,这可能拼错英语单词了
image
image

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.