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

默认情况下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>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值