封装一个vue3 Toast组件,支持组件和api调用

先来看一段代码

components/toast/index.vue

html 复制代码
<template>
  <div v-if="isShow" class="toast">
    {{msg}}
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  msg: {
    type: String,
    default: 'message',
  },
  duration: {
    type: Number,
    default: 1500
  }
})

const isShow = ref(props.show)
const emit = defineEmits(['update:show'])

watch(() => props.show, (newVal, oldVal) => {
  isShow.value = newVal
  if (newVal) {
    clearInterval(timer)
    var timer = setTimeout(() => {
      isShow.value = false
      emit('update:show', false)
    }, props.duration)
  }
})
</script>

<style scoped>
  .toast {
    position: fixed;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, .8);
    border-radius: 4px;
    color: #fff;
  }
</style>

这就是一个普通的Toast组件

  • show:是否显示
  • msg:弹窗内容
  • duration:多少毫秒后自动关闭

调用组件

views/toast.view

html 复制代码
<template>
  <Toast v-model:show="isShow" msg="hello toast" :duration="2000"></Toast>
  <button @click="isShow = true">组件调用</button>
</template>

<script setup>
  import { ref } from 'vue'
  import Toast from '@/components/toast/index.vue'
  const isShow = ref(false)
</script>

我们平时都是这么用的 但是这个组件只能在.vue组件中使用,现在我的项目中正在封装一个全局axios拦截器request.js,就没办法这么用了。

封装api

components/toast目录下,与index.vue同级,再新建一个index.js文件,写入以下代码:

js 复制代码
import { createApp } from 'vue'
import Toast from './index.vue'

const showToast = (msg, options = { duration: 1500 }) => {
  const { duration } = options
  const div = document.createElement('div')
  const componentInstance = createApp(Toast, {
    show: true,
    msg,
    duration
  })

  componentInstance.mount(div)
  document.body.appendChild(div)
  
  let timer = null
  clearTimeout(timer)
  timer = setTimeout(() => {
    componentInstance.unmount(div); 
    document.body.removeChild(div);
  }, duration)
}

export default showToast

然后就可以在任意地方调用showToast方法。

在main.js调用

再来看看为什么components/toast/index.js能做到这个效果

  1. vue中解构出createApp,看到这个是不是很熟悉?对,就是main.js中我们看到的那个createApp

  2. 引入写好的toast组件,传给createApp,得到一个组件实例

  3. 将组件实例挂载到一个动态创建的div元素上

  4. 将div元素追加到body元素中

再看看main.js 没有任何区别

相关推荐
你挚爱的强哥2 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
天天进步20155 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒5 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript