VUX的使用方法(以弹出框为例)
一、安装
cnpm install vux --save
cnpm install vux-loader --save-dev
二、配置

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的使用方法(以弹出框为例)的更多相关文章
- ckfinder在IE10,IE9中的弹出框不能选择,或者不能上传解决方法
在IE9,或IE10中ckfinder在IE10,IE9中的弹出框不能选择,或者不能上传解决方法 把弹出框嵌入到jquery dialog中.可以解决 I did: // javascript f ...
- vue封装公用弹出框方法,实现点击出现操作弹出框
vue封装公用弹出框方法,实现点击出现操作弹出框 如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽 ...
- Android 学习笔记之AndBase框架学习(二) 使用封装好的进度框,Toast框,弹出框,确认框...
PS:渐渐明白,在实验室呆三年都不如在企业呆一年... 学习内容: 1.使用AbActivity内部封装的方法实现进度框,Toast框,弹出框,确认框... AndBase中AbActivity封 ...
- 【原创】贡献一个JS的弹出框代码...
一.前言 最近在做一个项目,自己感觉系统自带的alert()方法的弹出框实在是不堪入目,所以在网上找了一些资料,然后自己加工了一下,做出了自己的一个js弹出框,在这里贡献出来,希望对你有帮助. 二.开 ...
- iPad弹出框
弹出框是iPad的常用UI元素,即在现有视图上面显示内容,并通过一个小箭头指向一个屏幕对象(如按钮),以提供上下文. 和模态场景一样,弹出框的内容也由一个视图和一个试图控制器决定,不同之处在于,弹出框 ...
- [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面
引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...
- 第二百四十六节,Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...
- js swal()弹出框
做前端开发的时候时常会遇到修改成功.新增成功这类弹出框,用alert的话未免有点太low了,而swal()是一个简单又实用的弹出框方法 alert 弹出框样式如下: swal() 弹出框样式如下: 代 ...
- 练习PopupWindow弹出框之实现界面加载的时候显示弹出框到指定的view下面--两种延迟方法
今天在练习PopupWindow弹出框的时候,打算在界面加载的时候将弹出框展现出来并显示在指定的view下面. 初步方法是直接在OnResume方法里面直接执行showPopupWindows方法. ...
随机推荐
- Codeforces 479【A】div3试个水
题目链接:http://codeforces.com/problemset/problem/977/A 题意:这个题,题目就是让你根据他的规律玩嘛.末尾是0就除10,不是就-1. 题解:题解即题意. ...
- 使用CSS为图片添加更多趣味的5种方法
使用Photoshop为每个图片添加某种样式虽然可行,但会是相当乏味且困难的长久工作.下面要介绍的CSS技巧将帮助你从痛苦中解脱出来! 阴影效果 通过使用带有一些padding之的背景图来添加阴影效果 ...
- Qt学习笔记----信号与槽实现的四种方式
1.以按钮为例,首先添加一个按钮,对象名为pushButton,在按钮是右键单击选择“转到槽”即可,在转到槽选择面板(右图)里面选择需要进行的操作,比如单击clicked() 2.选择菜单“编辑”,找 ...
- CentOS 7 下配置 Nginx + PHP7.1 + MariaDB 以及 Laravel 框架
<!doctype html> CentOS 7 下配置 Nginx + PHP7.1 + MariaDB 以及 Laravel 框架.mdhtml {overflow-x: initia ...
- vue v-model :
v-model : 通过v-model 进行双向绑定 ,将data的数据与input 绑定在一起,呈现在页面上 <!DOCTYPE html> <html lang="en ...
- arc098E Range Minimum Queries
题意:给你一个n个数的数组,每次能够选取连续的长度为K的子序列,取出其中任意一个最小元素. 一共操作Q次.问取出的元素中Max-Min最小是多少? 标程: #include<bits/stdc+ ...
- 配置文件一applicationContext.xml
p命名空间注入 需要引入xmlns:p="http://www.springframework.org/schema/p" p命名空间注入的特点是使用属性而不是子元素的形式配置Be ...
- K最近邻(KNN,k-Nearest Neighbor)准确理解
K最近邻(KNN,k-Nearest Neighbor)准确理解 用了之后,发现我用的都是1NN,所以查阅了一下相关文献,才对KNN理解正确了,真是丢人了. 下图中,绿色圆要被决定赋予哪个类,是红色三 ...
- Hibernate之OID
在关系数据库中,主键用来识别记录,并保证每天记录的唯一性.在Java语言中,通过比较两个变量所引用对象的内存地址是否相同,或者比较两变量引用的对象是否相等.Hibernate为了解决两者之间的不同,使 ...
- HDFS under replicated blocks
under replicated blocks 解决: 找出没有复制的block: hdfs fsck / | grep 'Under replicated' | awk -F':' '{print ...