当前位置:网站首页>个人组件 - 消息提示
个人组件 - 消息提示
2022-07-05 13:13:00 【摆烂波比】
<script lang="ts" setup name="XtxMessage">
import {
PropType } from 'vue'
defineProps({
type: {
type: String as PropType<'success' | 'error' | 'warning'>,
default: 'success',
},
})
// 定义一个对象,包含三种情况的样式,对象key就是类型字符串
const style = {
warning: {
icon: 'icon-warning',
color: '#E6A23C',
backgroundColor: 'rgb(253, 246, 236)',
borderColor: 'rgb(250, 236, 216)',
},
error: {
icon: 'icon-shanchu',
color: '#F56C6C',
backgroundColor: 'rgb(254, 240, 240)',
borderColor: 'rgb(253, 226, 226)',
},
success: {
icon: 'icon-queren2',
color: '#67C23A',
backgroundColor: 'rgb(240, 249, 235)',
borderColor: 'rgb(225, 243, 216)',
},
}
</script>
<template>
<div class="xtx-message" :style="style[type]">
<i class="iconfont" :class="style[type].icon"></i>
<span class="text"><slot></slot></span>
</div>
</template>
<style scoped lang="less">
.xtx-message {
width: 300px;
height: 50px;
position: fixed;
z-index: 9999;
left: 50%;
margin-left: -150px;
top: 25px;
line-height: 50px;
padding: 0 25px;
border: 1px solid #e4e4e4;
background: #f5f5f5;
color: #999;
border-radius: 4px;
i {
margin-right: 4px;
vertical-align: middle;
}
.text {
vertical-align: middle;
}
}
</style>
边栏推荐
- C# 对象存储
- #yyds干货盘点# 解决名企真题:搬圆桌
- UnicodeDecodeError: ‘utf-8‘ codec can‘t decode byte 0xe6 in position 76131: invalid continuation byt
- go 字符串操作
- 【每日一题】1200. 最小绝对差
- CAN和CAN FD
- JPA规范总结和整理
- Natural language processing series (I) introduction overview
- OpenHarmony应用开发之Navigation组件详解
- Principle and performance analysis of lepton lossless compression
猜你喜欢
A detailed explanation of ASCII code, Unicode and UTF-8
Sorry, we can't open xxxxx Docx, because there is a problem with the content (repackaging problem)
Word document injection (tracking word documents) incomplete
SAP UI5 视图里的 OverflowToolbar 控件
Hundred days to complete the open source task of the domestic database opengauss -- openguass minimalist version 3.0.0 installation tutorial
[notes of in-depth study paper]uctransnet: rethink the jumping connection in u-net from the perspective of transformer channel
爱可生SQLe审核工具顺利完成信通院‘SQL质量管理平台分级能力’评测
Write macro with word
潘多拉 IOT 开发板学习(HAL 库)—— 实验7 窗口看门狗实验(学习笔记)
百日完成国产数据库opengausss的开源任务--openGuass极简版3.0.0安装教程
随机推荐
Binder通信过程及ServiceManager创建过程
DataPipeline双料入选中国信通院2022数智化图谱、数据库发展报告
Small case of function transfer parameters
leetcode 10. Regular Expression Matching 正则表达式匹配 (困难)
Rocky basics 1
Reflection and imagination on the notation like tool
Solve Unicode decodeerror: 'GBK' codec can't decode byte 0xa2 in position 107
UnicodeDecodeError: ‘utf-8‘ codec can‘t decode byte 0xe6 in position 76131: invalid continuation byt
155. 最小栈
爱可生SQLe审核工具顺利完成信通院‘SQL质量管理平台分级能力’评测
数据湖(七):Iceberg概念及回顾什么是数据湖
mysql econnreset_Nodejs 套接字报错处理 Error: read ECONNRESET
Introduction to the principle of DNS
A small talk caused by the increase of sweeping
将函数放在模块中
函数传递参数小案例
RHCSA9
#yyds干货盘点# 解决名企真题:搬圆桌
leetcode:221. 最大正方形【dp状态转移的精髓】
【Hot100】33. 搜索旋转排序数组