组件化对话框

Posted 2023-05-01 Sherwin

引用处

<template>
<!--    利用obj传递参数-->
    <Dialog :obj="data.permissionDialog" ref="permissionDialog"/>
</template>
<script setup>
import Dialog from "@/components/Dialog.vue";
const data = reactive(
    
       permissionDialog: 
            show: false,
            title: \'添加权限\',
            form: 
                title: \'\',
                name: \'\',
                method: "",
                router: 0
            ,
            fields: [
                
                    label: \'权限名\',
                    prop: \'title\',
                    type: \'input\',
                    placeholder: \'请输入权限名\',
                    required: true
                ,
                
                    label: \'权限\',
                    prop: \'name\',
                    type: \'input\',
                    placeholder: \'请输入权限\',
                    required: true,
                ,
                
                    label: \'请求方式\',
                    prop: \'method\',
                    type: \'select\',
                    placeholder: \'请选择请求方式\',
                    required: true,
                    ext: false,
                    options: [
                        label: \'GET\', value: \'1\',
                        label: \'POST\', value: \'2\',
                        label: \'PUT\', value: \'3\',
                        label: \'DELETE\', value: \'4\',
                        label: \'PATCH\', value: \'5\',
                    ],
                
            ],
            errors: 
                title: \'\',
                name: \'\',
                method: \'\',
            ,
            submit: permissionSubmit
        
    
)
</script>

子组件

<template>
    <el-dialog
            v-model="obj.show"
            :title="obj.title"
            
            :before-close="closeDialog"
    >
        <el-form
                :model="obj.form"
                ref="formRef"
        >
            <el-form-item v-for="field in obj.fields" :label="field.label" :prop="field.prop"
                          :error="obj.errors[field.prop]" :required="field.required">
                <el-input v-if="field.type===\'input\'" v-model="obj.form[field.prop]" :placeholder="field.placeholder"/>
                <el-select v-else-if="field.type===\'select\'" v-model="obj.form[field.prop]"
                           :placeholder="field.placeholder">
                    <el-option
                            v-for="item in field.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                        <div class="option_box" v-if="field.ext">
                            <div >
                                <el-icon>
                                    <component :is="item.value"></component>
                                </el-icon>
                                <span v-text="item.label"></span>
                            </div>

                        </div>
                    </el-option>
                </el-select>
                <el-switch v-else-if="field.type===\'switch\'" v-model="obj.form[field.prop]"/>
            </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </span>
        </template>
    </el-dialog>
</template>

<script setup>
import defineProps, onMounted, ref from \'vue\'

const props = defineProps([\'obj\'])
const formRef = ref(null)
const submit = () => 
    formRef.value.validate((valid) => 
        if (valid) 
            props.obj.submit()
         else 
            return false
        
    )



function closeDialog(done) 
    formRef.value.resetFields()
    props.obj.show = false
    done()


function close() 
    formRef.value.resetFields()
    props.obj.show = false


defineExpose(close)
</script>

Vue Vuetify 打开对话框组件 onclick

【中文标题】Vue Vuetify 打开对话框组件 onclick

【英文标题】：Vue Vuetify open dialog component onclick

【发布时间】：2019-07-24 20:24:11

【问题描述】：

编辑：我知道为什么对话框没有打开。子组件未接收到openComment 事件。我签入了根组件，并且正确接收了事件。关于为什么兄弟组件没有收到事件的任何建议？也可能是因为我没有在任何东西中使用该组件，而是因为它本身就是模态，我真的不想将它导入任何其他vue 文件。

我正在尝试找出一种从我的工具栏打开模式对话框的方法。工具栏位于一个组件文件中，对话框位于另一个组件文件中。我正在尝试使用事件来实现这一点，但我似乎无法触发它。我尝试过的是发送一个自定义，即使它应该看到将对话框的 vmodel 设置为 true。我正在使用 Vuetify 来创建对话框。

我的对话框组件文件是：

<template>
<v-dialog persistent
    v-model="commentDialog"
    transition="dialog-transition">
    <v-card>
    <v-card-title primary-title>
        Add a comment
    </v-card-title>
    <v-card-text>
        <v-flex xs12 sm6 md4>
        <v-text-field label="Legal first name*" required></v-text-field>
        </v-flex>
    </v-card-text>
    </v-card>
</v-dialog>
</template>

<script>
import  bus  from '../main'
export default 
name: 'CommentModal',
data() 
    return 
    commentDialog: false
    
,
created() 
    bus.$on('openComment', function () 
    this.commentDialog = true
    )
,

</script>

<style>

</style>

工具栏组件包括以下内容：

<template>
<v-btn fab small
    @click="commentThis($event)"
    <v-icon>fas fa-comment</v-icon>
</v-btn>
</template>

<script>
commentThis: function (e) 
    bus.$emit('openComment')

</script>

这个问题的奖励和后续问题是我如何在 vue chrome 调试器上看到事件总线？

【问题讨论】：

能否提供您的bus 代码

试试这个：bus.$on('openComment', () => this.commentDialog = true )

@Pvl 什么是bus 代码？这是 main.js 中简单的export const bus = new Vue()。 @radu，你的语法我的语法是一样的，所以结果是一样的。什么都不会触发。

好像你的事件触发了。但是对话本身的问题。不是吗？

@Pvl 我首先尝试了这个理论。我从 vuetify 复制了模态对话框模板来测试这个理论，但事实并非如此。

【参考方案1】：

函数上下文的问题

created() 
    const self = this
    bus.$on('openComment', function () 
    self.commentDialog = true
    )
,

或

bus.$on('openComment', () => (this.commentDialog = true))

这个问题的奖励和后续问题是我如何在 vue chrome 调试器上看到事件总线？

import Vue from 'vue'

const bus = new Vue()

window.__myBus = bus

export  bus 

【讨论】：

这不会触发模态。如果我切换到 es6 胖箭头函数，那么我不必使用const self = this，因为这个上下文将在函数内部正确解析。无论如何，我尝试了你的理论，但这并没有触发模态。

我试过你的代码，如果能解决上下文问题，效果很好

我在回调中放入了一个console.log，它似乎永远不会被触发。也许这就是模式没有打开的原因。

你们使用同一个总线对象吗？

【参考方案2】：

我解决了这个问题。似乎我不得不在我的工具栏组件 vue 文件中的某处调用该组件。所以我把它称为`，这使得 CommentModal 组件能够对发送的事件做出反应。如果该组件没有在兄弟组件中的任何位置被调用，那么它不会对任何事件做出反应。

但我很想知道是否有更好的解决方案。我觉得有点hacky。

【讨论】：

这根本不是 hackish。组件必须在 vue 的控制下才能接收事件。换一种方式想一想：如果你的组件不是模态的，vue place 应该在哪里显示它？组件本身没有关于此的信息。未附加到应用程序的组件，以某种方式在链中，未呈现。如果从未使用过，Webpack（或任何其他模块构建器）甚至可以从您的发行版中删除整个代码。