Vant UI的组件使用问题

一、关于Picker在iOS上的样式问题

Vue移动端创建项目，使用rem适配。引入Vant UI组件后，发现Picker的高度在安卓是正常的, iOS变的只有原来的一半, 后面发现是Vant组件中Picker的单位只能使用px, 使用dpr变化后导致的。

解决方案: 在index.html加入一句禁止缩放解决的。

<meta name="viewport"
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的钩子函数

使用钩子函数, 能更加实用。

<van-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();
        }
    }
}