webzoucuo v1.0.0

说明

WOF-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品

安装

cnpm i webzoucuo-ui -S

使用

在src/main.js
import ZC from 'webzoucuo-ui';
Vue.use(ZC);
import 'webzoucuo-ui/wof-ui.css';

组件

navbar

<my-navbar
      left="返回"
      title="首页"
      right="搜索"
      @lift-nav="liftNavFn"
      @right-nav="rightNavFn"
    ></my-navbar>

分页 page

<my-page
      :total="10"
      :totalSize="2"
      :pagenum="pagenum"
      @current-change="pageFn"
    ></my-page>

表格

    <my-table :columns="goodsColumns" :data="goodsData"></my-table>
<script>
export default {
  data() {
    return {
      pagenum: 2,
      state: false,
      goodsColumns: [
        { title: '编号', key: 'id' },
        { title: '商品名称', key: 'title' },
        { title: '价格', key: 'price' },
      ],
      goodsData: [
        { id: 1, title: '苹果🍎', price: 3 },
        { id: 2, title: '香蕉🍌', price: 5 },
        { id: 3, title: '草莓🍓', price: 8 },
      ],
    };
  },
};
</script>

loading

    <h1>loading组件</h1>
    <button @click="state = !state">点击显示</button>
    <my-loading v-show="state"></my-loading>