myui-cp v1.0.3

✨说明

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

🌊安装

cnpm i myui-cp -S

🌈使用

在src/main.js
import Myui from 'myui'
Vue.use(Myui)
import 'myui/my-ui.css';

🌀组件

分组

<myui-box>
  <h1>lorem</h1>
</myui-box>

<myui-box title="lorem">
  <h1>lorem</h1>
</myui-box>

分页

<myui-page :total="5" @changePageFn="changePageFn"></myui-page>

<script>
  export default {
    methods: {
      changePageFn(pagenum) {
        console.log('第', pagenum, '页')
      }
    }
  }
</script>

按钮

<myui-button type="default" @click="clickBtnFn">默认按钮</myui-button>
<myui-button type="primary" @click="clickBtnFn"><b>主要按钮</b></myui-button>
<myui-button type="info" @click="clickBtnFn">信息按钮</myui-button>
<myui-button type="warning" @click="clickBtnFn">警告按钮</myui-button>
<myui-button type="danger" @click="clickBtnFn">危险按钮</myui-button>

<script>
  export default {
    methods: {
      clickBtnFn() {
        alert('按钮!!!')
      }
    }
  }
</script>

表格

<myui-table :columns="columns" :data="tableData"></myui-table>

<script>
  export default {
    data() {
      return {
        columns: [
          { title: '编号', key: 'id' },
          { title: '商品名', key: 'goods_name' },
          { title: '价格', key: 'goods_price' },
          { title: '描述', key: 'goods_desc' },
          { title: '你猜', key: 'id' },
        ],
        tableData: [
          { id: 1, goods_name: '张三', goods_price: 2, goods_desc: 1 },
          { id: 2, goods_name: '李四', goods_price: 200, goods_desc: 2 },
          { id: 3, goods_name: '王五', goods_price: 5, goods_desc: 3 },
          { id: 4, goods_name: '赵四', goods_price: 5, goods_desc: 12 },
          { id: 5, goods_name: '钱七', goods_price: 5, goods_desc: 111 },
        ]
      }
    }
  }
</script>