ios - 移动浏览器时间输入在 vue 元素中不起作用
<p><p>我有一个使用多种形式的 laravel webapp。我最近引入了 Vue.js v2 来处理一些运行良好的特定自定义输入类型。</p>
<p>问题是 vue 实例元素内的普通 html5 input 输入在 iOS safari/chrome 中无法正确呈现 - 它们显示为 native 时间选择器，但显示为空白值。当您单击更改时，它们会显示正确的值。</p>
<p>我可以通过使用自定义 vue 组件来解决问题，该组件只是将 value 属性传递到 vue 实例中，但我认为我一定是做错了，因为我在任何地方都找不到提及这一点。</p>
<p> <a href="https://jsfiddle.net/9ay5x07q/5/" rel="noreferrer noopener nofollow">I have managed to reproduce this on JSFiddle</a> <strong>问题仅出现在移动浏览器中</strong></p>
<p><strong>html</strong></p>
<pre><code><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>
</code></pre>
<p><strong>js</strong></p>
<pre><code>Vue.component('vue-time', {
template: '<input type="time" :value="value">',
data() {
return {
value: ''
}
}
});
const vue = new Vue({
el: '#app',
data() {
return {
value: ''
}
}
});
</code></pre></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>我有一个类似的问题，我发现这个帖子对我有帮助，看看它是否对你有帮助:</p>
<p> <a href="https://forum.vuejs.org/t/solved-fixed-position-element-disappears-during-transition-on-mobile-browsers/8960" rel="noreferrer noopener nofollow">https://forum.vuejs.org/t/solved-fixed-position-element-disappears-during-transition-on-mobile-browsers/8960</a> </p>
<p>我会评论你的问题，而不是提出这个作为答案，但我还没有这样做的声誉。</p></p>
<p style="font-size: 20px;">关于ios - 移动浏览器时间输入在 vue 元素中不起作用，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/43921278/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/43921278/
</a>
</p>
页:
[1]