@10yun/cv-mobile-ui 0.4.1 → 0.4.2

package/ui-cv/cv-easyinput/cv-easyinput.vue

@@ -0,0 +1,514 @@
+<template>
+  <view
+    class="uni-easyinput"
+    :class="{ 'uni-easyinput-error': msg }"
+    :style="{ color: inputBorder && msg ? '#dd524d' : 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 : ''
+      }"
+    >
+      <cv-icon2
+        v-if="prefixIcon"
+        class="content-clear-icon"
+        :type="prefixIcon"
+        color="#c0c4cc"
+        @click="onClickIcon('prefix')"
+      ></cv-icon2>
+      <textarea
+        v-if="type === 'textarea'"
+        class="uni-easyinput__content-textarea"
+        :class="{ 'input-padding': inputBorder }"
+        :name="name"
+        :value="val"
+        :placeholder="placeholder"
+        :placeholderStyle="placeholderStyle"
+        :disabled="disabled"
+        :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"
+        :disabled="disabled"
+        :maxlength="inputMaxlength"
+        :focus="focused"
+        :confirmType="confirmType"
+        @focus="onFocus"
+        @blur="onBlur"
+        @input="onInput"
+        @confirm="onConfirm"
+      />
+      <template v-if="type === 'password' && passwordIcon">
+        <cv-icon2
+          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"
+        ></cv-icon2>
+      </template>
+      <template v-else-if="suffixIcon">
+        <cv-icon2
+          v-if="suffixIcon"
+          class="content-clear-icon"
+          :type="suffixIcon"
+          color="#c0c4cc"
+          @click="onClickIcon('suffix')"
+        ></cv-icon2>
+      </template>
+      <template v-else>
+        <cv-icon2
+          class="content-clear-icon"
+          :class="{ 'is-textarea-icon': type === 'textarea' }"
+          type="clear"
+          :size="clearSize"
+          v-if="clearable && val && !disabled"
+          color="#c0c4cc"
+          @click="onClear"
+        ></cv-icon2>
+      </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	输入框的类型（默认text） password/text/textarea/..
+ * 	@value text			文本输入键盘
+ * 	@value textarea	多行文本输入键盘
+ * 	@value password	密码输入键盘
+ * 	@value number		数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式
+ * 	@value idcard		身份证输入键盘，信、支付宝、百度、QQ小程序
+ * 	@value digit		带小数点的数字键盘	，App的nvue页面、微信、支付宝、百度、头条、QQ小程序支持
+ * @property {Boolean}	clearable	是否显示右侧清空内容的图标控件，点击可清空输入框内容（默认true）
+ * @property {Boolean}	autoHeight	是否自动增高输入区域，type为textarea时有效（默认true）
+ * @property {String }	placeholder	输入框的提示文字
+ * @property {String }	placeholderStyle	placeholder的样式(内联样式，字符串)，如"color: #ddd"
+ * @property {Boolean}	focus	是否自动获得焦点（默认false）
+ * @property {Boolean}	disabled	是否禁用（默认false）
+ * @property {Number }	maxlength	最大输入长度，设置为 -1 的时候不限制最大长度（默认140）
+ * @property {String }	confirmType	设置键盘右下角按钮的文字，仅在type="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输入框的边框（默认true）
+ * @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: 'cv-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: '#eee',
+          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的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值
+    inputMaxlength() {
+      return Number(this.maxlength);
+    }
+  },
+  watch: {
+    value(newVal) {
+      if (this.errMsg) this.errMsg = '';
+      this.val = newVal;
+      if (this.form && this.formItem) {
+        this.formItem.setValue(newVal);
+      }
+    },
+    modelValue(newVal) {
+      if (this.errMsg) this.errMsg = '';
+      this.val = newVal;
+      if (this.form && this.formItem) {
+        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) {
+        this.rename = this.formItem.name;
+        this.form.inputChildrens.push(this);
+      }
+    }
+  },
+  mounted() {
+    // this.onInput = throttle(this.input, 500)
+    this.$nextTick(() => {
+      // setTimeout(()=>{
+      // },1000)
+      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.focused = true;
+      this.$emit('focus', event);
+    },
+    onBlur(event) {
+      let value = event.detail.value;
+      // setTimeout(() => {
+      // this.focused = false;
+      // }, 100);
+      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 scoped>
+.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;
+}
+
+.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 #e5e5e5;
+  border-radius: 4px;
+}
+
+.is-required {
+  color: #dd524d;
+}
+
+.uni-error-message {
+  position: absolute;
+  bottom: -17px;
+  left: 0;
+  line-height: 12px;
+  color: #dd524d;
+  font-size: 12px;
+  text-align: left;
+}
+
+.uni-error-msg--boeder {
+  position: relative;
+  bottom: 0;
+  line-height: 22px;
+}
+
+.is-input-error-border {
+  border-color: #dd524d;
+}
+
+.uni-easyinput--border {
+  margin-bottom: 0;
+  padding: 10px 15px;
+  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 {
+  background-color: #eee;
+}
+</style>