nonomother-ui
v1.0.0
Published
这是不不妈妈封装的ui组件库
Downloads
24
Maintainers
Readme
说明
nonomother-ui 是一款基于 Vue.js 2.0 的前端 UI 组件库,主要用于快速开发 PC 网站中后台产品
安装
cnpm i nonomother-ui -S
使用
在src/main.js
import QFUI from 'nonomother-ui';
Vue.use(QFUI);
import 'nonomother-ui/qf-ui.css';
组件
page 组件
<qfui-page :total="10" @changePageFn="changePageFn"></qfui-page>
<script>
export default {
methods: {
changePageFn(n) {
alert(n)
}
}
}
</script>
表格组件
<qf-table :columns="usersColumns" :data="usersData"></qf-table>
<script>
export default {
data() {
return {
//每行
usersColumns: [
{
title: "编号",
key: "id"
},
{
title: "姓名",
key: "uname"
},
{
title: "性别",
key: "sex"
},
{
title: "性别另一种写法",
key: "sex2",
render: row =>
`<b style="color:red">${row.sex2 === 1 ? "男" : "女"}</b>`
}
],
//每列
usersData: [
{
id: 1,
uname: "冰墩墩",
sex: "男",
sex2: 1
},
{
id: 2,
uname: "雪容融",
sex: "女",
sex2: 0
},
{
id: 3,
uname: "肥嘟嘟",
sex: "女",
sex2: 0
}
]
}
},
}
</script>
框框组件
<qfui-kuangkuang title="这是一个小框框">
<h4>这里面可以放很多内容哦</h4>
</qfui-kuangkuang>