一、封装input组件

1.参数支持

参数名	参数类型	参数说明	默认值
placeholder	string	占位符	无
type	string	类型	text
disabled	boolean	禁用	false
name	string	name属性	无
clearable	boolean	是否显示清空按钮	false
show-password	boolean	是否显示密码显示按钮	false

1.1. 设置placeholder、type、disabled、name属性

用props获取用户传进来的属性，然后给原生input加上对应的属性和类名，通过控制类名来展示不同的样式。

<template>
  <div class="zh-input">
    <input
      class="zh-input__inner"
      :class="{ 'is-disabled': disabled }"
      :type="type"
      :placeholder="placeholder"
      :name="name"
      :disabled="disabled"
    />
  </div>
</template>
<script>
export default {
  name: "ZhInput",
  props: {
    type: {
      type: String,
      default: "text",
    },
    placeholder: {
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
};

1.2. 设置value属性

用户在使用value属性时通常是用v-model,v-model相当于设置value属性和调用input事件。例如：v-model="username"相当于:value="username" @input="username=$event.target.value"。

所以我们在用props接收value之后，还要设置一个input事件来触发用户的input事件。

<template>
  <div class="zh-input">
    <input
      ...
      :value="value"
      @input="handleInput"
    >
  </div>
</template>
<script>
export default {
  name: "ZhInput",
  props: {
    ......
    value: {
      type: String,
      default: ""
    }
  },
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value);
    }
  }
};
</script>

1.3. 设置clearable、showPassword属性

设置clearable属性

用props接收用户传入的clearable属性，当clearable为true且value有值时，加上清除图标。
点击清除图标时要清除value值，所以需要给清除图标添加click事件。
由于value值是用户传进来的，所以需要用$emit触发用户组件改变value值。

设置showPassword属性

用props接收用户传入的showPassword属性，当showPassword为true时，加上眼睛图标。
设置一个passwordVisible，用来表示密码的显示隐藏。
点击眼睛图标时要切换密码显示隐藏状态，所以需要给眼睛图标添加click事件，修改passwordVisible的值。
密码的显示隐藏是根据切换input的type属性，所以先判断用户传入showPassword是否为true,若不为true，则直接使用用户传入的type类型，若为true则判断passwordVisible是否为true,若不为true则为密码状态，若为true则为text状态。

<template>
  <div class="zh-input" :class="{'zh-input--suffix': showSuffix}">
    <input
      ......
      :type="showPassword ? (passwordVisible ? 'text': 'password') : type"
    >
    <span class="zh-input__suffix" v-if="showSuffix">
      <i class="zh-input__icon zh-icon-qingchu1" v-if="clearable && value" @click="clear"></i>
      <i
        class="zh-input__icon zh-icon-yanjing"
        v-if="showPassword"
        :class="{'zh-icon-view-active': passwordVisible}"
        @click="handlePassword"
      ></i>
    </span>
  </div>
</template>
<script>
export default {
  name: "ZhInput",
  data() {
    return {
      passwordVisible: false
    };
  },
  props: {
    ......
    clearable: {
      type: Boolean,
      default: false
    },
    showPassword: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    showSuffix() {
      return this.clearable || this.showPassword;
    }
  },
  methods: {
    ....
    clear() {
      this.$emit("input", "");
    },
    handlePassword() {
      this.passwordVisible = !this.passwordVisible;
    }
  }
};
</script>

2.事件支持

事件名称	事件概述
blur	失去焦点事件
change	内容改变事件
focus	获取的焦点事件

系列文章

以下是从0搭建Vue2 UI组件库系列的文章，有需要的同学请冲~~ 从0搭建Vue2 UI组件库（一）