Mint UI 之Datetime picker组件mt-datetime-picker展示7行日期,太高,怎么改样式

问题:mint-ui中的时间选择器组件,高度过高,想对其样式进行调整


1.mint-ui中的时间选择器组件,高度过高,有7行日期,见下图:

Mint UI 之Datetime picker组件mt-datetime-picker展示7行日期,太高,怎么改样式_第1张图片

有时会不符合ui要求。想把它改低一点,只显示5行日期。

第一个思路是吧父元素高度变少,研究了一下发现直接操作类名不管用,还会导致正中间一行的位置向下偏移。

于是去官方文档找,希望能找到调整行数的api:

官网参考链接:http://mint-ui.github.io/docs/#/zh-cn2/datetime-pickerMint UI 之Datetime picker组件mt-datetime-picker展示7行日期,太高,怎么改样式_第2张图片

 

然后啥也没找到!

 2.想了想Date Picker是不是可以借鉴picker组件的api,于是找到了方法:

官网参考链接:http://mint-ui.github.io/docs/#/zh-cn2/picker

Mint UI 之Datetime picker组件mt-datetime-picker展示7行日期,太高,怎么改样式_第3张图片

3.于是在Date Picker中使用这个api尝试一下,就成功了~~~

放下代码供参考~

        :visibleItemCount="5"  或者     :visible-item-count="5" ,两种写法都可以成功,用一个就行

 

    

 

你可能感兴趣的:(vue)