关于 vue3 封装的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1477 天前的主题，其中的信息可能已经有所发展或是发生改变。

我想封装一个prompt的功能,

<template> <a v-if="!o_visible" @click="o_handle_visible">{{o_label}}</a> <a-modal :title="o_title" :ok-text="o_ok_text" :cancel-text="o_cancel_text" @ok="o_handle_ok" v-model:visible="o_visible" > <a-input v-model:value="o_value" /> </a-modal> </template> <script> import {ref, defineComponent} from "vue"; import { message } from 'ant-design-vue'; export default defineComponent({ name: 'p_prompt', props: { label: { type: String }, modal: { type: Object }, record: { type: Object, } }, setup(props) { let o_title = props.modal.title || "请输入谷歌验证码"; let o_ok_text = props.modal.ok_text || "提交" let o_cancel_text = props.modal.cancel_text || "取消" let o_visible = ref(false); let o_value = ref(""); let o_label = props.label let fn_reset = () => { o_value.value = "" } let o_handle_visible = () => { o_visible.value = true; } let o_handle_ok = async () => { let ret = await props.modal.handle_ok(props.record, props.modal, o_value.value); if(ret) { message.success(props.modal.success_text || "操作成功"); o_visible.value = false; // o_value.value = ""; fn_reset(); return; } } // __export__ return { o_title, o_ok_text, o_cancel_text, o_visible, o_handle_visible, o_value, o_label, o_handle_ok, } // __end_export__ } }) </script>

这是代码

但是问题是 <a v-if="!o_visible" @click="o_handle_visible">{{o_label}}</a> 这个东西我像做成 slots, 但是做成 slots,怎么触发 o_handle_visible 事件呢我就想和 popconfirm 一样的使用体验

<a-popconfirm title="Are you sure delete this task?" ok-text="Yes" cancel-text="No" @cOnfirm="confirm" @cancel="cancel" > <a href="#">Delete</a> </a-popconfirm>

大佬我该怎么封装呢?请指点下,我 vue3 菜鸟

3 条回复 2021-11-28 20:06:41 +08:00

2i2Re2PLMaDnghL

2021-11-28 17:37:01 +08:00

靠点击事件自动冒泡？

ALVC666

2021-11-28 18:01:06 +08:00

如果是 tsx 可以将
`
<a v-if="!o_visible" @click="o_handle_visible">{{o_label}}</a>
`
写成 render 函数然后组件内部再将相关的参数传进去即可完成调用
例如
`
<Component>
{(onclick) => (<div OnClick={onclick}>666</div>)}
</Component>

`

Outshine

2021-11-28 20:06:41 +08:00

Prompt 组件里：

```
<template>
<slot :clickHandler="clickHandler"></slot>
<div>当前 propmt 状态：{{ status ? "开" : "关" }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const status = ref(false)

function clickHandler() {
status.value = !status.value;
}
</script>
```

使用组件的地方：

```
<Prompt v-slot="slotProps">
<button @click="slotProps.clickHandler">我是开关按钮</button>
</Prompt>
```