最近美团开源了一个可以用vue来开发小程序的框架mpvue，看起来还挺不错的，我自己觉得wepy的开发体验不是很好，所以还是比较期待这个新框架的，基于mpvue写了个toast组件，主要是试试水，总体的开发体验还是很不错的。先贴出来github地址，有兴趣的可以看看，喜欢的请给个star拉~

主要有这几个问题：

小程序好像没有动态添加节点的api，所以只能做成组件形式，还不支持api形式
transition不起作用，所以动画需要别的实现方式
没有ref属性可用，如果要访问子组件上的属性和方法，可能要通过$children
暂时不支持全局组件
发布到npm后main字段需要指向.vue文件上才能正常构建，指向js文件，在js文件中再抛出vue文件构建失败，issue33

代码也比较简单，就不解释了，拿readme凑下字数~

mpvue-toast

mpvue-toast is a toast plugin for mpvue.

Screenshots

Install

npm install mpvue-toast --save
复制代码

Usage

<template><div><toast message="hello from toast" :visible.sync="visible"></toast><button @click='setVisible(false)'>toggle toast</button><!-- <toast message="hello from toast" :visible.sync="visible" :img="img"></toast> --><!-- <toast message="hello from toast" :visible.sync="visible" icon-class="iconfont icon-shoucang"></toast> --></div>
</template><script>
import toast from 'mpvue-toast'
// import img from 'img.jpg'
// import '@/icon.css'export default {data () {return {visible: false,// img}},components: {toast},methods: {setVisible() {this.visible = !this.visible}},
}
</script>
复制代码

Props

参数	说明	类型	可选值	默认值
animate	是否启用动画	Boolean	-	true
transition	动画类型，现在支持 `slide` `fade`	String	`slide` `fade`	`slide`
duration	`Toast`的持续时间，单位毫秒	Number	-	2000
message	`Toast`的内容	String	-	-
className	`Toast`的class	String	-	-
img	图片	String	-	-
iconClass	图标class，可以使用 `iconfont`	String	-	-
position	`Toast`的显示位置	String	-	center
visible	控制`Toast`的显示，支持`sync`	Boolean	-	-

TODO

[ ] test
[ ] api

Other Component

mpvue-ripple

基于mpvue的toast组件相关推荐

微信小程序基于mpvue的ui组件之选择器
第一次自己开发组件,希望大家能够指出错误的地方或者改进的思路~ 先上图片主页面选中状态返回结果说明,该UI组件是为小程序而开发的,能够对传入的参数进行处理,最多加载四个选择器,最少一个创建文 ...
mpvue 微信小程序api_基于mpvue构建微信和支付宝小程序（1）
基于mpvue构建微信和支付宝小程序(1) (1)----- 基础架构篇 why?为啥会有这个系列? 无论是百度和google,关于mpvue构建小程序的项目讲的都是管中窥豹,没有一个系统的讲解. 本 ...
用 vue 写小程序，基于 mpvue 框架重写 weui
mpvue-weui 前言上周美团开源了 mpvue 框架,他基于Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系.what,小程序可以用vue写了?简直有点不太敢确定, ...
小程序mpvue图片绘制水印_基于mpvue小程序使用echarts画折线图的方法示例
第一次使用mpvue框架来写小程序,项目开发直接搬用mpvue-shop(一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择. 关 ...
基于Vue结合Vant组件库的仿电影APP
Vue综合案例 Vue综合案例一.项目概要 1.效果前瞻 2.开发流程 3.开发环境二.初始化及必要知识点 1.初始化远程仓库 2.创建项目 3.路由规划 4.反向代理配置 5.网络请求封装 6. ...
小程序mpvue图片绘制水印_基于mpvue小程序使用echarts画折线图
第一次使用mpvue框架来写小程序,项目开发直接搬用 mpvue-shop (一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择. ...
Visifire Silverlight Charts (基于SilverLight的Chart组件)
偶然发现了这个东东,一个基于SilverLight的Chart组件,遵循GPL v3,支持的Chart类型挺多的(支持饼图,柱状图,圈图,区图等等). Visifire 有比较完善的文档, 而且还有一 ...
php的toast,使用toast组件实现提示用户忘记输入用户名或密码功能
微信小程序现在越来越流行,所需要的开发功能越来越多,本文主要介绍了微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能,结合实例形式详细分析了toast组件实现消息提示功能的相关操作技巧 ...
html toast 插件,基于Bootstrap4的Toast提示插件
这是一款基于bootstrap4的toast插件.该插件能非常方便的生成toast提示效果,不需要编写额外的html代码,非常实用. 使用方法在页面中引入下面的文件. 初始化插件通过下面的方法来创 ...
基于mpvue的微信小程序全栈保姆式教程一
预览最终效果https://github.com/FFGF/XCDHBook/blob/master/static/XCDHBook.gif顺便推荐一个视频转gif的好工具https://ezgif. ...

基于mpvue的toast组件

mpvue-toast

Screenshots

Install

Usage

Props

TODO

Other Component

基于mpvue的toast组件相关推荐

最新文章

热门文章