zx_bms_uni/miniprogram_npm/@vant/weapp/field/index.vue

<template>
    <view>
        <van-cell
            :size="size"
            :icon="leftIcon"
            :title="label"
            :center="center"
            :border="border"
            :is-link="isLink"
            :required="required"
            :clickable="clickable"
            :title-width="titleWidth"
            :custom-style="customStyle"
            :arrow-direction="arrowDirection"
            custom-class="van-field"
            title-class="label-class"
        >
            <slot name="left-icon" slot="icon" />
            <slot name="label" slot="title" />
            <view :class="utils.bem('field__body', [type])">
                <textarea
                    v-if="type === 'textarea'"
                    :class="'input-class ' + utils.bem('field__input', [inputAlign, type, { disabled, error }])"
                    :fixed="fixed"
                    :focus="focus"
                    :cursor="cursor"
                    :value="innerValue"
                    :auto-focus="autoFocus"
                    :disabled="disabled || readonly"
                    :maxlength="maxlength"
                    :placeholder="placeholder"
                    :placeholder-style="placeholderStyle"
                    :placeholder-class="utils.bem('field__placeholder', { error })"
                    :auto-height="!!autosize"
                    :style="computed.inputStyle(autosize)"
                    :cursor-spacing="cursorSpacing"
                    :adjust-position="adjustPosition"
                    :show-confirm-bar="showConfirmBar"
                    :hold-keyboard="holdKeyboard"
                    :selection-end="selectionEnd"
                    :selection-start="selectionStart"
                    :disable-default-padding="disableDefaultPadding"
                    @input="onInput"
                    @blur="onBlur"
                    @focus="onFocus"
                    @confirm="onConfirm"
                    @linechange="onLineChange"
                    @keyboardheightchange="onKeyboardHeightChange"
                ></textarea>
                <input
                    v-else
                    :class="'input-class ' + utils.bem('field__input', [inputAlign, { disabled, error }])"
                    :type="type"
                    :focus="focus"
                    :cursor="cursor"
                    :value="innerValue"
                    :auto-focus="autoFocus"
                    :disabled="disabled || readonly"
                    :maxlength="maxlength"
                    :placeholder="placeholder"
                    :placeholder-style="placeholderStyle"
                    :placeholder-class="utils.bem('field__placeholder', { error })"
                    :confirm-type="confirmType"
                    :confirm-hold="confirmHold"
                    :hold-keyboard="holdKeyboard"
                    :cursor-spacing="cursorSpacing"
                    :adjust-position="adjustPosition"
                    :selection-end="selectionEnd"
                    :selection-start="selectionStart"
                    :password="password || type === 'password'"
                    @input="onInput"
                    @blur="onBlur"
                    @focus="onFocus"
                    @confirm="onConfirm"
                    @keyboardheightchange="onKeyboardHeightChange"
                />
                <van-icon v-if="showClear" name="clear" class="van-field__clear-root van-field__icon-root" @touchstart.native.stop.prevent="onClear" />
                <view class="van-field__icon-container" @tap="onClickIcon">
                    <van-icon v-if="rightIcon || icon" :name="rightIcon || icon" :class="'van-field__icon-root ' + iconClass" custom-class="right-icon-class" />
                    <slot name="right-icon" />
                    <slot name="icon" />
                </view>
                <view class="van-field__button">
                    <slot name="button" />
                </view>
            </view>
            <view v-if="showWordLimit && maxlength" class="van-field__word-limit">
                <view :class="utils.bem('field__word-num', { full: value.length >= maxlength })">{{ value.length }}</view>
                /{{ maxlength }}
            </view>
            <view v-if="errorMessage" :class="utils.bem('field__error-message', [errorMessageAlign, { disabled, error }])">
                {{ errorMessage }}
            </view>
        </van-cell>
    </view>
