Giter Club home page Giter Club logo

uview2.0's Issues

checkbox修改字体问题

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

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!如果有更好的实现思路,欢迎留言一起探讨学习。

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

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

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属性没有作用

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模式下正常

u-modal的文档问题

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

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

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

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

vview2难让人爱起来

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

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

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

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

getRect不支持nvue

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

Calendar 日历 日期与星期错位

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

image
image

解决方式:删除padding值

image
image

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

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

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

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

image

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

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

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.