文章目录

• • 组件介绍
  • 组件使用
  • 组件代码
  • 参数说明
  • 关于vue3-dxui组件库

组件介绍

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

函数式调用组件，一般适用于，组件自身相对于屏幕定位，比如Dialog、Message、Pop等

组件使用

需要先安装vue3-dxui，请安装1.1.1及之后的版本

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组件

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').lengthif (!divCount) {div.remove()div = undefined}resolve('')}, options.duration)})}
}export default MessageApi

参数说明

关于vue3-dxui组件库

dxui网站介绍 http://www.dxyx-together.cn/#/home/message

github代码仓库 https://github.com/757363985/dxui

npmjs安装包地址 https://www.npmjs.com/package/vue3-dxui