z-vue-design

useECharts 使用手册

安装

npm install z-vue-design

引入

import { useECharts, ZECharts } from "@/utils/useECharts";

示例

<template>
  <ZECharts class="chart-container" @register="register"></ZECharts>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useECharts, ZECharts } from "@/utils/useECharts";

const [register, { setOptions, getInstance }] = useECharts();

onMounted(() => {});
</script>

useForm 使用手册

安装

npm install z-vue-design

引入

import { ZForm } from "z-vue-design";

示例

<template>
  <ZForm @register="register">
    <!-- 自定义插槽的使用，插槽名为formItem项中的name属性， 数据绑定为formState[name]，通过监听可以获取到插槽字段的数据变化 -->
    <template #slotTest="{ formState, name, utilsAttr }">
      <ZInput
        v-model="formState[name]"
        :placeholder="utilsAttr?.placeholder"
      ></ZInput>
    </template>
  </ZForm>
</template>

<script setup>
import { ZForm, ZInput } from "z-vue-design";
import { ref } from "vue";

const formItems = ref([
  {
    label: "开关",
    name: "switch",
    type: "ZSwitch",
    formAttr: {},
  },
  {
    label: "密码",
    name: "password",
    type: "ZInput",
    // 表单 formItem 需要配置的属性
    formAttr: {
      rules: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
    },
    // formItem 内部组件（例如 <Input v-bind="utilAttr" />）需要配置的属性
    utilAttr: {
      placeholder: "请输入密码",
      type: "password",
    },
  },
  {
    name: "slotTest",
    utilsAttr: {
      placeholder: "请输入",
    },
  },
]);

// 表单属性字节在 ZForm 标签上配置
const [register, { getForm, getFormState }] = useForm({
  formItems: formItems.value,
});
</script>

联动方案

监听 formState 变化，当 formState 中某个被依赖的属性变化时，触发联动事件

<script setup>
const watchFormState = computed(() => getFormState.value);
watch(
  () => watchFormState.value,
  (n) => {
    console.log(n);
  },
  { deep: true, immediate: true },
);
</script>

useTable 使用手册

安装

npm install z-vue-design

引入

import { useTable, ZTable } from "@/utils/useTable";

示例

<template>
  <ZTable class="table-container" @register="register"></ZTable>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useTable, ZTable } from "@/utils/useTable";

/**
 * 表格属性
 * @typedef {Object} TableProps
 * @property {Array} columns - 表格列配置,参照vxe-table的columns配置
 * @property {Object} pagination - 分页配置
 *    pagination: {
 *      total: 0,
 *      currentPage: 1,
 *      totalPage: 0,
 *      pageSize: 20,
 *      onPageChange: (page) => {
 *        setPagination({
 *          currentPage: page.currentPage,
 *          pageSize: page.pageSize,
 *        });
 *      },
 *    },
 * @property {Object} props - 表格配置,参照vxe-table的tableProps配置
 * @property {Object} columnProps - 表格列配置,参照vxe-table的columnProps配置
 * @property {Array} handleButton - 头部左侧操作按钮配置
 * handleButton = [{
 *   key: "update",
 *       label: "add",
 *       onClick: (props) => {}
 * }]
 * @property {Object} utils - 头部右侧工具栏设置, 目前只有reload（表格刷新，可以在click中调用数据，重新设置表格数据）、column（表格交互操作按钮，例如：列设置），
 *  utils = {
 *      reload: {
//         label: "刷新",
//         onClick: () => {
//           console.log(123);
//           setData([]);
//         },
//       },
//       column: {
//         label: "列设置",
//       },
 * }
 */

const tableProps = {};

const [register, { getColumns, setColumns, setData, setPagination }] =
  useTable();

onMounted(() => {});
</script>