webopenfather-ui-vue3/README.md

一款轻量级、模块化基于Vue3.x的前端 UI 组件库

# 说明

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

# 安装

```
cnpm i webopenfather-ui-vue3 -S
```

# 使用

```
在src/main.js

import QFUI from "webopenfather-ui-vue3";
app.use(QFUI);
import "webopenfather-ui-vue3/qfui.css";

```

# 组件

## 按钮

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

<qfui-row>
    <qfui-button round>默认按钮</qfui-button>
    <qfui-button type="primary" round>主要按钮</qfui-button>
    <qfui-button type="success" round>成功按钮</qfui-button>
    <qfui-button type="info" round>信息按钮</qfui-button>
    <qfui-button type="warning" round>警告按钮</qfui-button>
    <qfui-button type="danger" round>危险按钮</qfui-button>
</qfui-row>
```

## 分组

```
<qfui-fieldset>
  <h1>神龙教主</h1>
</qfui-fieldset>

<qfui-fieldset title="神龙教主">
  <h1>洪福齐天，寿与天齐</h1>
</qfui-fieldset>
```

## 表格

```
<qfui-table :column="column" :data="data"></qfui-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>

```

## 分页

```
<qfui-row>
  <qfui-page :total="10" @changePage="changePageFn"></qfui-page>
</qfui-row>

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