Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 | <template> <div :class="$style.root" :readonly="readonly" :disabled="disabled" :opened="popperOpened" :clearable="clearable && !!currentText" :tabindex="readonly || currentDisabled ? '' : 0" @click="focus" @keydown.up.prevent="$refs.popper.currentOpened ? shift(-1) : open()" @keydown.down.prevent="$refs.popper.currentOpened ? shift(+1) : open()" @keydown.enter.stop.prevent="onEnter" @keydown.esc.stop="close(), filterText = ''" @blur="onRootBlur"> <span :class="$style.baseline">b</span><!-- 用于基线对齐 --> <span v-show="!filterText && (multiple ? !selectedVMs.length : !selectedVM)" :class="$style.placeholder">{{ placeholder }}</span> <u-input v-if="filterable" :class="$style.input" ref="input" :readonly="readonly" :disabled="currentDisabled" :placeholder="multiple && selectedVMs.length ? '' : placeholder" :filterable="filterable" :multiple-tags="multiple && this.multipleAppearance === 'tags'" :value="filterText" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown.enter.stop.prevent="onInputEnter" @keydown.delete.stop="onInputDelete" :style="{ width: multiple && (inputWidth + 'px') }"> </u-input> <span v-if="clearable && !!currentText" :class="$style.clearable" @click="clear"></span> <m-popper :class="$style.popper" ref="popper" append-to="reference" :disabled="readonly || currentDisabled" @update:opened="$emit('update:opened', $event, this)" @before-open="$emit('before-open', $event, this)" @before-close="$emit('before-close', $event, this)" @open="onOpen" @close="onClose" @before-toggle="$emit('before-toggle', $event, this)" @toggle="$emit('toggle', $event, this)" @click.stop @scroll.stop="onScroll"> <u-list-view v-if=""> </u-list-view> </m-popper> </div> </template> <script> export default { name: 'u-new-time-picker', props: { value: String, format: { type: String, default: 'HH:mm:ss' }, readonly: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, }, data() { return { currentValue: this.value, unitMap: {}, }; }, watch: { opened(opened) { if (opened === this.popperOpened) return; this.toggle(opened); }, }, created() { // }, methods: { handleFormat() { this.unitMap = {}; const arr = this.format.split(':'); arr.forEach((item) => { this.unitMap[item] = true; }); }, open() { this.$refs.popper && this.$refs.popper.open(); }, close() { this.$refs.popper && this.$refs.popper.close(); }, designerControl() { this.toggle(); }, toggle(opened) { this.$refs.popper && this.$refs.popper.toggle(opened); }, focus() { this.$refs.input.focus(); }, blur() { this.$refs.input.blur(); }, }, }; </script> <style module> .root { display: inline-block; position: relative; user-select: none; max-width: 100%; cursor: var(--cursor-pointer); width: var(--select-width); height: var(--select-height); line-height: calc(var(--select-height) - var(--select-border-width) * 2); padding: 0 var(--select-padding-x); padding-right: calc(var(--select-arrow-size) * 7 / 9 + var(--select-arrow-right-ratio) * var(--select-padding-x)); background: var(--select-background); border: var(--select-border-width) solid var(--select-border-color); color: var(--select-color); border-radius: var(--border-radius-base); } .root:focus { outline: var(--focus-outline); box-shadow: var(--select-box-shadow-focus); } .baseline { visibility: hidden; display: inline-block; width: 1em; margin-left: -1em; } .placeholder { color: var(--select-placeholder-color); position: absolute; left: 0; top: 0; padding: inherit; width: 100%; height: 100%; overflow: hidden; } .clearable::before { display: block; position: absolute; right: 8px; top: 0; bottom: 0; z-index: 1; line-height: 1; height: 1em; margin: auto; icon-font: url('../i-icon.vue/assets/close-solid.svg'); cursor: var(--cursor-pointer); color: #a7afbb; } .root[filterable] { cursor: text; } .root::after { position: absolute; icon-font: url('../i-icon.vue/icons/keyboard-arrow-down.svg'); font-size: var(--select-arrow-size); right: calc(var(--select-arrow-right-ratio) * var(--select-padding-x)); top: 0; bottom: 0; line-height: 1.2; height: 1em; margin: auto; color: var(--select-arrow-color); transition: transform var(--transition-duration-base); } .root[opened]::after { transform: rotate(-180deg); } .root[clearable]::after { display: none; } .root[readonly] { cursor: default; } .root[disabled] { cursor: var(--cursor-not-allowed); background: var(--select-background-disabled); color: var(--select-color-disabled); border: 1px solid var(--brand-disabled); } .input { position: absolute; border: none; top: 0; left: 0; width: 100%; height: 100%; } .popper { position: absolute; box-sizing: content-box; width: 100%; line-height: var(--select-popper-line-height); max-height: var(--select-popper-max-height); overflow: auto; background: var(--select-popper-background); border: 1px solid var(--select-popper-border-color); z-index: var(--z-index-popper); margin-top: 1px; border-radius: var(--border-radius-base); box-shadow: var(--select-popper-box-shadow); } .root[size$="mini"] { width: var(--select-width-mini); padding: 0 var(--select-padding-x-mini); padding-right: calc(var(--select-arrow-size) * 7 / 9 + var(--select-arrow-right-ratio) * var(--select-padding-x-mini)); } .root[size$="mini"] .item { padding: 0 var(--select-padding-x-mini); } .root[size$="mini"]::after { right: calc(var(--select-arrow-right-ratio) * var(--select-padding-x-mini)); } .root[size^="mini"] { height: var(--select-height-mini); line-height: calc(var(--select-height-mini) - var(--select-border-width) * 2); } .root[size^="mini"] .item { line-height: calc(var(--select-height-mini) - var(--select-border-width) * 2); } .root[size^="mini"] .popper { max-height: calc(6 * calc(var(--select-height-mini) - var(--select-border-width) * 2)); } .root[size$="small"] { width: var(--select-width-small); padding: 0 var(--select-padding-x-small); padding-right: calc(var(--select-arrow-size) * 7 / 9 + var(--select-arrow-right-ratio) * var(--select-padding-x-small)); } .root[size$="small"] .item { padding: 0 var(--select-padding-x-small); } .root[size$="small"]::after { right: calc(var(--select-arrow-right-ratio) * var(--select-padding-x-small)); } .root[size^="small"] { height: var(--select-height-small); line-height: calc(var(--select-height-small) - var(--select-border-width) * 2); } .root[size^="small"] .item { line-height: calc(var(--select-height-small) - var(--select-border-width) * 2); } .root[size^="small"] .popper { max-height: calc(6 * calc(var(--select-height-small) - var(--select-border-width) * 2)); } .root[size$="normal"] { width: var(--select-width); padding: 0 var(--select-padding-x); padding-right: calc(var(--select-arrow-size) * 7 / 9 + var(--select-arrow-right-ratio) * var(--select-padding-x)); } .root[size$="normal"] .item { padding: 0 var(--select-padding-x); } .root[size$="normal"]::after { right: calc(var(--select-arrow-right-ratio) * var(--select-padding-x)); } .root[size^="normal"] { height: var(--select-height); line-height: calc(var(--select-height) - var(--select-border-width) * 2); } .root[size^="normal"] .item { line-height: calc(var(--select-height) - var(--select-border-width) * 2); } .root[size^="normal"] .popper { max-height: calc(6 * calc(var(--select-height) - var(--select-border-width) * 2)); } .root[size$="medium"] { width: var(--select-width-medium); padding: 0 var(--select-padding-x-medium); padding-right: calc(var(--select-arrow-size) * 7 / 9 + var(--select-arrow-right-ratio) * var(--select-padding-x-medium)); } .root[size$="medium"] .item { padding: 0 var(--select-padding-x-medium); } .root[size$="medium"]::after { right: calc(var(--select-arrow-right-ratio) * var(--select-padding-x-medium)); } .root[size^="medium"] { height: var(--select-height-medium); line-height: calc(var(--select-height-medium) - var(--select-border-width) * 2); } .root[size^="medium"] .item { line-height: calc(var(--select-height-medium) - var(--select-border-width) * 2); } .root[size^="medium"] .popper { max-height: calc(6 * calc(var(--select-height-medium) - var(--select-border-width) * 2)); } .root[size$="large"] { width: var(--select-width-large); padding: 0 var(--select-padding-x-large); padding-right: calc(var(--select-arrow-size) * 7 / 9 + var(--select-arrow-right-ratio) * var(--select-padding-x-large)); } .root[size$="large"] .item { padding: 0 var(--select-padding-x-large); } .root[size$="large"]::after { right: calc(var(--select-arrow-right-ratio) * var(--select-padding-x-large)); } .root[size^="large"] { height: var(--select-height-large); line-height: calc(var(--select-height-large) - var(--select-border-width) * 2); } .root[size^="large"] .item { line-height: calc(var(--select-height-large) - var(--select-border-width) * 2); } .root[size^="large"] .popper { max-height: calc(6 * calc(var(--select-height-large) - var(--select-border-width) * 2)); } .root[size$="huge"] { width: var(--select-width-huge); padding: 0 var(--select-padding-x-huge); padding-right: calc(var(--select-arrow-size) * 7 / 9 + var(--select-arrow-right-ratio) * var(--select-padding-x-huge)); } .root[size$="huge"] .item { padding: 0 var(--select-padding-x-huge); } .root[size$="huge"]::after { right: calc(var(--select-arrow-right-ratio) * var(--select-padding-x-huge)); } .root[size^="huge"] { height: var(--select-height-huge); line-height: calc(var(--select-height-huge) - var(--select-border-width) * 2); } .root[size^="huge"] .item { line-height: calc(var(--select-height-huge) - var(--select-border-width) * 2); } .root[size^="huge"] .popper { max-height: calc(6 * calc(var(--select-height-huge) - var(--select-border-width) * 2)); } .root[size$="full"] { width: 100%; padding: 0 var(--select-padding-x-full); padding-right: calc(var(--select-arrow-size) * 7 / 9 + var(--select-arrow-right-ratio) * var(--select-padding-x-full)); } .root[size$="full"] .item { padding: 0 var(--select-padding-x-full); } .root[size^="full"] { height: 100%; } </style> |