1.0.2 • Published 2 years ago
blieseblue.xx v1.0.2
说明
blieseblue-ui 是一款基于 Vue.js 2.0 的前端 UI 组件库,主要用于快速开发 PC 网站中后台产品
安装
cnpm i blieseblue.xx-ui -S
使用
在src/main.js
import blieseblue.xx from 'blieseblue-ui';
Vue.use(blieseblue);
import 'blieseblue-ui/blieseblue-ui.css';
组件
按钮
<blieseblue-row>
<blieseblue-button>默认按钮</blieseblue-button>
<blieseblue-button type="primary">主要按钮</blieseblue-button>
<blieseblue-button type="success">成功按钮</blieseblue-button>
<blieseblue-button type="info">信息按钮</blieseblue-button>
<blieseblue-button type="warning">警告按钮</blieseblue-button>
<blieseblue-button type="danger">危险按钮</blieseblue-button>
</blieseblue-row>
<blieseblue-row>
<blieseblue-button round>默认按钮</blieseblue-button>
<blieseblue-button type="primary" round>主要按钮</blieseblue-button>
<blieseblue-button type="success" round>成功按钮</blieseblue-button>
<blieseblue-button type="info" round>信息按钮</blieseblue-button>
<blieseblue-button type="warning" round>警告按钮</blieseblue-button>
<blieseblue-button type="danger" round>危险按钮</blieseblue-button>
</blieseblue-row>
分组
<blieseblue-fieldset>
<h1>神龙教主</h1>
</blieseblue-fieldset>
<blieseblue-fieldset title="神龙教主">
<h1>洪福齐天,寿与天齐</h1>
</blieseblue-fieldset>
表格
<blieseblue-table :column="column" :data="data"></blieseblue-table>
<script>
export default {
data() {
return {
column: [
{title: '编号', key: 'id'},
{title: '姓名', key: 'name', render(row, data) { return `<b>${data}</b>`}},
{title: '年龄', key: 'age'},
{title: '性别', key: 'sex', render(row, data) { return data==1? '男' : '女'}},
],
data: [
{id:1, name: '武大郎', age: 998, sex: 1},
{id:2, name: '西门庆', age: 18, sex: 1},
{id:3, name: '潘金莲', age: 32, sex: 1},
{id:4, name: '神龙教主', age: 32, sex: 1},
]
}
},
}
</script>
分页
<blieseblue-row>
<blieseblue-page :total="10" @changePage="changePageFn"></blieseblue-page>
</blieseblue-row>
<script>
export default {
methods: {
changePageFn(n) {
alert(n)
}
}
}
</script>