el-dialog自定义弹窗做ElMessageBox.comfirm三个按钮类型

最新推荐文章于 2025-06-05 11:00:19 发布

前端小凯

最新推荐文章于 2025-06-05 11:00:19 发布

阅读量139

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_43235503/article/details/148357830

html：

<el-dialog v-if="orderRefundInfo" v-model="dialogShow" width="360px" title="" :close-on-press-escape="false">
  <template #header>
    <div class="refund-header">
      <el-icon color="#f2a813" :size="25">
        <WarningFilled />
      </el-icon>
      <div class="refund-header-title">确认退款</div>
    </div>
  </template>
  <div>
    <div>
      {{
        `套餐${orderRefundInfo?.package_days}天，实付${orderRefundInfo?.order_amount}元，实际使用${orderRefundInfo?.used_days}天${orderRefundInfo?.used_hours}小时。部分退款：`
      }}
    </div>
    <div class="tip">
      {{
        `(${orderRefundInfo?.rest_days}天 / ${orderRefundInfo?.package_days}天) * ${orderRefundInfo?.order_amount}元 = ${orderRefundInfo?.refund_amount}元`
      }}
    </div>
  </div>
  <template #footer>
    <el-button @click="dialogShow = false">取消</el-button>
    <el-button type="primary" :disabled="orderRefundInfo?.package_days == orderRefundInfo?.rest_days" @click="orderRefund(orderRefundInfo?.refund_amount)"
      >部分退</el-button
    >
    <el-button type="danger" @click="orderRefund(orderRefundInfo?.order_amount)">全额退</el-button>
  </template>
</el-dialog>

css：

.tip {
  color: #e57c89;
}

.refund-header {
  display: flex;
  align-items: center;

  .refund-header-title {
    margin-left: 15px;
    color: #575757;
    font-size: 14px;
    font-weight: 600;
  }
}