vue3自定义弹框

image.png

image.png

组件1

<template>
    <div class="system-user-dialog-container">
        <el-dialog
            center
            align-center
            v-model="state.isShow"
            width="569px"
            @close="dialogRefresh"
        >
            <template #header="{ titleClass }">
                <div :class="titleClass">
                    <img src="@\assets\image\content\left.png" alt="" />&nbsp;
                    {{ state.title }} &nbsp;<img
                        src="@\assets\image\content\right.png"
                        alt=""
                    />
                </div>
            </template>
            <el-form
                ref="formRef"
                :rules="state.rules"
                :model="state.formData"
                size="default"
                label-width="100px"
            >
                <slot name="formPart">
                    <div>表单内容</div>
                </slot>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" class="cancle" size="default"
                        >取 消</el-button
                    >
                    <el-button
                        type="primary"
                        @click="onSubmit(formRef)"
                        size="default"
                        >确认</el-button
                    >
                </span>
            </template>
            <img
                src="@\assets\image\content\topleft.png"
                class="img"
                alt=""
                srcset=""
            />
            <img
                src="@\assets\image\content\topright.png"
                class="img"
                alt=""
                srcset=""
            />
            <img
                src="@\assets\image\content\botleft.png"
                class="img"
                alt=""
                srcset=""
            />
            <img
                src="@\assets\image\content\botright.png"
                class="img"
                alt=""
                srcset=""
            />
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="myDialog">
import { ElMessage, FormInstance } from 'element-plus'
import { reactive, ref } from 'vue'

// 定义变量内容
const formRef = ref()

// 定义子组件向父组件传值/事件
const emit = defineEmits(['doSend'])

const state: any = reactive({
    isShow: false,
    formData: [],
    title: '',
    rules: {}
})

// 取消
const onCancel = () => {
    state.isShow = false
}

// 提交
const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    //表格验证
    await formEl.validate(async (valid: any, fields: any) => {
        if (valid) {
            emit('doSend')
        } else {
            ElMessage.warning('表格项验证失败,请检查')
            console.log('表格项验证失败!', fields)
        }
    })
    onCancel()
}

const dialogRefresh = () => {
    // 清除校验规则
    formRef.value?.resetFields()
    // 重置表单内容
    state.formData = []
}

/*
 *   formData：表单数据
 *   title：标题
 *   rules：表单校验规则
 */
const openDialog = (formData: object, title: string, rules: object) => {
    state.isShow = true
    state.formData = formData
    state.title = title
    state.rules = rules
}

// 暴露变量
defineExpose({
    openDialog
})
</script>
<style scoped lang="scss">
:deep(.el-dialog__header) {
    width: 100%;
    // background: rgba(15, 25, 45, 0.5);

    height: 60px;
    // background-color: #5e8dff;
}
:deep(.el-dialog) {
    background: rgba(15, 25, 45, 0.5);
    border-radius: 2px;
    border-image: linear-gradient(
            180deg,
            rgba(71, 200, 252, 0),
            rgba(34, 151, 248, 1)
        )
        1 1;
    backdrop-filter: blur(4px);
}
:deep(.el-dialog__header .el-dialog__title) {
    font-size: 18px;
    color: #26c9ff;
    line-height: 25px;
}
:deep(.el-dialog__header .el-dialog__close) {
    color: #fff;
}

.img:nth-of-type(1) {
    position: absolute;
    left: 0;
    top: 0;
}
.img:nth-of-type(2) {
    position: absolute;
    right: 0;
    top: 0;
}
.img:nth-of-type(3) {
    position: absolute;
    left: 0;
    bottom: 0;
}
.img:nth-of-type(4) {
    position: absolute;
    right: 0;
    bottom: 0;
}
:deep(.el-form-item__label) {
    color: #fff;
}
:deep(.el-input__inner) {
    color: #fff;
}
:deep(.el-input__wrapper) {
    border: none;
    background: rgba(255, 255, 255, 0.1);
}
.cancle{
    background: rgba(38, 201, 255, 0.20);
    color: #fff;
    border: 1px solid rgba(38, 201, 255, 1);
}
</style>

