OGeek|极客世界-中国程序员成长平台

标题: ios - 移动浏览器时间输入在 vue 元素中不起作用 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 19:39
标题: ios - 移动浏览器时间输入在 vue 元素中不起作用

我有一个使用多种形式的 laravel webapp。我最近引入了 Vue.js v2 来处理一些运行良好的特定自定义输入类型。

问题是 vue 实例元素内的普通 html5 input[type=time] 输入在 iOS safari/chrome 中无法正确呈现 - 它们显示为 native 时间选择器，但显示为空白值。当您单击更改时，它们会显示正确的值。

我可以通过使用自定义 vue 组件来解决问题，该组件只是将 value 属性传递到 vue 实例中，但我认为我一定是做错了，因为我在任何地方都找不到提及这一点。

I have managed to reproduce this on JSFiddle 问题仅出现在移动浏览器中

html

<div id="app" style="background-color:lightblue; padding:30px">
  <h3>This div is the Vue element</h3>
  <form action="">
    <p>  
      <label for="">Standard Input</label>
      <input type="time" value="23:24:00" />
    </p>
    <p>
      <label for="">Vue Component</label>
      <vue-time value="13:45:00"></vue-time>
    </p>

  </form>
</div>

<div style="background-color:lightyellow; padding:30px">
  <h3>This div is outside the Vue instance</h3>
  <form action="">
    <label for="">Standard Input</label>
    <input type="time" value="23:24:00" />
  </form>
</div>

js

Vue.component('vue-time', {
    template: '<input type="time" :value="value">',
    data() {
        return {
                value: ''
        }
    }
});

const vue = new Vue({
    el: '#app',
    data() {
        return {
            value: ''
        }
    }
});

---

Best Answer-推荐答案

我有一个类似的问题，我发现这个帖子对我有帮助，看看它是否对你有帮助:

https://forum.vuejs.org/t/solved-fixed-position-element-disappears-during-transition-on-mobile-browsers/8960

我会评论你的问题，而不是提出这个作为答案，但我还没有这样做的声誉。

关于ios - 移动浏览器时间输入在 vue 元素中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43921278/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4