话不多说看例子:
<template>
<div class="btn" @click="btn">点击弹出消息提示框</div>
<div class="contrast"></div>
<div class="contrast1"></div>
<div class="contrast2"></div>
</template>
<script setup>
import Message from "@/Message";
import {onMounted} from "vue";
const btn = ()=>{
Message({type:'warn', text:"hello world"})
}
</script>
<style lang="less" scoped>
.btn{
width: 300px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: deeppink;
}
.contrast{
width: 300px;
height: 40px;
background: lighten(deeppink, 20%);
}
.contrast1{
width: 300px;
height: 40px;
background: lighten(deeppink, 30%);
}
.contrast2{
width: 300px;
height: 40px;
background: lighten(deeppink, 40%);
}
</style>
结果如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/abb5aeb1db1acd86a645ddd1be26f39a.png)
说明,lighten第一个是颜色值,第二个参数是相比第一个底色少百分之几的,比如第一个是100分的颜色值,lighten(100, 40%)=60%即原来的60%