html上的样式 ui vant_Vant UI的组件使用问题

一、关于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();

}

}

}

复制代码