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

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

ruisui884个月前 (02-27)技术分析21

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弹窗提示确认,修改提示的字体颜色” 的相关文章

uni-app基于vue开发小程序与标准vue开发新增点

1、路由跳转传参uni.navigateTo({ url: `/pages/transition/spreadTextAction?t=${this.options.t}&rt=${this.options.rt}&l=${this.options.l}`});uni.navigateBack({...

慕课 SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序

本课程以业务驱动技术栈,打造业务相对完整的掌上医疗小程序,解决大家没有好的毕设项目或者求职项目的困境。本课程案例采用前后端分离架构,业务功能完善(既有WEB管理端,也有移动用户端),界面美观,无需艰涩的技术也能做出亮眼的作品。SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序 |...

推荐一个Java微服务商业级Sass开源电商小程序(开源,企业级项目)

使用Java微服务开发,SpringBoot2框架、MyBatis-plus持久层框架、Redis作为缓存、MySql8作为数据库。 前端vuejs作为开发语言,使用uniapp编码,同时支持微信小程序、安卓App、苹果App。 支持集群部署,单机部署。 unimall 针对中小商户、企业和个人消...

微信企业号首款永久免费应用问世

7月14日,微信企业号移动办公应用领跑者——办公逸宣布:其所研发的微信办公应用将永久免费,企事业单位只要拥有微信企业号都可以免费安装办公逸各项应用,此举标志着微信办公免费时代现已到来!据悉,办公逸(www.bangongyi.com)现已推出四大微信办公套件,分别为:移动办公管理套件、客户关系管理套...

微信将研发“应用号”体系 或成为App大杂烩应用

Akiha发表于 2016-01-11 18:11微信正在探讨一种新的公众号形态,即在现有的订阅号、服务号之外,再研发新的“应用号”体系。让用户不必去装各种 App,在微信里就能实现各种服务、功能;关注后,“应用号”平时不向用户发送消息,需要时,用户再去点开“应用号”等。目前,微信钱包内已有的服务,...

面试题:同步和异步的区别

作者:雅克的一府来源:http://www.52rd.com/Blog/Detail_RD.Blog_imjacob_4832.html答案一:1.异步传输 通常,异步传输是以字符为传输单位,每个字符都要附加 1 位起始位和 1 位停止位,以标记一个字符的开始和结束,并以此实现数据传输同步。所谓异步...