AI 助理
备案控制台
开发者社区 人工智能 文章 正文

uview下拉菜单Dropdown整合个性化下拉

2024-10-15 10
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： uview下拉菜单Dropdown整合个性化下拉

该组件必须结合u-dorpdown和u-dropdown-item一起使用，展开的内容由u-dropdown-item通过传递参数或者slot提供

u-dropdown-item每个独立下拉菜单

组件的菜单栏标题由u-dropdown-item通过title参数提供

u-dropdown-item带有默认的单选展示功能，通过options(见下方说明)配置，传入slot则会覆盖默认功能，通过v-model双向绑定options选中项的value值

<template>
  <view class="container container21094">
    <view class="flex diygw-dropdown diygw-col-24">
      <u-dropdown class="flex-sub" direction="down" ref="refDropdowns">
        <u-dropdown-item @change="changeDropdowns0" v-model="dropdowns0" title="菜单一" :options="dropdownsDatas0"></u-dropdown-item>
        <u-dropdown-item @change="changeDropdowns1" v-model="dropdowns1" title="菜单二" :options="dropdownsDatas1"></u-dropdown-item>
      </u-dropdown>
    </view>
    <view class="clearfix"></view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        //用户全局信息
        userInfo: {},
        //页面传参
        globalOption: {},
        //自定义全局变量
        globalData: {},
        dropdowns0: '',
        dropdowns1: '',
        dropdownsDatas0: [
          { text: '全部商品', value: '0' },
          { text: '新款商品', value: '1' },
          { text: '活动商品', value: '2' }
        ],
        dropdownsDatas1: [
          { text: '默认排序', value: '0' },
          { text: '好评排序', value: '1' },
          { text: '销量排序', value: '2' }
        ]
      };
    },
    onShow() {
      this.setCurrentPage(this);
    },
    onLoad(option) {
      this.setCurrentPage(this);
      if (option) {
        this.setData({
          globalOption: this.getOption(option)
        });
      }
 
      this.init();
    },
    methods: {
      async init() {},
      closeDropdowns() {
        this.$refs.refDropdowns.close();
      },
      changeDropdowns0(evt) {
        let item = this.dropdownsDatas0.find((item) => {
          return item.value == evt;
        });
        item && item.action && this.navigateTo(item.action);
      },
      changeDropdowns1(evt) {
        let item = this.dropdownsDatas1.find((item) => {
          return item.value == evt;
        });
        item && item.action && this.navigateTo(item.action);
      }
    }
  };
</script>
 
<style lang="scss" scoped>
  .container21094 {
  }
</style>

配置选项卡默认功能

如上所示，u-dropdown-item具有默认的单选功能，这里主要讲解其options和v-model参数：

options参数为一个数组，元素为对象，其中label为需要展示的提示文字，value为点击时双向绑定给v-model的值，v-model初始化时如果设置 某个options中的value，则该条目将会被默认选中：


配置选项卡自定义功能

在选项卡默认的单选功能无法满足的时候，我们可以给u-dropw-item传递slot来自定义需要展示的内容。

价格区间下拉菜单的设计


户型下拉设计

生成源码效果

查看源码

