uniapp之封装公共的搜索控件

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

效果图如下：

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

.uni-searchbar{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}
   .uni-searchbar-form__box {
       display: flex;
       flex: 1;
       align-items: center;
       width: 100%;
       height: 64rpx;
       color: #c8c7cc;
       background: #fff;
       border: solid 1px #c8c7cc;
       border-radius: 10rpx
   }

   .uni-searchbar-form__box .icon-search {
       color: #c8c7cc;
       line-height: 24px;
       padding: 0rpx 10rpx 0rpx 15rpx
   }

   .uni-searchbar-form__box .search-input {
       flex: 1;
       font-size: 20rpx;
       height: 64rpx;
       line-height: 64rpx;
       color: #333
   }

   .uni-searchbar-form__box .icon-clear {
       color: #c8c7cc;
       line-height: 20px;
       padding: 0rpx 15rpx 0rpx 10rpx
   }

   .uni-searchbar-form__text {
       display: flex;
       flex: 1;
       align-items: center;
       width: 100%;
       height: 64rpx;
       line-height: 64rpx;
       text-align: center;
       color: #c8c7cc;
       background: #fff;
       border: solid 1px #c8c7cc;
       border-radius: 10rpx;
       display: none
   }

   .uni-searchbar-form__text .icon-search {
       height: 64rpx;
       line-height: 64rpx
   }

   .uni-searchbar-form__text .placeholder {
       display: inline-block;
       font-size: 28rpx;
       color: #ccc;
       margin-left: 10rpx
   }
   .searchButton{
       height: 64rpx;
       margin-left:20upx;
       border-radius: 20upx;
       line-height: 64rpx;
       font-size: 20upx;
   }

</style>

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

<view class="searchBox">
               <uniSearch
               placeholder="输入工作项执行人或项目名称"
               radius="100"
               clearButton="auto"
               @searchClick="searchData">
               </uniSearch>
           </view>

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

