組件源碼：
https://github.com/AntJavascript/widgetUI/tree/master/TextField

FireShot Capture 14 - nvx - http___localhost_8080_demo#_TextFile.png

<template>
    <div class='wt-TextField'>
        <input :type="type" :maxlength="max" v-model="val" :placeholder="placeholder" @blur="blur" @change="change" @input="input" @focus="focus"/>
        <i class="icon-close-fill" @click="clearValue" v-if="clear != undefined"></i>
    </div>
</template>

代碼分析：

props參數：

props: {
    type: { // 輸入框類型
      type: String,
      default: () => {
        return 'text';
      }
    },
    max: { // 最大輸入長度
      type: String | Number,
      default: () => {
        return '';
      }
    },
    placeholder: { // 默認顯示提示語
      type: String,
      default: () => {
        return '';
      }
    },
    clear: { // 是否顯示清除按鈕
      type: String,
      default: () => {
        return undefined;
      }
    }
  }

data參數：

data () {
    return {
      val: '' // 輸入框的值
    };
  }

methods函數：

methods: {
    // 失去焦點
    blur () {
      this.$emit('blur', event.target.value);
    },
    // change事件
    change () {
      this.$emit('change', event.target.value);
    },
    // input事件
    input () {
      this.$emit('input', event.target.value);
    },
    // focus事件
    focus () {
      this.$emit('focus', event.target.value);
    },
    // 清理輸入內容
    clearValue () {
      this.val = '';
    }
  }

css代碼：

.wt-TextField {
        height: 1.5rem;
        position: relative;
        padding: 0.5rem;
        display: flex;
        i {
            background: #fff;
            width: 1.5rem;
            line-height: 1.5rem;
            color: #cacaca;
            text-align: center;
        }
        input {
            outline: none;
            -webkit-appearance: none;
            background: #fff;
            border: 0;
            height: 1.5rem;
            width: 100%;
            display: block;
            padding-left: 0.2rem;
            box-sizing: border-box;
            &::-webkit-search-cancel-button{
                display: none;
            }
        }
    }

組件源碼：
https://github.com/AntJavascript/widgetUI/tree/master/TextField