uView ActionSheet 操作菜单

本组件用于从底部弹出一个操作菜单,供用户选择并返回结果。
本组件功能类似于uni的uni.showActionSheetAPI,配置更加灵活,所有平台都表现一致。

#平台差异说明

App(vue)App(nvue)H5小程序

#基本使用

  • 通过title(设置标题),cancelText(取消按钮的文字,不为空时显示按钮),description(选项上方的描述信息)
  • 通过actions设置需要显示的菜单,该值为一个数组,元素为对象,对象至少要提供name属性,另外可选的有subname(描述),disabled(是否禁用),loading(加载动画), color(字体颜色),fontSize(字体大小),
  • 通过show绑定一个值为布尔值的变量控制组件的弹出与收起,show的值是双向绑定的
<template><view><u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet><u-button @click="show = true">打开ActionSheet</u-button></view>
</template><script>
export default {data() {return {title:'标题',list: [{name:'选项一',subname:"选项一描述",color:'#ffaa7f',fontSize:'20'},{name: '选项二禁用',disabled:true},{name: '开启load加载', //开启后文字不显示loading:true}],show: false};}
};
</script>

copy

#配置点击遮罩关闭和点击某个菜单项时关闭弹窗

  • 通过closeOnClickAction参数来配置点击某个菜单项时是否关闭弹窗。
  • 通过closeOnClickOverlay参数配置点击遮罩是否允许关闭(注意:关闭事件需要自行处理,只会在开启closeOnClickOverlay后点击遮罩层执行close回调)
<template><view><u-action-sheet :actions="list" :closeOnClickOverlay="true" :closeOnClickAction="true"  :title="title" :show="show"></u-action-sheet><u-button @click="show = true">打开ActionSheet</u-button></view>
</template><script>
export default {data() {return {title:'标题',list: [{name:'选项一'},{name: '选项二'}],show: false};},onLoad() {},methods: {}
};
</script>

copy

#点击获取所点击选项name

select回调事件带有一个object值,这个索引值为传递的select数组的name值,根据回调事件,能获得点击了 该项的内容

<template><view><u-action-sheet :actions="list" @select="selectClick" :title="title" :show="show"></u-action-sheet><u-button @click="show = true">打开ActionSheet</u-button></view>
</template><script>
export default {data() {return {title:'标题',list: [{name:'选项一'},{name: '选项二'}],show: false};},onLoad() {},methods: {selectClick(index){console.log(index)}}
};
</script>

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

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

相关文章

LeetCode——2397. 被列覆盖的最多行数

通过万岁&#xff01;&#xff01;&#xff01; 题目&#xff1a;给你一个二维数组&#xff0c;然后里面是0和1&#xff0c;然后让你从里面选择numSelect列&#xff0c;使得去掉选择的列以后不存在1的行的数量最少。思路&#xff1a; 看到这个题目&#xff0c;本来以为是每一列…

JavaScript 基础三part1.数组

JavaScript 基础三part1.数组 2.1 数组是什么2.2 数组的基本使用&#xff08;1&#xff09;声明&#xff08;2&#xff09;取值&#xff08;3&#xff09;一些术语&#xff08;4&#xff09;遍历数组 2.3 操作数组&#xff08;1&#xff09;修改&#xff08;2&#xff09;新增&…

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -小程序端TabBar搭建

锋哥原创的uniapp微信小程序投票系统实战&#xff1a; uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…

ES6中WeakMap和Map的区别

WeakMap和Map都是ES6中新增的数据结构&#xff0c;用于存储键值对。它们之间的主要区别有以下几点&#xff1a; 键类型的限制&#xff1a;在Map中&#xff0c;键可以是任意类型的值&#xff08;包括基本类型和对象引用&#xff09;&#xff0c;而在WeakMap中&#xff0c;键只能…

el-cascader隐藏某一级的勾选框及vue报错Error in callback for watcher “options“的解决办法

今天用到饿了么的级联选择器时出现了这个报错Error in callback for watcher “options“: “TypeError: Cannot read propertie ‘level‘ of null,因为需求是在不同类型 el-cascader多选的时候默认是可以勾选所有级的选项的,如下图: 包含级联cascader的options、select的…

日常工作 经验总结

1,在使用vue2开发项目时,快捷有效的组件化component 若有参数传递时,可以通过这样传递 在component中: 2,上拉加载,下拉刷新 若是使用局部进行上拉加载 下拉刷新 且需要用到scroll-view时 那么需要切记scroll-view在内被mescroll-uni包裹。若场景有限 对于无数据显示…

三款推荐的 FTP 工具

&#x1f947; 版权: 本文由【墨理学AI】原创、在CSDN首发、各位大佬、敬请查阅&#x1f389; 声明: 作为全网 AI 领域 干货最多的博主之一&#xff0c;❤️ 不负光阴不负卿 ❤️ 文章目录 三款推荐的 FTP 工具filezillawinscpFinalShell SSHXftp❤️ 人生苦短&#xff0c; 欢迎…

Hive - Select 使用 in 限制范围

目录 一.引言 二.Select Uid Info 1.少量 Uid 2.大量 Uid ◆ 建表 ◆ 本地 Load ◆ HDFS Load ◆ Select In 三.总结 一.引言 工业场景下 Hive 表通常使用 uid 作为用户维度构建和更新 Hive 表&#xff0c;当我们需要查询指定批次用户信息时&#xff0c;可以使用 in …

1.4 力扣回溯题

题目一&#xff1a; 77. 组合 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1a; [[2,4],[3,4],[2,3],[1,2],[1,3],[1,4], ] 示例 2&#xff1…

【常用排序算法】快速排序

##快速排序 快速排序由于排序效率在同为O(N*logN)的几种排序方法中效率较高&#xff0c;因此经常被采用&#xff0c;再加上快速排序思想----分治法 先从数列中取出一个数作为基准数pivot。分区过程&#xff0c;将比这个数大的数全放到它的右边&#xff0c;小于或等于它的数全放…

rk3566 armbian修复usb2.0并挂载U盘

文章目录 usb接口修复一 执行命令二 修改rk3566-panther-x2.dts⽂件三 查看是否识别 U盘格式化、挂载一 U盘格式化1.1 查看U盘1.2 查看U盘文件系统类型1.3 格式化为ext4系统 二 挂载U盘2.1 手动挂载2.2 自动挂载&#xff08;可选&#xff09; usb接口修复 一 执行命令 将位于…

K8S--部署SpringBoot项目实战

原文网址&#xff1a;K8S--部署SpringBoot项目实战-CSDN博客 简介 本文介绍K8S如何部署SpringBoot项目。 1.生成应用的docker镜像 把SpringBoot项目的jar包打包为docker镜像&#xff0c;见&#xff1a;Docker Compose--部署SpringBoot项目--实战-CSDN博客 创建后的镜像名称…

企业微信开发:自建应用:获取企业微信IP段(用于防火墙配置)

概述 在企业微信开发流程中&#xff0c;为了确保与企业微信API的网络通信安全&#xff0c;并适应防火墙配置要求&#xff0c;开发者需要获取企业微信API服务的IP地址范围。这样&#xff0c;仅允许与企业微信官方通信的合法请求通过防火墙&#xff0c;从而保障数据传输的安全性…

借助开源自定义表单,实现流程化办公

实现流程化办公已经成为众多企业的发展目的和愿望&#xff0c;因为可以为企业提质增效、创造良好效益&#xff0c;因此在现代化职场办公中&#xff0c;流程化办公是众多客户追求的发展目的。开源自定义表单拥有较为突出的优势和特点&#xff0c;可以发挥其应有的市场价值和作用…

Rosalind 040 Distances in Trees

这个问题涉及到图论中的树结构以及如何使用Newick格式来表示树。下面是关键概念的解释和解决问题的方法&#xff1a; 图论中的树理解 树中的唯一路径&#xff1a;在树这种图结构中&#xff0c;任意两个节点之间总是存在一条唯一的路径。这种唯一性是因为树是一个连通的、无循环…

【教学类-综合练习-02】20231208 大3班 数字加减法练习(数字火车、X—Y加法减法、X乘法、X—Y数字分合)

教学情况 时间&#xff1a;20231208 班级&#xff1a;大3班 人数&#xff1a;21 目的&#xff1a;幼儿根据自己的能力水平&#xff0c;选择适合的数学题&#xff08;多款样式&#xff09; 在昨天大4班制作的基础上&#xff0c;特地打印一些小纸片数学题&#xff08;节省纸…

如何在vscode下,启动jupyter连接远程服务器

要使用Jupyter notebook远程连接服务器&#xff0c;可通过以下步骤&#xff1a; step1.首先&#xff0c;需要在远程服务器上安装Jupyter。这可以通过Python的包管理器pip完成&#xff1a; pip install jupyterstep2.然后&#xff0c;在该环境下创建一个新的内核。例如&#x…

Matlab/F#/R进行数据分析和建模算法的经验,vb.net输给他了

微软放弃了vb.net的开发&#xff0c;但是持续花费巨资投入F#,简单一看他的语法就是qbasic ,vb6一样。鹿死谁手&#xff0c;谁能相信vb.net竟然被f#给干掉了。外面有vb6语法的python成了全球第一的编程语言,内部还有强大的教授开发的这工具扯后腿。 有人说为什么中国搞不出像mat…

HttpRunner自动化之响应中文乱码处理

响应中文乱码&#xff1a; 当调用接口&#xff0c;响应正文返回的中文是乱码时&#xff0c;一般是响应正文的编码格式不为 utf-8 导致&#xff0c;此时需要根据实际的编码格式处理 示例&#xff1a; 图1中 extract 提取title标题&#xff0c;output 输出 title 变量值&#x…

vue项目使用vue-pdf插件预览pdf文件

1、安装vue-pdf&#xff1a;npm install --save vue-pdf 2、使用 具体实现代码&#xff1a;pdfPreview.vue <template><div class"container"><pdfref"pdf":src"pdfUrl":page"currentPage":rotate"pageRotate&qu…