This is the 17th day of my participation in the August Text Challenge.More challenges in August

Vue2 UI component library (1), Vue2 UI component library (2) from 0 to write down how to package the input component.

Encapsulate the INPUT component

1. Parameter support

1.1. Set placeholder, Type, Disabled, name attributes

Get the properties passed in by the user with props, and then add the corresponding properties and class names to the native input to display the different styles by controlling the class names.

<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,}}};Copy the code

1.2. Set the value property

Users usually use v-model when using the value attribute, which is equivalent to setting the value attribute and calling the input event. For example, v-model=”username” equals to :value=”username” @input=”username=$event.target.value”.

So we need to set an input event to trigger the user’s input event after receiving the value with props.

<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>
Copy the code

1.3. Set the clearable and showPassword properties

Set the Clearable property

• Props receives the clearable attribute passed by the user. If clearable is true and value has a value, add the clear icon.
• Click on the clear icon to clear the value, so you need to add a click event to the clear icon.
• Since the value was passed in by the user, you need to use $emit to trigger the user component to change the value.

Set the showPassword attribute

• Accept the showPassword property passed by the user with props, and add the eye icon when showPassword is true.
• Set passwordVisible to show and hide passwords.
• Click on the eye icon to switch the password to show hidden state, so you need to add a click event to the eye icon and change the value of passwordVisible.
• The password is displayed and hidden according to the type attribute of the input. Therefore, it is determined whether the input showPassword is true. If it is not true, the input type is directly used. If it is true, it checks whether passwordVisible is true; if it is not true, it is in the password state; if it is true, it is in the text state.

<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>
Copy the code

2. Event support