113 lines
3.9 KiB
JavaScript
113 lines
3.9 KiB
JavaScript
import { nextTick } from '../common/utils';
|
|
import { VantComponent } from '../common/component';
|
|
import { commonProps, inputProps, textareaProps } from './props';
|
|
VantComponent({
|
|
field: true,
|
|
classes: ['input-class', 'right-icon-class', 'label-class'],
|
|
props: Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), inputProps), textareaProps), { size: String, icon: String, label: String, error: Boolean, center: Boolean, isLink: Boolean, leftIcon: String, rightIcon: String, autosize: null, required: Boolean, iconClass: String, clickable: Boolean, inputAlign: String, customStyle: String, errorMessage: String, arrowDirection: String, showWordLimit: Boolean, errorMessageAlign: String, readonly: {
|
|
type: Boolean,
|
|
observer: 'setShowClear',
|
|
}, clearable: {
|
|
type: Boolean,
|
|
observer: 'setShowClear',
|
|
}, clearTrigger: {
|
|
type: String,
|
|
value: 'focus',
|
|
}, border: {
|
|
type: Boolean,
|
|
value: true,
|
|
}, titleWidth: {
|
|
type: String,
|
|
value: '6.2em',
|
|
}, clearIcon: {
|
|
type: String,
|
|
value: 'clear',
|
|
}, extraEventParams: {
|
|
type: Boolean,
|
|
value: false,
|
|
} }),
|
|
data: {
|
|
focused: false,
|
|
innerValue: '',
|
|
showClear: false,
|
|
},
|
|
created() {
|
|
this.value = this.data.value;
|
|
this.setData({ innerValue: this.value });
|
|
},
|
|
methods: {
|
|
onInput(event) {
|
|
const { value = '' } = event.detail || {};
|
|
this.value = value;
|
|
this.setShowClear();
|
|
this.emitChange(event.detail);
|
|
},
|
|
onFocus(event) {
|
|
this.focused = true;
|
|
this.setShowClear();
|
|
this.$emit('focus', event.detail);
|
|
},
|
|
onBlur(event) {
|
|
this.focused = false;
|
|
this.setShowClear();
|
|
this.$emit('blur', event.detail);
|
|
},
|
|
onClickIcon() {
|
|
this.$emit('click-icon');
|
|
},
|
|
onClickInput(event) {
|
|
this.$emit('click-input', event.detail);
|
|
},
|
|
onClear() {
|
|
this.setData({ innerValue: '' });
|
|
this.value = '';
|
|
this.setShowClear();
|
|
nextTick(() => {
|
|
this.emitChange({ value: '' });
|
|
this.$emit('clear', '');
|
|
});
|
|
},
|
|
onConfirm(event) {
|
|
const { value = '' } = event.detail || {};
|
|
this.value = value;
|
|
this.setShowClear();
|
|
this.$emit('confirm', value);
|
|
},
|
|
setValue(value) {
|
|
this.value = value;
|
|
this.setShowClear();
|
|
if (value === '') {
|
|
this.setData({ innerValue: '' });
|
|
}
|
|
this.emitChange({ value });
|
|
},
|
|
onLineChange(event) {
|
|
this.$emit('linechange', event.detail);
|
|
},
|
|
onKeyboardHeightChange(event) {
|
|
this.$emit('keyboardheightchange', event.detail);
|
|
},
|
|
emitChange(detail) {
|
|
const { extraEventParams } = this.data;
|
|
this.setData({ value: detail.value });
|
|
nextTick(() => {
|
|
const data = extraEventParams ? detail : detail.value;
|
|
this.$emit('input', data);
|
|
this.$emit('change', data);
|
|
});
|
|
},
|
|
setShowClear() {
|
|
const { clearable, readonly, clearTrigger } = this.data;
|
|
const { focused, value } = this;
|
|
let showClear = false;
|
|
if (clearable && !readonly) {
|
|
const hasValue = !!value;
|
|
const trigger = clearTrigger === 'always' || (clearTrigger === 'focus' && focused);
|
|
showClear = hasValue && trigger;
|
|
}
|
|
this.setData({ showClear });
|
|
},
|
|
noop() { },
|
|
},
|
|
});
|