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

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

文章图片
FireShot Capture 14 - nvx - http___localhost_8080_demo#_TextFile.png
组件结构：

代码分析： 【Vue组件开发系列之TextFile输入框组件】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