cf-components-ui

description

This project is based on an element-Plus packaged component library.

Project setup

main.js:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import CfComponentsUi from 'cf-components-ui'

createApp(App).use(ElementPlus).use(CfComponentsUi).mount('#app')

components:

cf-popup

$ElMessage

cf-pagination

<template>
  <cf-pagination :total="total" :pageNum="pageNum" :pageSize="pageSize" @pageChange="pageChange"/>
</template>
<script>
export default {
  name: "demo",
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      total: 100
    };
  },
  mounted() {
  },
  methods: {
    pageChange(page) {
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
    },
  },
};
</script>

cf-button

<template>
  <cf-button :auto-loading="true" @btnClick="submit">
    自动loading按钮
  </cf-button>
</template>
<script>
export default {
  methods: {
    submit(done) {
      setTimeout(() => {
        done()
      }, 1000)
    }
  }
}
</script>

cf-table

<template>
  <cf-table
    :tableData="tableData"
    :columns="columns"
    :loading="loading"
    :pageObj="pageObj"
    :isShowCheckbox="true"
    @handle-selection-change="handleSelectionChange"
    @pageChange="pageChange"
  >
    <template #operate>
      <el-table-column label="操作" align="center" fixed="right" width="300">
        <template #default="scope">
          <el-button size="small" type="warning" @click="edit(scope.row)"
            >编辑
          </el-button>
          <el-button size="small" type="primary" @click="startUsing(scope.row)"
            >启用
          </el-button>
        </template>
      </el-table-column>
    </template>
  </cf-table>
</template>
<script>
export default {
  name: "demo",
  data() {
    return {
      tableData: [],
      columns: [
        { label: "名称", prop: "adName" },
        { label: "链接", prop: "adUrl" },
        { label: "排序", prop: "sort" },
        { slot: "operate" },
      ],
      loading: true,
      pageObj: {
        size: 10,
        total: 100,
        currentPage: 1
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    pageChange(val){
      console.log(val);
    },
    edit(row) {
      console.log(row);
    },
    handleSelectionChange(val) {
      console.log(val);
    },
    getData() {
      setTimeout(() => {
        this.tableData = [
          {
            date: "2016-05-02",
            adName: "王小虎",
            adUrl: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            adName: "王小虎",
            adUrl: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            adName: "王小虎",
            adUrl: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            adName: "王小虎",
            adUrl: "上海市普陀区金沙江路 1516 弄",
          },
        ];
        this.loading = false;
      }, 1000);
    },
  },
};
</script>

Customize configuration

See Configuration Reference.