设置多行element MessageBox 弹框的$confirm提示内容

最新推荐文章于 2024-08-19 16:45:08 发布

空常致

最新推荐文章于 2024-08-19 16:45:08 发布

阅读量3.3k

点赞数 1

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/m0_59462557/article/details/123519795

版权

本文档介绍如何在Vue项目中创建一个自定义的多行提示弹窗组件，该组件使用el-dialog封装，支持自定义标题、内容、描述、按钮文本，并能根据需求显示或隐藏描述和取消按钮。通过引入并注册组件，可以在多个地方方便地使用多行提示功能。

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

默认情况下MessageBox是单行文本内容

如果需求是多行提示内容怎么实现呢？如果项目很多地方都会使用到多行提示可以封装一个公用组件，我使用的方法是使用dialog封装一个提示弹窗

在components文件下新建一个文件

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="26%"
    :destroy-on-close="true"
    @close="closeDialog('cancel')"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true"
    >
    <p class="content">{{ content }}</p>
    <p class="description" v-if="isShowDes">{{ description }}</p>
    <span slot="footer" class="dialog-footer">
        <el-button :size="$store.state.ELDEFAULTSIZE" type="primary" @click="closeDialog('confim')">{{ confirmText }}</el-button>
        <el-button :size="$store.state.ELDEFAULTSIZE" v-if="isShowClose" @click="closeDialog('cancel')">{{ cancelText }}</el-button>
    </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'rz-delete-dialog',
    data() {
        return {}
    },
    props: {
        visible: { // 控制弹窗显示
            type: Boolean,
            default: false
        },
        title: { // 弹窗标题
            type: String,
            default: '删除'
        },
        content: { // 删除弹窗内容
            type: String,
            default: ''
        },
        description: { // 删除弹窗描述
            type: String,
            default: ''
        },
        isShowDes: { // 是否显示描述
            type: Boolean,
            default: false
        },
        isShowClose: { // 是否显示取消按钮
            type: Boolean,
            default: false
        },
        confirmText: { // 按钮显示文字
            type: String,
            default: '确定'
        },
        cancelText: { // 取消显示文字
            type: String,
            default: '取消'
        },
    },
    methods: {
        init() {
           // 初始化
        },
        /**
         * 点击按钮的回调
         * params {String} confim 确定 cancel 取消
         */
        closeDialog(val){
            this.$emit('closeDialog', val);
        },
    },
}
</script>

<style>
    .content {
        letter-spacing: 1px;
    }
    .description {
        color: #aaa;
        margin-top: 10px;
        letter-spacing: 1px;

    }
</style>

在需要使用的文件中引入组件

引入后在components中注册组件

// 提示弹窗

import RzDeleteDialog from '@/components/rz-delete-dialog'

components: {
    RzDeleteDialog
  },

在文件中使用，通过deleteDiaVis控制展示和隐藏，只需要在相应按钮的点击事件中设置即可

<rz-delete-dialog
      :append-to-body="true"
      v-if="deleteDiaVis"
      :visible="deleteDiaVis"
      title="删除"
      :cancelText="$t('common.cancel')"
      :confirmText="$t('common.confirm')"
      :isShowClose="true"
      :isShowDes="true"
      content="您确定要删除所选内容吗？"
      @closeDialog="closeDialog"
      ref="RzDeleteDialog"
    ></rz-delete-dialog>