el-dialog设置圆角

淘气包bck 2020-01-04 11:18:14

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>



<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>



<script>

  export default {

    data() {

      return {

        dialogVisible: false

      };

    },

    methods: {

      handleClose(done) {

        this.$confirm('确认关闭？')

          .then(_ => {

            done();

          })

          .catch(_ => {});

      }

    }

  };

</script>

el-dialog怎么设置圆角？

...全文

5744 20 打赏收藏转发到动态举报

写回复

用AI写文章

20 条回复

切换为时间正序

请发表友善的回复…

发表回复

weixin_38413061 2021-03-27

打赏
举报

样式设置在main.css中,当前页面是不生效的

weixin_38413061 2021-03-27

打赏
举报

引用 2 楼 JiexC0la 的回复:

el-dialog可以通过custom-class自定义样式，你把圆角写在自定义的class中

有用的，如图：

main.css增加样式： .dialogClass{ border-radius: 20px; } 页面vue设置class: <el-dialog custom-class="dialogClass" title="添加歌手" :visible.sync="centerDialogVisible" width="800px" center>

JiexC0la 2021-01-20

打赏
举报

引用 10 楼淘气包bck 的回复:

引用 8 楼 JiexC0la 的回复:
引用 7 楼 JiexC0la 的回复：
引用 6 楼淘气包bck 的回复：
引用 5 楼 JiexC0la 的回复:
[quote=引用 4 楼 JiexC0la 的回复：]<el-dialog custom-class=“class1”>你在样式里定义一个.class1{ border-radius: 10px;}
样式好像定义成全局样式，不然被原来的样式覆盖了
好像没有用
有用啊，你把样式改为全局样式，亲测有效
我私信给你发图

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :custom-class="class1"
      :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>
  </div>
</template>

 <script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

<style scoped>
.class1 {
  border-radius: 100px;
}
</style>

我用官方的代码试了一下，还是不行。。[/quote] 你的样式加了scoped，不是全局样式

JiexC0la 2020-01-04

打赏
举报

引用 13 楼淘气包bck 的回复：

引用 8 楼 JiexC0la 的回复:
引用 7 楼 JiexC0la 的回复：
引用 6 楼淘气包bck 的回复：
引用 5 楼 JiexC0la 的回复:
引用 4 楼 JiexC0la 的回复：
<el-dialog custom-class=“class1”>你在样式里定义一个.class1{ border-radius: 10px;}
样式好像定义成全局样式，不然被原来的样式覆盖了
好像没有用
有用啊，你把样式改为全局样式，亲测有效
我私信给你发图
好了，我知道了，我的要在<style>里面设置，不能在<style scoped>里面设置

是滴，要用全局样式

淘气包bck 2020-01-04

打赏
举报

引用 8 楼 JiexC0la 的回复:

引用 7 楼 JiexC0la 的回复：
引用 6 楼淘气包bck 的回复：
引用 5 楼 JiexC0la 的回复:
引用 4 楼 JiexC0la 的回复：
<el-dialog custom-class=“class1”>你在样式里定义一个.class1{ border-radius: 10px;}
样式好像定义成全局样式，不然被原来的样式覆盖了
好像没有用
有用啊，你把样式改为全局样式，亲测有效
我私信给你发图

好了，我知道了，我的要在<style>里面设置，不能在<style scoped>里面设置

淘气包bck 2020-01-04

打赏
举报

引用 11 楼 Hello World, 的回复:

:custom-class="class1"=>:custom-class="'class1'"

好了，我知道了，我的要在<style>里面设置，不能在<style scoped>里面设置

Hello World, 2020-01-04

打赏
举报

:custom-class="class1"=>:custom-class="'class1'"

淘气包bck 2020-01-04

打赏
举报

引用 8 楼 JiexC0la 的回复:

引用 7 楼 JiexC0la 的回复：
引用 6 楼淘气包bck 的回复：
引用 5 楼 JiexC0la 的回复:
引用 4 楼 JiexC0la 的回复：
<el-dialog custom-class=“class1”>你在样式里定义一个.class1{ border-radius: 10px;}
样式好像定义成全局样式，不然被原来的样式覆盖了
好像没有用
有用啊，你把样式改为全局样式，亲测有效
我私信给你发图

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :custom-class="class1"
      :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>
  </div>
</template>

 <script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

<style scoped>
.class1 {
  border-radius: 100px;
}
</style>

我用官方的代码试了一下，还是不行。。

Hello World, 2020-01-04

打赏
举报

楼上的方法是可以的

zhangjiapengdg 2021-08-18

@Hello World, 楼主你这个是个啥测试工具，木有用过，能推荐下吗

Hello World, 2021-08-18

@zhangjiapengdg CodePen啊，图上有名字

m0_60893877 2021-10-28

@Hello World, 为什么一样的代码执行我这还是没效果呢

JiexC0la 2020-01-04

打赏
举报

引用 7 楼 JiexC0la 的回复：

引用 6 楼淘气包bck 的回复：
引用 5 楼 JiexC0la 的回复:
引用 4 楼 JiexC0la 的回复：
<el-dialog custom-class=“class1”>你在样式里定义一个.class1{ border-radius: 10px;}
样式好像定义成全局样式，不然被原来的样式覆盖了
好像没有用
有用啊，你把样式改为全局样式，亲测有效

我私信给你发图