【Uniapp 插件 una-picker 】自定义样式选择器插件-北京尧图网络

前言推荐一个写博客的效率工具 CSDN AI数字营销会员核心功能✅ 多平台一键同步 → 一次发文同步6个平台✅ 全维度数据监测 → 所有平台数据一个面板看✅ 营销组件 → 文末合规放公众号/产品推广✅ GEO检测 → 看你文章在AI平台的曝光情况对我这种多平台发文的人来说光同步功能就值回票价了。写博客的朋友可以看看https://mp.csdn.net/vip?utm_sourcefx-blog-qq_45954390本篇就是告诉大家如何引入使用的。到 Uniapp 的插件市场搜索 una-picker快速通道https://ext.dcloud.net.cn/search?quna-picker文章目录前言一、插件介绍1.✨ 特性2. Props 参数3.Events事件4. 插槽二、插件使用示例1. 下载路径2. 引入组件1方法一放入uni_modules2放入components3. 在微信小程序中的运行1单独的一列2展示两列3展示自定义样式三、其他插件文章1. 【Uniapp 插件 una-banner 】轮播图 / banner / swiper2. 【Uniapp 插件 una-bubble 】气泡 / 聊天框 / 对话框3.【Uniapp 插件 una-upload-resource 】上传资源组件图片上传视频上传混传4.【Uniapp 插件 una-img-cropper 】支持自定义裁剪比例、拖拽缩放调整画面可导出指定尺寸与画质的图片跨端兼容适用于头像上传、图片裁切等业务场景。5.【Uniapp 插件 una-picker 】自定义样式选择器插件6.【Uniapp 插件 una-app-skeleton】骨架屏 / Skeleton / 加载占位 / uni-app x一、插件介绍1.✨ 特性支持单列数组、多列二维数组和树形联动数据支持v-model绑定选中值支持v-model:show控制弹层显示支持自定义字段名labelKey、valueKey、childrenKey支持自定义标题、按钮文字、占位文本、弹层高度和触发器样式支持trigger插槽自定义触发区域2. Props 参数参数说明类型默认值modelValue当前选中值单列为单个值多列/联动为数组String / Number / Arrayshow是否显示弹层支持v-model:showBooleanfalsecolumns选项数据支持一维数组、二维数组、树形数组Array[]title顶部标题String请选择placeholder未选择时的占位文本String请选择confirmText确认按钮文字String确定cancelText取消按钮文字String取消labelKey选项显示字段名StringlabelvalueKey选项取值字段名StringvaluechildrenKey联动子级字段名Stringchildrencascade是否启用联动模式Booleanfalseseparator多列显示文本分隔符String/height弹层高度String / Number520rpxitemHeight选项高度String / Number88rpxfieldHeight默认触发器高度String / Number88rpxfieldPadding默认触发器内边距String / Number0 28rpxbackgroundColor弹层背景色String#FFFFFFcolor未选中选项文字颜色String#323233selectedColor选中选项文字颜色String#323233cancelColor取消按钮文字颜色String#969799confirmColor确认按钮文字颜色String#2979ffborderRadius弹层圆角String / Number24rpx 24rpx 0 0disabled是否禁用BooleanfalsecloseOnClickOverlay点击遮罩是否关闭Booleantrue3.Events事件事件名说明回调参数change滚动选择时触发{ values, indexes, options }confirm点击确认时触发{ value, values, indexes, options }cancel点击取消或遮罩关闭时触发-open打开弹层时触发-close关闭弹层时触发-4. 插槽trigger自定义触发区域插槽参数为{ text, value }二、插件使用示例1. 下载路径https://ext.dcloud.net.cn/plugin?id28579这个广告30s相当于激励俺继续维护大部分插件都是这么设置了大家在观看的时候页面不要关闭看完在手机上关闭广告等待uni变更状态就行。手机端显示观看完毕后点击关闭等待状态文字变更再关闭这个uni的小程序。电脑端就会有个alert是否运行打开Hbuilderx点击允许就跳到HbuilderX中了。选择你要导入的项目tip 可以只打开一个窗口窗口内就一个项目这样识别会好一些。我再同一个窗口内多开了几个项目有几次没检测到我又重新看了广告。点击“确认”查看此时在哪个目录里。【注意】因为uniapp修改了传入的目录结构我的项目结构为 components/una-picker若有冲突保证自己的项目不被影响的前提下点击忽略冲突别替换了自己项目的文件2. 引入组件1方法一放入uni_modules在uni_modules中新建一个目录una-picker将下载的componets下的文件都放入这个目录中。2放入components可以删除无用的文件如package.json、README.md。这里我留着是示例如果有同学需要看的话就放入这个文件夹里不然自己的其他组件多了之后不好管理文件。3. 在微信小程序中的运行1单独的一列代码实现templateviewclasspageuna-pickerv-modelcitytitle选择城市:columnscityColumnsconfirmhandleConfirm//view/templatescript setupimport{ref}fromvue;constcityref();constcityColumns[{label:杭州,value:hangzhou},{label:上海,value:shanghai},{label:深圳,value:shenzhen}];functionhandleConfirm(event){console.log(event.value,event.options);}/script2展示两列代码实现templateviewclasspageuna-pickerv-modelarea:cascadetruetitle选择地区:columnsareaColumns//view/templatescript setupimport{ref}fromvue;constarearef([]);constareaColumns[{label:浙江,value:zhejiang,children:[{label:杭州,value:hangzhou},{label:宁波,value:ningbo}]},{label:广东,value:guangdong,children:[{label:广州,value:guangzhou},{label:深圳,value:shenzhen}]}];functionhandleConfirm(event){console.log(event.value,event.options);}/script3展示自定义样式代码实现templateviewclasspageuna-pickerv-modelfruittitle选择水果placeholder请选择水果:columnsfruitColumnsbackgroundColor#FFF5F5borderRadius24rpx 24rpx 0 0color#7A1F24selectedColor#FF4D4FcancelColor#B25A5FconfirmColor#FF4D4F//view/templatescript setupimport{ref}fromvue;constfruitColumns[{label:苹果,value:apple},{label:草莓,value:strawberry},{label:樱桃,value:cherry}];functionhandleConfirm(event){console.log(event.value,event.options);}/script如果大家用着不错可以动动手指打赏俺有问题可以私信我需要qq群维护也请留言多的话我再建群哦三、其他插件文章1. 【Uniapp 插件 una-banner 】轮播图 / banner / swiper快速通道2. 【Uniapp 插件 una-bubble 】气泡 / 聊天框 / 对话框快速通道3.【Uniapp 插件 una-upload-resource 】上传资源组件图片上传视频上传混传快速通道4.【Uniapp 插件 una-img-cropper 】支持自定义裁剪比例、拖拽缩放调整画面可导出指定尺寸与画质的图片跨端兼容适用于头像上传、图片裁切等业务场景。快速通道5.【Uniapp 插件 una-picker 】自定义样式选择器插件快速通道6.【Uniapp 插件 una-app-skeleton】骨架屏 / Skeleton / 加载占位 / uni-app x快速通道

【Uniapp 插件 una-picker 】自定义样式选择器插件

相关推荐

Unity ECS内存分配优化：从Archetype原理到高性能实战

深入解析SoC时钟系统：从DPLL原理到Jacinto 6 Plus时钟树实战

【Appium】App自动化工具选型避坑指南----汇总篇

更多资讯

pyasc 算子编程接口 asc.language.basic.div 完全指南：按元素求商的三种调用形态与底层实现

STM32CubeIDE Attach调试实战：无侵入式运行时诊断核心技术

EDA课程设计游戏机：Verilog/VGA状态机与嘉立创EDA画板实战

StarRocks json_string 函数详解：将 JSON 对象序列化为 JSON 字符串

Zotero快速创建Bibliography：文献管理与参考文献排版实战指南

Android App开发基础入门：环境配置、项目结构、界面、存储与打包上架

今日更新

AReaL 调试指南：从 Agent Workflow 验证到分布式训练死锁诊断

MATLAB实现GPS L1 C/A信号仿真与二维捕获验证

彻底搞懂ASCII、Unicode与UTF-8：从乱码根源到编码实战

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？