<template> <view class="m-input-view"> <input :focus="focus" :type="inputType" :value="value" @input="onInput" class="m-input-input" :placeholder="placeholder" :password="type==='password'&&!showPassword" :maxlength="maxlength" @focus="onFocus" @blur="onBlur" /> <!-- 优先显示密码可见按钮 --> <view v-if="clearable&&!displayable&&value.length" class="m-input-icon"> <u-icon color="#666666" name="close-circle-fill" @click="clear"></u-icon> </view> <view v-if="displayable" class="m-input-icon"> <u-icon :style="{color:showPassword?'#666666':'#cccccc'}" name="eye" @click="display"></u-icon> </view> </view> </template> <script> export default { props: { /** * 输入类型 */ type: String, /** * 值 */ value: String, /** * 占位符 */ placeholder: String, /** * 是否显示清除按钮 */ clearable: { type: [Boolean, String], default: false }, /** * 是否显示密码可见按钮 */ displayable: { type: [Boolean, String], default: false }, /** * 自动获取焦点 */ focus: { type: [Boolean, String], default: false }, maxlength: { type: Number, default: -1 } }, model: { prop: 'value', event: 'input' }, data() { return { /** * 显示密码明文 */ showPassword: false, /** * 是否获取焦点 */ isFocus: false } }, computed: { inputType() { const type = this.type return type === 'password' ? 'text' : type } }, methods: { clear() { this.$emit('input', '') }, display() { this.showPassword = !this.showPassword }, onFocus() { this.isFocus = true }, onBlur() { this.$nextTick(() => { this.isFocus = false }) }, onInput(e) { this.$emit('input', e.detail.value) } } } </script> <style> .m-input-view { display: inline-flex; flex-direction: row; align-items: center; /* width: 100%; */ flex: 1; padding: 0 10px; } .m-input-input { flex: 1; width: 100%; min-height: 100%; line-height: inherit; background-color: rgba(0, 0, 0, 0); } .m-input-icon { width: 20px; font-size: 20px; line-height: 20px; color: #666666; } </style>