uniapp中u-input点击事件失效

当给u-input设置了disabled/readonly属性后,pc浏览器中点击事件失效,但是app/移动端h5中却仍有效

解决办法

给外边包上一个盒子设置点击事件,给input加上css属性:pointer-events:none

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。

除了指示该元素不是鼠标事件的目标之外,值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

demo1

<view @click='handleClick'><u--inputstyle="pointer-events:none":disabled="true"placeholder="请输入"/>
</view>

demo2

<template><view><view class="formBody"><u-formclass="apply-form-field":model="form"ref="form":rules="rules":errorType="errorType"><u-form-itemrequiredlabel-width="150"label="养护站"right-icon="arrow-right"prop="maintenanceStationName"><u-col @click="maintenanceStationIdShow = true"><u-inputstyle="pointer-events: none"placeholder="选择养护站"v-model="form.maintenanceStationName"@click="maintenanceStationIdShow = true"disabled/></u-col><u-pickerrange-key="siteName"v-model="maintenanceStationIdShow":range="maintenanceStationList"mode="selector"@confirm="maintenanceStationIdConfirm"></u-picker></u-form-item>
​<u-form-itemlabel-width="150"label="处置人员"right-icon="arrow-right"prop="disposePeopleName"><u-col @click="disposePeopleNameShow = true"><u-inputstyle="pointer-events: none"placeholder="选择处置人员"v-model="form.disposePeopleName"@click="disposePeopleNameShow = true"disabled/></u-col><u-pickerrange-key="nickName"v-model="disposePeopleNameShow":range="disposePeopleNameList"mode="selector"@confirm="applicantUserNameConfirm"></u-picker></u-form-item>
​<u-form-itemlabel-width="150"label="联系方式"right-icon="none"prop="phone"><u-input@focus="toTop"@blur="toBeJust"v-model="form.phone"disabled/></u-form-item>
​<u-form-itemlabel-width="150"prop="diseaseLevel"label="优先级"right-icon="arrow-right"><u-col @click="diseaseLevelShow = true"><u-inputstyle="pointer-events: none"placeholder="选择优先级":value="$getLabel(diseaseLevelList,'diseaseLevel',form,'dictValue','dictLabel')"@click="diseaseLevelShow = true"disabled/></u-col><u-pickerrange-key="dictLabel"v-model="diseaseLevelShow":range="diseaseLevelList"mode="selector"@confirm="diseaseLevelConfirm"></u-picker></u-form-item>
​<u-form-itemlabel-width="150"prop="deadline"label="截止时间"right-icon="none"><u-col @click="timeShow = true"><u-inputstyle="pointer-events: none"rightIcon="clock"placeholder="选择巡检时间"v-model="form.deadline"@click="timeShow = true"disabled/></u-col><u-picker:params="params"v-model="timeShow"mode="time"@confirm="timeConfirm"></u-picker></u-form-item>
​<u-form-itemlabel-position="top"label-width="150"label="处置内容"right-icon="none"prop="disposeContent"><u-input@focus="toTop"@blur="toBeJust"v-model="form.disposeContent"type="textarea"placeholder="请输入处置内容"/></u-form-item></u-form></view>
​<view class="bottomBox"><view class="bottomBox-icon"> </view><view class="bottomBox-box"><view class="none" @click="back">取消</view><view class="sure" @click="submitForm">确定</view></view></view></view>
</template>
​
<script>
import { isOpenMode } from "@/common/normal";
import diseaseDisposal from "../../../../common/api/system/workbench/diseaseDisposal";
​
export default {data() {return {disposePeopleNameShow: false,diseaseLevelShow: false,timeShow: false,maintenanceStationIdShow: false,rules: {maintenanceStationName: [{required: true,message: "请选择养护站",trigger: ["blur"],},],},errorType: ["message", "border"],form: {},params: {year: true,month: true,day: true,hour: true,minute: true,second: true,},maintenanceStationList: [],disposePeopleNameList: [],diseaseLevelList: [],};},methods: {toTop() {let num = isOpenMode();if (num === 3 || num === 2) {return;} else {const bottomBox = document.querySelector(".bottomBox");bottomBox.style.bottom = -100 + "px";
​const formBody = document.querySelector(".formBody");formBody.style.height ="calc(100vh - var(--window-top) - var(--window-bottom))";}},
​toBeJust() {const bottomBox = document.querySelector(".bottomBox");bottomBox.style.bottom = 0;
​const formBody = document.querySelector(".formBody");formBody.style.height ="calc(100vh - var(--window-top) - var(--window-bottom) - 96px)";},
​getApplicantUserNameList() {this.$u.api.diseaseReporting.getUser().then((res) => {this.disposePeopleNameList = res.data;});},
​getMaintenanceStationList() {this.$u.api.diseaseDisposal.maintenanceStationList().then((res) => {if (res.code === 1) this.maintenanceStationList = res.data;});},
​getUpstreamDownstreamList() {var params = {dictType: "direct_manage_task_priority",};this.$u.api.normal.getDict(params).then((res) => {this.diseaseLevelList = res.data;});},
​applicantUserNameConfirm(e) {this.form.disposePeopleId = this.disposePeopleNameList[e].userId;this.form.disposePeopleName = this.disposePeopleNameList[e].nickName;this.form.phone = this.disposePeopleNameList[e].phone;},
​maintenanceStationIdConfirm(e) {this.form.maintenanceStationName =this.maintenanceStationList[e].siteName;this.form.maintenanceStationId = this.maintenanceStationList[e].id;},
​timeConfirm(e) {this.form.deadline = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;},
​diseaseLevelConfirm(e) {this.form.diseaseLevel = this.diseaseLevelList[e].dictValue;},
​back() {uni.navigateBack({delta: 1,});},
​submitForm() {this.$refs.form.validate((valid) => {if (valid) {console.log(this.form);this.$u.api.diseaseDisposal.saveDiseaseDisposal(this.form).then((res) => {if (res.code === 1) {this.$u.toast("处置成功");setTimeout(() => {this.back();}, 1000);}});} else {return false;}});},},onLoad(option) {this.form.diseaseClaimId = option.id;},onShow() {this.form.disposePeopleId = this.vuex_user.sysUser.userId;this.form.disposePeopleName = this.vuex_user.sysUser.nickName;this.form.phone = this.vuex_user.sysUser.phone;
​this.getApplicantUserNameList();this.getUpstreamDownstreamList();this.getMaintenanceStationList();},mounted() {this.$refs.form.setRules(this.rules);let windowHeight = 0;uni.getSystemInfo({success: (res) => {windowHeight = res.windowHeight;},});
​const windowResizeCallback = (res) => {if (res.size.windowHeight < windowHeight) {this.toTop();} else {this.toBeJust();}};uni.onWindowResize(windowResizeCallback);},
};
</script>
​
<style lang="scss" scoped>
page {height: 100%;background-color: #f5f5f5;
}
​
::v-deep .u-form-item {padding: 16px 32rpx !important;font-size: 17px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #1f1f1f;font-size: 32rpx !important;
}
​
.line {height: 12px;width: 100%;background-color: #f5f5f5;
}
​
.tips {padding: 0px 32rpx 0 32rpx;margin-top: 4px;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(31, 31, 31, 0.4);
}
​
.bottomBox {width: 100%;position: absolute;bottom: 0px;height: 96px;z-index: 999;background: #ffffff;box-shadow: inset 0px 1px 0px 0px rgba(25, 31, 37, 0.12);/*border: 2px solid red;*/display: flex;justify-content: space-between;
​&-icon {width: 55%;display: flex;justify-content: space-between;align-items: center;padding: 10rpx 60rpx 0;
​&-iconBox {display: flex;flex-direction: column;align-items: center;font-size: 28rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #1f1f1f;height: 44px;
​.u-icon {font-size: 40rpx;margin-bottom: 12rpx;}}}
​&-box {margin-top: 8px;display: flex;align-items: center;padding: 0 32rpx;flex: 1;
​view {width: 50%;height: 44px;border-radius: 4px;border: 1px solid rgba(31, 31, 31, 0.1);display: flex;justify-content: center;align-items: center;font-size: 34rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;}
​.none {color: #1f1f1f;margin-right: 16rpx;}
​.none:active {background: rgba(31, 31, 31, 0.17);}
​.sure {background: #3296fa;color: #ffffff;}
​.sure:active {background: rgba(32, 116, 212, 1);}}
}
​
.formBody {position: absolute;height: calc(100vh - var(--window-top) - var(--window-bottom) - 96px);overflow-y: auto;width: 100%;
}
</style>
​

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

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

相关文章

糖料蔗精准测产 ,珈和科技倾力打造广西农险科技服务新标杆!

2024年中央一号文件中提到&#xff0c;鼓励地方发展特色农产品保险。随着近年来广西省对农业风险管理方式的不断探索与试点&#xff0c;糖料蔗、桉树、柑橘等种植收入保险需求迅速增加&#xff0c;传统的测产方式在效率上不仅耗时费力&#xff0c;而且难以满足大规模经济作物的…

Vue笔记(三)

上一篇&#xff1a;Vue二&#xff09;-CSDN博客 目录 1.自定义指令 v-loading的封装 2.插槽 文本插槽 文本插槽&#xff08;有默认值&#xff09; 具名插槽 作用域插槽 详细做一个练习 实现如下效果 目录结构 准备数据 父传子数据 使用文本插槽自定义按钮文本 实…

动态防护开启教程和体验感受

动态防护是雷池 WAF 社区版在版本 [6.0.0] 中新增的一个功能&#xff0c;它属于站点高级防护的一部分。动态防护的主要作用是自动动态加密网站的 HTML 和 JavaScript 源码&#xff0c;目的是阻止爬虫和攻击自动化程序的分析。这项功能在 [6.0.0] 版本中标记为 BETA 版本&#x…

2024 年最新 Python 调用 OpenAi 详细教程实现问答、图像合成、图像理解、语音合成、语音识别(详细教程)

OpenAi 环境安装 首先确保您的计算机上已经安装了 Python。您可以从 Python 官方网站下载并安装最新版本 Python。安装时&#xff0c;请确保勾选 “Add Python to PATH” &#xff08;添加环境变量&#xff09;选项&#xff0c;以便在 cmd 命令行中直接使用 Python。 安装 Op…

华为大咖说 | AI 是行业的未来, 还是另一个“元宇宙”?

本文作者&#xff1a;陈冠宏&#xff08;华为网络MSSD首席顾问&#xff09;全文约4497字&#xff0c;阅读约需10分钟 在本年度的517电信日上&#xff0c;中国电信高层在产品升级计划发布会中喊出“ALL in AI”战略&#xff0c;其震撼力让人瞩目。 自2022年11月OpenAI推出划时代…

机器学习归一化特征编码

特征缩放 因为对于大多数的机器学习算法和优化算法来说&#xff0c;将特征值缩放到相同区间可以使得获取性能更好的模型。就梯度下降算法而言&#xff0c;例如有两个不同的特征&#xff0c;第一个特征的取值范围为1——10&#xff0c;第二个特征的取值范围为1——10000。在梯度…

Facebook隐私保护:用户数据安全的挑战与应对策略

在当今数字化时代&#xff0c;随着社交媒体的普及和信息技术的快速发展&#xff0c;人们对于个人数据隐私和安全的关注越来越高。作为全球最大的社交网络平台之一&#xff0c;Facebook在用户数据保护方面面临着诸多挑战和责任。本文将深入探讨Facebook在隐私保护方面的现状、面…

k8s+springcloud+nacos部署配置

1 k8s 部署nacos-2.1.2配置k8s-nacos-statefulSet.yaml文件 apiVersion: v1 kind: Service metadata:name: nacos-headlessnamespace: rz-dtlabels:app: nacosannotations:service.alpha.kubernetes.io/tolerate-unready-endpoints: "true" spec:# 3个端口打开&…

VMware ESXi 8.0U2c macOS Unlocker OEM BIOS ConnectX-3 网卡定制版 (集成驱动版)

VMware ESXi 8.0U2c macOS Unlocker & OEM BIOS ConnectX-3 网卡定制版 (集成驱动版) 发布 ESXi 8.0U2 集成驱动版&#xff0c;在个人电脑上运行企业级工作负载 请访问原文链接&#xff1a;https://sysin.org/blog/vmware-esxi-8-u2-sysin/&#xff0c;查看最新版。原创作…

UE5.2打包安卓

目录 简介: 一. 根据官网配置 二. 手动定位SDK路径 三: 设置Android基本信息 四: 设置KeyStore 五: 开始打包 六:其他 七. 总结 简介: UE5.2 打包安卓是指将使用 Unreal Engine 5.2 开发的项目编译为可在安卓设备上运行的安装包。 以下是一般的打包步骤&#xff1a; 安装…

Spring Cloud全家桶(上)【Nacos、OpenFeign、LoadBalancer、GateWay、金丝雀灰色发布】

0.零基础入门微服务实战课 1.微服务和 Spring Cloud1.1 什么是微服务&#xff1f;1.2 什么是 Spring Cloud&#xff1f;1.3 微服务 VS Spring Cloud 2.为什么要学微服务&#xff1f;3.Spring Cloud 组件介绍1.什么是 Nacos?1.1 Nacos 功能1.1.1 配置中心1.1.2 注册中心 1.2 Na…

HashMap底层源码分析

目录 一、知识点二、数据结构三、resize() 扩容方法四、putVal() 添加数据方法五、remove() 删除方法六、removeTreeNode() 退化链表方法 一、知识点 加载因子: HashMap 的默认的加载因子: 0.75&#xff0c;用来限定阈值&#xff08;用于控制 HashMap 的饱和度&#xff09; 阈值…

红酒保存中的摆放方式:倾斜瓶身的重要性

在探讨云仓酒庄雷盛红酒的保存方法时&#xff0c;我们不得不提及一个关键的细节&#xff1a;瓶身的倾斜。许多人可能认为红酒的保存方式仅仅是温度控制和存储环境的湿度问题&#xff0c;然而实际上&#xff0c;摆放方式同样至关重要。雷盛红酒在保存过程中&#xff0c;需要一个…

安川机器人MA1440减速机维修方法

一、安川机械臂减速器维修方法 1. 齿轮磨损维修 对于轻微磨损的齿轮&#xff0c;可以通过重新调整啮合间隙来恢复性能。对于严重磨损的齿轮&#xff0c;需要更换新安川MA1440机械手齿轮箱齿轮。 2. 轴承损坏维修 对于损坏的轴承&#xff0c;需要更换新的轴承。在更换过程中&…

省市县选择三级联动(使用高德API实现)

省市县选择如果自己实现是比较麻烦的&#xff0c;最近发现可以使用高德实现省市县联动选择&#xff0c;实现后来记录一下供大家参考。 文章目录 最终效果&#xff1a;一、准备工作二、完整页面代码 最终效果&#xff1a; 实现单次点击获取省市县名称&#xff0c;选择完成后返回…

web端即时通信技术

web端即时通信技术 对于IM/消息推送这类即时通讯系统而言&#xff0c;系统的关键就是“实时通信”能力。所谓实时通信有以下两层含义 客户端可以主动向服务端发送信息。 当服务端内容发生变化时&#xff0c;服务端可以实时通知客户端。 HTTP局限 Http是客户端/服务器模式中…

免费分享:1901-2020全球气候数据集(附下载办法)

长期的全球其后数据不仅能够揭示长期的气候趋势&#xff0c;还为农业、水资源管理、公共卫生等多个领域的决策提供科学依据&#xff0c;对于推动可持续发展具有重要意义。 数据集简介 CRU TS&#xff08;Climatic Research Unit gridded Time Series&#xff09;数据集&#…

宽睿数字平台兼容TDengine 等多种数据库,提供行情解决方案

小T导读&#xff1a;最近&#xff0c;涛思数据与宽睿金融宣布了一项重要合作。在此之前&#xff0c;宽睿金融对 TDengine 进行了性能测试&#xff0c;并根据测试报告的结果&#xff0c;决定将 TDengine 接入宽睿数字平台&#xff0c;以提升高密度行情处理效率。本文将详细介绍此…

百元开放式耳机性价比推荐,全网5款爆火产品实测!

耳机作为我们日常生活中不可或缺的一部分&#xff0c;它的性能、配置及形态也在不停的优化。目前开放式耳机是耳机中最为热门的一款产品&#xff0c;以其不入耳的的设计迅速占领耳机市场&#xff0c;最主要是因为自身佩戴的舒适度有大幅度提升。人们更加注重生活的质量&#xf…

Apollo9.0 PNC源码学习之Control模块(五)—— 基于LQR的横向控制

前面文章&#xff1a; Apollo9.0 PNC源码学习之Control模块&#xff08;一&#xff09; Apollo9.0 PNC源码学习之Control模块&#xff08;二&#xff09; Apollo9.0 PNC源码学习之Control模块&#xff08;三&#xff09; Apollo9.0 PNC源码学习之Control模块&#xff08;四&…