vue3 组件篇 Message-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 组件篇 Message。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

组件介绍

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

临时通知:
- “Message” 组件通常用于显示短期消息，用户可以很快看到并理解，然后消息会自动消失或需要用户手动关闭。
消息类型:
- “Message” 组件通常支持不同的消息类型，包括成功消息、错误消息、信息消息和警告消息。每种类型通常用不同的颜色或图标来表示。
自动关闭:
- 许多 “Message” 组件支持自动关闭功能，消息会在一定时间后自动消失，减少用户的干扰。
手动关闭:
- 用户通常可以手动关闭消息，以便更早地清除消息。这通常通过关闭按钮或点击消息本身来完成。
消息堆叠:
- “Message” 组件通常能够处理多条消息同时出现的情况，它们可以堆叠在屏幕上，用户可以逐个查看。
自定义内容:
- 一些 “Message” 组件允许开发人员在消息中包含自定义内容，如链接、按钮或其他交互元素。
位置控制:
- “Message” 组件通常支持在页面的不同位置显示消息，包括顶部、底部、左侧或右侧。这允许你更好地适应你的设计需求。
响应式设计:
- “Message” 组件通常支持响应式设计，以适应不同屏幕尺寸和设备类型。
可访问性:
- 良好的 “Message” 组件应该考虑到可访问性，以确保它对于使用辅助技术的用户也是可访问的。
事件处理:
- 一些 “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