el-dialog样式修改

一只散修道友

于 2024-02-22 11:12:55 发布

阅读量412

点赞数 11

分类专栏： vue 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_43903629/article/details/136228733

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <button @click="dialogVisible = true">dialog</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false
    };
  },
  created () { },
  computed: {},
  mounted () { },
  methods: {}
};
</script>
<style>
/* @import url(); 引入css类 */
/**dialog css */

.el-dialog {
  border-radius: 5px;
  text-align: left;
}

.el-dialog__title {
  line-height: 24px;
  font-size: 18px;
  color: #ffff !important;
}

.el-dialog__body {
  padding: 20px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}

.el-dialog__header {
  padding: 10px 20px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  /*  从左到右的垂直渐变 #1268a5; */
  background: linear-gradient(to right, #1268a5, #ccf3de);
}

.el-dialog__headerbtn .el-dialog__close {
  color: #05276d;
}

.el-dialog__headerbtn {
  position: absolute;
  top: 14px;
  right: 20px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 16px;
}
</style>