vdesign-ui 0.3.0 → 0.3.1

package/dist/components/input/index.vue

@@ -1,345 +1,345 @@
-<template>
-  <div :class="wrapClasses" class="vd-input">
-      <!-- 前缀，还有前缀右边框 -->
-      <span v-if="hasPrefix" class="vd-input-form__prefix" :class="borderRightClasses">
-        <slot name="prefix">{{ prefix }}</slot>
-      </span>
-      <textarea
-        v-if="type === 'textarea'"
-        ref="textarea"
-        v-bind="$attrs"
-        :rows="rows"
-        :class="inputClasses"
-        :disabled="disabled"
-        :readonly="readonly"
-        :value="currentValue"
-        @focus="handleFocus"
-        @blur="handleBlur"
-        @input="handleInput"
-        :style="textareaStyles"
-      >
-      </textarea>
-      <input
-        v-else
-        ref="input"
-        v-bind="$attrs"
-        :type="passwordIcon ? (passwordVisible ? 'text' : 'password') : type"
-        :class="inputClasses"
-        :disabled="disabled"
-        :readonly="readonly"
-        :value="currentValue"
-        @input="handleInput"
-        @focus="handleFocus"
-        @blur="handleBlur"
-      />
-
-          <!-- 右侧功能区域 -->
-
-      <div
-        v-if="showRightSection"
-        class="vd-input-form__right"
-      >
-        <!-- 清除按钮 -->
-        <span v-if="showClear" class="vd-input-form__suffix">
-          <vd-icon name="icon_btn_clean" @mousedown.prevent.native="handleClear"></vd-icon>
-        </span>
-        <!-- (大数字的时候)设计要求的自定义文字 -->
-        <span v-if="hasAppend" class="vd-input-form__append">
-          <slot name="append">{{ append }}</slot>
-        </span>
-        <!-- 字数限制 -->
-        <div
-          v-if="isWordLimitVisible"
-          :class="wordLimitClasses"
-        >
-          <span>{{ textLength }}</span
-          >/<span>{{ upperLimit }}</span>
-        </div>
-      </div>
-      <!-- 密码的时候,单独的清空按钮 -->
-      <span
-        v-if="showPasswordControls"
-        class="vd-input-form__password"
-      >
-        <span v-if="showPasswordClear" class="vd-input-form__password--close">
-            <vd-icon name="icon_btn_close" @mousedown.prevent.native="handleClear"></vd-icon>
-        </span>
-        <span v-if="showPasswordIcon" class="vd-input-form__password--password">
-            <vd-icon
-              :name="passwordVisible ? 'icon_btn_eye' : 'icon_btn_eye_close'"
-              @click="handlePasswordVisible"
-            ></vd-icon>
-        </span>
-      </span>
-  </div>
-</template>
-
-<script>
-import VdIcon from '../icon';
-import calcTextareaHeight from "./calcTextareaHeight";
-const prefixCls = "vd-input";
-
-export default {
-  name: "vd-input",
-  components: {
-    VdIcon,
-  },
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    type: {
-      type: String,
-      default: "text",
-    },
-    prefix: {
-      type: [Boolean, String],
-      default: ''
-    },
-    borderRight: {
-      type: Boolean,
-      default: true
-    },
-    // 设计如此,单独的文字
-    append: {
-      type: [Boolean, String],
-      default: ''
-    },
-    error: {
-      type: Boolean,
-    },
-    bigSize: {
-      type: Boolean,
-    },
-    passwordIcon: {
-      type: Boolean,
-    },
-    passwordClose: {
-      type: Boolean,
-    },
-    // 输入框类型	 表单类型,常规输入库,搜索框
-    form: {
-      type: String,
-    },
-    disabled: {
-      type: Boolean,
-    },
-    rows: {
-      type: Number,
-      default: 2,
-    },
-    // 设计如此多行textarea,跟input属性一样
-    inputTextArea: {
-      type: Boolean,
-    },
-    warning: {
-      type: Boolean,
-    },
-    hairline: {
-      type: Boolean,
-      default: true,
-    },
-    autosize: {
-      type: [Boolean, Object],
-      default: false,
-    },
-    // 新增0118
-    showWordLimit: {
-      type: Boolean,
-      default: false,
-    },
-    clearable:Boolean,
-    readonly:Boolean
-  },
-  data() {
-    return {
-      focusClass: false,
-      currentValue: this.value,
-      textareaStyles: {},
-      passwordVisible: false,
-      focused: false,
-    };
-  },
-  computed: {
-    hasPrefix() {
-      return (this.prefix !== undefined && this.prefix !== '') || this.$slots.prefix;
-    },
-    // 是否显示右侧区域
-    showRightSection() {
-      return this.showClear || this.hasAppend || this.isWordLimitVisible;
-    },
-    // 是否有附加内容
-    hasAppend() {
-      return (this.append !== undefined && this.append !== '') || this.$slots.append;
-    },
-    // 是否显示清除按钮（假设已经在 computed 中定义）
-    showClear() {
-      return (
-        this.clearable &&
-        this.focused &&
-        this.currentValue !== '' &&
-        !this.disabled &&
-        !this.readonly
-      );
-    },
-    wordLimitClasses() {
-      return [
-        'vd-input__word-limit',
-        { 'vd-input__word-limit--error': this.isOverLimit },
-      ];
-    },
-    showPasswordClear() {
-      return (
-        this.passwordClose &&
-        this.focused &&
-        this.currentValue !== '' &&
-        !this.disabled &&
-        !this.readonly
-      );
-    },
-    showPasswordIcon() {
-      return this.passwordIcon && this.type === 'password';
-    },
-    showPasswordControls() {
-      return this.showPasswordClear || this.showPasswordIcon;
-    },
-    wrapClasses() {
-      return [
-        {
-          [`${prefixCls}-${this.form}`]: this.form,
-          [`${prefixCls}--disabled`]: this.disabled,
-          [`${prefixCls}-${this.type}`]: this.type,
-          [`${prefixCls}-${this.type}--warning`]: this.warning,
-          [`${prefixCls}--bigsize`]: this.bigSize,
-          [`${prefixCls}--error`]: this.error,
-          [`${prefixCls}--active`]: this.focused,
-          [`${prefixCls}-inputarea`]: this.inputTextArea,
-          "vd-hairline--bottom": this.hairline,
-          "vd-textarea-auto": this.inputTextArea,
-        },
-      ];
-    },
-    borderRightClasses(){
-      return [
-        "vd-hairline--right",
-        {
-          [`${prefixCls}--border`]: this.borderRight,
-        }
-      ]
-    },
-    inputClasses() {
-      return [
-        `${prefixCls}__control`,
-        {
-          [`${prefixCls}-${this.type}__control`]: this.type,
-        },
-      ];
-    },
-    // 当前输入的文本长度
-    textLength() {
-      if (typeof this.value === "number") {
-        return String(this.value).length;
-      }
-      return (this.value || "").length;
-    },
-    upperLimit() {
-      return this.$attrs.maxlength;
-    },
-    isWordLimitVisible() {
-      return (
-        this.showWordLimit &&
-        this.$attrs.maxlength &&
-        (this.type === "text" || this.type === "textarea")
-      );
-    },
-    isOverLimit() {
-      return this.textLength >= this.upperLimit;
-    },
-  },
-  methods: {
-    handleFocus(event) {
-      this.focused = true;
-      this.$emit("focus", event);
-
-      if (this.readonly) {
-        this.blur();
-      }
-    },
-    handleBlur(event) {
-      this.focused = false;
-      this.$emit("blur", event);
-    },
-    focus() {
-      if (this.type === "textarea") {
-        this.$refs.textarea && this.$refs.textarea.focus();
-      } else {
-        this.$refs.input && this.$refs.input.focus();
-      }
-    },
-    blur() {
-      if (this.type === "textarea") {
-        this.$refs.textarea && this.$refs.textarea.blur();
-      } else {
-        this.$refs.input && this.$refs.input.blur();
-      }
-    },
-
-    handleInput(event) {
-      let value = event.target.value;
-      this.$emit("input", value);
-      this.setCurrentValue(value);
-      this.$emit("change", event);
-    },
-
-    setCurrentValue(value) {
-      if (value === this.currentValue) return;
-      this.currentValue = value;
-      this.$nextTick(() => {
-        this.resizeTextarea();
-      });
-    },
-    resizeTextarea() {
-      if (!this.autosize || this.type !== "textarea") {
-        return;
-      }
-      const { minRows, maxRows } = this.autosize;
-      this.textareaStyles = calcTextareaHeight(
-        this.$refs.textarea,
-        minRows,
-        maxRows
-      );
-    },
-    handleClear() {
-      const e = { target: { value: "" } };
-      this.$emit("input", "");
-      this.setCurrentValue("");
-      this.$emit("change", e);
-      this.$emit("clear");
-      this.$nextTick(() => {
-        this.focus();
-      });
-    },
-
-    // 切换密码显示状态
-    handlePasswordVisible() {
-      this.passwordVisible = !this.passwordVisible;
-      this.$nextTick(() => {
-        this.focus();
-      });
-    },
-  },
-  watch: {
-    value(val) {
-      this.setCurrentValue(val);
-    },
-  },
-  mounted() {
-    this.resizeTextarea();
-  },
-};
-</script>
-
-<style lang="less">
-@import "./style.less";
-</style>
+<template>
+  <div :class="wrapClasses" class="vd-input">
+      <!-- 前缀，还有前缀右边框 -->
+      <span v-if="hasPrefix" class="vd-input-form__prefix" :class="borderRightClasses">
+        <slot name="prefix">{{ prefix }}</slot>
+      </span>
+      <textarea
+        v-if="type === 'textarea'"
+        ref="textarea"
+        v-bind="$attrs"
+        :rows="rows"
+        :class="inputClasses"
+        :disabled="disabled"
+        :readonly="readonly"
+        :value="currentValue"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @input="handleInput"
+        :style="textareaStyles"
+      >
+      </textarea>
+      <input
+        v-else
+        ref="input"
+        v-bind="$attrs"
+        :type="passwordIcon ? (passwordVisible ? 'text' : 'password') : type"
+        :class="inputClasses"
+        :disabled="disabled"
+        :readonly="readonly"
+        :value="currentValue"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+
+          <!-- 右侧功能区域 -->
+
+      <div
+        v-if="showRightSection"
+        class="vd-input-form__right"
+      >
+        <!-- 清除按钮 -->
+        <span v-if="showClear" class="vd-input-form__suffix">
+          <vd-icon name="icon_btn_clean" @mousedown.prevent.native="handleClear"></vd-icon>
+        </span>
+        <!-- (大数字的时候)设计要求的自定义文字 -->
+        <span v-if="hasAppend" class="vd-input-form__append">
+          <slot name="append">{{ append }}</slot>
+        </span>
+        <!-- 字数限制 -->
+        <div
+          v-if="isWordLimitVisible"
+          :class="wordLimitClasses"
+        >
+          <span>{{ textLength }}</span
+          >/<span>{{ upperLimit }}</span>
+        </div>
+      </div>
+      <!-- 密码的时候,单独的清空按钮 -->
+      <span
+        v-if="showPasswordControls"
+        class="vd-input-form__password"
+      >
+        <span v-if="showPasswordClear" class="vd-input-form__password--close">
+            <vd-icon name="icon_btn_close" @mousedown.prevent.native="handleClear"></vd-icon>
+        </span>
+        <span v-if="showPasswordIcon" class="vd-input-form__password--password">
+            <vd-icon
+              :name="passwordVisible ? 'icon_btn_eye' : 'icon_btn_eye_close'"
+              @click="handlePasswordVisible"
+            ></vd-icon>
+        </span>
+      </span>
+  </div>
+</template>
+
+<script>
+import VdIcon from '../icon';
+import calcTextareaHeight from "./calcTextareaHeight";
+const prefixCls = "vd-input";
+
+export default {
+  name: "vd-input",
+  components: {
+    VdIcon,
+  },
+  props: {
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+    type: {
+      type: String,
+      default: "text",
+    },
+    prefix: {
+      type: [Boolean, String],
+      default: ''
+    },
+    borderRight: {
+      type: Boolean,
+      default: true
+    },
+    // 设计如此,单独的文字
+    append: {
+      type: [Boolean, String],
+      default: ''
+    },
+    error: {
+      type: Boolean,
+    },
+    bigSize: {
+      type: Boolean,
+    },
+    passwordIcon: {
+      type: Boolean,
+    },
+    passwordClose: {
+      type: Boolean,
+    },
+    // 输入框类型	 表单类型,常规输入库,搜索框
+    form: {
+      type: String,
+    },
+    disabled: {
+      type: Boolean,
+    },
+    rows: {
+      type: Number,
+      default: 2,
+    },
+    // 设计如此多行textarea,跟input属性一样
+    inputTextArea: {
+      type: Boolean,
+    },
+    warning: {
+      type: Boolean,
+    },
+    hairline: {
+      type: Boolean,
+      default: true,
+    },
+    autosize: {
+      type: [Boolean, Object],
+      default: false,
+    },
+    // 新增0118
+    showWordLimit: {
+      type: Boolean,
+      default: false,
+    },
+    clearable:Boolean,
+    readonly:Boolean
+  },
+  data() {
+    return {
+      focusClass: false,
+      currentValue: this.value,
+      textareaStyles: {},
+      passwordVisible: false,
+      focused: false,
+    };
+  },
+  computed: {
+    hasPrefix() {
+      return (this.prefix !== undefined && this.prefix !== '') || this.$slots.prefix;
+    },
+    // 是否显示右侧区域
+    showRightSection() {
+      return this.showClear || this.hasAppend || this.isWordLimitVisible;
+    },
+    // 是否有附加内容
+    hasAppend() {
+      return (this.append !== undefined && this.append !== '') || this.$slots.append;
+    },
+    // 是否显示清除按钮（假设已经在 computed 中定义）
+    showClear() {
+      return (
+        this.clearable &&
+        this.focused &&
+        this.currentValue !== '' &&
+        !this.disabled &&
+        !this.readonly
+      );
+    },
+    wordLimitClasses() {
+      return [
+        'vd-input__word-limit',
+        { 'vd-input__word-limit--error': this.isOverLimit },
+      ];
+    },
+    showPasswordClear() {
+      return (
+        this.passwordClose &&
+        this.focused &&
+        this.currentValue !== '' &&
+        !this.disabled &&
+        !this.readonly
+      );
+    },
+    showPasswordIcon() {
+      return this.passwordIcon && this.type === 'password';
+    },
+    showPasswordControls() {
+      return this.showPasswordClear || this.showPasswordIcon;
+    },
+    wrapClasses() {
+      return [
+        {
+          [`${prefixCls}-${this.form}`]: this.form,
+          [`${prefixCls}--disabled`]: this.disabled,
+          [`${prefixCls}-${this.type}`]: this.type,
+          [`${prefixCls}-${this.type}--warning`]: this.warning,
+          [`${prefixCls}--bigsize`]: this.bigSize,
+          [`${prefixCls}--error`]: this.error,
+          [`${prefixCls}--active`]: this.focused,
+          [`${prefixCls}-inputarea`]: this.inputTextArea,
+          "vd-hairline--bottom": this.hairline,
+          "vd-textarea-auto": this.inputTextArea,
+        },
+      ];
+    },
+    borderRightClasses(){
+      return [
+        "vd-hairline--right",
+        {
+          [`${prefixCls}--border`]: this.borderRight,
+        }
+      ]
+    },
+    inputClasses() {
+      return [
+        `${prefixCls}__control`,
+        {
+          [`${prefixCls}-${this.type}__control`]: this.type,
+        },
+      ];
+    },
+    // 当前输入的文本长度
+    textLength() {
+      if (typeof this.value === "number") {
+        return String(this.value).length;
+      }
+      return (this.value || "").length;
+    },
+    upperLimit() {
+      return this.$attrs.maxlength;
+    },
+    isWordLimitVisible() {
+      return (
+        this.showWordLimit &&
+        this.$attrs.maxlength &&
+        (this.type === "text" || this.type === "textarea")
+      );
+    },
+    isOverLimit() {
+      return this.textLength >= this.upperLimit;
+    },
+  },
+  methods: {
+    handleFocus(event) {
+      this.focused = true;
+      this.$emit("focus", event);
+
+      if (this.readonly) {
+        this.blur();
+      }
+    },
+    handleBlur(event) {
+      this.focused = false;
+      this.$emit("blur", event);
+    },
+    focus() {
+      if (this.type === "textarea") {
+        this.$refs.textarea && this.$refs.textarea.focus();
+      } else {
+        this.$refs.input && this.$refs.input.focus();
+      }
+    },
+    blur() {
+      if (this.type === "textarea") {
+        this.$refs.textarea && this.$refs.textarea.blur();
+      } else {
+        this.$refs.input && this.$refs.input.blur();
+      }
+    },
+
+    handleInput(event) {
+      let value = event.target.value;
+      this.$emit("input", value);
+      this.setCurrentValue(value);
+      this.$emit("change", event);
+    },
+
+    setCurrentValue(value) {
+      if (value === this.currentValue) return;
+      this.currentValue = value;
+      this.$nextTick(() => {
+        this.resizeTextarea();
+      });
+    },
+    resizeTextarea() {
+      if (!this.autosize || this.type !== "textarea") {
+        return;
+      }
+      const { minRows, maxRows } = this.autosize;
+      this.textareaStyles = calcTextareaHeight(
+        this.$refs.textarea,
+        minRows,
+        maxRows
+      );
+    },
+    handleClear() {
+      const e = { target: { value: "" } };
+      this.$emit("input", "");
+      this.setCurrentValue("");
+      this.$emit("change", e);
+      this.$emit("clear");
+      this.$nextTick(() => {
+        this.focus();
+      });
+    },
+
+    // 切换密码显示状态
+    handlePasswordVisible() {
+      this.passwordVisible = !this.passwordVisible;
+      this.$nextTick(() => {
+        this.focus();
+      });
+    },
+  },
+  watch: {
+    value(val) {
+      this.setCurrentValue(val);
+    },
+  },
+  mounted() {
+    this.resizeTextarea();
+  },
+};
+</script>
+
+<style lang="less">
+@import "./style.less";
+</style>