当前位置:首页 > 技术分析 > 正文内容

vue confirm弹窗提示确认,修改提示的字体颜色

ruisui882个月前 (02-27)技术分析15

1.日常写法

 this.$confirm(
        context,
        "提示",
        {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }
    	)
        .then(function () {
            return publishFaultMobleScheduling(mapObject);
        })
        .then(() => {
            this.getList(this.scheduleType);
            this.msgSuccess("发布成功");
        });

2.修改提示框内容字体

2.1思路

(1)使用const h = this.$createElement写弹出确认框。

(2)$createElement参数用法

h('p', null,{class:'test'} [
        h('span', "提示内容", '内容可以是 '),
        h('p', { style: 'color: red' }, "第一行"),
        h('p', { style: 'color: red' }, null)
    ]),

第一行创建一个什么标签。案例为p标签,也可以为div标签等。可以自定义class,
第二行P标签下面放入一个列表标签。

  • 第1个参数:标签,节点标签是什么。
  • 第2个参数:定义style格式
  • 第2个参数:文件信息,如果为null,不显示。可以根据提示类别把该该赋为null进行不显示。

2.2 案例

const h = this.$createElement;
this.$confirm('', {
    title:"提示",
    type:'warnig',
    message:h('p', null, [
        h('span', "提示内容", '内容可以是 '),
        h('p', { style: 'color: red' }, "第一行"),
        h('p', { style: 'color: red' }, null)
    ]),
    // iconClass:"el-icon-question colorYellow",
	})
    .then(function () {
        return publishFaultMobleScheduling(mapObject);
    })
    .then(() => {
        this.getList(this.scheduleType);
        this.msgSuccess("发布成功");
    });

2.3 案例页面展示


扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2311.html

标签: vue弹窗组件
分享给朋友:

“vue confirm弹窗提示确认,修改提示的字体颜色” 的相关文章

vue中组件之间的通信方式

** 1.1 父子组件**a. 父向子传数据: 第1种: 父通过属性传值,子组件通过props接收数据(注:props传过来的数据是单向的,不可以进行修改)第2种:子组件可以通过$parent来获取父组件里的数据和调用父组件的方法(注:数据是双向的,还要注意如用了UI组件并且在该UI组件里重新定义一...

gitlab常用命令大全

GitLab常用命令大全GitLab是一个基于Git的Web平台,它不仅提供代码托管,还集成了持续集成/持续交付(CI/CD)、代码审查、问题追踪等功能。在日常使用GitLab的过程中,我们常常需要使用一系列命令来管理代码仓库、处理分支和标签等。以下是GitLab常用的Git命令大全,并附上详细解释...

GitLab-合并请求

描述合并请求可用于在您对项目进行的其他人员之间交换代码,并轻松与他们讨论更改。合并请求的步骤步骤1-在创建新的合并请求之前,GitLab中应该有一个创建的分支。您可以参考本章来创建分支-步骤2-登录到您的GitLab帐户,然后转到“ 项目”部分下的项目 -步骤3-单击“ 合并请求”选项卡,然后单击“...

双子座应用程序推出模型切换器以在Android上访问2.0

#头条精品计划# 快速导读谷歌推出了Gemini 2.0 Flash实验版,现已在其安卓应用中可用,之前仅在gemini.google.com网站上提供。新版本的15.50包含模型切换器,用户可以在设置中选择不同模型,包括1.5 Pro、1.5 Flash和2.0 Flash实验版。谷歌提醒,2.0...

Vue进阶(幺叁捌):vue路由传参的几种基本方式

1、动态路由(页面刷新数据不丢失)methods:{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`,...

vue打开新窗口并且实现传参,有图有真相

我要实现的功能是打开一个新窗口用来展示新页面,而且需要传参数,并且参数不能显示在地址栏里面,而且当我刷新页面的时候,传过来的参数不能丢失,要一直存在,除非我手动关闭这个新窗口,即浏览器的标签页。通过面向百度编程,发现网上的根本达不到这个效果,而且还都是坑,明明实现不了,还若有其事的写出来,于是我在标...