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; 具名插槽 作用域插槽 详细做一个练习 实现如下效果 目录结构 准备数据 父传子数据 使用文本插槽自定义按钮文本 实…

RushJs遇到Browserslist: caniuse-lite is outdated解决方案

突然。 CI服务器上打包应用的是会报一个警告。 Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-dblatest Why you should do it regularly: https://github.com/browserslist/update-db#readmeBrowserslist里的数据库过期了。 这个警告会让C…

Maven: 编码GBK的不可映射字符不能编译

使用mvn compile命令&#xff0c;出现错误: 编码GBK的不可映射字符不能编译。这是因为代码或注释中存在中文引起的&#xff0c;一般在ide中会自动处理编译时的字符集&#xff0c;就不会碰到这个错误。这个错误是在生成代码后&#xff0c;其中自动加上了中 文注释&#xff0c;手…

vue路由:hash模式下跳转404的问题。

vue的路由模式&#xff1a;hash和history。 最近有个问题&#xff0c;其实很常见就是hash模式跳转404。 发生问题的场景&#xff1a; 1.项目加载的动态路由。 2.首页和登录页在一个动态路由模块&#xff0c;而其他的管理层页面模块在另外一个动态路由模块。按需加载&#x…

在两个脚本之间传输文本信息

一、接收方有一个文本&#xff0c;用于显示接收的信息 (一&#xff09;接收方&#xff1a; 1、UI-Text TextMeshPro&#xff0c;名字自取。如&#xff1a;TitleText 2、给TitleText添加Recipients.cs组件。 using System.Collections; using System.Collections.Generic; u…

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

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

c#中switch case语句的用法

前言 在c#中如果对于两种不同情况的处理&#xff0c;一般使用If else结构&#xff0c;但是对于3种及以上情况的处理最好使用switch case语句来增强代码的可读性&#xff0c;本文就是详细介绍switch case语句在c#中的常见应用 1、常规使用 下面的代码中c是一个Int类型的变量&…

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个端口打开&…

拓扑排序和关键路径详解

目录 拓扑排序 关键路径 拓扑排序 如果有一个有向图的任意顶点都无法通过一些有向边回到身边&#xff0c;那么称这个有向图为有向无环图。 拓扑排序是将有向无环图的所有顶点排成一个线性序列&#xff0c;使得对图中的任意两个顶点u,v,如果存在边u->v&#xff0c;那么在…

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; 安装…

centos7 xtrabackup mysql 基本测试(3)---虚拟机环境 安装mysql

centos7 xtrabackup mysql 基本测试&#xff08;3&#xff09;—虚拟机环境 安装mysql centos7 安装 mysql5.7 可以在运行安装程序之前导入密钥&#xff1a; sudo rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022第一步、下载MySQL 安装包&#xff1a; sudo w…

Web前端CreateJS:探索、深化与应用

Web前端CreateJS&#xff1a;探索、深化与应用 在Web前端的世界里&#xff0c;CreateJS是一套功能强大的JavaScript库&#xff0c;它让开发者能够轻松创建富交互性的动画、游戏和应用程序。本文将从四个方面、五个方面、六个方面和七个方面深入探讨CreateJS的魅力与应用。 四…

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; 阈值…