生成展示:
view部分
<template>
<view class="body">
<view class="gender">
<view class="wu" @click="isShow">
<view class="wuLeft">
<image src="../../static/92.png"></image>
</view>
<view class="wuRight">
<input type="text" value="" placeholder="选择货物名称" v-model="goods" />
<!--<ep-select v-model="select" :options="options" @change="change"></ep-select>-->
</view>
<view class="jian">
<image src="../../static/100.png"></image>
</view>
</view>
<view class="dropDown" v-if="goodsShow==1">
<view class="dropItem" v-for="(item,index) in options" :key="index" @click="selectGoods(index,item)">
<view class="dropItemLeft">
<text>{{item.value}}.</text>
</view>
<view class="dropItemCenter">
<text>{{item.label}}</text>
</view>
<view class="dropItemRight">
<image v-if="active==index" src="../../static/true.png" mode=""></image>
</view>
</view>
</view>
</view>
</view>
</template>
js部分
<script>
export default {
data() {
return {
goodsShow: 0,
goods: '',
options: [{
value: "1",
label: "70A"
},
{
value: "2",
label: "韩国双龙"
},
{
value: "3",
label: "改性沥青"
},
{
value: "4",
label: "高标改性"
},
{
value: "5",
label: "PG76-22改性"
},
{
value: "6",
label: "高粘改性"
},
{
value: "7",
label: "其他(手动填写)",
disabled: true
}
],
}
},
methods: {
isShow() {
if (this.goodsShow == 1) {
this.goodsShow = 0
} else {
this.goodsShow = 1
}
},
selectGoods(num, item) {
if (num == 6) {
this.goods = ''
this.goodsShow = 0
} else {
this.goods = item.label
this.goodsShow = 0
}
this.active = num
},
}
}
</script>
css部分
<style>
.wu {
width: 652rpx;
/*输入下划线*/
/* border: 1rpx solid red; */
height: 90rpx;
border-bottom: 1rpx solid #D9D9D9;
display: flex;
align-items: center;
margin: 0 auto;
}
.wuLeft {
margin-left: 28rpx;
}
.wuRight {
margin-left: 14rpx;
}
.wuLeft>image {
width: 50rpx;
height: 50rpx;
}
.jian>image {
width: 50rpx;
height: 50rpx;
margin-left: 310rpx;
}
.dropDown {
width: 652rpx;
height: 442rpx;
background: #FFFFFF;
box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.16);
margin: 0 auto;
position: absolute;
top: 100rpx;
z-index: 999;
margin-left: 22rpx;
padding: 18rpx 0rpx;
}
.dropItem {
display: flex;
margin-top: 20rpx;
/* border: 1rpx solid red; */
align-items: center;
height: 40rpx;
}
.dropItemLeft {
margin-left: 70rpx;
font-size: 14px;
font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
font-weight: 400;
color: #444448;
}
.dropItemCenter {
width: 300rpx;
height: 40rpx;
margin-left: 20rpx;
}
.dropItemRight {
margin-left: 150rpx;
}
.dropItemRight>image {
width: 42rpx;
height: 42rpx;
}
</style>