uniapp-自定义下拉菜单，点击选项绑定数据

生成展示：

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.labelthis.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>

uniapp-自定义下拉菜单，点击选项绑定数据相关推荐

Excel 自定义下拉菜单
在Excel中,我们经常用到自定义下拉菜单.普通方法制作的自定义下拉菜单有个小缺点,就是下拉菜单无法自动将数据源的列表去重,而且使用的函数也比较复杂.其实,只要用好Power Query,外加INDI ...
Android m 自定义下拉菜单,Android实现动画效果的自定义下拉菜单功能
我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...
android 自定义下拉菜单
本实例的自定义下拉菜单主要是继承PopupWindow类来实现的弹出窗体,各种布局效果可以根据自己定义设计.弹出的动画效果主要用到了translate.alpha.scale,具体实现步骤如下: 先上 ...
uniapp 自定义下拉框
uniapp 自定义下拉框根据 https://gitee.com/kcren/uniapp-dropdown-filter/tree/master 自己加了一层封装可以进行切换选择下拉内容模板 ...
jQuery实现下拉菜单(点击显示/隐藏)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...
element 表单下拉菜单点击上下箭头失效
element 表单下拉菜单点击上下箭头失效使用表单的Form-Item Slot 把label改成下拉菜单,然后点击箭头图标不触发下拉事件解决办法:el-form-item上一定要加上prop ...
Android 自定义下拉菜单的实现（基于PopupWindow+RecyclerView）
文章目录一.引言二.效果三.代码实现四.结语一.引言安卓自带的Spinner局限性较大,基本不能满足开发样式要求,当前又没有成熟的相关框架,所以决定自己使用PopupWindow实现一个下 ...
java 获取下拉框的值_Java获取下拉菜单选中的选项
提到这样一个需求"在新闻表中添加新闻分类的编号和名字",一般情况下我们将分类的ID放在下拉菜单选项的value中,此时需要获取选项的编号和名字,我们该怎么做呢?我常用的有如下两种方 ...
自定义的下拉菜单点击空白处怎么收回菜单
1.采用遮罩方式在该组件层下添加点击事件 2. document.addEventListener('click', this.hideMenu); hideMenu = () => { ...

uniapp-自定义下拉菜单，点击选项绑定数据

uniapp-自定义下拉菜单，点击选项绑定数据相关推荐

最新文章

热门文章