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 | 461 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 461 insertions(+), 0 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
new file mode 100644
index 0000000..505ce44
--- /dev/null
+++ b/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue
@@ -0,0 +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>
--
Gitblit v1.9.1