• uniapp中u-input点击事件失效

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

    解决办法

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

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

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

    demo1

    1. <view @click='handleClick'>
    2.     <u--input
    3.     style="pointer-events:none"
    4.     :disabled="true"
    5.     placeholder="请输入"/>
    6. view>

    demo2

    1. <template>
    2.   <view>
    3.     <view class="formBody">
    4.       <u-form
    5.         class="apply-form-field"
    6.         :model="form"
    7.         ref="form"
    8.         :rules="rules"
    9.         :errorType="errorType"
    10.       >
    11.         <u-form-item
    12.           required
    13.           label-width="150"
    14.           label="养护站"
    15.           right-icon="arrow-right"
    16.           prop="maintenanceStationName"
    17.         >
    18.           <u-col @click="maintenanceStationIdShow = true">
    19.             <u-input
    20.               style="pointer-events: none"
    21.               placeholder="选择养护站"
    22.               v-model="form.maintenanceStationName"
    23.               @click="maintenanceStationIdShow = true"
    24.               disabled
    25.             />
    26.           u-col>
    27.           <u-picker
    28.             range-key="siteName"
    29.             v-model="maintenanceStationIdShow"
    30.             :range="maintenanceStationList"
    31.             mode="selector"
    32.             @confirm="maintenanceStationIdConfirm"
    33.           >
    34.           u-picker>
    35.         u-form-item>
    36. ​
    37.         <u-form-item
    38.           label-width="150"
    39.           label="处置人员"
    40.           right-icon="arrow-right"
    41.           prop="disposePeopleName"
    42.         >
    43.           <u-col @click="disposePeopleNameShow = true">
    44.             <u-input
    45.               style="pointer-events: none"
    46.               placeholder="选择处置人员"
    47.               v-model="form.disposePeopleName"
    48.               @click="disposePeopleNameShow = true"
    49.               disabled
    50.             />
    51.           u-col>
    52.           <u-picker
    53.             range-key="nickName"
    54.             v-model="disposePeopleNameShow"
    55.             :range="disposePeopleNameList"
    56.             mode="selector"
    57.             @confirm="applicantUserNameConfirm"
    58.           >u-picker>
    59.         u-form-item>
    60. ​
    61.         <u-form-item
    62.           label-width="150"
    63.           label="联系方式"
    64.           right-icon="none"
    65.           prop="phone"
    66.         >
    67.           <u-input
    68.             @focus="toTop"
    69.             @blur="toBeJust"
    70.             v-model="form.phone"
    71.             disabled
    72.           />
    73.         u-form-item>
    74. ​
    75.         <u-form-item
    76.           label-width="150"
    77.           prop="diseaseLevel"
    78.           label="优先级"
    79.           right-icon="arrow-right"
    80.         >
    81.           <u-col @click="diseaseLevelShow = true">
    82.             <u-input
    83.               style="pointer-events: none"
    84.               placeholder="选择优先级"
    85.               :value="
    86.                 $getLabel(
    87.                   diseaseLevelList,
    88.                   'diseaseLevel',
    89.                   form,
    90.                   'dictValue',
    91.                   'dictLabel'
    92.                 )
    93.               "
    94.               @click="diseaseLevelShow = true"
    95.               disabled
    96.             />
    97.           u-col>
    98.           <u-picker
    99.             range-key="dictLabel"
    100.             v-model="diseaseLevelShow"
    101.             :range="diseaseLevelList"
    102.             mode="selector"
    103.             @confirm="diseaseLevelConfirm"
    104.           >
    105.           u-picker>
    106.         u-form-item>
    107. ​
    108.         <u-form-item
    109.           label-width="150"
    110.           prop="deadline"
    111.           label="截止时间"
    112.           right-icon="none"
    113.         >
    114.           <u-col @click="timeShow = true">
    115.             <u-input
    116.               style="pointer-events: none"
    117.               rightIcon="clock"
    118.               placeholder="选择巡检时间"
    119.               v-model="form.deadline"
    120.               @click="timeShow = true"
    121.               disabled
    122.             />
    123.           u-col>
    124.           <u-picker
    125.             :params="params"
    126.             v-model="timeShow"
    127.             mode="time"
    128.             @confirm="timeConfirm"
    129.           >
    130.           u-picker>
    131.         u-form-item>
    132. ​
    133.         <u-form-item
    134.           label-position="top"
    135.           label-width="150"
    136.           label="处置内容"
    137.           right-icon="none"
    138.           prop="disposeContent"
    139.         >
    140.           <u-input
    141.             @focus="toTop"
    142.             @blur="toBeJust"
    143.             v-model="form.disposeContent"
    144.             type="textarea"
    145.             placeholder="请输入处置内容"
    146.           />
    147.         u-form-item>
    148.       u-form>
    149.     view>
    150. ​
    151.     <view class="bottomBox">
    152.       <view class="bottomBox-icon"> view>
    153.       <view class="bottomBox-box">
    154.         <view class="none" @click="back">取消view>
    155.         <view class="sure" @click="submitForm">确定view>
    156.       view>
    157.     view>
    158.   view>
    159. template>
    160. ​
    161. <script>
    162. import { isOpenMode } from "@/common/normal";
    163. import diseaseDisposal from "../../../../common/api/system/workbench/diseaseDisposal";
    164. ​
    165. export default {
    166.   data() {
    167.     return {
    168.       disposePeopleNameShow: false,
    169.       diseaseLevelShow: false,
    170.       timeShow: false,
    171.       maintenanceStationIdShow: false,
    172.       rules: {
    173.         maintenanceStationName: [
    174.           {
    175.             required: true,
    176.             message: "请选择养护站",
    177.             trigger: ["blur"],
    178.           },
    179.         ],
    180.       },
    181.       errorType: ["message", "border"],
    182.       form: {},
    183.       params: {
    184.         year: true,
    185.         month: true,
    186.         day: true,
    187.         hour: true,
    188.         minute: true,
    189.         second: true,
    190.       },
    191.       maintenanceStationList: [],
    192.       disposePeopleNameList: [],
    193.       diseaseLevelList: [],
    194.     };
    195.   },
    196.   methods: {
    197.     toTop() {
    198.       let num = isOpenMode();
    199.       if (num === 3 || num === 2) {
    200.         return;
    201.       } else {
    202.         const bottomBox = document.querySelector(".bottomBox");
    203.         bottomBox.style.bottom = -100 + "px";
    204. ​
    205.         const formBody = document.querySelector(".formBody");
    206.         formBody.style.height =
    207.           "calc(100vh - var(--window-top) - var(--window-bottom))";
    208.       }
    209.     },
    210. ​
    211.     toBeJust() {
    212.       const bottomBox = document.querySelector(".bottomBox");
    213.       bottomBox.style.bottom = 0;
    214. ​
    215.       const formBody = document.querySelector(".formBody");
    216.       formBody.style.height =
    217.         "calc(100vh - var(--window-top) - var(--window-bottom) - 96px)";
    218.     },
    219. ​
    220.     getApplicantUserNameList() {
    221.       this.$u.api.diseaseReporting.getUser().then((res) => {
    222.         this.disposePeopleNameList = res.data;
    223.       });
    224.     },
    225. ​
    226.     getMaintenanceStationList() {
    227.       this.$u.api.diseaseDisposal.maintenanceStationList().then((res) => {
    228.         if (res.code === 1) this.maintenanceStationList = res.data;
    229.       });
    230.     },
    231. ​
    232.     getUpstreamDownstreamList() {
    233.       var params = {
    234.         dictType: "direct_manage_task_priority",
    235.       };
    236.       this.$u.api.normal.getDict(params).then((res) => {
    237.         this.diseaseLevelList = res.data;
    238.       });
    239.     },
    240. ​
    241.     applicantUserNameConfirm(e) {
    242.       this.form.disposePeopleId = this.disposePeopleNameList[e].userId;
    243.       this.form.disposePeopleName = this.disposePeopleNameList[e].nickName;
    244.       this.form.phone = this.disposePeopleNameList[e].phone;
    245.     },
    246. ​
    247.     maintenanceStationIdConfirm(e) {
    248.       this.form.maintenanceStationName =
    249.         this.maintenanceStationList[e].siteName;
    250.       this.form.maintenanceStationId = this.maintenanceStationList[e].id;
    251.     },
    252. ​
    253.     timeConfirm(e) {
    254.       this.form.deadline = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
    255.     },
    256. ​
    257.     diseaseLevelConfirm(e) {
    258.       this.form.diseaseLevel = this.diseaseLevelList[e].dictValue;
    259.     },
    260. ​
    261.     back() {
    262.       uni.navigateBack({
    263.         delta: 1,
    264.       });
    265.     },
    266. ​
    267.     submitForm() {
    268.       this.$refs.form.validate((valid) => {
    269.         if (valid) {
    270.           console.log(this.form);
    271.           this.$u.api.diseaseDisposal
    272.             .saveDiseaseDisposal(this.form)
    273.             .then((res) => {
    274.               if (res.code === 1) {
    275.                 this.$u.toast("处置成功");
    276.                 setTimeout(() => {
    277.                   this.back();
    278.                 }, 1000);
    279.               }
    280.             });
    281.         } else {
    282.           return false;
    283.         }
    284.       });
    285.     },
    286.   },
    287.   onLoad(option) {
    288.     this.form.diseaseClaimId = option.id;
    289.   },
    290.   onShow() {
    291.     this.form.disposePeopleId = this.vuex_user.sysUser.userId;
    292.     this.form.disposePeopleName = this.vuex_user.sysUser.nickName;
    293.     this.form.phone = this.vuex_user.sysUser.phone;
    294. ​
    295.     this.getApplicantUserNameList();
    296.     this.getUpstreamDownstreamList();
    297.     this.getMaintenanceStationList();
    298.   },
    299.   mounted() {
    300.     this.$refs.form.setRules(this.rules);
    301.     let windowHeight = 0;
    302.     uni.getSystemInfo({
    303.       success: (res) => {
    304.         windowHeight = res.windowHeight;
    305.       },
    306.     });
    307. ​
    308.     const windowResizeCallback = (res) => {
    309.       if (res.size.windowHeight < windowHeight) {
    310.         this.toTop();
    311.       } else {
    312.         this.toBeJust();
    313.       }
    314.     };
    315.     uni.onWindowResize(windowResizeCallback);
    316.   },
    317. };
    318. script>
    319. ​
    320. <style lang="scss" scoped>
    321. page {
    322.   height: 100%;
    323.   background-color: #f5f5f5;
    324. }
    325. ​
    326. ::v-deep .u-form-item {
    327.   padding: 16px 32rpx !important;
    328.   font-size: 17px;
    329.   font-family: PingFangSC-Regular, PingFang SC;
    330.   font-weight: 400;
    331.   color: #1f1f1f;
    332.   font-size: 32rpx !important;
    333. }
    334. ​
    335. .line {
    336.   height: 12px;
    337.   width: 100%;
    338.   background-color: #f5f5f5;
    339. }
    340. ​
    341. .tips {
    342.   padding: 0px 32rpx 0 32rpx;
    343.   margin-top: 4px;
    344.   font-size: 14px;
    345.   font-family: PingFangSC-Regular, PingFang SC;
    346.   font-weight: 400;
    347.   color: rgba(31, 31, 31, 0.4);
    348. }
    349. ​
    350. .bottomBox {
    351.   width: 100%;
    352.   position: absolute;
    353.   bottom: 0px;
    354.   height: 96px;
    355.   z-index: 999;
    356.   background: #ffffff;
    357.   box-shadow: inset 0px 1px 0px 0px rgba(25, 31, 37, 0.12);
    358.   /*border: 2px solid red;*/
    359.   display: flex;
    360.   justify-content: space-between;
    361. ​
    362.   &-icon {
    363.     width: 55%;
    364.     display: flex;
    365.     justify-content: space-between;
    366.     align-items: center;
    367.     padding: 10rpx 60rpx 0;
    368. ​
    369.     &-iconBox {
    370.       display: flex;
    371.       flex-direction: column;
    372.       align-items: center;
    373.       font-size: 28rpx;
    374.       font-family: PingFangSC-Regular, PingFang SC;
    375.       font-weight: 400;
    376.       color: #1f1f1f;
    377.       height: 44px;
    378. ​
    379.       .u-icon {
    380.         font-size: 40rpx;
    381.         margin-bottom: 12rpx;
    382.       }
    383.     }
    384.   }
    385. ​
    386.   &-box {
    387.     margin-top: 8px;
    388.     display: flex;
    389.     align-items: center;
    390.     padding: 0 32rpx;
    391.     flex: 1;
    392. ​
    393.     view {
    394.       width: 50%;
    395.       height: 44px;
    396.       border-radius: 4px;
    397.       border: 1px solid rgba(31, 31, 31, 0.1);
    398.       display: flex;
    399.       justify-content: center;
    400.       align-items: center;
    401.       font-size: 34rpx;
    402.       font-family: PingFangSC-Regular, PingFang SC;
    403.       font-weight: 400;
    404.     }
    405. ​
    406.     .none {
    407.       color: #1f1f1f;
    408.       margin-right: 16rpx;
    409.     }
    410. ​
    411.     .none:active {
    412.       background: rgba(31, 31, 31, 0.17);
    413.     }
    414. ​
    415.     .sure {
    416.       background: #3296fa;
    417.       color: #ffffff;
    418.     }
    419. ​
    420.     .sure:active {
    421.       background: rgba(32, 116, 212, 1);
    422.     }
    423.   }
    424. }
    425. ​
    426. .formBody {
    427.   position: absolute;
    428.   height: calc(100vh - var(--window-top) - var(--window-bottom) - 96px);
    429.   overflow-y: auto;
    430.   width: 100%;
    431. }
    432. style>
    433. ​

  • 相关阅读:
    【提分trick】SWA（随机权重平均）和EMA（指数移动平均）
    Feign 从注册到调用原理分析
    ClassWizard generated virtual function overrides
    git搜索历史上曾经的文本内容
    Java Spring MVC如何编写一个示例程序呢？
    找斑点（blob)的最小旋转矩形（三）
    视频汇聚平台EasyCVR对接GA/T 1400视图库：结构化数据（人员/人脸、车辆、物品）对象XMLSchema描述
    力扣（LeetCode）320. 列举单词的全部缩写（2022.11.17）
    五个分层维度：SpringBoot工程分层实战
    过拟合学习理解
  • 原文地址：https://blog.csdn.net/m0_74149462/article/details/139625457