Vue组件开发系列之TextFile输入框组件

组件源码：
https://github.com/AntJavascript/widgetUI/tree/master/TextField

FireShot Capture 14 - nvx - http___localhost_8080_demo#_TextFile.png

组件结构：

代码分析：

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