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--input
    style="pointer-events:none"
    :disabled="true"
    placeholder="请输入"/>
</view>

demo2

<template>
  <view>
    <view class="formBody">
      <u-form
        class="apply-form-field"
        :model="form"
        ref="form"
        :rules="rules"
        :errorType="errorType"
      >
        <u-form-item
          required
          label-width="150"
          label="养护站"
          right-icon="arrow-right"
          prop="maintenanceStationName"
        >
          <u-col @click="maintenanceStationIdShow = true">
            <u-input
              style="pointer-events: none"
              placeholder="选择养护站"
              v-model="form.maintenanceStationName"
              @click="maintenanceStationIdShow = true"
              disabled
            />
          </u-col>
          <u-picker
            range-key="siteName"
            v-model="maintenanceStationIdShow"
            :range="maintenanceStationList"
            mode="selector"
            @confirm="maintenanceStationIdConfirm"
          >
          </u-picker>
        </u-form-item>

        <u-form-item
          label-width="150"
          label="处置人员"
          right-icon="arrow-right"
          prop="disposePeopleName"
        >
          <u-col @click="disposePeopleNameShow = true">
            <u-input
              style="pointer-events: none"
              placeholder="选择处置人员"
              v-model="form.disposePeopleName"
              @click="disposePeopleNameShow = true"
              disabled
            />
          </u-col>
          <u-picker
            range-key="nickName"
            v-model="disposePeopleNameShow"
            :range="disposePeopleNameList"
            mode="selector"
            @confirm="applicantUserNameConfirm"
          ></u-picker>
        </u-form-item>

        <u-form-item
          label-width="150"
          label="联系方式"
          right-icon="none"
          prop="phone"
        >
          <u-input
            @focus="toTop"
            @blur="toBeJust"
            v-model="form.phone"
            disabled
          />
        </u-form-item>

        <u-form-item
          label-width="150"
          prop="diseaseLevel"
          label="优先级"
          right-icon="arrow-right"
        >
          <u-col @click="diseaseLevelShow = true">
            <u-input
              style="pointer-events: none"
              placeholder="选择优先级"
              :value="
                $getLabel(
                  diseaseLevelList,
                  'diseaseLevel',
                  form,
                  'dictValue',
                  'dictLabel'
                )
              "
              @click="diseaseLevelShow = true"
              disabled
            />
          </u-col>
          <u-picker
            range-key="dictLabel"
            v-model="diseaseLevelShow"
            :range="diseaseLevelList"
            mode="selector"
            @confirm="diseaseLevelConfirm"
          >
          </u-picker>
        </u-form-item>

        <u-form-item
          label-width="150"
          prop="deadline"
          label="截止时间"
          right-icon="none"
        >
          <u-col @click="timeShow = true">
            <u-input
              style="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-item
          label-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;
        }
      });
    },
  },
  onl oad(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>