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 | 7x 7x 7x 7x 7x | <template> <u-input ref="input" :value="currentValue" :color="color || formItemVM && formItemVM.color" :placeholder="placeholder" :size="size" :opened="currentOpened" :clearable="clearable" :readonly="readonly" :disabled="disabled" @input="onInput" @focus="onFocus" @blur="onBlur" @click.native="focus" @update="$emit('update', $event, this)" @change="$emit('change', $event, this)" @keydown.prevent.stop.up="$refs.listView && $refs.listView.shift(-1)" @keydown.prevent.stop.down="$refs.listView && $refs.listView.shift(+1)"> <m-popper :class="$style.popper" ref="popper" :color="color" :opened.sync="currentOpened" append-to="reference" trigger="manual" placement="bottom"> <span v-show="showArrowEL === 1" :class="$style.arrow"></span> <u-list-view :class="$style.listview" ref="listView" :error-text="errorText" :empty-text="emptyText" :value-field="textField" :value="currentValue" @input="onSelect" :data-source="currentDataSource"> </u-list-view> </m-popper> </u-input> </template> <script> import MField from '../m-field.vue'; import MDataSource from '../m-data-source.vue'; export default { name: 'u-auto-complete', directives: { focus }, mixins: [MField, MDataSource], props: { value: [String, Number], color: String, placeholder: String, textField: { type: String, default: 'text' }, clearable: { type: Boolean, default: false }, autofocus: { type: [Boolean, String], default: false }, readonly: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, // maxlengthMessage: String, // prefix: String, // suffix: String, // search: String, // autoSize: { // type: String, // validator: (value) => // ['horizontal', 'vertical', 'both'].includes(value), // }, size: String, placement: { type: String, validator: (value) => /^(top|bottom|left|right)(-start|-end)?$/.test(value) }, showArrow: {type: Number, default: 0}, }, data() { return { currentValue: this.value, currentOpened: false, // currentDataSource: undefined, showArrowEL: this.showArrow }; }, computed: { filtering() { if (this.filterable) { return { [this.field || this.textField]: { operator: this.matchMethod, value: this.currentValue, caseInsensitive: !this.caseSensitive, }, }; } else { return {}; } }, }, watch: { value(value) { this.currentValue = value; this.fastLoad(false, true); }, showArrow(val) { this.showArrowEL = val; } }, mounted() { this.$emit('update', this.value, this); }, methods: { onInput($event) { this.currentValue = $event; this.$emit('input', $event, this); this.$emit('update:value', $event, this); // this.$emit('select', $event, this) this.fastLoad(false, true); }, onSelect($event) { const oldValue = this.currentValue; this.currentValue = $event; this.$refs.popper.close(); this.$emit('input', $event, this); this.$emit('update:value', $event, this); this.$emit('select', { value: $event, oldValue, }, this); this.$refs.input.focus(); }, onFocus(e) { this.$refs.popper && this.$refs.popper.open(); this.$emit('focus', e, this); }, onBlur(e) { setTimeout(() => { this.$refs.popper && this.$refs.popper.close(); // this.$emit('update:input', this.value); this.$emit('blur', e, this); }, 200); }, focus() { this.onFocus(); }, }, }; </script> <style module> .popper { width: calc(100% + 2px); line-height: var(--select-popper-line-height); } .listview[class] { width: 100%; min-width: auto; height: auto; overflow-y: auto; max-height: var(--list-view-height); } .listview [class^="u-list-view_body__"] { padding: 8px 0; } .arrow { display: block; position: absolute; width: calc(1.4*2*var(--tooltip-arrow-size)); height: calc(1.4*var(--tooltip-arrow-size)); overflow: hidden; } .arrow::before { display: block; position: absolute; left:50%; content: ''; width: calc(2*var(--tooltip-arrow-size)); height: calc(2*var(--tooltip-arrow-size)); background: var(--list-view-body-background); border-radius: calc(0.5*var(--tooltip-arrow-size)); border: 1px solid var(--list-view-border-color); transform: translate(-50%) rotate(45deg); box-shadow: var(--popper-box-shadow); } .popper[data-popper-placement^="top"] { margin-bottom: var(--tooltip-arrow-size); } .popper[data-popper-placement^="top"] .arrow { bottom: calc(-1.4 * var(--tooltip-arrow-size) + 1px); transform: translateX(-50%); } .popper[data-popper-placement^="top"] .arrow::before { top: calc(-50% * 1.4); } .popper[data-popper-placement^="top"]::before { left: 0; right: 0; height: var(--tooltip-arrow-size); bottom: calc(-1 * var(--tooltip-arrow-size)); } .popper[data-popper-placement="top-start"] .arrow { left: var(--tooltip-arrow-offset); } .popper[data-popper-placement="top"] .arrow { left: 50%; } .popper[data-popper-placement="top-end"] .arrow { right: var(--tooltip-arrow-offset); } .popper[data-popper-placement^="bottom"] { margin-top: var(--tooltip-arrow-size); } .popper[data-popper-placement^="bottom"] .arrow { top: calc(-1.4 * var(--tooltip-arrow-size) + 1px); transform: translateX(-50%); } .popper[data-popper-placement^="bottom"] .arrow::before { bottom: calc(-50% * 1.4); } .popper[data-popper-placement^="bottom"]::before { left: 0; right: 0; height: var(--tooltip-arrow-size); top: calc(-1 * var(--tooltip-arrow-size)); } .popper[data-popper-placement="bottom-start"] .arrow { left: var(--tooltip-arrow-offset); } .popper[data-popper-placement="bottom"] .arrow { left: 50%; } .popper[data-popper-placement="bottom-end"] .arrow { right: var(--tooltip-arrow-offset); } </style> |