uniapp组件整理之 加载模态框

作者的话

---

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

适用于平台：已测试 H5和微信小程序

---

插件地址

Dcloud 插件市场：自定义loading，加载模态框

---

更新说明

---

版本：1.0 （2020-08-22）

更新功能：

k-model

• 开启方法 showModel()
• 关闭方法 closeModel()

---

使用方法：

---

在 script 中引用

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

在 template 中使用组件

<kModel ref="kModel" />

---

属性说明

属性名	类型	默认值	说明
无

---

事件说明

事件名	参数	说明
无

---

方法说明

方法名	使用方式	参数	说明
showModel()	this.$refs['k-scroll-view'].showModel({})	type: 模态框类型，默认为toast，可选值为['toast','loading','success','error','warn'] title:显示的文字 icon：显示的图片地址 shade：是否显示遮罩 ，true/false style:加载框样式，默认是转圈，可选：['circle','line'] duration:显示时长，过时隐藏	开启模态框
closeModel()	this.$refs['k-scroll-view'].closeModel()		关闭模态框

demo 使用案例

<template>
    <view class="content"><kModel ref="kModel" /></view>
</template>

<script>
import kModel from '@/components/k-loading/k-loading.vue';
export default {
    components: {
        kModel
    },
    data() {
        return {
            title: 'Hello'
        };
    },
    onLoad() {
        const that = this
        this.$nextTick(function() {
            this.$refs['kModel'].showModel({
                type: 'loading',
                title: '',
                style: 'line'
            });
            
            setTimeout(function(){
                that.$refs['kModel'].closeModel()
            },2000)
        });
    },
    methods: {}
};
</script>

demo 使用案例 预览图

加载模态框.gif