element-ui this.$confirm 自定义样式

最新推荐文章于 2024-04-02 11:04:39 发布
最新推荐文章于 2024-04-02 11:04:39 发布
阅读量1.1k 收藏
点赞数
文章标签： vue.js 前端 javascript
原文链接：https://blog.csdn.net/YaRuu/article/details/124943968
版权
文章讨论了在Vue应用中使用$confirm时遇到的样式修改无效果的问题。原因在于确认弹框的div不在Vue的组件体系内。解决方案包括在当前组件添加不带scoped的style或在全局样式表中定义样式。这样可以确保全局生效，从而解决样式覆盖问题。
摘要由CSDN通过智能技术生成 
this.$confirm('删除后无法恢复,你还要继续吗?', '删除用户信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'confirm'
      }).then(function(res) {
 
        console.log(res)
 
      }).catch(function(err) {
        console.log(err)

})

问题：在js里定义了一个$confirm 修改弹框样式，没有效果，主要是因为这个div不是vue的组件 不具备组件的一些特性 所以不生效也是必然

解决问题：scoped不生效，那么只能将样式放全局，在当前组件加上一段不带scoped的style，或者放到全局样式表中

vue去APP文件style中添加全局的样式

校长改八个
关注
this.$confirm自定义内容
Lilico_的博客
03-25 1475
let nameData = this.form.data.mallCombos const h = this.$createElement const newName = [] nameData.forEach(item => { item.data = '【' + item.name + '】' + '套餐价格为:' + item.sellPrice newName.push(h('p', null, item.data)) }) this.$confirm('提示', {
自定义element-ui表单验证的样式
我的博客
07-15 2514
一、默认样式 我们使用element-ui表单的时候，一般会使用该组件的规则验证器，比如注册时会定义以下规则： <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" autocomplete="off" hide-required-asterisk="true" size="medium
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
12-09
调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style media="screen" type="text/css"> #appLoading { width: 100%;
vue element插件this.$confirm修改默认样式
aaa123aaasqw的博客
11-16 670
1.在App.vue全局添加样式。
elementUI this.$confirm 文字大小样式
偏执
07-24 1472
style部分注意不要加scoped，注意dialog弹出层与页面元素的同级。
vue 设置 confirm 的样式
汪成龙
02-19 4580
一、定义样式 <style> .confirm-p { word-break: break-all; } </style> 定义的样式不能放在 scoped 的 style 中 二、使用样式 this.$confirm('您确定要删除 ' + row.name + ' 吗？删除后将无法恢复，请谨慎操作。', '提示', { confirmButtonText: this.$t('common.confirm'), cancelButtonText: t
elementUI vue this.$confirm 和el.docx
11-22
ElementUI Vue 中的 `$confirm` 和 `el-dialog` 组件的使用和自定义 ElementUI 是一个基于 Vue.js 的 UI 组件库，提供了许多实用的 UI 组件来帮助开发者快速构建 Web 应用程序。在 ElementUI 中， `$confirm` 和 `...
Element UI学习8--this.$prompt,this.$message,this.$confirm,this.$notify
hanrabbit的博客
01-26 8873
1、this.$prompt 输入框弹窗 if (object == undefined) { this.$prompt('请输入', '添加优惠券分类', { confirmButtonText: '确定', cancelButtonText: '取消' }).then(async ({ value }) => { }) 如图： 2、this.$message 消息提示 if (re
好看的确认框样式xcConfirm
09-19
一个好看的确认框样式，xcConfirm，包括确认、信息、疑问、警告等多种图标，可以自定义提示信息，可以自定义按钮名称、点击按钮触发的方法，兼容IE7及以上、主流浏览器。
alert及confirm弹出框样式，换不错
11-10
alert及confirm弹出框样式，换不错
element中的$confirm的使用
11-21
在Element UI库中，`$confirm` 是一个非常实用的组件，用于创建具有确认和取消功能的模态对话框。这个对话框常用于用户需要进行重要操作前的二次确认，如删除、修改等。在提供的代码片段中，我们看到一个自定义函数 ...
this.$confirm自定义标题样式
最新发布
05-12
this.$confirm 是 Element UI 框架中的一个弹框组件，可以用来显示确认框。如果你想要自定义确认框的标题样式，可以在调用 this.$confirm 的时候传入一个对象作为参数，并设置 title 的属性值为一个函数，然后在这个...
Vue ElementUI 修改this.$confirm消息提示框样式
weixin_43690623的博客
11-08 5871
当我们想自定义this.$confirm的弹窗样式的时候，直接修改自带的类名，会影响项目全局的样式，但是使用scoped之后，样式又不生效，这个时候我们可以使用customClass属性给它自定义一个类名，这样既不会影响其他页面，也可以很方便地自定义样式。
vue 修改 this.$confirm 的文字样式、自定义样式
金乌的博客
12-01 7031
四、使用 customClass 设置MessageBox 的自定义类名，从而自定义样式。二、createElement 新建元素和对象，然后对新建的元素进行标签化设置。但偶尔也需要修改文字等样式，这时该怎么做呢？就会被当作 HTML 片段处理。属性设置为 true，
修改$confirm 的【确定】按钮的样式
m0_46348803的博客
04-02 929
需求：需要二次确认，但是按钮需要呈现为红色。btnClass的样式，注意： 按钮样式没有实现。
element-ui中this.$confirm提示文字中，部分有颜色（自定义）
uaena的博客
05-04 4979
MessageBox 组件可以通过传递一个 HTML 片段来自定义对话框内容的样式。注意，在使用 MessageBox 组件时需要添加 dangerouslyUseHTMLString: true 选项来启用自定义 HTML 片段。为了确保代码的可读性和可维护性，通过字符串模板来动态生成对话框的内容。
给element的confirm加自定义指令
浩星
01-15 2251
前言： 因为自定义指令一般直接加在页面html标签上，但是element封装好的confirm的确认按钮没法添加自定义指令 如图：用js的confim实现的弹框 实现步骤： 1.template里面：v-clickevent是自定义事件 <!--确定撤回按钮--> <div style="display:none;" ref="replaceCancel" v-clickevent="{'name':'确定撤回','elemName':'确定撤回'...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值