当前位置:网站首页>Personal component - message prompt
Personal component - message prompt
2022-07-05 13:27:00 【Rotten Bobby】
<script lang="ts" setup name="XtxMessage">
import {
PropType } from 'vue'
defineProps({
type: {
type: String as PropType<'success' | 'error' | 'warning'>,
default: 'success',
},
})
// Define an object , A style that contains three cases , object key Is the type string
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>
边栏推荐
- 山东大学暑期实训一20220620
- 个人组件 - 消息提示
- Win10 - lightweight gadget
- Talking about fake demand from takeout order
- MATLAB论文图表标准格式输出(干货)
- 运筹说 第68期|2022年最新影响因子正式发布 快看管科领域期刊的变化
- [深度学习论文笔记]UCTransNet:从transformer的通道角度重新思考U-Net中的跳跃连接
- Although the volume and price fall, why are the structural deposits of commercial banks favored by listed companies?
- [deep learning paper notes] hnf-netv2 for segmentation of brain tumors using multimodal MR imaging
- Datapipeline was selected into the 2022 digital intelligence atlas and database development report of China Academy of communications and communications
猜你喜欢
Backup and restore of Android local SQLite database
Shu tianmeng map × Weiyan technology - Dream map database circle of friends + 1
一文详解ASCII码,Unicode与utf-8
Talk about seven ways to realize asynchronous programming
leetcode:221. Maximum square [essence of DP state transition]
Win10——轻量级小工具
What is a network port
山东大学暑期实训一20220620
Operational research 68 | the latest impact factors in 2022 were officially released. Changes in journals in the field of rapid care
The "Baidu Cup" CTF competition was held in February 2017, Web: explosion-2
随机推荐
Rocky basic command 3
mysql获得时间
Android本地Sqlite数据库的备份和还原
一网打尽异步神器CompletableFuture
数据湖(七):Iceberg概念及回顾什么是数据湖
Summary and arrangement of JPA specifications
Win10 - lightweight gadget
LB10S-ASEMI整流桥LB10S
Clock cycle
[notes of in-depth study paper]transbtsv2: wider instead of deep transformer for medical image segmentation
MySQL --- 数据库查询 - 排序查询、分页查询
[MySQL usage Script] catch all MySQL time and date types and related operation functions (3)
Can and can FD
With 4 years of working experience, you can't tell five ways of communication between multithreads. Dare you believe it?
Changing JS code has no effect
DataPipeline双料入选中国信通院2022数智化图谱、数据库发展报告
[深度学习论文笔记]UCTransNet:从transformer的通道角度重新思考U-Net中的跳跃连接
RHCSA10
华为推送服务内容,阅读笔记
“百度杯”CTF比赛 九月场,Web:SQL