<template>
  <view class="container container21094">
    <u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
      <view class="flex diygw-dropdown diygw-col-24">
        <u-dropdown class="flex-sub" direction="down" ref="refDropdowns">
          <u-dropdown-item title="价格">
            <view class="bg-white">
              <view class="flex flex-wrap diygw-col-24 flex-direction-column">
                <text class="diygw-col-24 text1-clz"> 价格区间（万） </text>
                <view class="flex diygw-col-24 items-center flex-nowrap flex1-clz">
                  <u-form-item class="diygw-col-0 start-clz diygw-form-item-notpadding" labelPosition="top" prop="start">
                    <u-input :focus="formData.startFocus" placeholder="请输入最低价格" v-model="form.start"></u-input>
                  </u-form-item>
                  <text class="diygw-col-0 text-clz"> 至 </text>
                  <u-form-item class="diygw-col-0 end-clz diygw-form-item-notpadding" labelPosition="top" prop="end">
                    <u-input :focus="formData.endFocus" placeholder="请输入最高价格" v-model="form.end"></u-input>
                  </u-form-item>
                </view>
                <u-form-item labelWidth="auto" class="diygw-col-24 ucheckbox2-clz diygw-form-item-notpadding" labelPosition="top" prop="ucheckbox2">
                  <diy-checkbox class="diygw-col-24" activeColor="#ff5c47" activeBgColor="#ffecee" mode="radio" v-model="form.ucheckbox2" :list="formData.ucheckbox2Datas" @change="changeFormUcheckbox2"> </diy-checkbox>
                </u-form-item>
                <view class="flex flex-wrap diygw-col-24 flex2-clz">
                  <button @click="resetForm" class="diygw-col-8 btn-clz diygw-btn-default">重置</button>
                  <button @click="submitForm" class="diygw-col-0 btn1-clz diygw-btn-default">确定</button>
                </view>
              </view>
              <view class="clearfix"></view>
            </view>
          </u-dropdown-item>
          <u-dropdown-item title="户型">
            <view class="bg-white">
              <view class="flex flex-wrap diygw-col-24 flex-direction-column">
                <u-form-item labelWidth="auto" class="diygw-col-24 ucheckbox-clz diygw-form-item-notpadding" label="居室" labelPosition="top" prop="ucheckbox">
                  <diy-checkbox class="diygw-col-24" activeColor="#ff5c47" activeBgColor="#ffecee" mode="checkbox" v-model="form.ucheckbox" :list="formData.ucheckboxDatas" @change="changeFormUcheckbox"> </diy-checkbox>
                </u-form-item>
                <u-form-item labelWidth="auto" class="diygw-col-24 ucheckbox3-clz diygw-form-item-notpadding" label="居室" labelPosition="top" prop="ucheckbox3">
                  <diy-checkbox class="diygw-col-24" activeColor="#ff5c47" activeBgColor="#ffecee" mode="checkbox" v-model="form.ucheckbox3" :list="formData.ucheckbox3Datas" @change="changeFormUcheckbox3"> </diy-checkbox>
                </u-form-item>
                <u-form-item labelWidth="auto" class="diygw-col-24 ucheckbox1-clz diygw-form-item-notpadding" label="卫生间" labelPosition="top" prop="ucheckbox1">
                  <diy-checkbox class="diygw-col-24" activeColor="#ff5c47" activeBgColor="#ffecee" mode="checkbox" v-model="form.ucheckbox1" :list="formData.ucheckbox1Datas" @change="changeFormUcheckbox1"> </diy-checkbox>
                </u-form-item>
                <view class="flex flex-wrap diygw-col-24 flex3-clz">
                  <button @click="resetForm" class="diygw-col-8 btn2-clz diygw-btn-default">重置</button>
                  <button @click="submitForm" class="diygw-col-0 btn3-clz diygw-btn-default">确定</button>
                </view>
              </view>
              <view class="clearfix"></view>
            </view>
          </u-dropdown-item>
          <u-dropdown-item title="排序">
            <view class="bg-white">
              <view class="flex flex-wrap diygw-col-24 flex-direction-column">
                <u-form-item class="diygw-col-24 sortby-clz" labelPosition="top" prop="sortby">
                  <u-radio-group iconPlacement="right" class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between" v-model="form.sortby" :iconSize="16">
                    <u-radio activeImg="/static/g.png" img="/static/g1.png" class="diygw-col-24" shape="circle" v-for="(sortbyitem, sortbyindex) in formData.sortbyDatas" :key="sortbyindex" :name="sortbyitem.value">
                      {{ sortbyitem.label }}
                    </u-radio>
                  </u-radio-group>
                </u-form-item>
                <view class="flex flex-wrap diygw-col-24 flex6-clz">
                  <button @click="resetForm" class="diygw-col-8 btn4-clz diygw-btn-default">重置</button>
                  <button @click="submitForm" class="diygw-col-0 btn5-clz diygw-btn-default">确定</button>
                </view>
              </view>
              <view class="clearfix"></view>
            </view>
          </u-dropdown-item>
        </u-dropdown>
      </view>
    </u-form>
    <view class="clearfix"></view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        //用户全局信息
        userInfo: {},
        //页面传参
        globalOption: {},
        //自定义全局变量
        globalData: {},
        dropdowns0: '',
        dropdowns1: '',
        dropdowns2: '',
        dropdownsDatas0: [
          { text: '', value: '0' },
          { text: '新款商品', value: '1' },
          { text: '活动商品', value: '2' }
        ],
        dropdownsDatas1: [
          { text: '默认排序', value: '0' },
          { text: '好评排序', value: '1' },
          { text: '销量排序', value: '2' }
        ],
        dropdownsDatas2: [
          { text: '综合排序', value: '0' },
          { text: '总价从低至高', value: '1' },
          { text: '总价从高至低', value: '2' }
        ],
        form: {
          start: '',
          end: '',
          ucheckbox2: '',
          ucheckbox: [],
          ucheckbox3: [],
          ucheckbox1: [],
          sortby: '1'
        },
        formRules: {},
        formData: {
          startFocus: false,
          endFocus: false,
          ucheckbox2Datas: [
            { value: '-1', label: '不限', disabled: false },
            { value: '2', label: '50万以下', disabled: false },
            { value: '3', label: '50-80万', disabled: false },
            { value: '4', label: '80-100万', disabled: false },
            { value: '5', label: '100-150万', disabled: false },
            { value: '6', label: '150-200万', disabled: false },
            { value: '7', label: '200-300万', disabled: false },
            { value: '8', label: '300万以上', disabled: false }
          ],
          ucheckboxDatas: [
            { value: '1', label: '一室', disabled: false },
            { value: '2', label: '二室', disabled: false },
            { value: '3', label: '三室', disabled: false },
            { value: '4', label: '四室', disabled: false },
            { value: '5', label: '五室', disabled: false },
            { value: '6', label: '五室以上', disabled: false }
          ],
          ucheckbox3Datas: [
            { value: '1', label: '一室', disabled: false },
            { value: '2', label: '二室', disabled: false },
            { value: '3', label: '三室', disabled: false },
            { value: '4', label: '四室', disabled: false },
            { value: '5', label: '五室', disabled: false },
            { value: '6', label: '五室以上', disabled: false }
          ],
          ucheckbox1Datas: [
            { value: '1', label: '一卫', disabled: false },
            { value: '2', label: '二卫', disabled: false },
            { value: '3', label: '三卫', disabled: false },
            { value: '4', label: '四卫', disabled: false },
            { value: '5', label: '五卫', disabled: false },
            { value: '6', label: '五卫以上', disabled: false }
          ],
          sortbyDatas: [
            { value: '1', label: '综合排序', checked: true },
            { value: '2', label: '总价从低至高', checked: false },
            { value: '3', label: '总价从高至低', checked: false },
            { value: '4', label: '单价从低至高', checked: false },
            { value: '5', label: '单价从高至低', checked: false }
          ]
        }
      };
    },
    onShow() {
      this.setCurrentPage(this);
    },
    onLoad(option) {
      this.setCurrentPage(this);
      if (option) {
        this.setData({
          globalOption: this.getOption(option)
        });
      }
 
      this.init();
    },
    onReady() {
      this.$refs.formRef?.setRules(this.formRules);
    },
    methods: {
      async init() {
        await this.initResetform();
      },
      closeDropdowns() {
        this.$refs.refDropdowns.close();
      },
      changeDropdowns0(evt) {
        let item = this.dropdownsDatas0.find((item) => {
          return item.value == evt;
        });
        item && item.action && this.navigateTo(item.action);
      },
      changeDropdowns1(evt) {
        let item = this.dropdownsDatas1.find((item) => {
          return item.value == evt;
        });
        item && item.action && this.navigateTo(item.action);
      },
      changeDropdowns2(evt) {
        let item = this.dropdownsDatas2.find((item) => {
          return item.value == evt;
        });
        item && item.action && this.navigateTo(item.action);
      },
      changeFormUcheckbox2(evt) {},
      changeFormUcheckbox(evt) {},
      changeFormUcheckbox3(evt) {},
      changeFormUcheckbox1(evt) {},
      initResetform() {
        this.initform = JSON.stringify(this.form);
      },
      resetForm() {
        this.form = JSON.parse(this.initform);
      },
 
      async submitForm(e) {
        this.$refs.formRef?.setRules(this.formRules);
 
        this.$nextTick(async () => {
          let valid = await this.$refs.formRef.validate();
          if (valid) {
            //保存数据
            let param = this.form;
            let header = {};
            let url = '';
            if (!url) {
              this.showToast('请先配置表单提交地址', 'none');
              return false;
            }
 
            let res = await this.$http.post(url, param, header, 'json');
 
            if (res.code == 200) {
              this.showToast(res.msg, 'success');
            } else {
              this.showModal(res.msg, '提示', false);
            }
          } else {
            console.log('验证失败');
          }
        });
      }
    }
  };
