mon-util v1.1.1

js-util

v1.0.0

• 发布第一个版本

v1.0.1

• 增加图片单选、图片多选组件
• 大幅度优惠打包性能，减小包的体积

v1.0.2

• 更新文档，补充图片单选、多选禁用功能

v1.0.3

• 优化代码结构
• 增加移动端Toast组件
• 优化mon-ui样式库

v1.0.4

• 优化代码结构
• 增加mon-address地址选择组件

v1.0.5

• 优化代码结构
• 增加mon-location地址定位组件

v1.0.6

• 优化dialog组件，增加获取子组件refs的能力

v1.0.8

• 优化LoadingModal组件，增加主题选择，通过start方法传参选择主题
• 优化Dialog组件，增加custom、prompt类型的弹窗

v1.0.9

• 优化dialog、toast组件

1.1.0

• 增加表单组件(select)

1.1.1

• 优化select、dialog组件

回到顶部组件

模板语法

<mon-back-top :time="360" />

API

走马灯轮播图

模板语法

<mon-carousel :imgs="[{img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3224110779,1779790953&fm=26&gp=0.jpg'},{img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3224110779,1779790953&fm=26&gp=0.jpg'}]"/>

API

imgs参数说明

更多参数可自行添加，item的数据回通过事件回调返回给上层业务组件

事件

clickEvent事件参数说明

日期选择

模板语法

<mon-date-picker/>

API

弹窗

模板语法

<mon-dialog v-model="show" :msg="`hello world!`"/>

API

顶部加载条

调用方法

this.$LoadingBar.start()

API

配置接口

loadingbar.config({
     percentNum: 0.1
})

start, 开始

loadingbar.start()

this.$LoadingBar.start()

end, 结束

loadingbar.finish()

this.$LoadingBar.finish()

error, 错误结束

loadingbar.error()

this.$LoadingBar.error()

全屏加载层

调用方法

this.$LoadingModal.start()

API

start, 开始

LoadingModal.start()

this.$LoadingModal.start()

end, 结束

LoadingModal.finish()

this.$LoadingModal.finish()

音乐播放器

模板语法

<mon-music :music="`https://www.runoob.com/try/demo_source/horse.ogg`"/>

API

移动端分页列表

模板语法

<mon-page-list :loading="loading" :finished="finished" @load="load">
    <newItem
        v-for="(item, index) in news"
        :title="item.title"
        :item="item"
        :key="index"
        @clickEvent="clickNews"
    />
</mon-page-list>

API

参数

事件

分页

模板语法

<mon-paging v-model="p" :count="12" :pageSize="4" />

API

参数

事件

移动端签名

模板语法

<Signature @signature="prev" />

API

事件

轻提示

调用方法

this.$toastr.send("Hello mon-util");

API

方法

打开提示框

• open(config)

快捷提示

• send(title, config)

定义全局默认配置

• config(config)

关闭提示框

• close(name)

销毁提示框

• destroy()

config参数

视频

模板语法

<mon-video :src="`https://www.runoob.com/try/demo_source/mov_bbb.mp4`" :width="`800px`" />

API

图片

模板语法

<mon-img :src="`http://kab.test/public/static/images/logo.png`" :width="`400px`"/>

API

文字

模板语法

<mon-word :value="`test`" :color="`success`" @click="open" />

API

事件

图片单选

模板语法

<mon-radio-img :list="arr" v-model="str"></mon-radio-img>

API

图片多选

模板语法

<mon-checkbox-img :list="arr" v-model="str"></mon-checkbox-img>

API

基于高德地图的地址获取组件

API