vue3 组件篇 Message
Posted 可缺不可滥
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 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>
以上是关于vue3 组件篇 Message的主要内容,如果未能解决你的问题,请参考以下文章
「2022」打算跳槽涨薪,必问面试题及答案 -- vue3 篇