当前位置：首页 > article >正文

vue3 组件篇 Message

article 2024/9/19 23:56:27

文章目录

- 组件介绍
- 组件使用
- 组件代码
- 参数说明
- 关于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组件

<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