codersole-ui
v1.0.1
Published
> C-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库,主要用于快速开发 PC 网站中后台产品
Downloads
2
Readme
说明😘
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>