微信小程序+Vant-自定义选择器组件(多选

实现效果

  • 无筛选,如有需要可参照单选组件中的方法
  • .json文件配置"component": true,
  • columns需要处理成含dictLabeldictValue字段,我是这样处理的:
let list = arr.map(r => {return {...r,dictValue: r.xxxId,dictLabel: r.xxxName}
})

在这里插入图片描述

实现代码

组件代码
<van-popup show="{{ show }}" position="bottom" round custom-style="height:{{height}}%;z-index:2000;" class="relative"><view class="pd-30 flex mb-30 fixed pickerTop w100 bg-white"><view class="gray-3 fs14" bindtap="close">取消</view><view class="pickerText bold">{{title}}</view><view class="fs14" style="color: {{colorStyle}};" bindtap="getData1">确认</view></view><view class="mb-30 plr-30 mulPicker"><van-checkbox-group value="{{ valueList }}" bind:change="onChange"><van-cell-group><van-cell wx:for="{{ columns }}" wx:key="index" value-class="value-class" clickable data-index="{{ index }}" bind:click="toggle"><van-checkbox catch:tap="noop" class="checkboxes-{{ index }}" shape="square" checked-color="{{colorStyle}}" name="{{ item.dictValue }}">{{item.dictLabel}}</van-checkbox></van-cell></van-cell-group></van-checkbox-group></view>
</van-popup>
import { formatTime, formatTime1 } from '../../../../utils/index'Component({options: {addGlobalClass: true,},/*** 组件的属性列表*/properties: {show: Boolean,// 是否显示弹出层height: {type: Number,value: 80 // 默认80%,百分比0-100},title: {type: String,value: '请选择' }, // 弹出层标题columns: Array, // 下拉选择的数据valueList: Array, // 选中回显colorStyle: {type: String,value: "#3772E9"},},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {getData1(e) {this.triggerEvent("getData1", this.data.valueList);this.close();},onChange(e) {this.setData({ valueList: e.detail, });},toggle(event) {const { index } = event.currentTarget.dataset;const checkbox = this.selectComponent(`.checkboxes-${index}`);checkbox.toggle();},noop() { },close() {this.triggerEvent("close");},},
})
.pickerText {font-size: 16px;
}.pickerTop {border-radius: 50rpx 50rpx 0 0;z-index: 2000;
}.mulPicker {margin-top: 120rpx;
}.value-class {flex: none !important;
}
页面使用
<w-mulpicker show="{{show}}" columns="{{columns}}" title="{{title}}" bindgetData1="getData1" colorStyle="{{colorStyle}}" bindclose="close" />
  getData1(e) {console.log(e.detail);this.close();},close() {this.setData({show: false,})},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/478326.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.NET Core发布网站报错 HTTP Error 500.31

报错如图&#xff1a; 解决办法&#xff1a; 打开任务管理器》》服务》》找到这仨服务&#xff0c;右键启动即可&#xff0c;如果已经启动了就重启&#xff1a;

Canvas 前端艺术家

目前各种数据来看&#xff0c;前端未来在 数据可视化 和 AI 这两个领域会比较香&#xff0c;而 Canvas 是 数据可视化 在前端方面的基础技术。所以给大家唠唠Canvas这个魔幻工具。 Canvas 介绍 Canvas 中文名叫 “画布”&#xff0c;是 HTML5 新增的一个标签。Canvas 允许开发…

Leetcode142. 环形链表 II(HOT100)

链接 我的错误代码&#xff1a; class Solution { public:ListNode *detectCycle(ListNode *head) {if(!head||!head->next)return nullptr;ListNode* f head->next,*s head;while(f){f f->next,s s->next;if(!f)return nullptr;f f->next;if(fs){ListNo…

centos安装小火车

平时没事闲着 装个小火车玩-------->>>>> yum install sl.x86_64 启动命令 sl 就会出现以下场景

JavaScript的let、var、const

这张图片主要介绍了JavaScript中的三种变量声明方式&#xff1a;let、var和const。 1. let 含义&#xff1a;let是现在实际开发中常用的变量声明方式。特点&#xff1a; 块级作用域&#xff1a;let声明的变量只在其所在的块级作用域内有效。例如&#xff1a;{let x 10; } co…

替换Nacos的MySQL驱动

前言&#xff1a;替换Nacos的MySQL驱动能实现使Nacos支持MySQL8.0及以上版本的MySQL数据库 注&#xff1a;下述教程会使用命令先解压Nacos的jar包然后重新用命令把Nacos压缩成jar包&#xff0c;不然直接用压缩工具替换MySQL驱动后的Nacos是会启动不起来的&#xff08;因为没有替…

蓝桥杯每日真题 - 第21天

题目&#xff1a;(空间) 题目描述&#xff08;12届 C&C B组A题&#xff09; 解题思路&#xff1a; 转换单位&#xff1a; 内存总大小为 256MB&#xff0c;换算为字节&#xff1a; 25610241024268,435,456字节 计算每个整数占用空间&#xff1a; 每个 32 位整数占用…

AI赋能电商:构建高效、智能化的新零售生态

随着人工智能&#xff08;AI&#xff09;技术的不断进步&#xff0c;其在电商领域的应用日益广泛&#xff0c;从购物推荐到供应链管理&#xff0c;再到商品定价&#xff0c;AI正在全面改变传统电商的运营模式&#xff0c;并推动行业向智能化和精细化方向发展。本文将探讨如何利…

Python酷库之旅-第三方库Pandas(237)

目录 一、用法精讲 1116、pandas.tseries.offsets.BusinessHour.is_year_end方法 1116-1、语法 1116-2、参数 1116-3、功能 1116-4、返回值 1116-5、说明 1116-6、用法 1116-6-1、数据准备 1116-6-2、代码示例 1116-6-3、结果输出 1117、pandas.tseries.offsets.Cu…

不一样的css(三)

目录 一、前言 二、五角星 1.五角星&#xff0c;叠盖法&#xff1a; 2.五角星&#xff0c;拼凑法&#xff1a; 3.五角星&#xff0c;svg画法&#xff1a; 4.五角星&#xff0c;利用clip-path属性进行裁剪 三、结束语 一、前言 通过上两节的内容我们对css画小图标有了新…

autogen框架中使用chatglm4模型实现react

本文将介绍如何使用使用chatglm4实现react&#xff0c;利用环境变量、Tavily API和ReAct代理模式来回答用户提出的问题。 环境变量 首先&#xff0c;我们需要加载环境变量。这可以通过使用dotenv库来实现。 from dotenv import load_dotenv_ load_dotenv()注意.env文件处于…

Neural Magic 发布 LLM Compressor:提升大模型推理效率的新工具

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

LabVIEW实现TCP/IP通信

目录 1、TCP通信原理 2、硬件环境部署 3、云端环境部署 4、TCP通信函数 5、程序架构 6、前面板设计 7、程序框图设计 8、测试验证 本专栏以LabVIEW为开发平台&#xff0c;讲解物联网通信组网原理与开发方法&#xff0c;覆盖RS232、TCP、MQTT、蓝牙、Wi-Fi、NB-IoT等协议。 结合…

Linux系统Docker部署开源在线协作笔记Trilium Notes与远程访问详细教程

目录 ⛳️推荐 前言 1. 安装docker与docker-compose 2. 启动容器运行镜像 3. 本地访问测试 4.安装内网穿透 5. 创建公网地址 6. 创建固定公网地址 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下…

Linux关于vim的笔记

Linux关于vim的笔记&#xff1a;(vimtutor打开vim 教程) --------------------------------------------------------------------------------------------------------------------------------- 1. 光标在屏幕文本中的移动既可以用箭头键&#xff0c;也可以使用 hjkl 字母键…

Swift 实现链表重新排列:L0 → Ln → L1 → Ln-1

前言 本题由于没有合适答案为以往遗留问题&#xff0c;最近有时间将以往遗留问题一一完善。 143. 重排链表 不积跬步&#xff0c;无以至千里&#xff1b;不积小流&#xff0c;无以成江海&#xff0c;Swift社区 伴你前行。如果大家有建议和意见欢迎在文末留言&#xff0c;我们会…

C++ —— 以真我之名 如飞花般绚丽 - 智能指针

目录 1. RAII和智能指针的设计思路 2. C标准库智能指针的使用 2.1 auto_ptr 2.2 unique_ptr 2.3 简单模拟实现auto_ptr和unique_ptr的核心功能 2.4 shared_ptr 2.4.1 make_shared 2.5 weak_ptr 2.6 shared_ptr的缺陷&#xff1a;循环引用问题 3. shared_ptr 和 unique_…

Macos远程连接Linux桌面教程;Ubuntu配置远程桌面;Mac端远程登陆Linux桌面;可能出现的问题

文章目录 1. Ubuntu配置远程桌面2. Mac端远程登陆Linux桌面3. 可能出现的问题1.您用来登录计算机的密码与登录密钥环里的密码不再匹配2. 找不到org->gnome->desktop->remote-access 1. Ubuntu配置远程桌面 打开设置->共享->屏幕共享。勾选允许连接控制屏幕&…

ElasticSearch学习了解笔记

搜索引擎的原理&#xff1a; 1、查询分析&#xff08;自然语言处理&#xff09;理解用户需求 2、分词技术 3、关键词搜索匹配 4、搜索排序 lucence Lucene 是一个成熟的权威检索库 Elasticsearch 的搜索原理简单过程是&#xff0c;索引系统通过扫描文章中的每一个词&#xff…

GoF设计模式——结构型设计模式分析与应用

文章目录 UML图的结构主要表现为&#xff1a;继承&#xff08;抽象&#xff09;、关联 、组合或聚合 的三种关系。1. 继承&#xff08;抽象&#xff0c;泛化关系&#xff09;2. 关联3. 组合/聚合各种可能的配合&#xff1a;1. 关联后抽象2. 关联的集合3. 组合接口4. 递归聚合接…