codersole-ui v1.0.1

说明😘

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

安装💪

cnpm i codersole-ui -S

使用☝

在src/main.js
import CUI from 'codersole-ui';
Vue.use(CUI);
import 'codersole-ui/c-ui.css';

组件🤞

按钮

      <c-button>Default</c-button>
      <c-button type="primary" round>Primary</c-button>
      <c-button type="dashed" round>Dashed</c-button>
      <c-button type="text">Text</c-button>
      <c-button type="info">Info</c-button>
      <c-button type="success">Success</c-button>
      <c-button type="warning">Warning</c-button>
      <c-button type="error">Error</c-button>

卡片

 <c-card round>
    <p slot="title">卡片</p>
    <p slot="content">我是card小栗子</p>
  </c-card>

表格

 <c-table :data="usersData" :columns="userCol"></c-table>

<script>
export default {
   data() {
    return {
      userCol: [
        { title: "编号", key: "id" },
        { title: "姓名", key: "uname" },
        { title: "性別", key: "sex" },
        { title: "工作位置", key: "loc" },
      ],
      usersData: [
        { id: 1, uname: "王五", sex: '男', loc: '上海'},
        { id: 2, uname: "张三", sex: '男', loc: '湖南'},
        { id: 3, uname: "李四", sex: '女', loc: '南京'},
        { id: 4, uname: "王八", sex: '男', loc: '北京'},
      ],
    };
  },
}
</script>

分页

<c-page :total="5"></c-page>

<script>
export default {
  methods: {
    changePageFn(n) {
      alert(n)
    }
  }
}
</script>