vue.js提示框插件

预览

备注

基于promise，如果要在IE9上使用，请引入相关profill
<script src = "https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script>

安装

npm安装

npm install vuejs-dialog

浏览器

<script type="text/javascript" src="./path/to/vuejs-dialog.min.js"></script>

引入

单页面

import Vue from "vue"
import VuejsDialog from "vuejs-dialog"Vue.use(VuejsDialog)

浏览器

<script type="text/javascript" src="./path/to/vue.min.js"></script>
<script type="text/javascript" src="./path/to/vuejs-dialog.min.js"></script>
<script>
Vue.use(VuejsDialog.default)
</script>

API

confirm对话框

this.$dialog.confirm('Please confirm to continue').then(function () {// 点击确定执行console.log('Clicked on proceed')}).catch(function () {// 点击取消执行console.log('Clicked on cancel')});

alert对话框

this.$dialog.alert('Please confirm to continue').then(function () {// 点击确定执行console.log('Clicked on proceed')})

选项

let options = {html: false, // 内容可以包含html标记loader: false, // 显示载入动画reverse: false, // 按钮左右反转okText: 'Continue',  // 本地化确认按钮文字提示内容cancelText: 'Close',  //本地化关闭按钮文字提示内容animation: 'zoom', // 动画方式， 三选一: "zoom", "bounce", "fade"type: 'basic', // 确认类型，点击确认（basic）， 'soft'(软确认), 'hard'（硬确认)verification: 'continue', // 硬确认时, 作为确认文字，需要用户手工输入verificationHelp: 'Type "[+:verification]" below to confirm', // 硬确认时，提示用户输入的文字clicksCount: 3, // 软确认时，点击几次确认按钮完成最终的确认backdropClose: false // 点背景遮罩是否退出
};

技巧

本地化

message = '测试工作';
options = {okText: '确定',  // 本地化确认按钮文字提示内容cancelText: '取消',  //本地化关闭按钮文字提示内容
}
this.$dialog.alert(message, options);

显示标题与内容

message = {title: '友情提示',body: '测试工作'
}
this.$dialog.alert(message);

vue.js提示框插件(vuejs-dialog)使用指南相关推荐

html js 循环提示框,纯js超酷消息提示框插件notice.js
notice.js是一款纯js超酷消息提示框插件.notice.js为纯js编写,没有任何依赖文件.通过它可以在页面上制作出漂亮的toast消息通知框效果.该js消息提示框插件的特点还有: 支持4中情 ...
在指定位置上方出现通用jquery悬浮提示框插件全站通用
工作需要,网站悬浮提示框要求出现在指定元素上方,由于工作量修改比较大所以要求全站通用,所以写了一个juqery插件,插件很简单,大家可以自行更改样式. 请转载此文的朋友务必附带原文链接,谢谢. 原文链 ...
轻巧的jQuery提示框插件Tipso演示
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8&qu ...
数据可视化——（提示框插件）
提示框插件有很多,不同的框架中选择的也不一样. 本文主要分享toastr插件总结它的使用步骤如下: 使用步骤: 加载 jqury.js.toastr.css 和 toastr.js 文件全局配置. ...
vue.js html 属性赋值,vue.js input框之间赋值方法
vue.js input框之间赋值方法 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了vue.js input框之间赋值方法,编程之家小编 ...
04.tooltip提示框插件，linkbutton按钮插件与progressbar进度条插件
tooltip提示框插件 1 渲染方式 2 属性 3 事件 4 方法 linkbutton按钮插件 21 渲染方式 22 属性 23 方法 progressbar进度条插件 1 渲染方式 2 属性 3 ...
15个友好的jQuery 提示框插件
需要在用户把光标移到某个元素上时显示一些额外信息时,提示框是一种不错的方式,提示框会在鼠标停留的时候显示,鼠标移开时消失. 适当的使用提示框能大大提升网站的友好度,并且可以节省一些不必要的网页空间,今 ...
直接拿来用！Vue.js 第三方常用插件盘点 | CSDN 博文精选
作者 | 张猛责编 | 伍杏玲出品 | CSDN 博客 [CSDN 编者按]作者介绍几个Vue.js常用的插件和用法,简单实用,你可以直接拿来用! Vue.js DevTools 用于开发调试Vu ...
Vue中提示框慢慢显示和慢慢消失方法
Vue中提示框慢慢显示和慢慢消失方法 Vue提供了一个标签属性transition,直接使用就可以了: 用transition标签把需要慢慢显示的组件包起来. 然后在目前组件下面的style属性里面添 ...

vue.js提示框插件(vuejs-dialog)使用指南

vue.js提示框插件

更多文章，请访问我的博客

预览

备注

安装

npm安装

浏览器

引入

单页面

浏览器

API

confirm对话框

alert对话框

选项

技巧

本地化

显示标题与内容

vue.js提示框插件(vuejs-dialog)使用指南相关推荐

最新文章

热门文章