shx-myui/README.md

正经人谁写bug啊

## 说明

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

## 安装

```
cnpm i shx-myui -S
```

## 使用

```
在src/main.js
import QFUI from 'shx-myui';
Vue.use(QFUI);
import 'shx-myui/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>
```