Vue 常用组件、Components、Hooks、Dict

<template>
  <DictLabel :dictType="'sys_yes_no'" :dictValue="'1'" />
</template>
<script lang="ts" setup>
 import { DictLabel } from '/@/components/Dict';
</script>

<template>
  <!-- 注意 v-bind="$attrs" 不可缺，用于接受父组件的属性传值给 BasicDrawer 组件 -->
  <BasicDrawer v-bind="$attrs" title="抽屉标题" width="50%"> 抽屉内容 </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicDrawer } from '/@/components/Drawer';
  export default defineComponent({
    components: { BasicDrawer },
  });
</script>

<template>
  <div>
    <Drawer @register="register" />
    <a-button @click="openDrawer">打开</a-button>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { useDrawer } from '/@/components/Drawer';
  import Drawer from './Drawer.vue';

  export default defineComponent({
    components: { Drawer },
    setup() {
      const [register, { openDrawer }] = useDrawer();
      return {
        register,
        openDrawer,
      };
    },
  });
</script>

<BasicDrawer v-bind="$attrs"> 抽屉内容 </BasicDrawer>

<template>
  <BasicDrawer v-bind="$attrs" @register="register" title="抽屉标题" width="50%">
    抽屉内容
    <a-button type="primary" @click="closeDrawer">关闭抽屉</a-button>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  export default defineComponent({
    components: { BasicDrawer },
    setup() {
      const [register, { closeDrawer }] = useDrawerInner();
      return { register, closeDrawer };
    },
  });
</script>

<template>
  <!-- 注意 v-bind="$attrs" 不可缺，用于接受父组件的属性传值给 BasicModal 组件 -->
  <BasicModal v-bind="$attrs" title="弹窗标题" :helpMessage="['提示1', '提示2']">
    弹窗内容
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicModal } from '/@/components/Modal';
  export default defineComponent({
    components: { BasicModal },
    setup() {
      return {};
    },
  });
</script>

<template>
  <div class="px-10">
    <Modal @register="register" />
    <a-button @click="openModal">打开</a-button>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { useModal } from '/@/components/Modal';
  import Modal from './Modal.vue';
  export default defineComponent({
    components: { Modal },
    setup() {
      const [register, { openModal }] = useModal();
      return {
        register,
        openModal,
      };
    },
  });
</script>

<template>
  <BasicModal v-bind="$attrs"></BasicModal>
</template>

<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="弹窗标题"
    :helpMessage="['提示1', '提示2']"
  >
    <a-button type="primary" @click="closeModal" class="mr-2">从内部关闭弹窗</a-button>
    <a-button type="primary" @click="setModalProps">从内部修改title</a-button>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  export default defineComponent({
    components: { BasicModal },
    setup() {
      const [register, { closeModal, setModalProps }] = useModalInner();
      return {
        register,
        closeModal,
        setModalProps: () => {
          setModalProps({ title: '弹窗新标题（修改后）' });
        },
      };
    },
  });
</script>

<template>
  <BasicTree :treeData="treeData" :treeDataSimpleMode="false" />
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTree, TreeItem } from '/@/components/Tree';
  // 这里演示 children 方式，同样支持 zTree 的 id pId 格式
  const treeData: TreeItem[] = [
    {
      id: '1',
      name: 'tree 1',
      children: [
        { id: '1-1', name: 'tree 1-1' },
        { id: '1-2', name: 'tree 1-2' },
      ],
    },
    {
      id: '2',
      name: 'tree 2',
      children: [
        { id: '2-1', name: 'tree 2-1' },
        { id: '2-2', name: 'tree 2-2' },
      ],
    },
  ];
  export default defineComponent({
    components: { BasicTree },
    setup() {
      return { treeData };
    },
  });
</script>