通过关键字搜索

初尘ljw

已于 2023-03-15 15:38:08 修改

阅读量88

点赞数

分类专栏： uniapp vue 文章标签： javascript uni-app

于 2023-03-15 15:29:39 首次发布

本文链接：https://blog.csdn.net/weixin_44784777/article/details/129557323

版权

uniapp 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

该代码示例展示了如何在Vue.js应用中创建一个具有搜索功能和下拉选择列表的组件。使用`u-search`组件，实现了搜索框的样式定制，包括背景色、边框颜色、占位符等属性，并通过数据绑定和事件监听处理选择项的点击和显示隐藏操作。

摘要由CSDN通过智能技术生成

<template>
   <view class="content">
       <u-search :showAction="true" actionText="搜索" :animation="true"
       placeholder="请输入关键字" bgColor="#f0f0f0" borderColor="#ff0000"
       searchIconColor="#3f3f3f" searchIconSize=18 margin="10px"
       :actionStyle="actionStyle" :label="choiceList[choiceIndex].one_name"
       searchIcon="arrow-down-fill" @clickIcon="btnShowHideClick"
       ></u-search>
       <view class="dialog-view" v-if="isShowChoice">
       <text :class="choiceIndex == index ?'dialog-title-selected':'dialog-title'"
       v-for="(item ,index) in choiceList" @click="btnChoiceClick(index)">{{item.one_name}}</text>
       </view>
   </view>
</template>
<script>
   export default {
       data() {
           return {
               choiceContent: '请选择',
               isShowChoice: false,
               choiceIndex: 0,
               choiceList: [
                   {
                       "one_id": 15,
                       "one_name": "牛奶",
                       "two_id": 0,
                       "two_name": "无"
                   },
                   {
                       "one_id": 11,
                       "one_name": "羊奶",
                       "two_id": 18,
                       "two_name": "酸奶"
                   },
                   {
                       "one_id": 11,
                       "one_name": "羊奶",
                       "two_id": 17,
                       "two_name": "芒果"
                   }
               ],
               actionStyle:{
                   background: 'linear-gradient(180deg, #01A2F0 0%, #76D8E4 100%)',
                   borderRadius: '8px',
                   fontSize: '14px',
                   color: '#FFFFFF',
                   lineHeight: '30px',
                   border: 'none',
                   margin:'6px'
               },
               keyword:""
           }
       },
       methods: {
           // 选择
           btnChoiceClick(index){
               console.log(index)
               this.choiceIndex = index
           this.choiceContent = this.choiceList[index]
           },
           // 显示与隐藏选择内容
           btnShowHideClick() {
           this.isShowChoice = !this.isShowChoice
           }
       }
   }
</script>
<style>
   .dialog-view {
   display: flex;
   flex-direction: column;
   justify-content: center;
       text-align: center;
       font-size: 14px;
       margin-left: 10px;
   width: 100px;
   border: 1rpx solid #e7e7e7;
   box-sizing: border-box;
       border-radius: 15px;
       padding: 10px 0px;
       background-color: white;
   }
   .dialog-title {
   color: black;
   background-color: white;
       padding: 5px 0px;
   }
   .dialog-title-selected {
   color: white;
   background-color: #ff87a3;
       padding: 5px 0px;
   }
</style>