vue3 组件篇 Message

组件介绍

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

<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 errortype: {type: String,default: 'info'},// 展示的时间 单位msduration: {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').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