vue 如何从 0 实现自己的 UI 组件库之 Input 组件

一、vue 实现 ui 组件库之 Input 组件

1. 在项目的

   components

   文件夹中，建立一个

   input.vue

   文件，在

   template

   中，定义

   input

   组件，通过

   disabled

   控制按钮是否禁止的样式，通过

   placeholder

   控制输入框中的默认值。通过

   type

   控制密码框是否隐藏和显示，如果父组件传了

   show-password

   就判断是否需要切换，如果不传就不判断。通过

   name

   判断

   input

   输入框的名字，通过

   value

   判断

   input

   输入框的值，通过

   @input

   绑定输入事件

   handleInput

   。需要注意的是，

   value

   和

   @input

   是为了实现

   v-model

   双向数据绑定的功能。通过

   v-if

   判断

   showSuffix

   ，是否有图标。如果是有清空图标，绑定

   clear

   清空事件。如果是有显示密码的图标，绑定

   handlePassword

   显示密码事件，代码如下所示：

<template>
    <div class="jc-input" :class="{'jc-input--suffix': showSuffix}">
        <input class="jc-input__inner"
            :class="{'is-disabled': disabled}"
            :placeholder="placeholder"
            :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
            :name="name"
            :disabled="disabled"
            :value="value"
            @input="handleInput"
        >
        <span class="jc-input__suffix" v-if="showSuffix">
            <i class="jc-input__icon jc-icon-circle-close" v-if="clearable && value" @click="clear"></i>
            <i class="jc-input__icon jc-icon-view" v-if="showPassword" @click="handlePassword" :class="{'jc-icon-view-active': passwordVisible }"></i>
        </span>
    </div>
</template>
           

1. 在

   script

   中，定义

   name

   的值为

   JcInput

   ，定义

   data

   中的数据

   passwordVisible

   为

   false

   ，

   passwordVisible

   是用于控制是否显示密码框。在

   props

   中，定义

   placeholder

   的类型为

   String

   ，默认值为空；定义

   type

   的类型为

   String

   ，默认值为

   text

   ；定义

   name

   的类型为

   String

   ，默认值为空；定义

   disabled

   的类型为

   Boolean

   ，默认值为

   false

   ；定义

   value

   的类型为

   String

   ，默认值为空；定义

   clearable

   的类型为

   Boolean

   ，默认值为

   false

   ；定义

   showPassword

   的类型为

   Boolean

   ，默认值为

   false

   。在

   methods

   中，定义

   handleInput

   输入框输入事件，定义

   clear

   输入框清空事件，定义

   handlePassword

   输入框显示密码事件。在

   computed

   计算属性中，计算

   showSuffix

   是否显示清空或者是显示密码按钮，代码如下所示：

<script>
export default {
  name: 'JcInput',
  data () {
    return {
      passwordVisible: false
    }
  },
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    name: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    },
    clearable: {
      type: Boolean,
      default: false
    },
    showPassword: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', e.target.value)
    },
    clear () {
      this.$emit('input', '')
    },
    handlePassword () {
      this.passwordVisible = !this.passwordVisible
    }
  },
  computed: {
    showSuffix () {
      return this.clearable || this.showPassword
    }
  }
}
</script>
           

1. 在

   style

   中，定义

   input

   输入框中的一些样式，代码如下所示：

<style lang="scss" scoped>
.jc-input {
  width: 100%;
  position: relative;
  font-size: 14px;
  display: inline-block;
  .jc-input__inner {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;

    &:focus {
      outline: none;
      border-color: #409eff;
    }
    &.is-disabled {
      background-color: #f5f7fa;
      border-color: #e4e7ed;
      color: #c0c4cc;
      cursor: not-allowed;
    }
  }
}

.jc-input--suffix {
  .jc-input__inner {
    padding-right: 30px;
  }
  .jc-input__suffix {
    position: absolute;
    height: 100%;
    right: 10px;
    top: 0;
    line-height: 40px;
    text-align: center;
    color: #c0c4cc;
    transition: all .3s;
    z-index: 900;
    i {
      color: #c0c4cc;
      font-size: 14px;
      cursor: pointer;
      transition: color .2s cubic-bezier(.645,.045,.355,1);
    }
  }
}

.jc-icon-view-active {
    color: #409eff !important;
}
</style>

           

1. 这个

   Input

   按钮组件的参数支持，如下所示：

参数名称	参数描述	参数类型	默认值
placeholder	占位符	string	无
type	文本框类型(text/password)	string	text
disabled	禁用	boolean	false
clearable	是否显示清空按钮	boolean	false
show-password	是否显示密码切换按钮	boolean	false
name	name属性	string	无

1. 在

   main.js

   中，引入

   JcInput

   组件，并且全局注册组件，代码如下所示：

import JcInput from './components/input.vue'

Vue.component(JcInput.name, JcInput)
           

1. 在

   App.vue

   中，使用

   jc-input

   组件，使用

   placeholder

   定义输入框的默认值，使用

   type

   定义输入框的类型，使用

   name

   定义输入框的名字，使用

   v-model

   实现输入框的双向数据绑定，使用

   clearable

   实现清空输入框，使用

   show-password

   展示输入框的值，使用

   disabled

   禁止输入框输入。需要特别注意的是， 给组件使用

   v-model

   指令,实质上相当于给组件传递了

   value

   属性以及监听了

   input

   事件，也就是等价于

   <input type="text" :value="username" @input="username=$event.target.value">

   ，在

   data

   中定义

   username

   的值，代码如下所示：

<template>
  <div id="app">
    <jc-input placeholder="请输入用户名" type="text" name="username" v-model="username" clearable></jc-input>
    <jc-input placeholder="请输入密码" type="password" name="password" show-password></jc-input>
    <jc-input placeholder="请输入邮箱" type="text" disabled></jc-input>
    <jc-input></jc-input>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: ''
    }
  }
}
</script>

<style lang="scss">

.jc-input {
  width: 180px !important;
}
</style>
           

1. 在浏览器中输入

   http://localhost:8080/

   ，显示如下所示：