my canteen
登录       注册

您现在的位置是:网站首页 > 学无止境

Toast插件的简单封装

王伟2020年9月23日33人围观
简介Toast插件的简单封装

Toast插件的简单封装

创建一个 toast 的文件夹,里面包含 Toast.vueindex.js

<!-- Toast.vue -->
<template>
  <div class="toast" v-show='isshow'>
    <div>{{message}}</div>
  </div>
</template>

<script>
export default {
  name: 'Toast',
  data(){
    return {
      message: '',
      time: 2000,
      isshow: false
    }
  },
  methods: {
    show (message, time=1000) {
      this.isshow = true
      this.message = message
      setTimeout(() => {
        this.isshow = false
        this.message = ''
      }, time)
    }
  }
}
</script>

<style>
  .toast {
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 8px 10px;
    border-radius: 4px;
    transform: translate(-50%, -50%);
    color: #fff;
    background-color: rgba(0,0,0,.8);
    z-index: 999;
  }
</style>
// index.js
import Toast from './Toast.vue'

const obj = {}

obj.install = function (Vue) {
  // 1. 创建组件构造器
  const toastConstructor = Vue.extend(Toast)

  // 2. new 的方式,根据组件构造器,可以创建出来一个组件对象
  const toast = new toastConstructor()

  // 3. 将组件对象手动挂载到某一个元素上
  toast.$mount(document.createElement('div'))

  // 4. toast.$el 对应的就是 div
  document.body.appendChild(toast.$el)

  Vue.prototype.$toast = toast
}

export default obj

安装组件

// main.js
import Toast from '../components//toast/index.js'

Vue.use(Toast)

Toast插件的使用

在组件中可以随意使用Toast插件

<template>
  <div id="app">

    <img src="@/assets/logo.png" alt="" @click="showToast">

  </div>
</template>

<script>
export default {
  methods: {
    showToast(){
      this.$toast.show('hello Vue', 2000)
    }
  }
};
</script>

Vue 基础知识之 Vue.extend

在封装Toast插件时我们使用了组件构造器Vue.extend,这属于 Vue 的全局 API,在实际业务开发中我们很少使用,因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中,Vue.extend + $mount 这对组合是我们需要去关注的。

用法:

<div id="app"></div>
// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}}</p>',
  data: function () {
    return {
      firstName: 'wei',
      lastName: 'wang',
    }
  }
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#app')
// 结果如下
<p>wei wang</p>

Vue构造器与我们平时写的组件并不相同 需要我们将构造器挂载到$el上

路漫漫其修远兮,吾将上下而求索。


上一篇:节流与防抖

下一篇:

文章评论

来说句话吧.... 共有评论数:0条


微信二维码 博主微信 qq二维码 博主QQ
177****8743
7*24小时电话