From c9c263dc43ad90f95f24a036cee9e6b47afb596c Mon Sep 17 00:00:00 2001 From: skyouc Date: 星期六, 21 十二月 2024 18:44:20 +0800 Subject: [PATCH] 新建盐城德森项目 --- uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue | 922 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 461 insertions(+), 461 deletions(-) diff --git a/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue b/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue index a5bac54..505ce44 100644 --- a/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue +++ b/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue @@ -1,461 +1,461 @@ -<template> - <view class="uni-easyinput" :class="{'uni-easyinput-error':msg}" :style="{color:inputBorder && msg?'#e43d33':styles.color}"> - <view class="uni-easyinput__content" :class="{'is-input-border':inputBorder ,'is-input-error-border':inputBorder && msg,'is-textarea':type==='textarea','is-disabled':disabled}" - :style="{'border-color':inputBorder && msg?'#dd524d':styles.borderColor,'background-color':disabled?styles.disableColor:''}"> - <uni-icons v-if="prefixIcon" class="content-clear-icon" :type="prefixIcon" color="#c0c4cc" @click="onClickIcon('prefix')"></uni-icons> - <textarea v-if="type === 'textarea'" class="uni-easyinput__content-textarea" :class="{'input-padding':inputBorder}" - :name="name" :value="val" :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" placeholder-class="uni-easyinput__placeholder-class" - :maxlength="inputMaxlength" :focus="focused" :autoHeight="autoHeight" @input="onInput" @blur="onBlur" @focus="onFocus" - @confirm="onConfirm"></textarea> - <input v-else :type="type === 'password'?'text':type" class="uni-easyinput__content-input" :style="{ - 'padding-right':type === 'password' ||clearable || prefixIcon?'':'10px', - 'padding-left':prefixIcon?'':'10px' - }" - :name="name" :value="val" :password="!showPassword && type === 'password'" :placeholder="placeholder" - :placeholderStyle="placeholderStyle" placeholder-class="uni-easyinput__placeholder-class" :disabled="disabled" :maxlength="inputMaxlength" :focus="focused" :confirmType="confirmType" @focus="onFocus" - @blur="onBlur" @input="onInput" @confirm="onConfirm" /> - <template v-if="type === 'password' && passwordIcon" > - <uni-icons v-if="val != '' " class="content-clear-icon" :class="{'is-textarea-icon':type==='textarea'}" :type="showPassword?'eye-slash-filled':'eye-filled'" - :size="18" color="#c0c4cc" @click="onEyes"></uni-icons> - </template> - <template v-else-if="suffixIcon"> - <uni-icons v-if="suffixIcon" class="content-clear-icon" :type="suffixIcon" color="#c0c4cc" @click="onClickIcon('suffix')"></uni-icons> - </template> - <template v-else> - <uni-icons class="content-clear-icon" :class="{'is-textarea-icon':type==='textarea'}" type="clear" :size="clearSize" - v-if="clearable && val && !disabled" color="#c0c4cc" @click="onClear"></uni-icons> - </template> - <slot name="right"></slot> - </view> - </view> -</template> - -<script> - // import { - // debounce, - // throttle - // } from './common.js' - /** - * Easyinput 杈撳叆妗� - * @description 姝ょ粍浠跺彲浠ュ疄鐜拌〃鍗曠殑杈撳叆涓庢牎楠岋紝鍖呮嫭 "text" 鍜� "textarea" 绫诲瀷銆� - * @tutorial https://ext.dcloud.net.cn/plugin?id=3455 - * @property {String} value 杈撳叆鍐呭 - * @property {String } type 杈撳叆妗嗙殑绫诲瀷锛堥粯璁ext锛� password/text/textarea/.. - * @value text 鏂囨湰杈撳叆閿洏 - * @value textarea 澶氳鏂囨湰杈撳叆閿洏 - * @value password 瀵嗙爜杈撳叆閿洏 - * @value number 鏁板瓧杈撳叆閿洏锛屾敞鎰廼OS涓奱pp-vue寮瑰嚭鐨勬暟瀛楅敭鐩樺苟闈�9瀹牸鏂瑰紡 - * @value idcard 韬唤璇佽緭鍏ラ敭鐩橈紝淇°�佹敮浠樺疂銆佺櫨搴︺�丵Q灏忕▼搴� - * @value digit 甯﹀皬鏁扮偣鐨勬暟瀛楅敭鐩� 锛孉pp鐨刵vue椤甸潰銆佸井淇°�佹敮浠樺疂銆佺櫨搴︺�佸ご鏉°�丵Q灏忕▼搴忔敮鎸� - * @property {Boolean} clearable 鏄惁鏄剧ず鍙充晶娓呯┖鍐呭鐨勫浘鏍囨帶浠讹紝鐐瑰嚮鍙竻绌鸿緭鍏ユ鍐呭锛堥粯璁rue锛� - * @property {Boolean} autoHeight 鏄惁鑷姩澧為珮杈撳叆鍖哄煙锛宼ype涓簍extarea鏃舵湁鏁堬紙榛樿true锛� - * @property {String } placeholder 杈撳叆妗嗙殑鎻愮ず鏂囧瓧 - * @property {String } placeholderStyle placeholder鐨勬牱寮�(鍐呰仈鏍峰紡锛屽瓧绗︿覆)锛屽"color: #ddd" - * @property {Boolean} focus 鏄惁鑷姩鑾峰緱鐒︾偣锛堥粯璁alse锛� - * @property {Boolean} disabled 鏄惁绂佺敤锛堥粯璁alse锛� - * @property {Number } maxlength 鏈�澶ц緭鍏ラ暱搴︼紝璁剧疆涓� -1 鐨勬椂鍊欎笉闄愬埗鏈�澶ч暱搴︼紙榛樿140锛� - * @property {String } confirmType 璁剧疆閿洏鍙充笅瑙掓寜閽殑鏂囧瓧锛屼粎鍦╰ype="text"鏃剁敓鏁堬紙榛樿done锛� - * @property {Number } clearSize 娓呴櫎鍥炬爣鐨勫ぇ灏忥紝鍗曚綅px锛堥粯璁�15锛� - * @property {String} prefixIcon 杈撳叆妗嗗ご閮ㄥ浘鏍� - * @property {String} suffixIcon 杈撳叆妗嗗熬閮ㄥ浘鏍� - * @property {Boolean} trim 鏄惁鑷姩鍘婚櫎涓ょ鐨勭┖鏍� - * @value both 鍘婚櫎涓ょ绌烘牸 - * @value left 鍘婚櫎宸︿晶绌烘牸 - * @value right 鍘婚櫎鍙充晶绌烘牸 - * @value start 鍘婚櫎宸︿晶绌烘牸 - * @value end 鍘婚櫎鍙充晶绌烘牸 - * @value all 鍘婚櫎鍏ㄩ儴绌烘牸 - * @value none 涓嶅幓闄ょ┖鏍� - * @property {Boolean} inputBorder 鏄惁鏄剧ずinput杈撳叆妗嗙殑杈规锛堥粯璁rue锛� - * @property {Boolean} passwordIcon type=password鏃舵槸鍚︽樉绀哄皬鐪肩潧鍥炬爣 - * @property {Object} styles 鑷畾涔夐鑹� - * @event {Function} input 杈撳叆妗嗗唴瀹瑰彂鐢熷彉鍖栨椂瑙﹀彂 - * @event {Function} focus 杈撳叆妗嗚幏寰楃劍鐐规椂瑙﹀彂 - * @event {Function} blur 杈撳叆妗嗗け鍘荤劍鐐规椂瑙﹀彂 - * @event {Function} confirm 鐐瑰嚮瀹屾垚鎸夐挳鏃惰Е鍙� - * @event {Function} iconClick 鐐瑰嚮鍥炬爣鏃惰Е鍙� - * @example <uni-easyinput v-model="mobile"></uni-easyinput> - */ - - export default { - name: 'uni-easyinput', - emits:['click','iconClick','update:modelValue','input','focus','blur','confirm'], - model:{ - prop:'modelValue', - event:'update:modelValue' - }, - props: { - name: String, - value: [Number, String], - modelValue: [Number, String], - type: { - type: String, - default: 'text' - }, - clearable: { - type: Boolean, - default: true - }, - autoHeight: { - type: Boolean, - default: false - }, - placeholder: String, - placeholderStyle: String, - focus: { - type: Boolean, - default: false - }, - disabled: { - type: Boolean, - default: false - }, - maxlength: { - type: [Number, String], - default: 140 - }, - confirmType: { - type: String, - default: 'done' - }, - clearSize: { - type: [Number, String], - default: 15 - }, - inputBorder: { - type: Boolean, - default: true - }, - prefixIcon: { - type: String, - default: '' - }, - suffixIcon: { - type: String, - default: '' - }, - trim: { - type: [Boolean, String], - default: true - }, - passwordIcon:{ - type: Boolean, - default: true - }, - styles: { - type: Object, - default () { - return { - color: '#333', - disableColor: '#F7F6F6', - borderColor: '#e5e5e5' - } - } - }, - errorMessage:{ - type:[String,Boolean], - default:'' - } - }, - data() { - return { - focused: false, - errMsg: '', - val: '', - showMsg: '', - border: false, - isFirstBorder: false, - showClearIcon: false, - showPassword: false - }; - }, - computed: { - msg() { - return this.errorMessage || this.errMsg; - }, - // 鍥犱负uniapp鐨刬nput缁勪欢鐨刴axlength缁勪欢蹇呴』瑕佹暟鍊硷紝杩欓噷杞负鏁板�硷紝鐢ㄦ埛鍙互浼犲叆瀛楃涓叉暟鍊� - inputMaxlength() { - return Number(this.maxlength); - }, - }, - watch: { - value(newVal) { - if (this.errMsg) this.errMsg = '' - this.val = newVal - // fix by mehaotian is_reset 鍦� uni-forms 涓畾涔� - if (this.form && this.formItem &&!this.is_reset) { - this.is_reset = false - this.formItem.setValue(newVal) - } - }, - modelValue(newVal) { - if (this.errMsg) this.errMsg = '' - this.val = newVal - if (this.form && this.formItem &&!this.is_reset) { - this.is_reset = false - this.formItem.setValue(newVal) - } - }, - focus(newVal) { - this.$nextTick(() => { - this.focused = this.focus - }) - } - }, - created() { - if(!this.value){ - this.val = this.modelValue - } - if(!this.modelValue){ - this.val = this.value - } - this.form = this.getForm('uniForms') - this.formItem = this.getForm('uniFormsItem') - if (this.form && this.formItem) { - if (this.formItem.name) { - if(!this.is_reset){ - this.is_reset = false - this.formItem.setValue(this.val) - } - this.rename = this.formItem.name - this.form.inputChildrens.push(this) - } - } - }, - mounted() { - this.$nextTick(() => { - this.focused = this.focus - }) - }, - methods: { - /** - * 鍒濆鍖栧彉閲忓�� - */ - init() { - - }, - onClickIcon(type) { - this.$emit('iconClick', type) - }, - /** - * 鑾峰彇鐖跺厓绱犲疄渚� - */ - getForm(name = 'uniForms') { - let parent = this.$parent; - let parentName = parent.$options.name; - while (parentName !== name) { - parent = parent.$parent; - if (!parent) return false; - parentName = parent.$options.name; - } - return parent; - }, - - onEyes() { - this.showPassword = !this.showPassword - }, - onInput(event) { - let value = event.detail.value; - // 鍒ゆ柇鏄惁鍘婚櫎绌烘牸 - if (this.trim) { - if (typeof(this.trim) === 'boolean' && this.trim) { - value = this.trimStr(value) - } - if (typeof(this.trim) === 'string') { - value = this.trimStr(value, this.trim) - } - }; - if (this.errMsg) this.errMsg = '' - this.val = value - // TODO 鍏煎 vue2 - this.$emit('input', value); - // TODO銆�鍏煎銆�vue3 - this.$emit('update:modelValue',value) - }, - - onFocus(event) { - this.$emit('focus', event); - }, - onBlur(event) { - let value = event.detail.value; - this.$emit('blur', event); - }, - onConfirm(e) { - this.$emit('confirm', e.detail.value); - }, - onClear(event) { - this.val = ''; - // TODO 鍏煎 vue2 - this.$emit('input', ''); - // TODO 鍏煎 vue2 - // TODO銆�鍏煎銆�vue3 - this.$emit('update:modelValue','') - }, - fieldClick() { - this.$emit('click'); - }, - trimStr(str, pos = 'both') { - if (pos === 'both') { - return str.trim(); - } else if (pos === 'left') { - return str.trimLeft(); - } else if (pos === 'right') { - return str.trimRight(); - } else if (pos === 'start') { - return str.trimStart() - } else if (pos === 'end') { - return str.trimEnd() - } else if (pos === 'all') { - return str.replace(/\s+/g, ''); - } else if (pos === 'none') { - return str; - } - return str; - } - } - }; -</script> - -<style lang="scss" scoped> - $uni-error: #e43d33; - $uni-border-1: #DCDFE6 !default; - .uni-easyinput { - /* #ifndef APP-NVUE */ - width: 100%; - /* #endif */ - flex: 1; - position: relative; - text-align: left; - color: #333; - font-size: 14px; - } - - .uni-easyinput__content { - flex: 1; - /* #ifndef APP-NVUE */ - width: 100%; - display: flex; - box-sizing: border-box; - min-height: 36px; - /* #endif */ - flex-direction: row; - align-items: center; - } - - .uni-easyinput__content-input { - /* #ifndef APP-NVUE */ - width: auto; - /* #endif */ - position: relative; - overflow: hidden; - flex: 1; - line-height: 1; - font-size: 14px; - } - .uni-easyinput__placeholder-class { - color: #999; - font-size: 12px; - font-weight: 200; - } - .is-textarea { - align-items: flex-start; - } - - .is-textarea-icon { - margin-top: 5px; - } - - .uni-easyinput__content-textarea { - position: relative; - overflow: hidden; - flex: 1; - line-height: 1.5; - font-size: 14px; - padding-top: 6px; - padding-bottom: 10px; - height: 80px; - /* #ifndef APP-NVUE */ - min-height: 80px; - width: auto; - /* #endif */ - } - - .input-padding { - padding-left: 10px; - } - - .content-clear-icon { - padding: 0 5px; - } - - .label-icon { - margin-right: 5px; - margin-top: -1px; - } - - // 鏄剧ず杈规 - .is-input-border { - /* #ifndef APP-NVUE */ - display: flex; - box-sizing: border-box; - /* #endif */ - flex-direction: row; - align-items: center; - border: 1px solid $uni-border-1; - border-radius: 4px; - } - - .uni-error-message { - position: absolute; - bottom: -17px; - left: 0; - line-height: 12px; - color: $uni-error; - font-size: 12px; - text-align: left; - } - - .uni-error-msg--boeder { - position: relative; - bottom: 0; - line-height: 22px; - } - - .is-input-error-border { - border-color: $uni-error; - .uni-easyinput__placeholder-class { - color: mix(#fff, $uni-error, 50%);; - } - } - - - .uni-easyinput--border { - margin-bottom: 0; - padding: 10px 15px; - // padding-bottom: 0; - border-top: 1px #eee solid; - } - - .uni-easyinput-error { - padding-bottom: 0; - } - - .is-first-border { - /* #ifndef APP-NVUE */ - border: none; - /* #endif */ - /* #ifdef APP-NVUE */ - border-width: 0; - /* #endif */ - } - - .is-disabled { - border-color: red; - background-color: #F7F6F6; - color: #D5D5D5; - .uni-easyinput__placeholder-class { - color: #D5D5D5; - font-size: 12px; - } - } -</style> +<template> + <view class="uni-easyinput" :class="{'uni-easyinput-error':msg}" :style="{color:inputBorder && msg?'#e43d33':styles.color}"> + <view class="uni-easyinput__content" :class="{'is-input-border':inputBorder ,'is-input-error-border':inputBorder && msg,'is-textarea':type==='textarea','is-disabled':disabled}" + :style="{'border-color':inputBorder && msg?'#dd524d':styles.borderColor,'background-color':disabled?styles.disableColor:''}"> + <uni-icons v-if="prefixIcon" class="content-clear-icon" :type="prefixIcon" color="#c0c4cc" @click="onClickIcon('prefix')"></uni-icons> + <textarea v-if="type === 'textarea'" class="uni-easyinput__content-textarea" :class="{'input-padding':inputBorder}" + :name="name" :value="val" :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" placeholder-class="uni-easyinput__placeholder-class" + :maxlength="inputMaxlength" :focus="focused" :autoHeight="autoHeight" @input="onInput" @blur="onBlur" @focus="onFocus" + @confirm="onConfirm"></textarea> + <input v-else :type="type === 'password'?'text':type" class="uni-easyinput__content-input" :style="{ + 'padding-right':type === 'password' ||clearable || prefixIcon?'':'10px', + 'padding-left':prefixIcon?'':'10px' + }" + :name="name" :value="val" :password="!showPassword && type === 'password'" :placeholder="placeholder" + :placeholderStyle="placeholderStyle" placeholder-class="uni-easyinput__placeholder-class" :disabled="disabled" :maxlength="inputMaxlength" :focus="focused" :confirmType="confirmType" @focus="onFocus" + @blur="onBlur" @input="onInput" @confirm="onConfirm" /> + <template v-if="type === 'password' && passwordIcon" > + <uni-icons v-if="val != '' " class="content-clear-icon" :class="{'is-textarea-icon':type==='textarea'}" :type="showPassword?'eye-slash-filled':'eye-filled'" + :size="18" color="#c0c4cc" @click="onEyes"></uni-icons> + </template> + <template v-else-if="suffixIcon"> + <uni-icons v-if="suffixIcon" class="content-clear-icon" :type="suffixIcon" color="#c0c4cc" @click="onClickIcon('suffix')"></uni-icons> + </template> + <template v-else> + <uni-icons class="content-clear-icon" :class="{'is-textarea-icon':type==='textarea'}" type="clear" :size="clearSize" + v-if="clearable && val && !disabled" color="#c0c4cc" @click="onClear"></uni-icons> + </template> + <slot name="right"></slot> + </view> + </view> +</template> + +<script> + // import { + // debounce, + // throttle + // } from './common.js' + /** + * Easyinput 杈撳叆妗� + * @description 姝ょ粍浠跺彲浠ュ疄鐜拌〃鍗曠殑杈撳叆涓庢牎楠岋紝鍖呮嫭 "text" 鍜� "textarea" 绫诲瀷銆� + * @tutorial https://ext.dcloud.net.cn/plugin?id=3455 + * @property {String} value 杈撳叆鍐呭 + * @property {String } type 杈撳叆妗嗙殑绫诲瀷锛堥粯璁ext锛� password/text/textarea/.. + * @value text 鏂囨湰杈撳叆閿洏 + * @value textarea 澶氳鏂囨湰杈撳叆閿洏 + * @value password 瀵嗙爜杈撳叆閿洏 + * @value number 鏁板瓧杈撳叆閿洏锛屾敞鎰廼OS涓奱pp-vue寮瑰嚭鐨勬暟瀛楅敭鐩樺苟闈�9瀹牸鏂瑰紡 + * @value idcard 韬唤璇佽緭鍏ラ敭鐩橈紝淇°�佹敮浠樺疂銆佺櫨搴︺�丵Q灏忕▼搴� + * @value digit 甯﹀皬鏁扮偣鐨勬暟瀛楅敭鐩� 锛孉pp鐨刵vue椤甸潰銆佸井淇°�佹敮浠樺疂銆佺櫨搴︺�佸ご鏉°�丵Q灏忕▼搴忔敮鎸� + * @property {Boolean} clearable 鏄惁鏄剧ず鍙充晶娓呯┖鍐呭鐨勫浘鏍囨帶浠讹紝鐐瑰嚮鍙竻绌鸿緭鍏ユ鍐呭锛堥粯璁rue锛� + * @property {Boolean} autoHeight 鏄惁鑷姩澧為珮杈撳叆鍖哄煙锛宼ype涓簍extarea鏃舵湁鏁堬紙榛樿true锛� + * @property {String } placeholder 杈撳叆妗嗙殑鎻愮ず鏂囧瓧 + * @property {String } placeholderStyle placeholder鐨勬牱寮�(鍐呰仈鏍峰紡锛屽瓧绗︿覆)锛屽"color: #ddd" + * @property {Boolean} focus 鏄惁鑷姩鑾峰緱鐒︾偣锛堥粯璁alse锛� + * @property {Boolean} disabled 鏄惁绂佺敤锛堥粯璁alse锛� + * @property {Number } maxlength 鏈�澶ц緭鍏ラ暱搴︼紝璁剧疆涓� -1 鐨勬椂鍊欎笉闄愬埗鏈�澶ч暱搴︼紙榛樿140锛� + * @property {String } confirmType 璁剧疆閿洏鍙充笅瑙掓寜閽殑鏂囧瓧锛屼粎鍦╰ype="text"鏃剁敓鏁堬紙榛樿done锛� + * @property {Number } clearSize 娓呴櫎鍥炬爣鐨勫ぇ灏忥紝鍗曚綅px锛堥粯璁�15锛� + * @property {String} prefixIcon 杈撳叆妗嗗ご閮ㄥ浘鏍� + * @property {String} suffixIcon 杈撳叆妗嗗熬閮ㄥ浘鏍� + * @property {Boolean} trim 鏄惁鑷姩鍘婚櫎涓ょ鐨勭┖鏍� + * @value both 鍘婚櫎涓ょ绌烘牸 + * @value left 鍘婚櫎宸︿晶绌烘牸 + * @value right 鍘婚櫎鍙充晶绌烘牸 + * @value start 鍘婚櫎宸︿晶绌烘牸 + * @value end 鍘婚櫎鍙充晶绌烘牸 + * @value all 鍘婚櫎鍏ㄩ儴绌烘牸 + * @value none 涓嶅幓闄ょ┖鏍� + * @property {Boolean} inputBorder 鏄惁鏄剧ずinput杈撳叆妗嗙殑杈规锛堥粯璁rue锛� + * @property {Boolean} passwordIcon type=password鏃舵槸鍚︽樉绀哄皬鐪肩潧鍥炬爣 + * @property {Object} styles 鑷畾涔夐鑹� + * @event {Function} input 杈撳叆妗嗗唴瀹瑰彂鐢熷彉鍖栨椂瑙﹀彂 + * @event {Function} focus 杈撳叆妗嗚幏寰楃劍鐐规椂瑙﹀彂 + * @event {Function} blur 杈撳叆妗嗗け鍘荤劍鐐规椂瑙﹀彂 + * @event {Function} confirm 鐐瑰嚮瀹屾垚鎸夐挳鏃惰Е鍙� + * @event {Function} iconClick 鐐瑰嚮鍥炬爣鏃惰Е鍙� + * @example <uni-easyinput v-model="mobile"></uni-easyinput> + */ + + export default { + name: 'uni-easyinput', + emits:['click','iconClick','update:modelValue','input','focus','blur','confirm'], + model:{ + prop:'modelValue', + event:'update:modelValue' + }, + props: { + name: String, + value: [Number, String], + modelValue: [Number, String], + type: { + type: String, + default: 'text' + }, + clearable: { + type: Boolean, + default: true + }, + autoHeight: { + type: Boolean, + default: false + }, + placeholder: String, + placeholderStyle: String, + focus: { + type: Boolean, + default: false + }, + disabled: { + type: Boolean, + default: false + }, + maxlength: { + type: [Number, String], + default: 140 + }, + confirmType: { + type: String, + default: 'done' + }, + clearSize: { + type: [Number, String], + default: 15 + }, + inputBorder: { + type: Boolean, + default: true + }, + prefixIcon: { + type: String, + default: '' + }, + suffixIcon: { + type: String, + default: '' + }, + trim: { + type: [Boolean, String], + default: true + }, + passwordIcon:{ + type: Boolean, + default: true + }, + styles: { + type: Object, + default () { + return { + color: '#333', + disableColor: '#F7F6F6', + borderColor: '#e5e5e5' + } + } + }, + errorMessage:{ + type:[String,Boolean], + default:'' + } + }, + data() { + return { + focused: false, + errMsg: '', + val: '', + showMsg: '', + border: false, + isFirstBorder: false, + showClearIcon: false, + showPassword: false + }; + }, + computed: { + msg() { + return this.errorMessage || this.errMsg; + }, + // 鍥犱负uniapp鐨刬nput缁勪欢鐨刴axlength缁勪欢蹇呴』瑕佹暟鍊硷紝杩欓噷杞负鏁板�硷紝鐢ㄦ埛鍙互浼犲叆瀛楃涓叉暟鍊� + inputMaxlength() { + return Number(this.maxlength); + }, + }, + watch: { + value(newVal) { + if (this.errMsg) this.errMsg = '' + this.val = newVal + // fix by mehaotian is_reset 鍦� uni-forms 涓畾涔� + if (this.form && this.formItem &&!this.is_reset) { + this.is_reset = false + this.formItem.setValue(newVal) + } + }, + modelValue(newVal) { + if (this.errMsg) this.errMsg = '' + this.val = newVal + if (this.form && this.formItem &&!this.is_reset) { + this.is_reset = false + this.formItem.setValue(newVal) + } + }, + focus(newVal) { + this.$nextTick(() => { + this.focused = this.focus + }) + } + }, + created() { + if(!this.value){ + this.val = this.modelValue + } + if(!this.modelValue){ + this.val = this.value + } + this.form = this.getForm('uniForms') + this.formItem = this.getForm('uniFormsItem') + if (this.form && this.formItem) { + if (this.formItem.name) { + if(!this.is_reset){ + this.is_reset = false + this.formItem.setValue(this.val) + } + this.rename = this.formItem.name + this.form.inputChildrens.push(this) + } + } + }, + mounted() { + this.$nextTick(() => { + this.focused = this.focus + }) + }, + methods: { + /** + * 鍒濆鍖栧彉閲忓�� + */ + init() { + + }, + onClickIcon(type) { + this.$emit('iconClick', type) + }, + /** + * 鑾峰彇鐖跺厓绱犲疄渚� + */ + getForm(name = 'uniForms') { + let parent = this.$parent; + let parentName = parent.$options.name; + while (parentName !== name) { + parent = parent.$parent; + if (!parent) return false; + parentName = parent.$options.name; + } + return parent; + }, + + onEyes() { + this.showPassword = !this.showPassword + }, + onInput(event) { + let value = event.detail.value; + // 鍒ゆ柇鏄惁鍘婚櫎绌烘牸 + if (this.trim) { + if (typeof(this.trim) === 'boolean' && this.trim) { + value = this.trimStr(value) + } + if (typeof(this.trim) === 'string') { + value = this.trimStr(value, this.trim) + } + }; + if (this.errMsg) this.errMsg = '' + this.val = value + // TODO 鍏煎 vue2 + this.$emit('input', value); + // TODO銆�鍏煎銆�vue3 + this.$emit('update:modelValue',value) + }, + + onFocus(event) { + this.$emit('focus', event); + }, + onBlur(event) { + let value = event.detail.value; + this.$emit('blur', event); + }, + onConfirm(e) { + this.$emit('confirm', e.detail.value); + }, + onClear(event) { + this.val = ''; + // TODO 鍏煎 vue2 + this.$emit('input', ''); + // TODO 鍏煎 vue2 + // TODO銆�鍏煎銆�vue3 + this.$emit('update:modelValue','') + }, + fieldClick() { + this.$emit('click'); + }, + trimStr(str, pos = 'both') { + if (pos === 'both') { + return str.trim(); + } else if (pos === 'left') { + return str.trimLeft(); + } else if (pos === 'right') { + return str.trimRight(); + } else if (pos === 'start') { + return str.trimStart() + } else if (pos === 'end') { + return str.trimEnd() + } else if (pos === 'all') { + return str.replace(/\s+/g, ''); + } else if (pos === 'none') { + return str; + } + return str; + } + } + }; +</script> + +<style lang="scss" scoped> + $uni-error: #e43d33; + $uni-border-1: #DCDFE6 !default; + .uni-easyinput { + /* #ifndef APP-NVUE */ + width: 100%; + /* #endif */ + flex: 1; + position: relative; + text-align: left; + color: #333; + font-size: 14px; + } + + .uni-easyinput__content { + flex: 1; + /* #ifndef APP-NVUE */ + width: 100%; + display: flex; + box-sizing: border-box; + min-height: 36px; + /* #endif */ + flex-direction: row; + align-items: center; + } + + .uni-easyinput__content-input { + /* #ifndef APP-NVUE */ + width: auto; + /* #endif */ + position: relative; + overflow: hidden; + flex: 1; + line-height: 1; + font-size: 14px; + } + .uni-easyinput__placeholder-class { + color: #999; + font-size: 12px; + font-weight: 200; + } + .is-textarea { + align-items: flex-start; + } + + .is-textarea-icon { + margin-top: 5px; + } + + .uni-easyinput__content-textarea { + position: relative; + overflow: hidden; + flex: 1; + line-height: 1.5; + font-size: 14px; + padding-top: 6px; + padding-bottom: 10px; + height: 80px; + /* #ifndef APP-NVUE */ + min-height: 80px; + width: auto; + /* #endif */ + } + + .input-padding { + padding-left: 10px; + } + + .content-clear-icon { + padding: 0 5px; + } + + .label-icon { + margin-right: 5px; + margin-top: -1px; + } + + // 鏄剧ず杈规 + .is-input-border { + /* #ifndef APP-NVUE */ + display: flex; + box-sizing: border-box; + /* #endif */ + flex-direction: row; + align-items: center; + border: 1px solid $uni-border-1; + border-radius: 4px; + } + + .uni-error-message { + position: absolute; + bottom: -17px; + left: 0; + line-height: 12px; + color: $uni-error; + font-size: 12px; + text-align: left; + } + + .uni-error-msg--boeder { + position: relative; + bottom: 0; + line-height: 22px; + } + + .is-input-error-border { + border-color: $uni-error; + .uni-easyinput__placeholder-class { + color: mix(#fff, $uni-error, 50%);; + } + } + + + .uni-easyinput--border { + margin-bottom: 0; + padding: 10px 15px; + // padding-bottom: 0; + border-top: 1px #eee solid; + } + + .uni-easyinput-error { + padding-bottom: 0; + } + + .is-first-border { + /* #ifndef APP-NVUE */ + border: none; + /* #endif */ + /* #ifdef APP-NVUE */ + border-width: 0; + /* #endif */ + } + + .is-disabled { + border-color: red; + background-color: #F7F6F6; + color: #D5D5D5; + .uni-easyinput__placeholder-class { + color: #D5D5D5; + font-size: 12px; + } + } +</style> -- Gitblit v1.9.1