详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
wc-messagebox
- 基于 vue 2.0 开发的插件
- 包含 Alert, Confirm, Toast, Prompt
- 仿照 iOS 原生UI(样式来源: MUI)
一些想法
刚开始的时候想要用现成的弹窗组件来着, 但是查找一圈没有发现比较合适项目的, 所以才自己开发了一个, 包含 Alert, Comfirm, Toast, Prompt 四种, 并且可以单个引入.
Vue 的组件开发实际上比较简单, 有兴趣的可以看下源码实现, 步骤很清晰.
关于样式的问题, 是直接从 MUI(魅族开发的) 中拿过来的, 仿照 iOS 的效果.
效果图
图是动图... 动不了点一下就好.
Install
npm i wc-messagebox --save
Quick Start
import {Alert, Confirm, Toast} from 'wc-messagebox' import 'wc-messagebox/style.css' Vue.use(Alert, options) Vue.use(Confirm, options) Vue.use(Toast, options)
Usage
this.$alert(text, options) options = { title: '', // 默认无标题 btn: { text: '', style: { 'backgroun-color': 'red', 'font-size': '20px', 'color': 'blue' } } } this.$confirm(text, options) options = { title: '', // 默认无标题 yes: { text: '确定', style: {} }, no: { text: '取消', style: {} } } this.$toast(text, options); options = { position: 'bottom' // 'bottom' | 'center', duration: '1500' }
其他
Alert, Confirm 返回的是一个Promise, 以支持链式调用.
this.$confirm(text).then(success).catch(fail)
项目地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
vue 自定义提示框(Toast)组件的实现代码
1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var showToast = false, // 存储toast显示状态 showLoad = false, // 存储loading显示状态 toastVM = null, // 存储toast vm loadNode = null; // 存储loading节点元素 Toast.install = func
-
vue的toast弹窗组件实例详解
相信普通的vue组件大家都会写, 定义 -> 引入 -> 注册 -> 使用 ,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): 0. 轻量 --一个组件小于 1Kib (实际打包完不到0.8k) 1.一般都是多处使用 --需要解决每个页面重复引用+注册 1.一般都是跟js交互的 --无需 在 <template> 里面写 <toast :show="true" text="弹窗消息
-
基于 flexible 的 Vue 组件:Toast -- 显示框效果
基于flexible.js 的 Vue 组件 前言: 目前手头的移动端Vue项目是用手淘的 lib-flexible作适配的,并用px2rem 来自动转换成rem.关于lib-flexible和px2rem的配置,请移步 vue-cli 配置 flexible. 由于使用rem作适配,导致现有的很多移动端UI框架不能与之很好的配合,往往需要大动干戈更改UI框架的样式,背离了使用UI框架达到快速开发的初衷. 为了以后项目的组件复用,以及提高开发可复用组件的能力,特把平时项目中 常用的.简单的 组件
-
Vue自定义toast组件的实例代码
写了两三天,终于把toast组件写出来了.不敢说是最好的设计,希望有更好思路的朋友可以在评论区给我意见!_(:з」∠)_ 第一步:写toast.vue,将样式之类的先定下来 <template> <div v-show="showToast" class="toast" :class="position"> <div class="toast_container" v-if="type=
-
Vue组件教程之Toast(Vue.extend 方式)详解
一.效果图 二.说明 这类提示框组件我们通常都会直接在 JS 代码中进行调用.像下面这样: this.$toast('别点啦,到头啦!') 但看到网上大多数还是通过 component 方式实现的,这样的话我们在使用的时候还要在 DOM 中放置一个组件元素,然后通过一个变量来控制它的显示隐藏,这样使用起来非常的不方便.那么有什么方法可以不用在 DOM 中手动放置组件元素就可以直接调用呢?答案就是 Vue.extend.通过 Vue.extend 方式实现的组件,需要两个文件,一个是 .vue 文
-
详解vue使用vue-layer-mobile组件实现toast,loading效果
安装vue-layer-mobile // 当前最新版本 1.2.0 npm install vue-layer-mobile // 如新版遇到问题可回退旧版本 npm install vue-layer-mobile@1.0.0 此版本安装后启动会报错,报错提示将css里的display:box改成display:flex; 在main.js里面全局引用 import 'vue-layer-mobile/need/layer.css' import layer from 'vue-layer-
-
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
wc-messagebox 基于 vue 2.0 开发的插件 包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生UI(样式来源: MUI) 一些想法 刚开始的时候想要用现成的弹窗组件来着, 但是查找一圈没有发现比较合适项目的, 所以才自己开发了一个, 包含 Alert, Comfirm, Toast, Prompt 四种, 并且可以单个引入. Vue 的组件开发实际上比较简单, 有兴趣的可以看下源码实现, 步骤很清晰. 关于样式的问题, 是直接从 MUI(魅族开
-
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Vue2.0 做应用必有的需求就是页面数据需要做缓存,不用每次进入页面都要把数据重新请求一遍,每次页面切换都有段等待数据相应时间,这个用户体验可想有多么蛋疼,所以页面缓存是必要的,啥时候需要更新页面数据呢?可以监听状态变化,或者是手动下拉刷新重新请求数据,酱紫,我想用户体验会做的更好. keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件
-
详解关于vue2.0工程发布上线操作步骤
找了不少资料如何发布到服务器,然而还是没找到合适的可实际操作的文档.很多文档打着上线发布的标题,其实就是本地运行而已.其实vue2.0工程发布相当简单. 文章重点: 讲解vue工程配置部分的意义 如何打包为生产环境中的前端工程 如何打包发布到云端以及nginx服务器配置 一.vue工程配置部分的意义 首先我们先看下vue2.0整体工程目录结构 (非重点省略) - vueDemo //你的vue工程名 - build - build.js - check-version.js - utils.js
-
详解基于vue-cli3.0如何构建功能完善的前端架子
上一篇文章写了vue和typescript的整合,发现很多小伙伴对vue-cli构建出来的项目很感兴趣,所以今天打算写写怎么在vue-cli3.0的架子上,在进一步完善,整合出具备基础功能的前端架子,主要包括以下几个功能点: webpack 打包扩展 css:sass支持.normalize.css rem布局 路由设计:懒加载.前置检查.合法性校验 api 设计 请求体设计-防重复提交 vuex状态管理 webpack 打包扩展 vue-cli3 最大的特点就是 零配置 ,脚手架把webpac
-
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Vue.js 是目前最火热的前端框架之一,而 Nuxt.js 是针对 Vue.js 推出的服务端渲染框架,通过高度定制化的配置以及简洁的 API,开发者可以快速进行服务端渲染项目的开发,本文将对 Nuxt.js 框架做一个简要介绍. 服务端渲染 服务端渲染(Server Side Render)并不是一个新的概念,在单页应用(SPA)还没有流行起来的时候,页面就是通过服务端渲染好,并传递给浏览器的.当用户需要访问新的页面时,需要再次请求服务器,返回新的页面. 为了优化体验,开发者们开始选择采用
-
详解基于Vue/React项目的移动端适配方案
前言 本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案. px2rem或postcss-px2rem 在移动端中,为了设配不同的设备,通常使用rem来做适配. rem是通过根元素进行适配的,网页中的根元素指的
-
基于vue2.0动态组件及render详解
如下所示: <template> <div class="hello"> <h1>{{ msg }}</h1> <h2>这里是Boor</h2> <component v-bind:my-data="items" v-bind:is="currentView"> <!-- 组件在 vm.currentview 变化时改变! --> </compo
-
详解Weex基于Vue2.0开发模板搭建
前言 最近有一些人反馈说在面试过程中常常被问到weex相关的知识,也侧面反映的weex的发展还是很可观的,可是目前weex的开发者大多数是中小型公司或者个人,大公司屈指可数,揪其原因可能是基于weex的开发正确的姿势大家并没有找到,而且市面上的好多轮子还是.we后缀的,众所周知,weex和vue一直在努力的进行生态互通,而且weex实现web标准化是早晚的问题,今天和大家分享一下weex基于vue2.0的开发框架模板~ 工作原理 先简单熟悉一下weex的工作原理,这里引用一下weex官网上的一直
-
mysql数据库详解(基于ubuntu 14.0.4 LTS 64位)
1.mysql数据库的组成与相关概念 首先明白,mysql是关系型数据库,和非关系型数据库中最大的不同就是表的概念不一样. +整个mysql环境可以理解成一个最大的数据库:A +用mysql创建的数据库B是属于A的,是数据的仓库,相当于系统中的文件夹 +数据表C:是存放数据的具体场所,相当于系统中的文件,一个数据库B中包含若干个数据表C(注意此处的数据库B和A不一样) +记录D:数据表中的一行称为一个记录,因此,我们在创建数据表时,一定要创建一个id列,用于标识"这是第几条记录",id
-
详解给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2.具体需求 用户鉴权与重定向:使用Vue提供的路由导航钩子 请求数据序列化:使用axios提供的请求拦截器 接口报错信息处理:使用axios提供的响应拦截器 3.简单实现 3.1 路由导航钩子层面鉴权与重定向的封装 路由导航钩子所有配置均在router/index.js,这里是部分代码 import
随机推荐
- js 显示日期时间的实例(时间过一秒加1)
- JDBC探索之SQLException解析
- Oracle静态注册与动态注册详解
- Win2003下提高FSO的安全性
- 使用Spring Boot快速构建基于SQLite数据源的应用
- ASP.net中网站访问量统计方法代码
- js绘制购物车抛物线动画
- js 转义字符及URI编码详解
- jQuery常见面试题之DOM操作详析
- JQuery处理json与ajax返回JSON实例代码
- PHP中定义数组常量(array常量)的方法
- 挑战最棒的留言本的源码(一)
- 在VS2008中使用正则表达式进行查找和替换
- 利用C语言实现顺序表的实例操作
- 详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
- Redis批量删除KEY的方法
- Android AlertDialog自定义样式实现代码
- javascript 操作cookies详解及实例
- 举例讲解Java设计模式编程中Decorator装饰者模式的运用
- 深入解析Java的包(package)