vue3 组件篇 Message

Posted 2023-04-08 可缺不可滥

文章目录

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

参数说明

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

关于vue3-dxui组件库

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

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

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

Vue ElmentUI message组件customClass使用方法

<template>
  <el-button :plain="true" @click="success">成功</el-button>
</template>

<script>
  export default 
    methods: 
      success() 
        this.$message(
          message: '恭喜你，这是一条成功消息',
          type: 'success',
          custiomClass:'zdylm'
        );
      
</script>
//注意style上不要加上scped，否则可能会导致样式设置无效，
//如有需要用scoped，可以用如下方法
<style>
    //注意message组件ElementUI样式中有min-width，所以需要加上！important才能生效，
    //另外的属性类似，大家可以自行在页面上引入后查看
    .zdylm
       min-width:20vw!important;
    

</style>

<style scoped>
    //你要写的css样式...
</style>