一、关于Picker在iOS上的样式问题
Vue移动端创建项目，使用rem适配。引入Vant UI组件后，发现Picker的高度在安卓是正常的, iOS变的只有原来的一半, 后面发现是Vant组件中Picker的单位只能使用px, 使用dpr变化后导致的。
解决方案:
在index.html加入一句禁止缩放解决的。
content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">
复制代码
二、使用Toast的总结
使用Toast.clear()会清除所有的Toast。所以, 我们要使用单例模式。
Toast.allowMultiple，允许同时存在多个 Toast。
Toast.allowMultiple();
const toast1 = Toast('第一个 Toast');
const toast2 = Toast.success('第二个 Toast');
toast1.clear();
toast2.clear();
复制代码
比如:
mounted(){
Toast.allowMultiple();
},
methods:{
handleSubmit(){
const toast2 = Toast.loading({
message: '加载中 ...',
forbidClick: true,
loadingType: 'circular',
duration: 0 // 一直不关闭, 需手动关闭
});
getList().then(res => {
toast2.clear();
}, err => {});
}
}
复制代码
三、使用Dialog的钩子函数
使用钩子函数, 能更加实用。
v-model="isShowDialog"
title="确认操作"
show-cancel-button
confirmButtonColor='#1F52F9'
@confirm="onConfirm"
@cancel="onCancel"
:beforeClose="beforeClose"
>
methods: {
onConfirm(){},
onCancel(){},
beforeClose(action, done){
if (action === 'confirm'){
if (false) {
return done(false); // 阻止Dialog关闭
}
} else {
return done();
}
}
}
复制代码
如果觉得《html上的样式 ui vant_Vant UI的组件使用问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
