yidatec-vue-hooks

Hooks

1、useMount

使用 useMount 进行元素的挂载（也就是渲染元素的时候进行使用）

一般用在渲染 弹框

<script lang="tsx" setup>
import {
  ElButton,
  ElMessage
} from "element-plus";

import {
  useMount
} from "@am/hooks";
import Modal from "./op/index.vue";

const dialogMount = useMount();

const handleConfirm = (): void => {
  ElMessage({
    message: "This is a message.",
    type: "info",
    plain: true
  });
};

const handleClick = (): void => {
  dialogMount(Modal, {
    visible: true,
    onClick: handleConfirm
  }, {
    default: <div>测试</div>
  });
};

const handleElClick = (): void => {
  dialogMount("span", undefined, "元素");
};
</script>

<template>
  DemoUseMount
  <br />
  <ElButton @click="handleClick">
    弹出框
  </ElButton>

  <ElButton @click="handleElClick">
    添加元素
  </ElButton>
  <div id="box"></div>
</template>

op/index.vue

<script setup lang="ts">
import {
  watch,
  defineProps,
  ref,
  onMounted,
  defineEmits
} from "vue";
import {
  ElDialog,
  ElButton
} from "element-plus";

const props = defineProps<{
  visible?: boolean;
}>();

const dialogVisible = ref<boolean>(props.visible);

watch(() => props.visible, newV => {
  dialogVisible.value = newV;
});

const handleClose = (): void => {
  dialogVisible.value = false;
};

const num = ref(1);

onMounted(() => {
  num.value = 2;
});

const emits = defineEmits(["click"]);

const handleClick = (): void => {
  emits("click");

  dialogVisible.value = false;
};
</script>
<template>
  <ElDialog
    v-model="dialogVisible"
    destroy-on-close
    title="批量修改需求"
    :before-close="handleClose"
  >
    <slot>
      <span @click="() => num++">
        This is a message {{ num }}
      </span>
    </slot>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">
          Cancel
        </el-button>
        <el-button
          type="primary"
          @click="handleClick"
        >
          Confirm
        </el-button>
      </div>
    </template>
  </ElDialog>
</template>
<style scoped></style>

2、useContextMenu

右键菜单

注：他同 ContextMenu 组件一样，但是使用时更加推荐 hooks 的方式

<script lang="tsx" setup>
import {
  Button
}from "ant-design-vue";
import {
  useContextMenu
} from "@am/hooks";

const [createContextMenu] = useContextMenu();

const handleContextmenu = (e: MouseEvent): void => {
  createContextMenu({
    event: e,
    children: <div theme="light"> Menu </div>,
    style: {
      backgroundColor: "red"
    }
  });
};
</script>
<template>
  <Button @contextmenu="handleContextmenu">
    Right Click on me
  </Button>

  <hr />

  <Button @contextmenu="handleContextmenu">
    Right Click on me
  </Button>
</template>