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>
|