关于 vue3 封装的问题

V2EX = way to explore

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

现在注册

已注册用户请登录

› Vue.js

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

我想封装一个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>
```