uniapp之封装公共的搜索控件

为了增加代码的复用性，多次重复的

效果图如下：

 

1、在componts文件夹下创建一个uni-search.vue的文件     

2、去相应的界面进行引用

            
                                    placeholder="输入工作项执行人或项目名称" 
                   radius="100" 
                   clearButton="auto" 
                   @searchClick="searchData">
                
            

import uniSearch from '@/components/uni-search.vue'

export default {
        components:{
            uniSearch
        },

}

methods:{
            /**
             * 搜索按钮
             */
            searchData(val){
                // val 为input框上输入的值
                console.log(val,'ggg')
            },

}

 

附：uni-icons.vue文件是对字体图标库的封装，uniapp模板实例中有，可以直接拿来用。