</script>
 
<style lang="scss" scoped>
  .text1-clz {
    padding-top: 20rpx;
    font-weight: bold;
    padding-left: 20rpx;
    font-size: 28rpx !important;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .flex1-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .start-clz {
    flex: 1;
  }
  .text-clz {
    padding-top: 10rpx;
    font-weight: bold;
    padding-left: 20rpx;
    font-size: 28rpx !important;
    padding-bottom: 10rpx;
    padding-right: 20rpx;
  }
  .end-clz {
    flex: 1;
  }
  .ucheckbox2-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .flex2-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .btn-clz {
    background-color: #e2e2e2;
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    overflow: hidden;
    color: #080808;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-left-radius: 12rpx;
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
    text-align: center;
    padding-right: 20rpx;
  }
  .btn1-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    color: #fff;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 12rpx;
    margin-right: 0rpx;
    background-color: #ff5c47;
    margin-left: 10rpx;
    overflow: hidden;
    flex: 1;
    border-top-left-radius: 12rpx;
    margin-top: 0rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 0rpx;
    text-align: center;
    padding-right: 20rpx;
  }
  .ucheckbox-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .ucheckbox3-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .ucheckbox1-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .flex3-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .btn2-clz {
    background-color: #e2e2e2;
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    overflow: hidden;
    color: #080808;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-left-radius: 12rpx;
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
    text-align: center;
    padding-right: 20rpx;
  }
  .btn3-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    color: #fff;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 12rpx;
    margin-right: 0rpx;
    background-color: #ff5c47;
    margin-left: 10rpx;
    overflow: hidden;
    flex: 1;
    border-top-left-radius: 12rpx;
    margin-top: 0rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 0rpx;
    text-align: center;
    padding-right: 20rpx;
  }
  .sortby-clz {
    font-weight: bold;
    font-size: 28rpx !important;
  }
  .flex6-clz {
    padding-top: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
  }
  .btn4-clz {
    background-color: #e2e2e2;
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    overflow: hidden;
    color: #080808;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-left-radius: 12rpx;
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
    text-align: center;
    padding-right: 20rpx;
  }
  .btn5-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    color: #fff;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 12rpx;
    margin-right: 0rpx;
    background-color: #ff5c47;
    margin-left: 10rpx;
    overflow: hidden;
    flex: 1;
    border-top-left-radius: 12rpx;
    margin-top: 0rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 0rpx;
    text-align: center;
    padding-right: 20rpx;
  }
  .container21094 {
  }
