element ui的下拉框在ios移动端首次输入模糊查询不生效全局解决
在 iOS 移动端上，当您第一次输入内容时，可能无法正确触发 Element UI 下拉框的模糊查询功能。这个问题可能是由于 iOS Safari 浏览器默认将表单元素设置为需要双击才能激活造成的。为了解决这个问题，您可以尝试以下几种方式：
例如，如果您有一个下拉框组件如下所示：
<el-select v-model="value" placeholder="请选择">
<el-option label="选项1" value="option1"></el-option>
<el-option label="选项2" value="option2"></el-option>
</el-select>
那么您可以添加 onclick 属性并将其设置为 this.focus()，如下所示：
<el-select v-model="value" placeholder="请选择" onclick="this.focus()">
<el-option label="选项1" value="option1"></el-option>
<el-option label="选项2" value="option2"></el-option>
</el-select>
要使用 FastClick，您需要将其引入到项目中，然后在 DOMContentLoaded 事件完成时调用 FastClick.attach() 方法即可。例如：
<script src="path/to/fastclick.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
</script>
通过添加以上代码，您就可以解决 Element UI 下拉框在 iOS 移动端上首次输入模糊查询不生效的问题。
<div>
<label for="sel1" class="inp">开始时间（UT）：</label>
<el-date-picker
:editable="false"
v-model="startBudgetTime"
:picker-options="startDatePicker"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="选择开始日期"
/>
</div>
<div>
<label for="sel1" class="inp">结束时间（UT）：</label>
<el-date-picker
:editable="false"
v-model="endBudgetTime"
:picker-options="endDatePicker"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
default-time="['23:59:59']"
placeholder="选择结束日期"
/>
</div>
export default {
name: "SpacePosition",
data() {
return {
startBudgetTime: "", // 预算开始时间
endBudgetTime: "", // 预算结束时间
startDatePicker: this.beginDate(),
endDatePicker: this.processDate(),
};
},
}
methods: {
beginDate() {
const self = this;
return {
disabledDate(time) {
if (self.endBudgetTime) {
//如果结束时间不为空，则小于结束时间
return new Date(self.endBudgetTime).getTime() < time.getTime();
} else {
// return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
}
}
};
},
processDate() {
const self = this;
return {
disabledDate(time) {
if (self.startBudgetTime) {
//如果开始时间不为空，则结束时间大于开始时间
return new Date(self.startBudgetTime).getTime() > time.getTime();
} else {
// return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
}
}
};
},
}