作者的话

移动端页面常用加载框，集成 加载中，成功，失败，警告，toast显示方式

适用平台：亲测 H5、微信小程序、app

插件地址

Dcloud 插件市场：https://ext.dcloud.net.cn/plugin?id=2619

自定义模态框.jpg

使用方法：

在 script 中引用

import kModel from '@/components/k-model/k-model.vue';export default {  components: {    kModel  }}

在 template 中使用组件

<kModel ref="kModel" />

属性说明

事件说明

方法说明

demo 使用案例

<template>    <view class="content">        <kModel ref="kModel" />        <button @tap="startShow({type:'loading',style:'circle',title:'我是圆形加载...'})">开启圆形加载</button>        <button @tap="startShow({type:'loading',style:'line',title:'我是柱形加载...'})">开启柱形加载</button>        <button @tap="startShow({type:'success',title:'加载成功'})">显示加载成功</button>        <button @tap="startShow({type:'error',title:'加载失败'})">显示加载失败</button>        <button @tap="startShow({type:'warn',title:'出现警告'})">显示警告</button>        <button @tap="startShow({type:'toast',title:'我是toast'})">显示toast</button>    </view></template><script>    import kModel from '@/components/k-model/k-model.vue';    export default {        components: {            kModel        },        data() {            return {                title: 'Hello'            };        },        onLoad() {            this.startShow()        },        methods: {            startShow({                type,                style,                title            } = {}) {                const that = this                this.$nextTick(function() {                    this.$refs['kModel'].showModel({                        type: type,                        title: title,                        style: style,                        icon: require('@/static/logo.png')                    });                    setTimeout(function() {                        that.$refs['kModel'].closeModel()                    }, 2000)                });            }        }    };</script>

原著是一个有趣的人,若有侵权,请通知删除