封装自定义JS和变量并结合UI框架

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/alison_year920/article/details/82941875

1.新建JS文件

需要引入的文件有

import Vue from 'vue'

import axios from 'axios'

import { Toast } from 'vant';

例如封装zanui toast组件格式：

export function toast (message,type,duration,forbidClick,mask,position,loadingType){

Toast({

message:message,//内容

type:type || 'text',//弹窗类型，loading success fail html

duration:type=='loading' ? 0 : duration || 2000,//展示时长(ms)，值为 0 时，toast 不会消失

forbidClick:forbidClick || true,//是否禁止背景点击

mask:type == 'loading' ? false : mask || false,//是否显示背景蒙层

position:position || 'middle',//位置，可选值为 top middle bottom

loadingType:loadingType || 'circular',//加载图标类型, 可选值为 spinner

})

}

2.在示例调用方式

import { toast } from '相对文件路径'

也可以使用this.$toast全局调用