组件2

<template>
    <div class="system-dic-dialog-container">
        <myDialog ref="myDialogRef" @doSend="handleOperate">
            <template #formPart>
                <el-form
                    label-width="100px"
                    :model="formLabelAlign"
                    style="max-width: 460px"
                >
                    <el-form-item label="无人机类型">
                        <el-input v-model="formLabelAlign.name" />
                    </el-form-item>
                    <el-form-item label="关联ID">
                        <el-input v-model="formLabelAlign.region" />
                    </el-form-item>
                    <el-form-item label="详细描述">
                        <el-input v-model="formLabelAlign.type" />
                    </el-form-item>
                </el-form>
                <p class="text">删除属性：保持上面所有字段为空，并选择“确定”按钮</p>
            </template>
        </myDialog>
    </div>
</template>

<script setup lang="ts" name="systemDicDialog">
import myDialog from './myDialog.vue'
import { reactive, ref ,watchEffect} from 'vue'
import { getGraphql } from '@/apis/modules/common/account.js'
const receiveID=ref('')
let formLabelAlign=reactive({
    name: '',
    region: '',
    type: ''})
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh'])

// 定义变量内容
const myDialogRef = ref()
const props = defineProps({
    title: {
        type: String,
        default: "",
    },
    id: {
        default: "",
    },
})
watchEffect(() => {
 formLabelAlign.name= props.title
  receiveID.value=props.id
})
const state = reactive({
    data: [],
    title: '',
    isAdd: false,
    rules: {
        // area: [{ required: true, message: '请选择区域', trigger: 'blur' }],
        // alarmValueName: [{ required: true, message: '请输入告警值名称', trigger: 'blur' }],
        // alarmValue: [{ required: true, message: '请输入告警值', trigger: 'blur' }],
        // alarmValueUnit: [{ required: true, message: '请选择告警值单位', trigger: 'blur' }],
        // alarmText: [{ required: true, message: '请输入告警提示语', trigger: 'blur' }],
    },

    dialog: {
        isShowDialog: false,
        type: '',
        title: '',
        submitTxt: ''
    }
})

const openDialog = (row: any) => {
    console.log(row, 'row')
    console.log(state.data, 'data')
    if (row) {
        state.title = '无人机属性设置'
        state.isAdd = false
    } else {
        state.title = '无人机属性设置'
        state.isAdd = true
    }
    myDialogRef.value.openDialog(state.data, state.title, state.rules)
}

// 发请求
const handleOperate = () => {
 let params = `mutation drone_profile{ drone_profile(id:"${receiveID.value}", drone_link_id:"${formLabelAlign.region}", drone_type:"${formLabelAlign.name}", drone_description:"${formLabelAlign.type}")}`
  getGraphql(params).then((res) => {
        ElMessage.success('修改成功')
    })
    state.isAdd ? doAdd() : doEdit()
}

// 添加
const doAdd = () => {
    console.log('doAdd')
    clearFormData()
    emit('refresh')
}
// 修改
const doEdit = () => {
    console.log('doEdit')
    clearFormData()
    emit('refresh')
}

// 清空表单信息
const clearFormData = () => {
    state.data = []
}

// 暴露变量
defineExpose({
    openDialog
})
</script>
<style scoped>
.text{
color: rgba(38,192,244,0.6);
}
</style>

其他组件引用

<openDialog
        ref="openDialogRef"
        :title="sendTitle"
        :id="sendID"
        @refresh="handleRefresh"
    ></openDialog>
----------------------------------------------------------------
import openDialog from '@/components/dialog/dialog.vue'
---------------------------------------------------------------------------
const openDialogRef = ref()
let sendTitle = ref('管线基本信息')
let sendID = ref('12')
--------------------------------------------------------------
//显示弹框
function views(){
    openDialogRef.value.openDialog()
}
---------------------------------------------------------------------