First, about Picker’s style on iOS

Vue mobile creates projects using REM adaptation. After the introduction of Vant UI component, it is found that the height of Picker is normal in Android, but only half of the original height in iOS. Later, it is found that the Picker unit in Vant component can only use PX, which is caused by the change of DPR.

Solution: Add a no-zoom resolution to index.html.

< meta name = "viewport" content = "width = device - width, initial - scale = 1, the user - scalable = 0, minimum - scale = 1.0, the maximum - scale = 1.0" >Copy the code

Second, use the Toast summary

Using toast.clear () clears all toasts. So, let’s use the singleton pattern. Toasts. allowMultiple toasts. toasts. allowMultiple toasts

Toast.allowMultiple(); Const toast1 = Toast(' first Toast'); Const toast2 = toast. success(' second Toast'); toast1.clear(); toast2.clear();Copy the code

Such as:

mounted(){ Toast.allowMultiple(); }, methods:{handleSubmit(){const toast2 = toast. loading({message: 'loading... ', forbidClick: true, loadingType: 'circular', duration: 0}); getList().then(res => { toast2.clear(); }, err => {}); }}Copy the code

Use the Dialog hook function

Using the hook function is more practical.

<van-dialog v-model="isShowDialog" title=" confirmButtonColor "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); }} else {return done(); }}}Copy the code