V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
chenqh
V2EX  ›  Vue.js

关于 vue3 封装的问题

  •  
  •   chenqh · 2021-11-28 17:22:26 +08:00 · 1922 次点击
    这是一个创建于 851 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我想封装一个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
        1
    2i2Re2PLMaDnghL  
       2021-11-28 17:37:01 +08:00
    靠点击事件自动冒泡?
    ALVC666
        2
    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
        3
    Outshine  
       2021-11-28 20:06:41 +08:00   ❤️ 1
    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>
    ```
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1149 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 23:01 · PVG 07:01 · LAX 16:01 · JFK 19:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.