【RuoYi移动端】HbuilderX实现底部弹窗示例

news2024/11/18 7:52:38

一、单选样式弹窗选择

1、View页面代码


		<uni-popup ref="textBox" type="bottom">
			<view class="select_box">
				<view class="select_row" v-for="(item,index) in status" @click="selectClick(item.id)">
					{{item.name}}
				</view>
			</view>
		</uni-popup>


<view @click="open('2')"> 打开弹窗 </view>

2、css页面代码


	.select_box {
		height: auto;
		width: 100%;
		background-color: white;
		// margin-bottom: 50px;
	}

	.select_row {

		height: 50px;
		line-height: 50px;
		text-align: center;
		border-bottom: 1px solid rgb(235, 235, 235);
		// padding-left: 100px;

	}

3、js代码

data()

		data() {

			return {
				
				verBj: "", // 选择弹出框中的变量标记
				status: [{
						id: "0",
						name: "是"
					},
					{
						id: "1",
						name: "否"
					},
				],

			}
		},
			open(bj) {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ,type 属性将失效 ,仅支持 ['top','left','bottom','right','center']
				this.verBj = bj; // 一个弹出框,确定执行哪个程序
				this.$refs.selectBox.open('bottom')
			},

			selectClick(id) {

				// 通道1
				if (this.verBj === "1") {
					this.checkDesc.isEmergency = id;
				}

				// 通道2
				if (this.verBj === "2") {
					this.checkDesc.isJoint = id;
				}

				this.$refs.popup.close() // 关闭弹窗
			}

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

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

相关文章

FPGA时序分析与约束(6)——综合的基础知识

在使用时序约束的设计过程中&#xff0c;综合&#xff08;synthesis&#xff09;是第一步。 一、综合的解释 在电子设计中&#xff0c;综合是指完成特定功能的门级网表的实现。除了特定功能&#xff0c;综合的过程可能还要满足某种其他要求&#xff0c;如功率、操作频率等。 有…

Fiber Golang:Golang中的强大Web框架

揭示Fiber在Go Web开发中的特点和优势 在不断发展的Web开发领域中&#xff0c;选择正确的框架可以极大地影响项目的效率和成功。介绍一下Fiber&#xff0c;这是一款令人印象深刻的Golang&#xff08;Go语言&#xff09;Web框架。以其飞快的性能和强大的特性而闻名&#xff0c;…

2023-mac brew安装python最新版本,遇见的问题和处理方式

#### 创建Python3.11.6符号链接我现在遇见这个问题了&#xff1a;python --version -bash: python: command not found 192:bin wangyang$ python3 --version Python 3.9.6 192:bin wangyang$ /usr/local/bin/python3 --version Python 3.11.6我要怎么做&#xff0c;我才可以直…

Spring-AOP 讲解

1、为什么会出现AOP思维 我们知道&#xff0c;在我们的项目中&#xff0c;会出现核心代码和非核心代码&#xff0c;对于非核心代码&#xff0c;在各个方法中可能是冗余的&#xff0c;此时为了解决这种非核心代码的冗余以及不方便管理的问题&#xff0c;就出现了AOP思维。 2、…

模拟批量转换和报警功能块(博途SCL源代码)

单通道模拟量转换FC算法和源代码,请参考下面文章链接: PLC模拟量采集算法数学基础(线性传感器)_plc3秒采集一次模拟量_RXXW_Dor的博客-CSDN博客模拟量采集库如何设计,具体算法代码请参看我的另一篇博文:PLC模拟量输入 模拟量转换FC:S_ITR_RXXW_BOSS的博客-CSDN博客_s_i…

路由器的路由过程

大家好&#xff0c;我叫徐锦桐&#xff0c;个人博客地址为www.xujintong.com。平时记录一下学习计算机过程中获取的知识&#xff0c;还有日常折腾的经验&#xff0c;欢迎大家来访。 路由器是连接不同的局域网的一个设备&#xff0c;它一开始的目的是互联异构网络的。 前言 这里…

langchain agent简单使用;文档总结load_summarize_chain

1、langchain agent简单使用 参考&#xff1a;https://zhuanlan.zhihu.com/p/643868934?utm_id0 from langchain.agents.agent_toolkits import create_python_agent from langchain.agents import load_tools, initialize_agent from langchain.agents import AgentType fr…

