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