简介

cgx-components 是一个基于 Vue 3 的二次封装库，它提供了许多可用的工具，包括组件、指令、钩子。 cgx-components 的目标是让开发者能够快速地构建出高质量、易维护的 Vue 应用程序。

// 引入样式
import "cgx-component/dist/style.css";

// 引入Element plus样式
import "element-plus/dist/index.css";
// 引入组件、钩子、类型
import { CTable, DefaultPaginationData, usePagination } from "cgx-component";
//注册指令
import { createApp } from "vue";
import App from "./App.vue";
import "element-plus/dist/index.css";
import ElementPlus from "element-plus";
import "cgx-component/dist/style.css";
import { vSlider, vWaves, vResize, vFlip } from "cgx-component";

const app = createApp(App);

app.use(ElementPlus);
app.directive("slider", vSlider);
app.directive("waves", vWaves);
app.directive("resize", vResize);
app.directive("flip", vFlip);
app.mount("#app");

指令 基础用法

<!-- 注册指令之后即可直接使用 -->
<script setup lang="ts">
const handleResize = () => {
  console.log("触发回调");
};

const flip = ref(false);

const handleFlip = () => {
  flip.value = !flip.value;
};
</script>

<template>
  <div v-resize="handleResize">
    <div
      @click="handleFlip"
      v-flip="flip"
      style="height: 300px; width: 300px; cursor: pointer"
    >
      <div class="front">front</div>
      <div class="back">back</div>
    </div>
    <div
      v-slider
      v-waves
      v-for="i in 1000"
      style="
        height: 300px;
        margin-top: 10px;
        width: 300px;
        background-color: aqua;
        cursor: pointer;
      "
    ></div>
  </div>
</template>

<style scoped>
.front {
  width: 100%;
  height: 100%;
  background-color: aqua;
}
.back {
  width: 100%;
  height: 100%;
  background-color: red;
}
</style>

JSON化elementui二次封装 基础用法

<script setup lang="ts">
import { ref, h } from "vue";
import { CTable, DefaultPaginationData} from "cgx-component";

//储存表格数据
const tableRef = ref();
const tableData = ref<any[]>([]);
const loading = ref(false);

//表格字段
const columns = [
  {
    label: "名字",
    prop: "name",
  },
  {
    label: "备注",
    prop: "remark",
  },
  {
    label: "状态",
    prop: "status",
    isVNode: true,
    render(row: any) {
      return h("div", row.status === "1" ? "启用" : "禁用");
    },
  },
];

//储存当前分页信息
let savePageData: DefaultPaginationData;

//获取数据
const getTableData = (page: DefaultPaginationData) => {
  loading.value = true;
  savePageData = page;
  // 模拟数据请求
  tableData.value = [
    { name: "张三", age: 25 },
    { name: "李四", age: 30 },
  ];
  loading.value = false;
  savePageData.total = tableData.value.length;
};

const handleClick = () => {
  tableRef.value.queryList();
};

</script>

<template>
  <div>
    <el-button @click="handleClick" type="success">获取数据</el-button>
    <CTable
      ref="tableRef"
      :loading="loading"
      :tableData="tableData"
      :columns="columns"
      @queryList="getTableData"
    ></CTable>
  </div>
</template>