【讲座笔记】基于 Apache Calcite 的多引擎指标管理最佳实践|CommunityOverCode Asia 2023 | 字节开源

引言 三个问题 (问题解法) 1套SQL 2种语法 统一SQL的实践案例 虚拟列的实践案例 SQL Define Function 指标管理的实现 在这里插入图片描述

交换机/防火墙-基础配置-23.10.11

1.MAC地址 交换机在给主机之间传递信息包时&#xff0c;通过MAC地址来标识每台主机 主机间发生信息包交换时&#xff0c;交换机就会将通信过的主机的mac地址存下 dis mac-address 交换机转发的数据包中&#xff0c;会包含一个目标MAC&#xff0c;交换机识别数据包中的目标MA…

nrf52832 低功耗蓝牙 广播

nrf52832 低功耗蓝牙5.x 文章目录 nrf52832 低功耗蓝牙5.x广播广播的特点&#xff1a; 一、修改代码演示广播初始化修改 广播名称修改广播时间修改广播内容和参数 总结 广播 广播是低功耗蓝牙通信的基础&#xff0c;向外广播信息&#xff0c;等待被连接&#xff1b; 广播包含了…

浅谈 docker run 命令中的 -i -t 和 -d 选项

以 docker Ubuntu 镜像为例&#xff0c;ubuntu镜像启动时默认执行的命令是"/bin/bash"。 文章目录 不带任何选项带 -i 选项带 -i 和 -t 选项-d 选项 不带任何选项 rootubuntu20:~# docker run ubuntu:20.04 rootubuntu20:~# docker ps CONTAINER ID IMAGE …

1997-2017年各省能源投入数据(万吨标准煤)

1997-2017年各省能源投入数据&#xff08;万吨标准煤&#xff09; 1、时间&#xff1a;1997-2017年 2、来源&#xff1a;中国统计年鉴 3、范围&#xff1a;30个省 4、指标&#xff1a;能源投入&#xff08;各省8种能源消费总量计算得出&#xff09;&#xff08;万吨标准煤&…

Day 08 python学习笔记

函数 作用域 作用域&#xff1a;变量的访问权限 全局变量与局部变量 声明在函数外边的变量----全局变量 ----》全局作用域 函数内部的变量------局部变量 ----》局部作用域顶格创建的函数也是全局的 例&#xff1a; a 100def test_01():a 0b 110print…

解决因d3dx9_30.dll丢失程序无法运行,电脑缺失d3dx9_30.dll报错解决方案

我们的生活和工作都离不开电脑。然而&#xff0c;电脑作为一种复杂的工具&#xff0c;也会出现各种各样的问题。其中&#xff0c;丢失d3dx9_30.dll文件是一个常见的问题。d3dx9_30.dll是DirectX的动态链接库文件&#xff0c;如果丢失或损坏&#xff0c;可能会导致许多软件和游戏…

Kettle查询表数据循环到目标表

简介&#xff1a;Kettle工具有一种业务场景是动态查询数据库中某张表的某个字段&#xff0c;将该字段当做循环变量&#xff0c;循环整个作业。下面就是记录该步骤。 一、思路 首先生产环境中我们需要做的一个业务就是&#xff1a; 按品牌循环执行&#xff1a;step3step4&…

LeetCode 2316. 统计无向图中无法互相到达点对数【图,BFS,DFS,并查集】1604

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

raven2 靶机

一.信息收集 靶机的信息收集就是网段 2.使用nmap扫描端口和真实IP nmap 网段 扫描ip和端口 二.查找漏洞 可以查看版本 找到利用信息 cms 以及 apache 组件漏洞 组件的目录漏洞 找到了 一般爆破不出来 敏感目录爆破 wordpress的 dirb --url 网址 直接找…

[C++]类型转换

一、C语言中的类型转换 在C语言中&#xff0c;如果赋值运算符左右两侧类型不同&#xff0c;或者形参与实参类型不匹配&#xff0c;或者返回值类型与 接收返回值类型不一致时&#xff0c;就需要发生类型转化。 C语言中总共有两种形式的类型转换&#xff1a;隐式类型转换和显式…

HBuilder插件推荐

整理一下我觉得好用的插件&#xff0c;后期可能会有更改 eslint-js eslint-plugin-vue Prettier scss/sass编译 右键复制vue页面路径&#xff0c;主要用于快速复制vue页面的路径到浏览器