语法:

它有三个参数

  第一个:html标签名

  第二个:配置的数据对象

  第三个:内容

应用1:自定义弹窗

html:

<el-button type="text" @click="open4">点击打开 Message Box</el-button>

js

methods: {
open4() {
const h = this.$createElement;
const aTemp = 'https://www.baidu.com/?tn=98010089_dg&ch=8';
this.$msgbox({
title: '消息',
message: h('p', null, [
h('span', null, '内容可以是 '),
h('a', {
//普通html特性
attrs: {
href:aTemp
},
//相当于`v-bind:style`
style: {
color: 'red',
fontSize: '14px'},
},
'百度'
)
]),
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = '执行中...';
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 300);
}, 3000);
} else {
done();
}
}
}).then(action => {
alert('>>>>>');
this.$message({
type: 'info',
message: 'action: ' + action
});
});
}
},

效果

未完待续。。。

参考链接:

作者:smile.轉角

QQ:493177502

【vue】vue +element 搭建项目,$createElement使用的更多相关文章

  1. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

  2. vue.js + element 搭建后台管理系统 笔记(一)

    此文仅记录本人在搭建后台系统过程中遇到的难点及注意点,如果能帮到各位自然是极好的~~~ 项目主要架构:vueJS.elementUI.scss 一.项目初始化 首先需要安装nodejs,安装方法就不在 ...

  3. vue教程3-webpack搭建项目

    vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...

  4. 手动搭建Vue之前奏:搭建webpack项目

    手动搭建vue项目 搭建vue前首先搭建webpack项目 首先你应当安装一下npm以及nodejs 安装完成后,进行如下操作: // 创建项目根目录 mkdir some_project_name ...

  5. 使用VUE CLI3.0搭建项目vue2+scss+element简易版

    1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...

  6. 使用vue+webpack从零搭建项目

    vue到现在已经成为一个热门的框架,在项目实践当中,如果想要创建一个新项目,通常都会使用vue-cli的脚手架工具,毋容置疑能够方便很多,很多东西也不需要自己亲自去配置.都知道,脚手架其实是vue结合 ...

  7. vue项目ide(vue项目环境搭建)

    一.先介绍一下我接下来要做的项目 项目:ide可视化工具 技术应用: Vue2.0(js框架):https://cn.vuejs.org/ ElementUi(饿了吗ui框架基于vue的):http: ...

  8. Vue常用的GitHub项目

    Vue常用的GitHub项目(Demo案例) 应用实例 https://github.com/pagekit/pa... pagekit-轻量级的CMS建站系统 https://github.com/ ...

  9. Vue.js+vue-element搭建属于自己的后台管理模板:什么是Vue.js?(一)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...

  10. Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

随机推荐

  1. js正则表达式之人民币匹配

    人民币格式匹配 小写格式:¥ 符号 和 整数值 与小数3部分组成. (0)代码与运行结果 { // 匹配人民币 let [reg, info, rmb, result] = [ /^(¥)(-?[0- ...

  2. PHP无限分类分类导航LINK的代码实现

    1. 代码数据库的结构: 2.要达到的效果 /** * @param php无限分类分类导航LINK的代码实现 */ include('db.inc.php'); function getCatePa ...

  3. 2; HTML 基本结构

    1. HTML 的基本结构 2. HTML 控制标记的格式 3. 最常用的控制标记 本章讲解最基本的 HTML 元素,也就是创建文档结构所需的元素.例如:标题.段落. 页面分隔.注释等等. 2.1 H ...

  4. font-face在ie无法识别问题

    font-face在ie的时候,需要其他格式eot,但是按照网上的设置无法识别,需要把原来的fotmat设置成format('eot');

  5. Python变量和简单数据类型

    变量的命名和使用 在Python中使用变量时 ,需要遵守一定的规则和指南. 变量名只能包含字母‘数字和下划线 变量名不能包含空格,但可以用下划线分割其中单词 不要将Python关键字和函数名用作变量名 ...

  6. Android项目实战(四十):Andoird 7.0+ 安装APK适配

    首先看一下安装apk文件的代码 /** * 通过隐式意图调用系统安装程序安装APK */ public static void install(Context context) { Intent in ...

  7. Android gravity和layout_gravity的区别

    一.gravity和layout_gravity相同处 两者都是设置对齐方式的属性.内部的属性值相同. 根据英文意思也能理解其中的意思.如center_horizontal表示在水平方向上的位置为中间 ...

  8. WangleEditor3提交数据(servlet-jsp)

    用servlet提交 WangEditor3编辑的内容,找了很多资料没发现,大多用的框架,今天终于解决了,记录一下. WangEditor3不支持放在textarea中,servlet是无法直接获取到 ...

  9. codeforces 803D Magazine Ad(二分+贪心)

    Magazine Ad 题目链接:http://codeforces.com/contest/803/problem/D ——每天在线,欢迎留言谈论. 题目大意: 给你一个数字k,和一行字符 例: g ...

  10. ThreadPoolExecutor源码解析(二)

    1.ThreadPoolExcuter运行实例 首先我们先看如何新建一个ThreadPoolExecutor去运行线程.然后深入到源码中去看ThreadPoolExecutor里面使如何运作的. pu ...