logo


  • 首页
  • 文章 
    • vue
    • app
    • node
    • 生活
    • 小程序
    • javascript
    • uniapp
  • 案例 
    • app
    • 小程序
    • pc
  • 相册
  • 友链
  • 留言
  • 微语
  • 关于

nuxt3+vue3+typescript里写一个全局提示框toast插件

 2022-02-20
 椰子皮
 0
 142
“ nuxt3发布正式版即将来到,那么在nuxt3里面如何封装一个全局插件呢 ”

nuxt3发布正式版即将来到,那么在nuxt3里面如何封装一个全局插件呢,这里就拿一个全局提示框举例吧

效果:

首先在项目根目录建一个plugins文件夹

结构如下:

plugins/index.ts

plugins/message/index.ts

plugins/message/index.vue

 

plugins/message/index.vue代码

<script setup lang="ts">
type MessageType = 'default' | 'success' | 'warning' | 'error'

interface MessageProps {
  tips?: string,
  type?: MessageType,
  visible?: boolean,
  duration?: number,
  id?: string,
}

const props = withDefaults(defineProps<MessageProps>(), {
  tips: '',
  type: 'default',
  visible: false,
  duration: 3000,
  id: 'yzp-message'
})

const state = ref(false)
const title = ref(props.tips)
const status = ref(props.type)
const lock = ref(false)
const timer1 = ref(undefined)
const timer2 = ref(undefined)

watch(() => props.visible, (val: boolean) => {
  state.value = val
  show()
})

const hide = () =>{
    timer1.value = setTimeout(() => {
    lock.value = false
  }, props.duration - 300)

  timer2.value = setTimeout(() => {
    state.value = false
    document.body.removeChild(document.querySelector('#' + props.id))
  }, props.duration)
}

const show = () => {
  if (state.value) {
    return
  }
  
  clearTimeout(timer1.value)
  clearTimeout(timer2.value)

  state.value = true
  lock.value = true

  hide()
}

onMounted(() => show())

</script>

<template>
  <div v-if="state" :class="{ zoomOut: !lock }" class="yzp-message-wrap zoomIn">
    <div class="yzp-meesage-box blur">
      <span class="yzp-message-tip">{{ title }}</span>
      <img class="yzp-message-img" :src="`/img/message/${status}.png`" />
    </div>
  </div>
</template>

<style scoped lang="less">
.yzp-message-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  z-index: 999;
}
.yzp-message-wrap .yzp-meesage-box {
  box-shadow: 0 0 10px var(--border-1);
  border: 1px solid var(--border-1);
  padding: var(--space-15);
  display: flex;
  align-items: center;
  border-radius: var(--border-radius);
}
.yzp-message-wrap .yzp-message-img {
  width: 45px;
  height: 45px;
  margin-left: 15px;
}
.yzp-message-wrap .yzp-message-tip {
  font-size: 14px;
}
.zoomIn {
  animation: zoomIn 0.3s linear;
}
.zoomOut {
  animation: zoomOut 0.3s linear;
}
@keyframes zoomIn {
  0%,30% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes zoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
</style>

plugins/message/index.ts代码

import Message from './index.vue'

interface MessageProps {
  tips?: string,
  type?: any,
  visible?: boolean,
  duration?: number,
}

// 插件注册
import { createVNode, render } from 'vue'

const Ele = function(props: MessageProps) {

  if (process.client) {
    const id = 'yzp-message'
    const div =  document.querySelector('#' + id)

    if (!props.visible) {
      return
    }

    if (div) {
      document.body.removeChild(div)
      return
    }

    const container = document.createElement('div')

    container.id = id

    const vm = createVNode(Message,  { id, ...props })

    render(vm, container)

    document.body.appendChild(container)
  }

}

export default {

  success(tips: string) {
    Ele({ type: 'success', visible: true, tips })
  },

  warning(tips: string) {
    Ele({ type: 'warning', visible: true, tips })
  },

  error(tips: string) {
    Ele({ type: 'error', visible: true, tips })
  }

}

 

plugins/index.ts代码

import message from './message'

export default defineNuxtPlugin((nuxtApp) => {
  return {
    provide: {
      message
    }
  }
})

 

在组件或者页面中使用

<script lang="ts" setup>
const { $message } = useNuxtApp()
$message.success('创建成功了')
</script>

 


支付宝 微信
 0

nuxtvuetypescript
 在nuxt3里useFetch封装一个api接口http请求
 没有了
暂无内容,快抢沙发吧~



表情
 不支持canvas
椰子皮
椰子皮
觉得不错就点个赞吧
 226
 关注 公众号
1691 运行天数
50 今日pv
60 文章数量
 最近更新
 2022-03-31 08:59 更新了 文章
 在nuxt3里useFetch封装一个api接口http请求

 最新微语
  • 最近在使用eeg.js + vue3.0 2022-01-12
  • 把清新风格改为毛玻璃效果,虽然有点卡,但 2020-05-31
  • 本站春季主题已完成,大家觉得怎样。 2020-03-15
 最新评论
  • joker
    joker Win10 2022-04-11
    文章 这样取的到值吗?试了一下 在页面上打印data 为null ,是我哪里有问题吗
  • undefined
    undefined Win10 2022-02-21
    文章 h5也不支持keyboardheightchange
  • 自媒体运营
    自媒体运营 Win10 2021-12-09
    文章 不错,必须顶一下!
 最多点赞
 最多评论
  • vue3.0+typescript使用tinymce富文本编辑器
    vue3.0+typescript使用tinymce富文...
    2020-06-09 赞:23
  • 全新椰子皮博客版本介绍及说明。
    全新椰子皮博客版本介绍及说明。...
    2017-11-23 赞:20
  • vuex action 与mutations 的区别
    vuex action 与mutations 的区别...
    2018-06-24 赞:18
  • 让height:auto有过度效果
    让height:auto有过度效果...
    2017-12-22 赞:
  • css3使用transform: scale 元素出现偏移
    css3使用transform: scale 元素出现偏...
    2018-03-10 赞:
  • 结合lazyload实现文章页里面的图片预加载
    结合lazyload实现文章页里面的图片预加载...
    2017-10-05 赞:
 标签
前端 算法 uniapp javascript typescript 小程序 app vue nuxt node
 友情链接
申请
mashihuan Khari & Yaru 美好记忆 帅气的木木 大蒜博客 Aquan 快乐编程 fivewoods Paul 贺德强 太傅博客 梁巨才博客 jielin littlewin IT技术宅
首页 申请友链 关于本站
CopyRight © 2016-2021 - 椰子皮 - 浙ICP备16003960号