自己动手封装Toast插件

本文介绍了如何在Vue中封装一个Toast组件,并将其转化为插件,以方便在多个页面中复用。首先展示了传统的组件封装方式,然后详细讲解了如何创建一个index.js文件并进行插件安装,使得全局可以轻松调用Toast。
摘要由CSDN通过智能技术生成

先上一张效果图:

普通的封装方式

  1. 我们第一步先要封装这么一个(Toast)组件
    这里我把它封装在了src/components/common/toast/Toast.vue
    在需要调用的地方引入Toast.vue组件
//Toast.vue
<template>
    <div class="toast" v-show="show">
        {
   {
   message}}
    </div>
</template>

<script>
    export default {
   
        name: "Toast",
        props: {
   
            message: {
   
                type: String,
                default: ''
            },
            show:{
   
                type: Boolean,
                default: false
            }
        }
    }
</script>

<style scoped>
      .toast {
   
        position: fixed;
        width: 100px;
        height: 50px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0,
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在 UniApp 中封装一个 Toast 组件非常简单,可以按照以下步骤进行操作: 1. 创建一个新的 .vue 文件,用于封装 Toast 组件。 2. 在该文件中,定义一个 template(模板)来展示 Toast 内容,例如: ```html <template> <div class="toast">{{ message }}</div> </template> ``` 3. 在该文件中,使用 props 来接收 Toast 组件的参数,例如: ```javascript <script> export default { props: { message: String } } </script> ``` 4. 使用 CSS 样式来美化 Toast 组件的外观,例如: ```css <style scoped> .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px 20px; background-color: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 4px; } </style> ``` 5. 在需要使用 Toast 的页面或组件中,引入并注册 Toast 组件。例如,在 App.vue 中注册: ```javascript <template> <div> <toast :message="toastMessage" v-if="showToast"></toast> <!-- 其他内容 --> </div> </template> <script> import Toast from '@/components/Toast.vue' export default { components: { Toast }, data() { return { showToast: false, toastMessage: '' } }, methods: { showToast(message) { this.toastMessage = message this.showToast = true // 设置一定时间后关闭 Toast setTimeout(() => { this.showToast = false }, 2000) } } } </script> ``` 6. 在需要弹出 Toast 的地方,调用 showToast 方法,并传入相应的消息: ```javascript this.showToast('Hello, UniApp!') ``` 这样,你就成功地封装了一个简单的 Toast 组件,在需要时可以随时调用并显示相应的提示信息。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值