vue3.0 el-dialog封装，修改源代码样式

最新推荐文章于 2024-08-21 15:10:06 发布

1964347597

最新推荐文章于 2024-08-21 15:10:06 发布

阅读量1k

点赞数 1

分类专栏： ts js vue3 文章标签： javascript css3 前端 vue.js

本文链接：https://blog.csdn.net/qq_28813031/article/details/120991164

版权

js 同时被 3 个专栏收录

8 篇文章 1 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

这是一个使用Element UI库实现的自定义对话框组件，包含标题、表单输入和操作按钮。对话框宽度设定为700px，具有关闭时销毁、不随模态点击关闭等功能。表单中有药品名称和药品编码两个输入字段，均为只读状态。组件还提供了取消和确定两种操作。

摘要由CSDN通过智能技术生成

<!--作者：dingwangjun-->
<!--
 界面描述：弹框封装的操作框
-->
<template>
    <el-dialog width="700px"
               customClass="selfDialog"
               v-model="dialogVisible"
               :append-to-body="true"
               :destroy-on-close="true"
               @close="cancelDialog"
               :close-on-click-modal="false">
        <template #title>
            <div style="height: 30px;line-height: 30px;">
                <div class="div-inline">
                    <img class="img_div_small"
                         src='@/assets/img/icon-blue-line.png'>
                </div>
                <div class="div-inline">
                    <span class="img_div_font">{{dialogName}}</span>
                </div>
            </div>
        </template>
        <!--页面body内容存储仓-->
        <div style="height: 350px;margin-top: 20px">
            <el-form ref="form" :model="formInfo" size="small" label-width="130px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="药品名称">
                            <el-input size="mini"
                                      style="width: 200px"
                                      :disabled="true"
                                      v-model="formInfo.pm">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="药品编码">
                            <el-input size="mini"
                                      style="width: 200px"
                                      :disabled="true"
                                      v-model="formInfo.bm">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <template #footer>
                <span class="dialog-footer">
                    <el-button size="mini" @click="cancelDialog">取 消</el-button>
                    <el-button size="mini" type="primary" @click="saveDialog">确 定</el-button>
                </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
    import { useStore } from "vuex";
    import { reactive,toRefs,defineComponent,computed,onMounted,getCurrentInstance } from 'vue'
    export default defineComponent({
        name: '皮试中',
        setup (props,content) {
            const store = useStore();
            const { proxy } = getCurrentInstance() as any;
            const state:any = reactive({
                dialogVisible: false,
                dialogName: '结束皮试',
                user: computed(() => {
                    return store.getters.user;
                }),
                formInfo: {},//Form表单
            })
            onMounted(()=>{

            })
            const methods = {
                cancelDialog(){
                    state.formInfo = {}
                    state.dialogVisible = false
                },
                saveDialog(){
                    debugger
                }
            }
            return {
                ...toRefs(state),
                ...methods,
                parseTimeTwo,
            }
        }
    })
</script>
<style lang="scss">
    .selfDialog {
        .el-dialog {
            margin: 0 !important;
        }
        .el-dialog__header {
            height: 40px;
            background: #B3d8ff;
            padding: 5px 10px 5px 10px;
            border-bottom: 1px solid #DCDFE6;
        }
        .el-dialog__body {
            padding: 5px;
            overflow-y: auto;
        }
        .el-dialog__headerbtn {
            top: -2px;
            font-size: 35px;
        }
        .el-dialog__headerbtn .el-dialog__close {
            color: #597EF7;
            font-size: 25px;
        }
        .el-dialog__close:hover {
            color: #2D5AFA;
        }
        .img_div_small {
            width: 8px;
            height: 20px;
            margin-left: 5px;
            margin-right: 5px;
            vertical-align: middle;
        }
        .img_div_font {
            font-size: 18px;
            color: #0F1524;
            font-weight: bold;
            margin-right: 4px;
            vertical-align: middle;
        }
    }
</style>