wylself-ui v1.1.1

💗 说明

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

👇 安装

cnpm i wylself-ui -S

📕 使用

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

⚙ 组件

loading 加载组件

<qf-loading :state="state"></qf-loading>
<button @click="state=!state">切换</button>

<script>
export default {
  data() {
    return {
        state: true,
    }
  },
}
</script>

分页器 page 组件

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

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

table 表格组件

<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>