vue3 组件篇 Message

组件介绍

“Message” 组件是用于向用户显示短期通知、警告、成功消息或错误消息的常见用户界面元素。这些消息通常以浮动框或弹出框的形式出现，用于提供反馈、确认操作或警告用户。下面是关于 “Message” 组件的介绍和特点：

1. 临时通知:

   • “Message” 组件通常用于显示短期消息，用户可以很快看到并理解，然后消息会自动消失或需要用户手动关闭。

2. 消息类型:

   • “Message” 组件通常支持不同的消息类型，包括成功消息、错误消息、信息消息和警告消息。每种类型通常用不同的颜色或图标来表示。

3. 自动关闭:

   • 许多 “Message” 组件支持自动关闭功能，消息会在一定时间后自动消失，减少用户的干扰。

4. 手动关闭:

   • 用户通常可以手动关闭消息，以便更早地清除消息。这通常通过关闭按钮或点击消息本身来完成。

5. 消息堆叠:

   • “Message” 组件通常能够处理多条消息同时出现的情况，它们可以堆叠在屏幕上，用户可以逐个查看。

6. 自定义内容:

   • 一些 “Message” 组件允许开发人员在消息中包含自定义内容，如链接、按钮或其他交互元素。

7. 位置控制:

   • “Message” 组件通常支持在页面的不同位置显示消息，包括顶部、底部、左侧或右侧。这允许你更好地适应你的设计需求。

8. 响应式设计:

   • “Message” 组件通常支持响应式设计，以适应不同屏幕尺寸和设备类型。

9. 可访问性:

   • 良好的 “Message” 组件应该考虑到可访问性，以确保它对于使用辅助技术的用户也是可访问的。

10. 事件处理:

    • 一些 “Message” 组件允许开发人员添加事件处理程序，以便在消息被关闭或点击时执行特定操作。

“Message” 组件对于向用户提供及时反馦、操作确认或警告信息非常有用。它们通常用于网页应用程序和移动应用程序中，用来改善用户体验并提供重要的用户反馦。许多前端框架和库都提供了 “Message” 组件的实现，或者你可以自行编写代码来创建适合你应用程序需求的消息通知功能。

开发思路

Message组件用以消息提示，用户在前端完成某些交互时，在页面弹出的某种反馈。该组件一共有四种类型，info、success、warning、error。与一般的组件不同，该组件调用后，持续一段时间会消失，并且采用函数式调用。

组件安装与使用

需要先安装vue3-dxui

yarn add vue3-dxui

或者

npm install vue3-dxui

全局main.ts中引入css

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vue3-dxui/dxui/dxui.css'

createApp(App).use(store).use(router).mount('#app')

通过MessageApi调用

import { MessageApi } from 'vue3-dxui'
setup() {
	const handleOtherMessage = function () {
	  MessageApi.open({
	    type: 'info',
	    duration: 3000,
	    content: 'Hello dxui!'
	  })
	}
}

当然，可以使用回调，因为MessageApi.open将会返回一个promise，所以，回调的方式如下

MessageApi.open({
        type,
        duration: 3000,
        content: 'Hello dxui!'
      }).then(() => {
        alert('message执行完了')
      })

组件代码

vue代码,该代码使用了Icon组件

<template>
  <div v-if="messageShow" class="dx-message" :class="`dx-message-${iconType}`" :style="style">
    <Icon :iconName="iconType" :style="{ 'vertical-align': 'baseline' }" />
    <span class="dx-message-content">{{ content }}</span>
  </div>
</template>

<script lang="ts">
import { ref, SetupContext, PropType, CSSProperties } from 'vue'

// import { useRouter } from 'vue-router'
import Icon from '@/components/icon/Icon.vue'

import { Data } from './types/index'

export default {
  props: {
    // message 的类型 info success warning error
    type: {
      type: String,
      default: 'info'
    },
    // 展示的时间 单位ms
    duration: {
      type: Number,
      default: 5000
    },
    // 内容
    content: {
      required: true,
      type: String,
      default: ''
    },
    style: Object as PropType<CSSProperties>
  },
  components: {
    Icon
  },
  data() {
    return {
      // messageShow: true,
    }
  },
  setup(props: Data, context: SetupContext) {
    // const currentInstance: ComponentInternalInstance | null = getCurrentInstance()
    const messageShow = ref(true)
    const iconType = ref(props.type)
    // const iconName = ref(props.type)

    setTimeout(() => {
      messageShow.value = false
    }, props.duration as number)
    return {
      messageShow,
      // iconName,
      iconType
    }
  }
}
</script>

<style lang="scss">
@import '@/scss/layout.scss';

.dx-message-list {
  position: fixed;
  top: 10%;
  left: 50%;
  z-index: 10000;
  margin-bottom: 24px;
}

.dx-message {
  border-radius: 6px;
  box-shadow: $box-shadow;
  padding: 6px 16px;
  font-size: 14px;
  // position: fixed;
  background: $white-color;
  // top: 10%;
  // left: 50%;
  // z-index: 10000;
  margin-bottom: 24px;

  .dx-message-content {
    margin-left: 8px;
  }
}

.dx-message-info {
  .dx-icon {
    color: $blue-color;
  }
}

.dx-message-success {
  .dx-icon {
    color: $green-color;
  }
}

.dx-message-error {
  .dx-icon {
    color: $red-color;
  }
}

.dx-message-warning {
  .dx-icon {
    color: $orange-color;
  }
}
</style>

ts代码

import { createVNode, render } from 'vue'
import Message from '@/components/message/Message.vue'

let div: any = ''

const MessageApi = {
  open: (options: any) => {
    let timer: any = ''

    return new Promise((resolve) => {
      if (!div) {
        div = document.createElement('div')
        div.setAttribute('class', 'dx-message-list')
        document.body.appendChild(div)
      }

      const item = document.createElement('div')
      item.setAttribute('class', 'dx-message-item')

      div.appendChild(item)

      const MessageComponents = createVNode(Message, { type: 'info', ...options })
      render(MessageComponents, item)
      timer = setTimeout(() => {
        render(null, item)
        item.remove()

        const divCount = document.querySelectorAll('.dx-message-item').length
        if (!divCount) {
          div.remove()
          div = undefined
        }

        resolve('')
      }, options.duration)
    })
  }
}

export default MessageApi

参数说明

名称	说明
type	一共有四种，info、error、warning、success
content	提示的主要内容
duration	消息提示持续的时间

关于vue3-dxui组件库

dxui组件库是我个人搭建的vue3 前端交互组件库，倾向于pc网站的交互模式。

1. 如果你有任何问题，请在博客下方评论留言，我尽可能24小时内回复。
2. dxui新上线的官网域名变更 http://dxui.cn
3. npm 官方链接 https://www.npmjs.com/package/vue3-dxui
4. 如果你想看完整源码 https://github.com/757363985/dxui