提交 419d1e44 编写于 作者: Q qiang

fix(h5): 修复非调试模式下 chrome 内日期类型 picker 点击不显示的问题

上级 a9f4a81f
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
v-show="visible" v-show="visible"
class="uni-mask uni-picker-mask" class="uni-mask uni-picker-mask"
@click="_cancel" @click="_cancel"
@mousemove="_fixInputPosition"
/> />
</transition> </transition>
<div <div
...@@ -88,6 +89,7 @@ ...@@ -88,6 +89,7 @@
<div <div
v-if="system" v-if="system"
class="uni-picker-system" class="uni-picker-system"
@mousemove="_fixInputPosition"
> >
<input <input
ref="input" ref="input"
...@@ -598,6 +600,15 @@ export default { ...@@ -598,6 +600,15 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this._change() this._change()
}) })
},
_fixInputPosition ($event) {
if (this.system === 'chrome') {
const rect = this.$el.getBoundingClientRect()
const style = this.$refs.input.style
const fontSize = 32
style.left = `${$event.clientX - rect.left - fontSize * 1.5}px`
style.top = `${$event.clientY - rect.top - fontSize * 0.5}px`
}
} }
} }
} }
...@@ -738,6 +749,8 @@ uni-picker[disabled] { ...@@ -738,6 +749,8 @@ uni-picker[disabled] {
border: none; border: none;
height: 100%; height: 100%;
opacity: 0; opacity: 0;
/* Chrome 无效 */
cursor: pointer;
} }
.uni-picker-system > input.firefox { .uni-picker-system > input.firefox {
...@@ -747,12 +760,12 @@ uni-picker[disabled] { ...@@ -747,12 +760,12 @@ uni-picker[disabled] {
} }
.uni-picker-system > input.chrome { .uni-picker-system > input.chrome {
/* 翻转且使用较大字体保证可点击日历按钮 */ /* 日历空白位置宽度 32px */
top: 0; top: 0;
right: 100%; left: 0;
font-size: 9999px; width: 2em;
transform-origin: 100% 0; font-size: 32px;
transform: scaleX(-1); height: 32px;
} }
@media screen and (min-width: 500px) and (min-height: 500px) { @media screen and (min-width: 500px) and (min-height: 500px) {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册