封装一个简单的小程序、uni、mpvue的搜索框组件吧

这篇文章比较偏向新手一点，主要是讲平时封装自己用的组件的结构，暴露方法，复用性拓展的一些心得。
需求：
750设计稿
1、默认样式如下

image.png

2、聚焦时的样式如下

image.png

3、输入文字时出现清空按钮

image.png

思考：考虑到组件的复用性和拓展性，我们需要考虑的点大致有一下几点

• 组件样式不影响父组件，可灵活使用
• 用户聚焦时，需要告知父组件
• 监听输入框的input事件，通知父组件
• 用户输入内容，点击键盘上的搜索键时，需要告知父组件，并把关键字传递给父组件
• 点击取消时，清空输入框内容，并告知父组件

CSS样式就不多说了，主要是监听focus来判断输入框的宽度就行。
下面来考虑组件变化时如何通知父组件
页面简单结构

<template>
<view>
<input 
@confirm="confirm" 
@focus="focus"
@input="change"
confirm-type="search"
:type="type" 
:placeholder="placeholder" 
>
<text>取消</text>
<view>组件的其他内容</view>
</view>
</template>

我们封装组件时，需要尽量考虑到使用成本问题，因此最好的方法就是使用大家都熟悉的方法或者直接使用原生组件的方法名
JS部分

export default {
  methods: {
    focus() {
        this.$emit('focus');
    },
    change(e) {
        this.$emit('change', e.detail.value);
    },
    confirm(e) {
        this.$emit('confirm', e.detail.value);
    },
  }
}

父组件使用部分

<template> 
 <view>
  <search @focus="searchFocus" @change="searchChange" @confirm="searchConfirm"></search>
 </view> 
</template>

<script>
import search from './search.vue'
export default {
    components:{search,},
    methods: {
        searchFocus() {
            //...
        },
        searchChange(val) {
            console.log(val)
        },
        searchConfirm(val) {
            console.log(val)
        },
    }
}
</script>

总结

1、组件的二次封装很简单，从工作速度的优点来看，我们的组件主要是为了简单、易使用、省事，所以在封装的时候需要想到方法命名问题。

2、随着业务的拓展，我们也需要为组件预留相应的空间，方便以后的业务拓展，增加组件的功能。

3、在写组件的css样式时，尽量由父组件来控制组件的宽高，padding，margin等问题；或者传入参数来控制组件的样式，做到更加的灵活，减少两个组件的耦合度。