当前位置:   article > 正文

uniapp中u-input点击事件失效_uniapp uview u-input绑定click事件无效

uniapp uview u-input绑定click事件无效

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/神奇cpp/article/detail/741393
推荐阅读
相关标签
  

闽ICP备14008679号