基於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