vue中修改vant-ui的toast层级

1、在main.js中引用toast

main.js

import { Toast, Field, Form, Button, Picker, Popup, DatetimePicker, ActionSheet, 
NavBar } from 'vant';

const vantArr = [ Toast, Field, Form, Button, Picker, Popup, DatetimePicker, 
ActionSheet, NavBar ];

vantArr.map(( item ) => {
 Vue.use( item );
})

2、在页面中使用toast

<script>
onInput() {
	const that = this;
    if( that.value.length == 20 ) {
        this.$toast( {
            type : 'fail',
            message : '最多输入20个字符',
            className : 'toastIndex', //给toast添加类名
        } );
    }
}
</script>

3、每个页面有一个私有样式scoped，因此类名toastIndex的层级要写在App.vue里

App.vue

<style lang="less">
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* 改变Toast层级 */
.toastIndex {
  z-index: 50000 !important;
}
</style>

注：toast每调用一次（z-index）层级就会加一,因为默认打开了新窗口，层级会加一

==============================================================================

补充知识：vant-ui中的toast和dialog使用

Toast('提示')
Dialog({ message: '提示' })
//直接用官网的写法会报未定义

应该这样写

this.$toast('提示')
或
this.$toast({
	type : 'fail', //提示类型，可选值为:'fail','success','loading','html'
	message : '文本内容', //string
	duration : 2000, //展示时长(ms)，值为 0 时，toast 不会消失
	className : 'toastIndex', //自定义类名
	...
})


this.$dialog({ message: '提示' })