Vue如何封装全局toast组件

2024-04-02 19:04:59 265人浏览泡泡鱼

摘要

本篇内容主要讲解“Vue如何封装全局toast组件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue如何封装全局toast组件”吧!一. 借助 vue-cli

本篇内容主要讲解“Vue如何封装全局toast组件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue如何封装全局toast组件”吧!

一. 借助 vue-cli

1. 定义 Toast 组件

// components/Toast

<template>
  <transition name="fade">
    <div v-show="visible">{{message}}</div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      message: ""
    }
  }
}
</script>

<style scoped>
div {
  position: fixed;
  top: 30%;
  left: 50%;
  padding: 5px 20px;
  color: #fff;
  background-color: #424242;
  border-radius: 5px;
  text-align: center;
  transfORM: translate(-50%, -50%);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

2. 在 main.js 里面配置

import Vue from "vue"
import App from "./App.vue"
import Toast from "./components/Toast"

// 定义插件对象
const ToastObj = {
  install: function (Vue) {
    // 创建一个Vue的“子类”组件
    const ToastConstructor = Vue.extend(Toast)
    // 创建一个该子类的实例,并挂载到一个元素上
    const instance = new ToastConstructor()
    console.log(instance)
    // 将这个实例挂载到动态创建的元素上,并将元素添加到全局结构中
    instance.$mount(document.createElement("div"))
    document.body.appendChild(instance.$el)

    // 在Vue的原型链上注册方法，控制组件
    Vue.prototype.$toast = (msg, duration = 1500) => {
      instance.message = msg
      instance.visible = true
      setTimeout(() => {
        instance.visible = false
      }, duration)
    }
  }
}
Vue.use(ToastObj)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount("#app")

3. 在其他组件内使用

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => {
    return {
      msg: "HelloWord"
    }
  },
  mounted () {
   // 使用 toast 组件
    this.$toast("组件挂载成功")
  }
}
</script>

二、不借助 vue-cli

在借助 vue-cli 的情况下，可以方便实现组件的导入导出，但是在不借助构建工具的情况下，就需要使用其他方法了

1. 注册 toast 组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/vue/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <my-button></my-button>
  </div>
  <div id="toast"></div>
  <script>
    // 定义 toast 全局组件
    const Toast = Vue.component("toast", {
      data() {
        return {
          isshow: false,
          message: "全局提示",
          wrapperStyle: {
            position: "fixed",
            top: "20%",
            left: "50%",
            zIndex: 10000,
            padding: "6px 12px",
            backgroundColor: "#424242",
            borderRadius: "5px",
            transform: "translate(-50%, -50%)"
          },
          textStyle: {
            color: "#fff",
            fontSize: "14px"
          }
        }
      },
      template: `<div v-show="isShow" :style="wrapperStyle">
                  <span :style="textStyle">{{ message }}</span>
                </div>`
    })

2. 注册 toast 插件

// 定义插件对象
const ToastObj = {
  install: function (Vue) {
    // 创建一个 toast 组件实例,并挂载到一个元素上
    const instance = new Toast()
    // 将这个实例挂载到DOM中
    instance.$mount("#toast")

    // 在Vue的原型链上注册方法，控制组件
    Vue.prototype.$toast = ({message, duration = 2000} = {}) => {
      instance.message = message
      instance.isShow = true

      setTimeout(() => {
        instance.isShow = false
      }, duration)
    }
  }
}
// 注册 toast 插件
Vue.use(ToastObj)

3. 在其他组件内使用

Vue.component("my-button", {
      data() {
        return {
          wrapperStyle: {
            width: "70px",
            padding: "20px",
            backgroundColor: "green"
          },
          textStyle: {
            color: "#fff",
            fontSize: "16px"
          }
        }
      },
      methods: {
        handleClick() {
          this.$toast({
            message: "我点击了"
          })
        }
      },
      template: `<div :style="wrapperStyle" @click="handleClick">
                  <span :style="textStyle">点击提示</span>
                </div>`
    })

    const vm = new Vue({
      el: "#app"
    })
  </script>
</body>
</html>

到此，相信大家对“Vue如何封装全局toast组件”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

--结束END--

本文标题: Vue如何封装全局toast组件

本文链接: https://lsjlt.com/news/95911.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341