smy-ui v0.0.9

• 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参数说明

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参数说明

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参数说明

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参数说明

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参数说明

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 参数说明

方法