简介

heisenberg-element 是基于 element-ui 二次封装的几个常用组件, 可以运行在 vue2.6 vue2.7 的项目中

安装使用

• 安装

npm install heisenberg-element  or  yarn add heisenberg-element

• 导入依赖

// main.js

import HeisenbergElement from 'heisenberg-element'
import 'heisenberg-element/lib/heisenberg-element.css'

Vue.use(HeisenbergElement)

使用

• Dialog

<template>
  <div>
    <el-button @click="handleOpen">打开Dialog</el-button>
    <LbDialog
      title="aaaa"
      @register="register"
      @confirm="hanndleConfirm"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
    >
      12321321
    </LbDialog>
  </div>
</template>
<script setup>
import { useDialog } from "heisenberg-element";
import { ref } from "vue";

const confirmLoading = ref(false);

const [register, { openDialog, closeDialog }] = useDialog();

const handleOpen = () => {
  openDialog();
};

const hanndleConfirm = () => {
  confirmLoading.value = true;
  setTimeout(() => {
    confirmLoading.value = false;
    closeDialog();
  }, 2000);
};

const handleCancel = () => {
  console.log("cancel");
};
</script>

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ---------------------------- | ------- | ------ | ------ | | value | 是否显示 dialog 支持 v-model | boolean | — | false | | confirmLoading | 提交按钮加载状态 | boolean | — | false |

其他属性请查看element-ui。

Slot | name | 说明 | | ----------- | --------------------- | | footer | Dialog 按钮操作区的内容,传入后不触发confirm 和handleCancel事件 |

Events | name | 说明 | | ----------- | --------------------- | | confirm | 点击提交按钮 | | cancel | 点击取消按钮触发 | | register | 注册组件事件,在 setup 中配合useDialog使用|

import { useDialog } from "heisenberg-element";
const [
  register,
  { setDialogProps, openDialog, closeDialog, setConfirmLoadong },
] = useDialog();

useDialog

| name | 说明 | 类型 | 参数 | | -------------- | ------------------------------------------------ | -------- | ------------------------------------------------------------------- | | register | 要使用方达必须要监听 register 方法传入register | - | - | | setDialogProps | 设置 Dialog 的 props | Function | 见上 Attributes | | openDialog | 打开 Dialog | Function | 传输的数据，可使用useDialogInuseDialogInner的导出的 register 接收 | | closeDialog | 关闭 Dialog | Function | - |

useDialogInuseDialogInner

| name | 说明 | 类型 | 参数 | | -------------- | ---------------------- | -------- | ------------------------------------------ | | closeDialog | 关闭 Dialog | Function | - | | setDialogProps | 设置 Dialog 的 props | Function | 见上 Attributes | | register | 监听 register 方法传入 | Function | Function, 回调参数为 openDialog 传入的参数 |

• LbDrawer

<template>
  <div>
    <el-button @click="openDrawer">打开抽屉</el-button>
    <LbDrawer title="aaaa" @register="register" @confirm="confirm">
      <el-button @click="closeDrawer">关闭</el-button>
    </LbDrawer>
  </div>
</template>
<script setup>
import { useDrawer } from "heisenberg-element";

const [register, { openDrawer, closeDrawer }] = useDrawer();

const confirm = () => {
  console.log("confirm");
};
</script>

• lbForm

<template>
  <div>
    <LbForm ref="lbForm" @register="register"> </LbForm>
    <el-button @click="handleSubmit">提交</el-button>
    <el-button @click="handleRefSubmit">ref提交</el-button>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useForm } from "heisenberg-element";

const lbForm = ref(null);

const [register, { submit }] = useForm({
  schemas: [
    {
      field: "name",
      label: "姓名",
      component: "Input",
      rules: [{ required: true, message: "请输入姓名" }],
      colProps: {
        span: 8,
      },
    },
    {
      field: "age",
      label: "年龄",
      component: "InputNumber",
      rules: [{ required: true, message: "请输入年龄" }],
      colProps: {
        span: 8,
      },
    },
  ],
});

const handleSubmit = async () => {
  const data = await submit();
  console.log(data);
};

const handleRefSubmit = async () => {
  const res = await lbForm.value.submit();
  console.log(res);
};
</script>

| schemas | 描述 | 类型 | | --------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | | field | 字段名称 | string | | label | 表单 label | string | | component | 组件 | Input、DatePicker、Select、CheckboxGroup、RadioGroup、Switch、Cascader、InputNumber、Divider、ApiSelect、ApiCascader | | rules | 规则 | array | | colProps | 布局 | - | | slot | 传入插槽后将优先渲染具名插槽 | - |

• LbTable

<template>
  <div>
    <div>
      <el-button @click="test2">设置加载</el-button>
    </div>
    <lb-table @register="register" boder>
      <template v-slot:date="{ slotScope }">
        <span>{{ slotScope.row.date }}</span>
      </template>
    </lb-table>
  </div>
</template>
<script setup>
import { useTable } from "heisenberg-element";
import axios from "axios";

const test = async (params) => {
  const { data } = await axios.get("http://localhost:30012/", {
    params: params,
  });
  return data;
};

const [register, { setLoading }] = useTable({
  column: [
    {
      prop: "date",
      label: "日期",
      slot: "date",
    },
    {
      prop: "name",
      label: "姓名",
    },
    {
      prop: "province",
      label: "省份",
    },
    {
      prop: "city",
      label: "市区",
    },
    {
      prop: "address",
      label: "地址",
    },
    {
      prop: "zip",
      label: "邮编",
    },
  ],
  pagination: true,
  height: "750",
  boder: true,
  api: test,
});

const test2 = () => {
  setLoading(true);
  setTimeout(() => {
    setLoading(false);
  }, 2000);
};
</script>

• LbDialog

<template>
  <div>
    <el-button @click="handleOpen">打开Dialog</el-button>
    <LbDialog
      title="aaaa"
      @register="register"
      @confirm="hanndleConfirm"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
    >
      12321321
    </LbDialog>
  </div>
</template>
<script setup>
import { useDialog } from "heisenberg-element";
import { ref } from "vue";

const confirmLoading = ref(false);

const [register, { openDialog, closeDialog }] = useDialog();

const handleOpen = () => {
  openDialog();
};

const hanndleConfirm = () => {
  confirmLoading.value = true;
  setTimeout(() => {
    confirmLoading.value = false;
    closeDialog();
  }, 2000);
};

const handleCancel = () => {
  console.log("cancel");
};
</script>