mint-ui Datetime picker 三星s8 不显示的问题

最新推荐文章于 2022-03-29 16:18:12 发布
原创 最新推荐文章于 2022-03-29 16:18:12 发布 · 882 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#mint-ui #web #vue

本文解决了一个特定于Mint-UI的日期时间选择器组件在三星S8设备上无法正常显示的问题。通过调整CSS样式，确保了组件能够正确继承父容器的宽度，从而在三星S8上正常显示。

mint-ui Datetime picker 三星s8 不显示的问题

原因：没能继承父容器宽度

解决方案：在标签加上 .picker-items{width:100%} 即可

mint-ui的日期组件DatetimePicker兼容问题，安卓手机显示空白
qq_26780317的博客
09-15 856
背景：在使用mint-ui的日期组件DatetimePicker时，发现在一些安卓手机不兼容，日期组件打开显示为空白，只有确定和取消按钮。问题图片如下所示： 解决方法： 通过在谷歌游览器调试工具中，发现在这些手机中，picker-items这个样式类，没有继承父元素的宽度，修复方法时手动添加样式。 <style> .picker-items{ width:100%; } </style> ...
minu-ui 的 mt-datetime-picker 组件在部分安卓机型上不显示日期只有取消和确认按钮
weixin_43088792的博客
07-08 446
解决办法：换成vant 的事件日期筛选器即可，亲测有效，图片是问题描述
mint-ui的日期选择框DatetimePicker，android手机显示空白问题
Umbrella_Um的博客
09-09 1037
有华为或小米手机出现日期选择框，日期显示空白，确定和取消还在的问题，这些个兼容问题真的是很难查，但是好在网友给力，搜到了解决办法，分享给大家~~ 其实很简单，修改一个属性就行 .picker-items{ width:100% } 原文地址：https://blog.youkuaiyun.com/qq_34664239/article/details/93870689 ...
mt-datetime-picker只显示了标题栏，时间选项是空白的
youyudexiaowangzi的专栏
03-29 2007
提前说解决方案：在项目引用的公有css文件中添加属性 .picker-items{ width: 100% !important; } 开发框架：vue + mint ui 本地调试环境中使用<mt-datetime-picker></mt-datetime-picker>能显示标题栏的确定和取消，标题栏下面是可滚动选择的日期 上线后iPhone手机，部分安卓手机也显示正常没有问题 部分用户反馈选择时间的地方是空白的，局部截图如下 用户反馈的问题没法联机调试，于是
Vue导入Mint-UI样式不显示问题
GreyCastle的博客
03-14 1633
前言： Vue通过npm或者cnpm下载Mint-UI导入后样式不显示问题。如果包没问题的话，那就是自己少导入了一个css样式。 截图： 效果： 结尾： 好好写代码，天天向上！！ ...
使用mint-ui后，某些手机打开页面空白
angelia_w的博客
08-28 2008
近期做的项目中，用的是mint-ui里面的组件，在模拟器上一切都很好，但是后期测试测的时候发现ios8和小米某些系列打开后页面是空白的，首先考虑的肯定是兼容性问题，因为其他手机上显示的是正常的。没有用flex布局，没有使用jquery，最后锁定第三方组件原因。把引用的mint-ui的swipe部分注释后，果然手机都可以正常显示了。出现这一问题怎么解决呢？ 第一种方法：把node_modules文...
mint-ui 时间选择器Datetime Picker的用法，默认不是当前时间，有一节空白。
热门推荐
qq_35430000的博客
08-29 2万+
使用了mint-ui,里面的文档实在太简略了，有许多方法和配置都没有具体配置，要自己去摸索，实在是揪心。今天使用mint-ui的时间选择器时默认有一节留白，看着不是很舒服，而且默认的时间也是系统设置的开始时间。（类似下图） 解决方法是   把picker 的时间默认为当前时间（或者看需求定义成需求时间） 设置了 new Date()之后就正常了，默认当前时间居中显示，如果觉得年份太多，...
mt-datetime-picker 的使用
qq719756146的博客
11-28 4875
template: &amp;lt;span @click=&quot;dateClick1()&quot; v-if=&quot;!isDateClick1&quot;&amp;gt;{{ date1}}&amp;lt;/span&amp;gt; &amp;lt;span @click=&quot;dateClick1()&quot; v-if=&quot;isDateClick1&quot;&am
datetimepicker在dialog中选择日期不显示的问题解决办法
云枫的专栏
12-21 7159
这个问题整了一天，datetimepicker在底层页面上，选择完日期后，input中就会显示选择的日期，但是在jquery的dialog中，无论如何都不显示，input中已经有值了，用js是能够输出出来的，最后找了半天原因，最后发现input的font-size不知道什么时候设置成0了，font-size=0自然无法显示，所以解决的办法就是在input的style中设置font-size。
关于datetimepicker不能显示问题
blondie52
11-27 1238
加上这句,日期和时间都可以显示了
datetimepicker不能显示
aiyongay的博客
05-24 1079
struts2.1.6 在以前的struts2版本中s:datetimepicker只需要在head标签处设置 ， 就可以直接使用s:datetimepicker的标签了。 而在2.1.6版本中不能直接这样使用了，将datetimepicker移除了。 原因是此标签调用了dojo的datetimepicker的库。 所以现在使用的时候首先要导入一个库。 stru...
【Vue2.0】 mint-ui解决ios端mt-datetime-picker穿透滚动问题
最新发布
12-02
在Vue2.0使用mint-ui时，解决ios端mt-datetime-picker穿透滚动问题有以下几种解决方案： ### 方案一：在组件上添加事件阻止修饰符 在`<mt-datetime-picker>`组件上添加`@touchmove.native.stop.prevent`，可以阻止触摸移动事件的默认行为和冒泡，示例代码如下： ```vue <mt-datetime-picker ref="picker" type="time" v-model="pickerValue" @touchmove.native.stop.prevent> </mt-datetime-picker> ``` 这种方式是通过阻止触摸移动事件的默认行为和冒泡，来防止滚动穿透到下层页面 [^3]。 ### 方案二：在Vue方法中控制默认事件 可以在触发打开选择器和关闭选择器的方法中，分别关闭和打开默认事件。示例代码如下： ```vue <template> <!-- 其他代码 --> <mt-datetime-picker ref="picker1" type="time" v-model="pickerValue" :confirm="setTime"> </mt-datetime-picker> <!-- 其他代码 --> </template> <script> export default { data() { return { pickerValue: null }; }, methods: { openPicker1(index) { // 打开时间选择器 this.$refs.picker1.open(); // 关闭默认事件 this.closeTouch(); }, setTime(value) { // 时间赋值 this.pickerValue = value; // 打开默认事件 this.openTouch(); }, closeTouch() { // 这里可以实现关闭默认事件的逻辑，例如禁止页面滚动 document.body.style.overflow = 'hidden'; }, openTouch() { // 这里可以实现打开默认事件的逻辑，例如允许页面滚动 document.body.style.overflow = 'auto'; } } }; </script> ``` 在打开选择器时调用`closeTouch`方法禁止页面滚动，在关闭选择器时调用`openTouch`方法允许页面滚动 [^4]。 ### 参考文章 可以参考相关博客文章获取更多信息： - [【Vue2.0】mint-ui解决IOS端picker和datetime picker穿透滚动问题](https://blog.youkuaiyun.com/amyleeYMY/article/details/82588477) [^1] - [【Vue2.0】mint-ui解决datetime-picker穿透滚动问题](https://blog.youkuaiyun.com/u012374026/article/details/83822231) [^2]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值