有一个业务是要做一个h5页面,直接用vue写页面。要适配移动端原来真不容易,在开发中也遇到了一些问题,这里记录一下,也希望能对遇到同样问题的朋友有所帮助。
一、当你点击输入框时,聚焦输入框,莫名其妙就放大页面。
在pc页面调试的时候一直没什么问题,在我自己的安卓机上调也没问题,但是测试的苹果手机就出问题了。
这个时候就要设置public文件夹上的index文件缩放关闭
//minimum-scale=1.0, maximum-scale=1.0, user-scalable=no
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
二、elementUI使用input输入框type为number类型时,会有不喜欢的小图标
为了能让手机浏览器在点击输入框时,自动弹出数字输入框,设置了type为number,但是用pc端打开时就会有一个上下小图片,想要隐藏掉,这样设置就行。
<style lang="scss" scoped>
:deep(.el-input input::-webkit-outer-spin-button),
:deep(.el-input input::-webkit-inner-spin-button) {
-webkit-appearance: none !important;
}
</style>
三、用了elementUI的ElMessageBox组件,用手机查看,设置样式问题
ElMessageBox组件在在移动端点开,宽度会拉的很长,想要设置他的样式,发现一直设置不了。
这时可以customClass属性为一个复杂的名字(就是不会跟其他页面的类名相同),设置css样式不为scoped(不然怎么修改样式都修改不了),这样会有样式污染问题。
await ElMessageBox.confirm(
`是否要继续提交?`,
'提示',
{
confirmButtonText: '继续提交',
cancelButtonText: '取消',
type: 'warning',
customClass: 'registered-msg-box',
},
)
<style>
.registered-msg-box {
width: 80% !important;
}
</style>
四、elementUI输入框设置maxlenght无效,实现输入时就限制输入字数,优雅实现
<el-input
v-model="formData.factoryName"
placeholder="请输入工厂名称"
@input="handleInputFactoryName"
></el-input>
const handleInputFactoryName = (val: string) => {
//这里设置了限定50字
formData.value.factoryName = val.slice(0, 50);
};
五、优雅实现发送验证码,倒计时
<el-form-item label="验证码" required prop="verificationCode">
<el-input
v-model="formData.verificationCode"
placeholder="请输入验证码"
style="flex: 1"
></el-input>
<el-button type="primary" @click="handleGetCode()" :loading="count !== 0">
{{ count || '发送验证码' }}
</el-button>
</el-form-item>
const codeTimer = ref();
const count = ref(0);
const clearCodeTimer = () => {
if (codeTimer.value) {
clearInterval(codeTimer.value);
codeTimer.value = null;
}
};
const createCodeTimer = () => {
codeTimer.value = setInterval(() => {
count.value -= 1;
if (count.value === 0) {
clearCodeTimer();
}
}, 1000);
};
const handleGetCode = async () => {
form.value?.validateField('phoneNumber', async error => {
if (error) {
ElMessage.error(error);
} else {
//这行调用api发送给后端
//有效时间,五分钟即300秒
count.value = 300;
createCodeTimer();
ElMessage.success('验证码已发送');
}
});
};