</style>


个性化下拉菜单就是这样轻松完成的。因为默认下拉菜单只是很简单的单选式下拉。

文章标签：
搜索推荐
diygwcom
目录
相关文章
弹性计算-百晓生
|
28天前
|
弹性计算 人工智能 架构师
阿里云携手Altair共拓云上工业仿真新机遇
2024年9月12日，「2024 Altair 技术大会杭州站」成功召开，阿里云弹性计算产品运营与生态负责人何川，与Altair中国技术总监赵阳在会上联合发布了最新的“云上CAE一体机”。
弹性计算-百晓生
82297 23
阿里云携手Altair共拓云上工业仿真新机遇
乘风直上
|
4天前
|
人工智能 Rust Java
10月更文挑战赛火热启动，坚持热爱坚持创作！
开发者社区10月更文挑战，寻找热爱技术内容创作的你，欢迎来创作！
乘风直上
453 17
大模型服务小助手
|
7天前
|
JSON 自然语言处理 数据管理
阿里云百炼产品月刊【2024年9月】
阿里云百炼产品月刊【2024年9月】，涵盖本月产品和功能发布、活动，应用实践等内容，帮助您快速了解阿里云百炼产品的最新动态。
大模型服务小助手
321 6
阿里云百炼产品月刊【2024年9月】
Ganos全空间数据库
|
20天前
|
存储 关系型数据库 分布式数据库
GraphRAG：基于PolarDB+通义千问+LangChain的知识图谱+大模型最佳实践
本文介绍了如何使用PolarDB、通义千问和LangChain搭建GraphRAG系统，结合知识图谱和向量检索提升问答质量。通过实例展示了单独使用向量检索和图检索的局限性，并通过图+向量联合搜索增强了问答准确性。PolarDB支持AGE图引擎和pgvector插件，实现图数据和向量数据的统一存储与检索，提升了RAG系统的性能和效果。
Ganos全空间数据库
1498 117
爱吃龙利鱼
|
8天前
|
Linux 虚拟化 开发者
一键将CentOs的yum源更换为国内阿里yum源
一键将CentOs的yum源更换为国内阿里yum源
爱吃龙利鱼
392 3
阿里云云原生
|
22天前
|
人工智能 IDE 程序员
期盼已久！通义灵码 AI 程序员开启邀测，全流程开发仅用几分钟
在云栖大会上，阿里云云原生应用平台负责人丁宇宣布，「通义灵码」完成全面升级，并正式发布 AI 程序员。
阿里云云原生
1249 3
BetterBench
|
24天前
|
机器学习/深度学习 算法 大数据
【BetterBench博士】2024 “华为杯”第二十一届中国研究生数学建模竞赛 选题分析
2024“华为杯”数学建模竞赛，对ABCDEF每个题进行详细的分析，涵盖风电场功率优化、WLAN网络吞吐量、磁性元件损耗建模、地理环境问题、高速公路应急车道启用和X射线脉冲星建模等多领域问题，解析了问题类型、专业和技能的需要。
BetterBench
2603 22
【BetterBench博士】2024 “华为杯”第二十一届中国研究生数学建模竞赛 选题分析
瓴羊Dataphin
|
6天前
|
存储 人工智能 搜索推荐
数据治理，是时候打破刻板印象了
瓴羊智能数据建设与治理产品Datapin全面升级，可演进扩展的数据架构体系为企业数据治理预留发展空间，推出敏捷版用以解决企业数据量不大但需构建数据的场景问题，基于大模型打造的DataAgent更是为企业用好数据资产提供了便利。
瓴羊Dataphin
300 2
何雨晨
|
5天前
|
编译器 C#
C#多态概述：通过继承实现的不同对象调用相同的方法，表现出不同的行为
C#多态概述：通过继承实现的不同对象调用相同的方法，表现出不同的行为
何雨晨
106 65
BetterBench
|
24天前
|
机器学习/深度学习 算法 数据可视化
【BetterBench博士】2024年中国研究生数学建模竞赛 C题：数据驱动下磁性元件的磁芯损耗建模 问题分析、数学模型、python 代码
2024年中国研究生数学建模竞赛C题聚焦磁性元件磁芯损耗建模。题目背景介绍了电能变换技术的发展与应用，强调磁性元件在功率变换器中的重要性。磁芯损耗受多种因素影响，现有模型难以精确预测。题目要求通过数据分析建立高精度磁芯损耗模型。具体任务包括励磁波形分类、修正斯坦麦茨方程、分析影响因素、构建预测模型及优化设计条件。涉及数据预处理、特征提取、机器学习及优化算法等技术。适合电气、材料、计算机等多个专业学生参与。
BetterBench
1582 17
【BetterBench博士】2024年中国研究生数学建模竞赛 C题：数据驱动下磁性元件的磁芯损耗建模 问题分析、数学模型、python 代码