export default {
       components:{
           uniSearch
       },

}

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

}

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

   .uni-icon-wrapper {
       line-height: 1;
   }

   .uni-icon {
       font-family: uniicons;
       font-weight: normal;
       font-style: normal;
       line-height: 1;
       display: inline-block;
       text-decoration: none;
       -webkit-font-smoothing: antialiased;
   }

   .uni-icon.uni-active {
       color: #007aff;
   }

   .uni-icon-contact:before {
       content: '\e100';
   }

   .uni-icon-person:before {
       content: '\e101';
   }

   .uni-icon-personadd:before {
       content: '\e102';
   }

   .uni-icon-contact-filled:before {
       content: '\e130';
   }

   .uni-icon-person-filled:before {
       content: '\e131';
   }

   .uni-icon-personadd-filled:before {
       content: '\e132';
   }

   .uni-icon-phone:before {
       content: '\e200';
   }

   .uni-icon-email:before {
       content: '\e201';
   }

   .uni-icon-chatbubble:before {
       content: '\e202';
   }

   .uni-icon-chatboxes:before {
       content: '\e203';
   }

   .uni-icon-phone-filled:before {
       content: '\e230';
   }

   .uni-icon-email-filled:before {
       content: '\e231';
   }

   .uni-icon-chatbubble-filled:before {
       content: '\e232';
   }

   .uni-icon-chatboxes-filled:before {
       content: '\e233';
   }

   .uni-icon-weibo:before {
       content: '\e260';
   }

   .uni-icon-weixin:before {
       content: '\e261';
   }

   .uni-icon-pengyouquan:before {
       content: '\e262';
   }

   .uni-icon-chat:before {
       content: '\e263';
   }

   .uni-icon-qq:before {
       content: '\e264';
   }

   .uni-icon-videocam:before {
       content: '\e300';
   }

   .uni-icon-camera:before {
       content: '\e301';
   }

   .uni-icon-mic:before {
       content: '\e302';
   }

   .uni-icon-location:before {
       content: '\e303';
   }

   .uni-icon-mic-filled:before,
   .uni-icon-speech:before {
       content: '\e332';
   }

   .uni-icon-location-filled:before {
       content: '\e333';
   }

   .uni-icon-micoff:before {
       content: '\e360';
   }

   .uni-icon-image:before {
       content: '\e363';
   }

   .uni-icon-map:before {
       content: '\e364';
   }

   .uni-icon-compose:before {
       content: '\e400';
   }

   .uni-icon-trash:before {
       content: '\e401';
   }

   .uni-icon-upload:before {
       content: '\e402';
   }

   .uni-icon-download:before {
       content: '\e403';
   }

   .uni-icon-close:before {
       content: '\e404';
   }

   .uni-icon-redo:before {
       content: '\e405';
   }

   .uni-icon-undo:before {
       content: '\e406';
   }

   .uni-icon-refresh:before {
       content: '\e407';
   }

   .uni-icon-star:before {
       content: '\e408';
   }

   .uni-icon-plus:before {
       content: '\e409';
   }

   .uni-icon-minus:before {
       content: '\e410';
   }

   .uni-icon-circle:before,
   .uni-icon-checkbox:before {
       content: '\e411';
   }

   .uni-icon-close-filled:before,
   .uni-icon-clear:before {
       content: '\e434';
   }

   .uni-icon-refresh-filled:before {
       content: '\e437';
   }

   .uni-icon-star-filled:before {
       content: '\e438';
   }

   .uni-icon-plus-filled:before {
       content: '\e439';
   }

   .uni-icon-minus-filled:before {
       content: '\e440';
   }

   .uni-icon-circle-filled:before {
       content: '\e441';
   }

   .uni-icon-checkbox-filled:before {
       content: '\e442';
   }

   .uni-icon-closeempty:before {
       content: '\e460';
   }

   .uni-icon-refreshempty:before {
       content: '\e461';
   }

   .uni-icon-reload:before {
       content: '\e462';
   }

   .uni-icon-starhalf:before {
       content: '\e463';
   }

   .uni-icon-spinner:before {
       content: '\e464';
   }

   .uni-icon-spinner-cycle:before {
       content: '\e465';
   }

   .uni-icon-search:before {
       content: '\e466';
   }

   .uni-icon-plusempty:before {
       content: '\e468';
   }

   .uni-icon-forward:before {
       content: '\e470';
   }

   .uni-icon-back:before,
   .uni-icon-left-nav:before {
       content: '\e471';
   }

   .uni-icon-checkmarkempty:before {
       content: '\e472';
   }

   .uni-icon-home:before {
       content: '\e500';
   }

   .uni-icon-navigate:before {
       content: '\e501';
   }

   .uni-icon-gear:before {
       content: '\e502';
   }

   .uni-icon-paperplane:before {
       content: '\e503';
   }

   .uni-icon-info:before {
       content: '\e504';
   }

   .uni-icon-help:before {
       content: '\e505';
   }

   .uni-icon-locked:before {
       content: '\e506';
   }

   .uni-icon-more:before {
       content: '\e507';
   }

   .uni-icon-flag:before {
       content: '\e508';
   }

   .uni-icon-home-filled:before {
       content: '\e530';
   }

   .uni-icon-gear-filled:before {
       content: '\e532';
   }

   .uni-icon-info-filled:before {
       content: '\e534';
   }

   .uni-icon-help-filled:before {
       content: '\e535';
   }

   .uni-icon-more-filled:before {
       content: '\e537';
   }

   .uni-icon-settings:before {
       content: '\e560';
   }

   .uni-icon-list:before {
       content: '\e562';
   }

   .uni-icon-bars:before {
       content: '\e563';
   }

   .uni-icon-loop:before {
       content: '\e565';
   }

   .uni-icon-paperclip:before {
       content: '\e567';
   }

   .uni-icon-eye:before {
       content: '\e568';
   }

   .uni-icon-arrowup:before {
       content: '\e580';
   }

   .uni-icon-arrowdown:before {
       content: '\e581';
   }

   .uni-icon-arrowleft:before {
       content: '\e582';
   }

   .uni-icon-arrowright:before {
       content: '\e583';
   }

   .uni-icon-arrowthinup:before {
       content: '\e584';
   }

   .uni-icon-arrowthindown:before {
       content: '\e585';
   }

   .uni-icon-arrowthinleft:before {
       content: '\e586';
   }

   .uni-icon-arrowthinright:before {
       content: '\e587';
   }

   .uni-icon-pulldown:before {
       content: '\e588';
   }

   .uni-icon-closefill:before {
       content: '\e589';
   }

   .uni-icon-sound:before {
       content: '\e590';
   }

   .uni-icon-scan:before {
       content: '\e612';
   }
</style>

web前端_CC

发布了38 篇原创文章 · 获赞 40 · 访问量 1万+

私信关注

uniapp之封装公共的搜索控件

猜你喜欢