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方法. ...
随机推荐
- USACO 2007 November Silver Best Cow Line /// oj21653
题目大意: 输入n 接下来n行字母 在队头和队尾中选出较小的放入新的队列 Sample Input 6ACDBCB Sample Output ABCBCD 注意相同的情况 先判断内层的大小 输出 ...
- 如何 clean IntelliJ IDEA 中的工程
如何 clean IntelliJ IDEA 中的工程 1.点击“build”,选择“Build Artifacts” 2.点击“clean”,就可以了:然后重新,debug run 就完成了. ...
- pycharm连接数据库及相应操作
1.连接数据库 2.pycharm中数据库的操作
- x25, PF_X25 - ITU-T X.25 / ISO-8208 协议接口。
总览 #include <sys/socket.h> #include <linux/x25.h> x25_socket = socket(PF_X25, SOCK_SEQPA ...
- vue组件的props
刚开始学习vue组件的时候经常被 props这个传值搞晕,做个笔记 Vue.component('item', { template: '#item-template', props: { model ...
- ctx.beginPath()开始新路径
beginPath() 方法开始一条路径,或重置当前的路径. 提示:请使用这些方法来创建路径 moveTo().lineTo().quadricCurveTo().bezierCurveTo().ar ...
- Android 开发 框架系列 OkHttp拦截器
前言 此篇博客只讲解okhttp的拦截器功能的详细使用,如果你还不太了解okhttp可以参考我另外一篇博客 Android 开发 框架系列 OkHttp使用详解 添加Interceptor的简单例子 ...
- js获取当前网址Url
js获取当前路径并截取 var str = window.location.href;// str = 'https://localhost:8080/mark' var index = str .l ...
- Liunx下安装Oracle11g时Oracle Grid安装包下载向导
下载Oracel 11g Grid的安装包 Oracle官网 https://www.oracle.com 快捷访问路径:https://www.oracle.com/technetwork/dat ...
- CSS——背景渐变
在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧.从右侧到左侧.从顶部到底部.从底部到顶部或着沿任何任意轴.如果你曾使用过制作图件,比如说Photoshop,你对线性渐变并不会陌生. 兼容性问题很 ...