当给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;
}
});
},
},
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>
