[Feature Request] Datetime picker 不能适配 lib-flexible

haigang68 commented 7 years ago

Existing Component

是

Component Name

Datetime picker

Description

Datetime picker 不能适配 lib-flexible，picker-slot 中有这个参数：itemHeight，但在mt-datetime-picker却不能向下传这个值，造成才能正常显示，在lib-flexible动态设定viewport的时候就会造成缩小的情况，简单的修改css会造成滑动取值错乱。

bison1994 commented 7 years ago

我也使用了淘宝的 flexible，在使用 picker 组件时也遇到了不兼容的情况，滑动纵列后有一定概率会出现列表项无法选中的情况，导致列表滑动错乱。看了 picker-slot.vue 的源码，发现有这么一个函数：

translate2Value (translate) {
  var itemHeight = this.itemHeight;
  translate = Math.round(translate / itemHeight) * itemHeight;
  var index = -(translate - Math.floor(this.visibleItemCount / 2) * itemHeight) / itemHeight;
  return this.mutatingValues[index];
}

这个函数与计算选中项有关。由于 flexible 设置了 viewport 的缩放系数，导致 px 单位也相应的发生缩放，因此上述方法在进行与 px 相关的计算时，可能导致 index 不是整数，进而导致返回值错误。解决方法是 index = parseInt(index)，加上后就没有出现上述问题了。

楼上的问题可能是：传入了 rem 的值（建议您描述一下传入的什么值），而 picker 只接受 px 单位的值，因此需要自行计算这个值，flexible 会给 html 添加 font-size，因此解决方法是：

// 假设传入的高度为 .8rem
var rem = document.documentElement.style.fontSize;
var itemHeight = parseInt(rem) * .8; // 传这个值

renhao233 commented 7 years ago

@bison1994 我记得 lib-flexible 本身有 px2rem() rem2px() 的函数， lib 又是注册在 window 的，貌似可以直接拿来用。

ghost commented 7 years ago

@bison1994 你觉得把mint-ui一些控件中px写的css(多为padding,height)转为相应的rem会不会有利于适配. 另外请教下如何进行mint-ui组件重写,直接同样的名字就可以覆盖吗?

bison1994 commented 7 years ago

px 转 rem 当然会有利于适配。我采用单独引入组件的方式，并且将 .babelrc 的配置中的 style 设为了 false，因此只会引入 js 不会引入 CSS，CSS 是从官方源码里拷贝过来的，然后直接修改。直接改比覆盖更干净一些。

"plugins": ["transform-runtime", ["component", [
  {
    "libraryName": "mint-ui",
    "style": false
  }
]]]

ghost commented 7 years ago

@bison1994 理解了真心感谢, 待会试试.

CodeDreamfy commented 6 years ago

@bison1994 感谢，我也翻看了源码，看到这块很疑惑，没有看懂，我的问题也是滑动后无法选择的错乱。我传入的itemHeight也是经过vw+rem计算后的，之前一直滑动到一定位置就会出现无法选择的错乱情况，看了下你说的可能是因为不是整数的原因导致，我特意加了parseInt，真的解决了，再次感谢。

Jabbar2010 commented 6 years ago

// 假设传入的高度为 .8rem var rem = document.documentElement.style.fontSize; var itemHeight = parseInt( parseInt(rem) * .8); // 这里再转换一次成整数，否则计算会有问题

此方式可用，赞赞赞！！！！！！！！！！！！

qianyinghuanmie commented 6 years ago

上面的人都说的差不多了……我只想说我也用的是lib-flexible，自己调整下，就可以适配了。

FrankRoc commented 6 years ago

我也出现了同样的问题.在1倍屏幕下和2倍屏幕下显示还算说的过去,但是3倍屏幕字已经挤的不能再挤了,如果只是简单的修改css,滚动又会错乱,真是让人头大

-----我并没有看懂 @bison1994 大神的话,也不知道怎么加...可能我太笨了,但是我通过另一种方法解决了-- 基于bison1994的想法,在源码的created函数中根据flexible这是的字体大小来算出itemHeight.代码如下 ` var rem = document.documentElement.style.fontSize;//获取flexible设置的字体大小

this.itemHeight = (parseInt(rem)/this.itemHeight)*this.itemHeight//修改picker的行高 `

bison1994 commented 6 years ago

这个不能怪 mint-ui，是 flexible 的方案太激进了，直接修改 viewport，相当于直接修改度量衡。不过 flexible 自己也意识到了这个问题，最新版已经不再修改 viewport 啦

liubin915249126 commented 5 years ago

题主问的好像是Datetime picker ，不是picker组件，Datetime picker没发现 itemHeight这个api

ElemeFE / mint-ui