README
- 1、简要介绍
- 2、使用文档
- 2.1、安装
- 2.2、使用
- 2.2.1、加载中(loading)组件
- 2.2.2、暂无数据页(nodata)组件
- 2.2.3、报错页(error)组件
- 2.2.4、断网页（brokenLine）组件
- 2.2.5、系统维护页（maintain）组件
1、简要介绍
市民云通用UI组件库，目前只包含以下组件：
加载页(loading)、暂无数据页(nodata)、报错页(error) 、断网页（brokenLine）、
系统维护页（maintain）
该组件库开发，参考了mint-ui的代码。
2、使用文档
2.1、安装
npm i smy-ui --save
2.2、使用
在vue项目根目录下的src/main.js文件全局引入smy-ui组件库
import Vue from 'vue'
import smy from "smy-ui";
import 'smy-ui/lib/smy-ui.css'
Vue.use(smy);
2.2.1、加载中(loading)组件
正在加载中...
引入
- 全局引入
略~，文档开头有说
- 局部引入
import {Toast} from "smy-ui"
基本
打开加载中页面
this.$loading.open()
设置加载提示语
this.$loading.open('快马加鞭赶来中...')
设置父级容器div
父级容器div，css样式中：position属性必须非static，建议高度和宽度非空，否则将全屏显示。
this.$loading.open({
text: '正在加载中...',
parentDomId: 'parentId' //父级容器id
})
添加类名
给加载中的框 添加自定义类名。
this.$loading.open({
text: '正在加载中...',
className: 'demoClassName' //添加的类名
})
关闭加载页
this.$loading.close()
打开加载-指令方式
<template>
<div class="main">
<h1>smy-ui</h1>
<smy-button @click="openLoadingByDirective()" v-loading="loading">打开加载页-指令方式</smy-button>
</div>
</template>
<script>
export default {
data () {
return {
loading:false
}
},
methods: {
openLoadingByDirective(){
this.loading = true;
var _this = this;
setTimeout(function(){
_this.loading = false
},5000)
},
},
}
</script>
事件说明
- open(config)：打开加载页，config为一些参数配置，具体参数看底下说明
- close()：关闭加载页
config参数说明
| 字段 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| text | String | 提示语 | '正在加载中' | |
| className | String | 额外类名 | ||
| parentDomId | String | 父级容器id |
2.2.2、暂无数据页(nodata)组件
暂无数据页
基本
打开暂无数据页面
this.$nodata.open()
设置无数据提示语
this.$nodata.open('又没数据了...')
设置父级容器div
父级容器div，css样式中：position属性必须非static，建议高度和宽度非空，否则将全屏显示。
this.$nodata.open({
parentDomId: 'parentId' //父级容器id
})
添加类名
给暂无数据的页 添加自定义类名。
this.$nodata.open({
className: 'demoClassName' //添加的类名
})
关闭暂无数据
this.$nodata.close()
事件说明
- open(config)：打开暂无数据页，config为一些参数配置，具体参数看底下说明
- close()：关闭暂无数据
config参数说明
| 字段 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| text | String | 提示语 | '正在加载中' | |
| className | String | 额外类名 | ||
| parentDomId | String | 父级容器id |
2.2.3、报错页(error)组件
报错页
基本
打开报错页面
this.$errorMsg.open()
设置无数据提示语
this.$errorMsg.open('又没数据了...')
设置父级容器div
父级容器div，css样式中：position属性必须非static，建议高度和宽度非空，否则将全屏显示。
this.$errorMsg.open({
parentDomId: 'parentId' //父级容器id
})
添加类名
给报错页 添加自定义类名。
this.$errorMsg.open({
className: 'demoClassName' //添加的类名
})
关闭报错页
this.$errorMsg.close()
事件说明
- open(config)：打开报错页，config为一些参数配置，具体参数看底下说明
- close()：关闭报错页
config参数说明
| 字段 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| text | String | 提示语 | '正在加载中' | |
| className | String | 额外类名 | ||
| parentDomId | String | 父级容器id | ||
| refreshBtn | Boolean | 是否显示刷新按钮 | true，false | true |
2.2.4、断网页（brokenLine）组件
断网页
基本
打开断网页面
this.$brokenLine.open()
设置无数据提示语
this.$brokenLine.open('断网啦...')
设置父级容器div
父级容器div，css样式中：position属性必须非static，建议高度和宽度非空，否则将全屏显示。
this.$brokenLine.open({
parentDomId: 'parentId' //父级容器id
})
添加类名
给断网页 添加自定义类名。
this.$brokenLine.open({
className: 'demoClassName' //添加的类名
})
关闭断网页
this.$brokenLine.close()
事件说明
- open(config)：打开断网页，config为一些参数配置，具体参数看底下说明
- close()：关闭断网页
config参数说明
| 字段 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| text | String | 提示语 | '正在加载中' | |
| className | String | 额外类名 | ||
| parentDomId | String | 父级容器id | ||
| refreshBtn | Boolean | 是否显示刷新按钮 | true，false | true |
| auto | Boolean | 是否根据网络自动打开 | true，false | true |
2.2.5、系统维护页（maintain）组件
系统维护页
基本
打开系统维护页面
this.$maintain.open()
设置无数据提示语
this.$maintain.open('系统维护中...')
设置父级容器div
父级容器div，css样式中：position属性必须非static，建议高度和宽度非空，否则将全屏显示。
this.$maintain.open({
parentDomId: 'parentId' //父级容器id
})
添加类名
给系统维护页 添加自定义类名。
this.$maintain.open({
className: 'demoClassName' //添加的类名
})
关闭系统维护页
this.$maintain.close()
事件说明
- open(config)：打开系统维护页，config为一些参数配置，具体参数看底下说明
- close()：关闭系统维护页
config参数说明
| 字段 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| text | String | 提示语 | '正在加载中' | |
| className | String | 额外类名 | ||
| parentDomId | String | 父级容器id | ||
| refreshBtn | Boolean | 是否显示刷新按钮 | true，false | true |
2.2.6、上拉加载 - 指令
上拉加载 - 指令
引入
- 全局引入
略~，文档开头有说
- 局部引入
import {Toast} from "smy-ui"
使用 上拉加载 父级容器需设置固定高度，垂直方向可滚动。
<template>
<div class="main">
<h1>上拉加载</h1>
<p>
注：需切换开发者模式，切到手机屏幕。<br>
或手机预览。<br>
上拉加载 父级容器需设置固定高度。
</p>
<div class="smy-list-box" v-pullLoading="loadingMore" type="2">
<ul class="smy-list">
<li class="smy-list-item" v-for="(item,index) in items" :key="index">
{{'选项-' + (index+1)}}
</li>
<li class="more_loading_all" v-show="loadingAll || preventRepeatReuqest" v-loading="preventRepeatReuqest">
{{items.length ===0&&loadingAll ? '暂无可用证照':'没有更多了'}}
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "list",
components: {
// Loading
},
data() {
return {
loadingAll: false,
preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
items: [],
}
},
methods: {
loadingMore() {
if (this.loadingAll) {
return;
}
if (this.preventRepeatReuqest) {
return;
}
this.preventRepeatReuqest = true;
this.getList()
},
getList() {
var _this = this;
setTimeout(function () {
if (_this.items.length > 40) {
_this.loadingAll = true;
} else {
var items = []
for (var index = 0; index < 10; index++) {
items.push(index + _this.items.length + 1);
}
_this.items = _this.items.concat(items);
}
_this.preventRepeatReuqest = false;
console.log(_this.items)
}, 800)
}
},
created() {
this.getList();
}
}
</script>
<style scoped>
.smy-list-box {
height: 60vh;
width: 100%;
border: 1px solid #cccccc;
border-radius: 0.5rem;
overflow: scroll;
}
.more_loading_all {
text-align: center;
color: #666;
padding: 0.5rem 0;
display: block;
}
</style>
2.2.7、轻提示（Toast）
轻提示（Toast）
引入
- 全局引入
Smy-ui 为 Vue.prototype 添加了全局方法 $toast。因此在 vue instance 中可以采用本页面中的方式调用 Toast。
- 局部引入
import {Toast} from "smy-ui"
使用
this.$toast("提示语");
this.$toast({message: '提示语,\n 换行'});
Options 参数说明
| 字段 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| message | String | 提示语 | '' | |
| customClass | String | 自定义类名 | ||
| duration | Number | 显示时间, 毫秒。设为 0 则不会自动关闭 | 3000 | |
| onClose | function | 关闭时的回调函数, 参数为被关闭的 message 实例 | ||
| offset | Number | Message 距离窗口顶部的偏移量 |
方法
| 方法名 | 说明 |
|---|---|
| close | 关闭当前toast |
| closeAll | 关闭全部toast |