利用element-ui实现商品搜索，以及详情抽屉

假定我们有不同品类的各种商品，现在需要实现搜索功能，可以根据关键字搜索，也可以根据具体的品类进行搜索。

这里我们的思路是，当你改动条件框内的数据时候，数据同步到对应的参数中，当你点击按钮的时候，这些参数就会被传递到对应的接口请求数据。一旦请求的数据改变，那么与之绑定的视图也随之改变。

首先，我们来看看基本页面结构。

这块利用element-ui可以快速搭建出来

<!-- 顶部搜索框 -->
        <el-form  ref="searchForm" :model="searchParams" label-width="80px" inline>
            <el-form-item label="搜索" prop="search">
                <el-input v-model="searchParams.search"></el-input>
            </el-form-item>
        <el-form-item label="分类" prop="category">
                <el-select v-model="searchParams.category" placeholder="fenlei">
                <el-option label="全部" value=""></el-option>
                <el-option v-for="(item, index) in categoryList" :key="index" :label="item.trim()" :value="item.trim()">
                        </el-option>
                </el-select>
                
            </el-form-item>
            <el-form-item>
                    <el-button type="primary" @click="searchHandler">搜索</el-button>
                    <el-button type="primary" @click="resetHandler">重置</el-button>
                </el-form-item>

        </el-form>
        

接着利用element-ui还可以实现一个抽屉效果

抽屉默认是不可见的，当点击按钮触发后，才会将其设置为true,同时发送对应的请求。

 <!--抽屉效果 -->
            <el-drawer title="商品详情" :visible.sync="drawer" direction="rtl" size="40%" :before-close="handleClose">
                <!-- 插槽内容 => 抽屉中的内容 -->
                <el-main>
                    <el-descriptions title="商品详情" direction="vertical" :column="1" border>
                        <el-descriptions-item label="商品名称">{{ info.proname }}</el-descriptions-item>
                        <el-descriptions-item label="品牌">{{ info.brand }}</el-descriptions-item>
                        <el-descriptions-item label="分类">{{ info.category }}</el-descriptions-item>
                        <el-descriptions-item label="商品图片">
                            <el-image :src="info.img1" :preview-src-list="info.banners"></el-image>
                        </el-descriptions-item>
                        <el-descriptions-item label="详情">
                            {{ info.desc }}
                        </el-descriptions-item>
                        <el-descriptions-item label="商品价格">
                            {{ (info.originprice * info.discount / 10).toFixed(2) }}
                        </el-descriptions-item>
                        <el-descriptions-item label="是否在售">
                            {{ info.issale ? "在售" : "已下架" }}
                        </el-descriptions-item>
                        <el-descriptions-item label="库存">
                            {{ info.issale ? info.stock : 0 }}
                        </el-descriptions-item>
                        <el-descriptions-item label="销量">
                            {{ info.sales }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-main>
            </el-drawer>
            ```