</template>
<script module="utils" lang="wxs" src="@/miniprogram_npm/@vant/weapp/wxs/utils.wxs"></script>
<script module="computed" lang="wxs" src="@/miniprogram_npm/@vant/weapp/field/index.wxs"></script>
<script>
'use strict';
var __assign =
    (this && this.__assign) ||
    function () {
        __assign =
            Object.assign ||
            function (t) {
                for (var s, i = 1, n = arguments.length; i < n; i++) {
                    s = arguments[i];
                    for (var p in s) {
                        if (Object.prototype.hasOwnProperty.call(s, p)) {
                            t[p] = s[p];
                        }
                    }
                }
                return t;
            };
        return __assign.apply(this, arguments);
    };
Object.defineProperty(exports, '__esModule', {
    value: true
});
var component_1 = require('../common/component');
var props_1 = require('./props');
component_1.VantComponent({
    field: true,
    classes: ['input-class', 'right-icon-class', 'label-class'],
    props: __assign(__assign(__assign(__assign({}, props_1.commonProps), props_1.inputProps), props_1.textareaProps), {
        size: String,
        icon: String,
        label: String,
        error: Boolean,
        center: Boolean,
        isLink: Boolean,
        leftIcon: String,
        rightIcon: String,
        autosize: [Boolean, Object],
        readonly: {
            type: Boolean,
            observer: 'setShowClear'
        },
        required: Boolean,
        iconClass: String,
        clearable: {
            type: Boolean,
            observer: 'setShowClear'
        },
        clickable: Boolean,
        inputAlign: String,
        customStyle: String,
        errorMessage: String,
        arrowDirection: String,
        showWordLimit: Boolean,
        errorMessageAlign: String,
        border: {
            type: Boolean,
            value: true
        },
        titleWidth: {
            type: String,
            value: '90px'
        }
    }),
    data: {
        focused: false,
        innerValue: '',
        showClear: false
    },
    created: function () {
        this.value = this.value;
        this.setData({
            innerValue: this.value
        });
    },
    methods: {
        onInput: function (event) {
            var _a = (event.detail || {}).value;
            var value = _a === void 0 ? '' : _a;
            this.value = value;
            this.setShowClear();
            this.emitChange();
        },
        onFocus: function (event) {
            this.focused = true;
            this.setShowClear();
            this.$emit('focus', event.detail);
        },
        onBlur: function (event) {
            this.focused = false;
            this.setShowClear();
            this.$emit('blur', event.detail);
        },
        onClickIcon: function () {
            this.$emit('click-icon');
        },
        onClear: function () {
            var that = this;
            this.setData({
                innerValue: ''
            });
            this.value = '';
            this.setShowClear();
            this.$nextTick(function () {
                that.emitChange();
                that.$emit('clear', '');
            });
        },
        onConfirm: function (event) {
            var _a = (event.detail || {}).value;
            var value = _a === void 0 ? '' : _a;
            this.value = value;
            this.setShowClear();
            this.$emit('confirm', value);
        },
        setValue: function (value) {
            this.value = value;
            this.setShowClear();
            if (value === '') {
                this.setData({
                    innerValue: ''
                });
            }
            this.emitChange();
        },
        onLineChange: function (event) {
            this.$emit('linechange', event.detail);
        },
        onKeyboardHeightChange: function (event) {
            this.$emit('keyboardheightchange', event.detail);
        },
        emitChange: function () {
            var that = this;
            this.setData({
                value: this.value
            });
            this.$nextTick(function () {
                that.$emit('input', that.value);
                that.$emit('change', that.value);
            });
        },
        setShowClear: function () {
            var _a = this;
            var clearable = _a.clearable;
            var readonly = _a.readonly;
            var that = this;
            var focused = that.focused;
            var value = that.value;
            this.setData({
                showClear: !!clearable && !!focused && !!value && !readonly
            });
        },
        noop: function () {}
    }
});
</script>
<style>
@import './index.css';
</style>