123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- 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: {
- formatValue(value) {
- const { maxlength } = this.data;
- if (maxlength !== -1 && value.length > maxlength) {
- return value.slice(0, maxlength);
- }
- return value;
- },
- onInput(event) {
- const { value = '' } = event.detail || {};
- const formatValue = this.formatValue(value);
- this.value = formatValue;
- this.setShowClear();
- return this.emitChange(Object.assign(Object.assign({}, event.detail), { value: formatValue }));
- },
- 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 });
- let result;
- const data = extraEventParams
- ? Object.assign(Object.assign({}, detail), { callback: (data) => {
- result = data;
- } }) : detail.value;
- this.$emit('input', data);
- this.$emit('change', data);
- return result;
- },
- 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() { },
- },
- });
|