基於mpvue的toast元件

steins發表於2018-03-10
VueAST元件

最近美團開源了一個可以用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

基於mpvue的toast元件

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

相關文章