一、安装

cnpm install vux --save
cnpm install vux-loader --save-dev

二、配置

 const vuxLoader = require('vux-loader')
const webpackConfig = {
...
}
module.exports = vuxLoader.merge(webpackConfig, {
options: {},
plugins: [{
name: 'vux-ui'
}]
})

三、调用

import { AlertPlugin } from 'vux'
Vue.use(AlertPlugin)

四、使用

this.$vux.alert.show({
title: '温馨提示',
content: '此桌已被预定!',
buttonText: '好的',
hideOnBlur: true,
maskZIndex: 100
})

提示标题为图片:

that.$vux.alert.show({
content: `您预约的订单已经成功取消,欢迎您再次预定!`,
buttonText: '好的',
maskZIndex: 100,
onShow () {
let alertImgLen = document.getElementsByClassName('weui-dialog__hd')[0]
alertImgLen.innerHTML = '<img src="../../static/images/tip3.png" class="alertImg3">'
},
onHide () {
that.$router.push('/orderInfo')
}
})

五、效果

VUX的使用方法(以弹出框为例)的更多相关文章

  1. ckfinder在IE10,IE9中的弹出框不能选择,或者不能上传解决方法

    在IE9,或IE10中ckfinder在IE10,IE9中的弹出框不能选择,或者不能上传解决方法   把弹出框嵌入到jquery dialog中.可以解决 I did: // javascript f ...

  2. vue封装公用弹出框方法,实现点击出现操作弹出框

    vue封装公用弹出框方法,实现点击出现操作弹出框 如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽 ...

  3. Android 学习笔记之AndBase框架学习(二) 使用封装好的进度框,Toast框,弹出框,确认框...

    PS:渐渐明白,在实验室呆三年都不如在企业呆一年... 学习内容: 1.使用AbActivity内部封装的方法实现进度框,Toast框,弹出框,确认框...   AndBase中AbActivity封 ...

  4. 【原创】贡献一个JS的弹出框代码...

    一.前言 最近在做一个项目,自己感觉系统自带的alert()方法的弹出框实在是不堪入目,所以在网上找了一些资料,然后自己加工了一下,做出了自己的一个js弹出框,在这里贡献出来,希望对你有帮助. 二.开 ...

  5. iPad弹出框

    弹出框是iPad的常用UI元素,即在现有视图上面显示内容,并通过一个小箭头指向一个屏幕对象(如按钮),以提供上下文. 和模态场景一样,弹出框的内容也由一个视图和一个试图控制器决定,不同之处在于,弹出框 ...

  6. [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

    引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...

  7. 第二百四十六节,Bootstrap弹出框和警告框插件

    Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...

  8. js swal()弹出框

    做前端开发的时候时常会遇到修改成功.新增成功这类弹出框,用alert的话未免有点太low了,而swal()是一个简单又实用的弹出框方法 alert 弹出框样式如下: swal() 弹出框样式如下: 代 ...

  9. 练习PopupWindow弹出框之实现界面加载的时候显示弹出框到指定的view下面--两种延迟方法

    今天在练习PopupWindow弹出框的时候,打算在界面加载的时候将弹出框展现出来并显示在指定的view下面. 初步方法是直接在OnResume方法里面直接执行showPopupWindows方法. ...

随机推荐

  1. HTTP入门简介

    一.概念:Hyper Text Transfer Protocol 超文本传输协议 传输协议:定义了客户端和服务器端通信时,发送数据的格式 特点: 1.基于TCP/IP的高级协议 2.默认端口号:80 ...

  2. Impala系统架构

  3. Leetcode207. Course Schedule课程表

    现在你总共有 n 门课需要选,记为 0 到 n-1. 在选修某些课程之前需要一些先修课程. 例如,想要学习课程 0 ,你需要先完成课程 1 ,我们用一个匹配来表示他们: [0,1] 给定课程总量以及它 ...

  4. Web安全之XSS 入门与介绍

    XSS的入门与介绍 跨站攻击 XSS全称跨站脚本(Cross Site Scripting),一种注入式攻击方式. XSS成因 对于用户输入没有严格控制而直接输出到页面 对非预期输入的信任 XSS的危 ...

  5. 数据库MySQL--分组查询

    事例使用文件:https://files.cnblogs.com/files/Vera-y/myemployees.zip 分组数据:group by 子句 分组查询语法: select 分组函数,列 ...

  6. Java怎样获取字符串最后出现的位置

    lastIndexOf();表示获取字符串最后出现的位置,倒数的位置 @Test /** * lastIndexOf();//获取字符串最后出现的位置,倒数的位置 * */ public void f ...

  7. [VS2008] Debug版本程序发布后 由于应用程序的配置不正确,应用程序未能启动,重新安装应用程序可能会纠正这个问题

    转自VC错误:http://www.vcerror.com/?p=59 问题描述: [VS2008] 版本程序发布后,运行程序弹出错误框: 由于应用程序的配置不正确,应用程序未能启动,重新安装应用程序 ...

  8. 在ubuntu下编写python

    一般情况下,ubuntu已经安装了python,打开终端,直接输入python,即可进行python编写. 默认为python2 如果想写python3,在终端输入python3即可. 如果需要执行大 ...

  9. Eclips安装STS(Spring Tool Suite (STS) for Eclipse)插件

    Spring Tool Suite(sts)就是一个基于Eclipse的开发环境, 用于开发Spring应用程序.它提供了一个现成的使用环境来实现, 调试, 运行, 和部署你的Spring应用程序.包 ...

  10. Vue的组件及传参

    目录 Vue的组件及传参 Vue组件的概念 根组件 子组件(局部组件) 父组件向子组件传值 子组件向父组件传值 Vue的组件及传参 Vue组件的概念 我们首先要知道组件的概念,实际上每一个组件都是一个 ...