基于mpvue的toast组件

最近美团开源了一个能够用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