vue2/vue3-封装简单而强大的全局弹框提示组件

利用vue3实现封装简单而强大的全局弹框提示组件,这个组件在用户体验和功能上却非常强大。它使用了Vue.js的响应式系统和动画效果,使得弹框在显示和隐藏时都能给用户带来良好的视觉体验

1、先看看实现效果:

2、上代码

Message.vue

// Message.vue
<template>
  <div class="message" v-if="visible">
    <img :src="imgSrc" />
    <span class="text">{{ text }}</span>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, PropType, ref } from 'vue';
  const props = defineProps({
    text: {
      type: String,
      default: '',
    },
    type: {
      type: String as PropType<'warn' | 'error' | 'success'>,
      default: 'warn',
    },
  });
  const visible = ref(false);
  const imgSrc = ref('@/assets/img/warn.svg');
  onMounted(() => {
    switch (props.type) {
      case 'warn':
        imgSrc.value = require('@/assets/img/warn.svg');
        break;
      case 'error':
        imgSrc.value = require('@/assets/img/error.svg');
        break;
      case 'success':
        imgSrc.value = require('@/assets/img/success.svg');
        break;
      default:
        break;
    }
    console.log(imgSrc.value);
    visible.value = true;
  });
</script>
<style>
  .message {
    position: fixed;
    z-index: 88888;
    top: 0;
    color: black;
    left: 50%;
    height: 40px;
    line-height: 40px;
    top: 80px;
    transform: translate(-50%);
    padding: 12px;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    animation: downed 100ms ease;
    border-radius: 4px;
    box-sizing: border-box;
  }
  @keyframes downed {
    0% {
      top: 60px;
    }
    100% {
      top: 80px;
    }
  }
  .text {
    margin-left: 5px;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>

config.ts

有两种配置方式,根据个人爱好选择即可

第一种
// 实现使用函数调用message组件的逻辑
//   引入 创建虚拟节点 和渲染方法
import { createVNode, render } from 'vue';
// 引入信息提示组件
import message from './Message.vue';

// 准备dom容器
const div = document.createElement('div');
// 添加类名
div.setAttribute('class', 'message-container');
// 添加到body上
document.body.appendChild(div);

// 定时器标识
let timer = null;

export default ({ type, text }) => {
  const divs: any = document.getElementsByClassName('message');
  if (divs.length > 0) {
    clearTimeout(timer);
    render(null, div);
  }
  // 创建虚拟节点   第一个参数为要创建的虚拟节点  第二个参数为props的参数
  const vNode = createVNode(message, { type, text });
  // 把虚拟节点渲染DOM容器中
  render(vNode, div);
  // 开启定时器,移出DOM容器内容
  clearTimeout(timer);
  timer = setTimeout(() => {
    render(null, div);
  }, 3000);
};


第二种
// 实现使用函数调用message组件的逻辑
//   引入 创建虚拟节点 和渲染方法
import { createVNode, render } from 'vue';
// 引入信息提示组件
import message from './Message.vue';

// 准备dom容器
const div = document.createElement('div');
// 添加类名
div.setAttribute('class', 'message-container');
// 添加到body上
document.body.appendChild(div);

// 定时器标识
let timer = null;

function sendInfo(type, text) {
  const divs: any = document.getElementsByClassName('message');
  if (divs.length > 0) {
    clearTimeout(timer);
    render(null, div);
  }
  // 创建虚拟节点   第一个参数为要创建的虚拟节点  第二个参数为props的参数
  const vNode = createVNode(message, { type, text });
  // 把虚拟节点渲染DOM容器中
  render(vNode, div);
  // 开启定时器,移出DOM容器内容
  clearTimeout(timer);
  timer = setTimeout(() => {
    render(null, div);
  }, 3000);
}
export default {
  success(text) {
    sendInfo('success', text);
  },
  warn(text) {
    sendInfo('warn', text);
  },
  error(text) {
    sendInfo('error', text);
  },
};

使用

最后,我们可以通过调用message函数来显示弹框。例如:

第一种
message({ type: 'error', text: '测试弹框fun' });

第二种
message.error('测试弹框fun')

图片

error.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="red" d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zM11.4 10l2.83-2.83l-1.41-1.41L10 8.59L7.17 5.76L5.76 7.17L8.59 10l-2.83 2.83l1.41 1.41L10 11.41l2.83 2.83l1.41-1.41L11.41 10z"/></svg>

warn.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="#faad14" d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zM9 5v6h2V5H9zm0 8v2h2v-2H9z"/></svg>

success.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="#52c41a" fill-rule="evenodd" d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4S4 12.954 4 24s8.954 20 20 20Zm10.742-26.33a1 1 0 1 0-1.483-1.34L21.28 29.567l-6.59-6.291a1 1 0 0 0-1.382 1.446l7.334 7l.743.71l.689-.762l12.667-14Z" clip-rule="evenodd"/></svg>

  • 18
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要在父组件中引入 Dialog 弹框组件,并在父组件的 template 中添加一个触发显示弹框的按钮。例如: ```vue <template> <div> <button @click="showDialog">显示弹框</button> <Dialog v-model="dialogVisible"></Dialog> </div> </template> ``` 在上面的代码中,我们添加了一个按钮,当用户点击该按钮时,会触发 showDialog 方法。同时,我们引入了一个名为 Dialog 的组件,并将它的显示与隐藏与一个名为 dialogVisible 的变量绑定了起来。 接下来,在父组件的 script 中,我们需要定义 showDialog 方法以及 dialogVisible 变量。例如: ```vue <script> import Dialog from './Dialog.vue' export default { components: { Dialog }, data() { return { dialogVisible: false } }, methods: { showDialog() { this.dialogVisible = true } } } </script> ``` 在上面的代码中,我们首先引入了 Dialog 组件,然后在 data 中定义了 dialogVisible 变量,并将其默认值设置为 false。接着,我们定义了一个名为 showDialog 的方法,该方法将 dialogVisible 设置为 true,从而显示 Dialog 弹框组件。 最后,我们需要在 Dialog 弹框组件中添加一个关闭按钮,并将其与 dialogVisible 变量绑定起来。例如: ```vue <template> <div> <div class="dialog-mask" v-if="visible" @click="close"></div> <div class="dialog-wrapper" v-if="visible"> <div class="dialog-content"> <div class="dialog-header"> <h3 class="dialog-title">Dialog 标题</h3> <button class="dialog-close-btn" @click="close">×</button> </div> <div class="dialog-body"> <p>Dialog 内容</p> </div> </div> </div> </div> </template> <script> export default { props: { visible: { type: Boolean, required: true } }, methods: { close() { this.$emit('update:visible', false) } } } </script> ``` 在上面的代码中,我们添加了一个名为 close 的方法,该方法会将 dialogVisible 设置为 false,并通过 $emit 方法将更新后的值传递给父组件。同时,我们在弹框组件中添加了一个关闭按钮,并在按钮的 click 事件中调用 close 方法。 这样,当用户点击父组件中的按钮时,就会触发 showDialog 方法,从而显示 Dialog 弹框组件。当用户点击弹框中的关闭按钮时,会触发 close 方法,从而关闭弹框

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值