说明

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

安装

npm i webborder-ui -S

使用

在src/main.js
import WOFUI from 'webborder-ui';
Vue.use(WOFUI);
import 'webborder-ui/qf-ui.css';

组件

框框

<qfui-kuangkuang title="hello"></qfui-kuangkuang>
props title
slot

按钮

<qfui-button title="默认按钮" type="default" @click="rightClickFn"></qfui-button>
    <qfui-button title="主要按钮" type="primary"></qfui-button>
    <qfui-button title="成功按钮" type="success"></qfui-button>
    <qfui-button title="信息按钮" type="info"></qfui-button>
    <qfui-button title="警告按钮" type="warning"></qfui-button>
    <qfui-button title="危险按钮" type="danger"></qfui-button>

导航栏

<qfui-nav-bar title="首页" @left-click="leftClickFn" @right-click="rightClickFn"></qfui-nav-bar>

<script>
export default {
    methods:{
        leftClickFn() {
            alert('返回');
        },
        rightClickFn() {
            alert('搜索');
        },
    }
}
</script>

表格

<qfui-table :columns="usersColumns" :data="usersData"></qfui-table>
<qfui-table :columns="goodsColumns" :data="goodsData"></qfui-table>
<script>
export default {
  data() {
    return {
       usersColumns: [
        { title: '编号', key: 'id' },
        { title: '姓名', key: 'name' },
        { title: '性别', key: 'sex', render: row => (row.sex === 1 ? `<b>男</b>` : `<b>女</b>`) },
      ],
      usersData: [
        { id: 1, name: 'zlk', sex: 1 },
        { id: 2, name: 'xzd', sex: 2 },
        { id: 3, name: 'ymh', sex: 2 },
        { id: 4, name: 'hjz', sex: 1 },
      ],
      goodsColumns: [
        { title: '编号', key: 'id' },
        { title: '商品名称', key: 'title' },
        { title: '价格', key: 'price', render: row => `$${row.price}` },
      ],
      goodsData: [
        { id: 1, title: '油条', price: 1.11 },
        { id: 2, title: '薯条', price: 6.66 },
        { id: 3, title: '汉堡', price: 8.88 },
      ],
    }
  },
}
</script>

分页

<qfui-page :total="70" :pagesize="10" :activenum.sync="activeNum"></qfui-page>

<script>
export default {
    data(){
        return{
            activeNum: 1,
        }
    },
    updated() {
        console.log('您点击的页数为', this.activeNum);
    },
}
</script>

弹框

<qfui-button @click="status2 = true" title="点击切换dialog" type="warning"></qfui-button>
<qfui-dialog :status2="status2" @input="inputFn" @close="status2 = false"></qfui-dialog>

<script>
export default {
    data(){
        return{
            status2: false,
        }
    },
    methods:{
        inputFn(data) {
            alert(data);
        },
    }
}
</script>

loading

<qfui-button @click="status1 = true" title="点击切换loading" type="success"></qfui-button>
<qfui-loading :status1="status1" @close="status1 = false"></qfui-loading>

<script>
export default {
    data(){
        return{
            status1: false,
        }
    },
}
</script>