VUE：從toast元件到toast插件（一）

最近學習使用vue-cl寫一個商城的項目，其中封裝一個toast插件這個過程我覺得非常有趣，是以想記錄下來。

文章根據知識點，分兩篇來寫：

1.tast元件；

2.toast插件。

元件寫起來很簡單，先在元件目錄下的公共元件部分建立一個檔案：

//  components/common/toast/Toast.vue

<template>
  <div class="toast-box" v-show="content">
    <div>{{content}}</div>
  </div>
</template>

<script>
export default {
  name: "Toast",
  props: {
    content: {
      type: String,
      default: ""
    }
  }
};
</script>

<style  scoped>
.toast-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;

  max-width: 80%;
  height: auto;
  padding: 2rem 2rem;
  box-sizing: border-box;
  border-radius: 0.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}
</style>
           

接着在需要使用的地方引入該元件，傳入特定的值就能看到toast效果了：

// views/home/Home.vue
<template>
    <div class="home">
        <button @click.stop = "showToast" >點選顯示toast</button>
        <toast :content="message" />
    </div>
</template>

<script>
import Toast from "common/toast/Toast";

export default {
    name: "Home",
    components:{
        Toast,
    },
    data:(){
        return {
            message: "",
            times: null,
        }
    },
    methods:{
        showToast(){
            this.message = "toast顯示的消息";
            if(this.times) clearTimeout(this.times);
            this.times = setTimeout(()=>{
                this.message = "";
            },3000);
        }
    }
}
</script>
           

以上就是寫了一個toast元件，哪裡需要使用，就在哪裡引入，使用起來還是不太友善的。

本文章有點水，但是在下一篇文章則會記錄在vue項目中如何封裝一個toast插件。