Uniapp中简单弹出层的使用

图示

在这里插入图片描述

思路

当派工单这个输入框获取到焦点后,弹出弹出层选择数据。

1、定义这个输入框
<view class="cu-form-group">
			<view class="title"><text class="text-red">*</text>派工单号: </view>
			<input type="text" v-model="DispatchTicketNumber" @focus="xuanzepgd" class="is-required"
				placeholder=" 请选择派工单号" />
			<uni-popup ref="popup">
                <div>
                 <ul>
                  <li v-for="(item,index) of DispatchTicketNumberList" :key="index"  @click="selectItem(item)">{{item.DocNo }}</li>
                 </ul>
                </div>
			 </uni-popup>
		</view>
2、当获取到焦点时,调用接口获取数据,这里参数我自己写死了
//派工单输入框获取焦点
			xuanzepgd() {
				console.log('输入框获取到了焦点')
				this.$refs['popup'].open(),
				//调用接口获取派工单号
			    uni.request({
			    	url: dtnApi,
			    	method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
			    	data: {
					      	context: {
					      		CultureName: "zh-CN",
					      		EntCode: "001",
					      		OrgCode: "MK",
					      		UserCode: "admin"
					      	},
						    inDTO: [
						    {
						      Work: '焊接',
						      Name: 'BP_11/2X6000MM_B80G23B01_HG',
						      Bm: '焊管一车间',
						      Mo: ''
						    }
						  ]
					    },			    	
					success: (res) => {
					          console.log("结果集");
					          console.log(res); //res是返回结果集
					          const DispatchTicketNumberList = res.data.d.map(item => ({
					            ...item,
					            selected: false, // 在这里添加一个 selected 属性,初始值为 false
					          }));
					          this.DispatchTicketNumberList = DispatchTicketNumberList;
					        },
					fail: (res) => {
						uni.showToast({
							title: res.errMsg,
							icon: 'none',
							duration: 2000,
						})
					},
			    })
			},
3、弹出框选择赋值给输入框
/弹出框赋值派工单号
			 selectItem(item) {
			      // 更新选中状态
			      this.DispatchTicketNumberList = this.DispatchTicketNumberList.map(i => {
			        i.selected = i.DocNo === item;
			        return i;
			      });
			      // 将所选值赋值给文本框
			      this.DispatchTicketNumber = item.DocNo;
				  console.log("所选值")
				  console.log(this.DispatchTicketNumber)
			      // 关闭弹窗
			      this.$refs['popup'].close();
			    },
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
UniApp是一个基于Vue.js的跨平台UI框架,它支持快速开发多端应用,包括Web、iOS、Android等。在UniApp层(也叫对话框或者模态框)是常见的交互元素,用于显示一些临时或重要信息。你可以使用`uni-modal`组件来创建和管理这些窗口。 以下是使用UniApp `uni-modal`组件的基本步骤: 1. 引入依赖:首先,在你的页面组件文件的顶部,引入`uni-modal`组件。 ```html <template> <view> <button @click="showModal">点击层</button> <uni-modal v-model="isModalOpen" :title="modalTitle" @close="handleClose"> <view>{{ modalContent }}</view> </uni-modal> </view> </template> ``` 2. 定义状态:在`data`选项,声明`isModalOpen`(布尔值,表示是否打开层)和`modalTitle`(字符串,层的标题)等变量。 ```javascript export default { data() { return { isModalOpen: false, modalTitle: '这是一个层', modalContent: '在这里展示你的内容', }; }, // ... } ``` 3. 显示/关闭方法:在组件内部定义`showModal`方法来打开层,`handleClose`方法在关闭时执行。 ```javascript methods: { showModal() { this.isModalOpen = true; }, handleClose() { this.isModalOpen = false; // 关闭时设置为false }, }, ``` 4. 控制行为:当你在模板的按钮上绑定`@click`事件,并调用`showModal`方法时,层就会显示;当点击外部区域或关闭按钮时,`handleClose`方法会被触发,关闭层。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晚风偷吻云朵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值