diff --git a/src/platforms/h5/components/app/popup/actionSheet.vue b/src/platforms/h5/components/app/popup/actionSheet.vue index e958639698080590c02aea6f1bf0ef38752d97ce..83677ddffea60f8afded16558b53634b83050161 100644 --- a/src/platforms/h5/components/app/popup/actionSheet.vue +++ b/src/platforms/h5/components/app/popup/actionSheet.vue @@ -40,9 +40,9 @@
- @@ -154,7 +154,7 @@ uni-actionsheet .uni-actionsheet__cell:first-child:before { display: none; } -@media screen and (min-width: 500px) { +@media screen and (min-width: 500px) and (min-height: 500px) { .uni-mask.uni-actionsheet__mask { background: none; } diff --git a/src/platforms/h5/components/app/popup/mixins/popup.js b/src/platforms/h5/components/app/popup/mixins/popup.js index 47eeaf2431a72e69e2c4c223acd1f4df6f1b7671..a502935bfe9fa6ccc95843ebda38a7067349a142 100644 --- a/src/platforms/h5/components/app/popup/mixins/popup.js +++ b/src/platforms/h5/components/app/popup/mixins/popup.js @@ -6,6 +6,9 @@ export default { } }, computed: { + isDesktop () { + return this.popupWidth >= 500 && this.popupHeight >= 500 + }, popupStyle () { const style = {} const contentStyle = style.content = {} @@ -14,7 +17,7 @@ export default { function getNumber (value) { return Number(value) || 0 } - if (this.popupWidth >= 500 && popover) { + if (this.isDesktop && popover) { Object.assign(triangleStyle, { position: 'absolute', width: '0', diff --git a/src/platforms/h5/view/components/picker/index.vue b/src/platforms/h5/view/components/picker/index.vue index 46457b3e93787b9d4b7c11092d38dab3e8e42c2c..e7e2c4fe2aad576e9bade46f8751d1767e4c6d16 100644 --- a/src/platforms/h5/view/components/picker/index.vue +++ b/src/platforms/h5/view/components/picker/index.vue @@ -7,6 +7,8 @@
@@ -57,10 +59,23 @@
- - +
+
+ {{ typeof item === "object" ? item[rangeKey] || "" : item }} +
+
@@ -130,6 +145,10 @@ const fields = { MONTH: 'month', DAY: 'day' } +const selectorType = { + PICKER: 'picker', + SELECT: 'select' +} export default { name: 'Picker', components: { keypress }, @@ -178,6 +197,10 @@ export default { disabled: { type: [Boolean, String], default: false + }, + selectorType: { + type: String, + default: '' } }, data () { @@ -233,14 +256,21 @@ export default { default: return [] } + }, + selectorTypeComputed () { + const type = this.selectorType + if (Object.values(selectorType).includes(type)) { + return type + } + return String(navigator.vendor).indexOf('Apple') === 0 && navigator.maxTouchPoints > 0 ? selectorType.PICKER : selectorType.SELECT } - }, watch: { visible (val) { if (val) { clearTimeout(this.__contentVisibleDelay) this.contentVisible = val + this._select() } else { this.__contentVisibleDelay = setTimeout(() => { this.contentVisible = val @@ -524,6 +554,11 @@ export default { this.$el.prepend($picker) $picker.style.display = 'none' }, 260) + }, + _select () { + if (this.mode === mode.SELECTOR && this.selectorTypeComputed === selectorType.SELECT) { + this.$refs.select.scrollTop = this.valueArray[0] * 34 + } } } } @@ -594,6 +629,7 @@ uni-picker[disabled] { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; + cursor: pointer; } .uni-picker-container .uni-picker-header { @@ -664,7 +700,11 @@ uni-picker[disabled] { transform: translateX(2em); } */ -@media screen and (min-width: 500px) { +.uni-picker-container .uni-picker-select { + display: none; +} + +@media screen and (min-width: 500px) and (min-height: 500px) { .uni-mask.uni-picker-mask { background: none; } @@ -693,5 +733,27 @@ uni-picker[disabled] { opacity: 1; transform: translate(-50%, -50%); } + .uni-selector-select .uni-picker-header, + .uni-selector-select .uni-picker-content { + display: none; + } + .uni-selector-select .uni-picker-select { + display: block; + max-height: 300px; + overflow: auto; + background-color: white; + border-radius: 5px; + padding: 6px 0; + } + .uni-selector-select .uni-picker-item { + padding: 0 10px; + color: #555555; + } + .uni-selector-select .uni-picker-item:hover { + background-color: #f6f6f6; + } + .uni-selector-select .uni-picker-item.selected { + color: #007aff; + } }