吾生也有涯,而知也无涯。这篇文章主要讲述:Message组件相关的知识,希望能为你提供帮助。
大家好今天将开始新的系列基于vue3实现自己的组件库
,本文默认你会安装和创建vue3项目,如果不会请参考vue官网,废话不多说开始实现本章的目标Message
组件;
创建组件库工程目录
vair是组件库的名字(名字大家随意)
文章图片
安装项目依赖
npm install less -D
npm install less-loader -D
template
<
template>
<
div class=v-message>
<
div v-for=(config, index) in messageList :key=config.id
:ref= el =>
if (el) contentList[index] = el
:class=["message-item", config.customClass, config.type,center: config.center ]>
<
i :class=[config.iconClass, "icon"]>
<
/i>
<
p class=content>
config.message <
/p>
<
i class=close iconfont icon-guanbi1 @click=close(config) v-if=config.showClose>
<
/i>
<
/div>
<
/div>
<
/template>
script
importref, defineComponentfrom vue;
export default defineComponent(
name: message,
setup ()
// 消息列表
const messageList = ref([]);
// ref列表
const contentList = ref([]);
const message = (options) =>
computedConfig(options);
const success = (options) =>
computedConfig(options, success);
const warning = (options) =>
computedConfig(options, warning);
const error = (options) =>
computedConfig(options, error);
const computedConfig = (options, type) =>
var option = options || ;
type &
&
(option.type = type);
const config =
type: option.type || prompt, // 没传消息类型就是默认消息
message: option.message || ,
iconClass: option.iconClass || computedIconClass(type || prompt),
customClass: option.customClass,
duration: option.duration >
= 0? option.duration : 3000,
showClose: option.showClose,
center: option.center,
onClose: option.onClose,
id: Math.floor(new Date())
;
messageList.value.push(config);
// 如果延时不等于0,就要设置消失时间
if (config.duration !== 0)
setTimeout(() =>
contentList.value[0].className +=messageHide;
setTimeout(() =>
messageList.value.splice(0, 1);
, 200);
, config.duration + messageList.value.length * 100);
;
const computedIconClass = (type) =>
switch (type)
case prompt:
return iconfont icon-tishi;
case success:
return iconfont icon-success;
case warning:
return iconfont icon-jinggao--;
case error:
return iconfont icon-cuowu;
;
const close = (config) =>
const index = messageList.value.findIndex(item =>
item.id === config.id);
if (index !== -1)
contentList.value[index].className +=messageHide;
setTimeout(() =>
messageList.value.splice(index, 1);
config.onClose &
&
config.onClose(config);
, 200);
return
messageList,
contentList,
close,
message,
success,
warning,
error);
css
<
style lang=less scoped>
@import url(../../assets/css/animation.css);
.v-message
position: fixed;
z-index: 99999;
top: 50px;
left: 0;
right: 0;
margin: auto;
width: 380px;
.message-item
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
box-sizing: border-box;
border-radius: 6px;
padding: 14px;
overflow: hidden;
border: 1px solid transparent;
animation: messageShow .5s;
animation-fill-mode: forwards;
.content
font-size: 12px;
line-height: 20px;
flex: 1;
.close
cursor: pointer;
&
:hover
color: #6b6b6b;
i
font-size: 18px;
.icon
margin-right: 14px;
.center
justify-content: center;
.content
flex: 0 1 auto;
.messageHide
animation: messageHide .2s linear;
animation-fill-mode: forwards;
.prompt
border: 1px solid #ebeef5;
background-color: #edf2fc;
.content, i
color: #909399;
.success
background-color: #f0f9eb;
border-color: #e1f3d8;
.content, i
color: #67C23A;
.warning
background-color: #fdf6ec;
border-color: #faecd8;
.content, i
color: #E6A23C;
.error
background-color: #fef0f0;
border-color: #fde2e2;
.content, i
color: #F56C6C;
<
/style>
animation.css
这个文件的功能就是定义组件所需的动画
@keyframes messageShow
0%
transform: translateY(-50px);
opacity: 0;
100%
transform: translateY(0);
opacity: 1;
@keyframes messageHide
0%
transform: translateY(0);
opacity: 1;
100%
transform: translateY(-50px);
opacity: 0;
编写message.js
import Message from "./Message.vue";
importcreateAppfrom "vue";
const createMessage = function ()
const div = document.createElement("div");
div.id = "v-message";
document.body.appendChild(div);
return createApp(Message).mount("#v-message");
;
export default createMessage();
编写vair出口 index.js
后续这个文件会引入很多组件
// Message 消息提示
import Message from ./components/Message/message.js;
const Vair = function(Vue)
// Message 消息提示
Vue.config.globalProperties.$message = Message;
export default Vair;
使用组件库
在main.js中引入
importcreateAppfrom vue;
import App from ./App.vue;
import Vair from ./libs/vair/index.js;
const app = createApp(App);
app.use(Vair).mount(#app);
App.vue中调用
<
template>
<
div class=message>
<
p class=button @click=addMsg("success")>
成功<
/p>
<
p class=button @click=addMsg("warning")>
警告<
/p>
<
p class=button @click=addMsg("error")>
错误<
/p>
<
p class=button @click=addMsg("close")>
可关闭<
/p>
<
p class=button @click=addMsg("center")>
文字居中<
/p>
<
/div>
<
/template>
<
script>
importgetCurrentInstance, defineComponentfrom vue;
export default defineComponent(
setup ()
const app = getCurrentInstance();
const addMsg = (type) =>
if (type === success)
app.ctx.$message.success(
message: 这是一条成功消息
);
if (type === warning)
app.ctx.$message.warning(
message: 这是一条警告消息
);
if (type === error)
app.ctx.$message.error(
message: 这是一条错误消息
);
if (type === close)
app.ctx.$message.success(
message: 这是一条可关闭的消息,
showClose: true,
onClose: (config) =>
console.log(config)
,
);
if (type === center)
app.ctx.$message.success(
message: 这是一条居中的消息,
center: true
);
;
return
addMsg)
<
/script>
<
style lang=less scoped>
.message
width: 500px;
display: flex;
justify-content: space-between;
.button
width: 76px;
line-height: 34px;
border-radius: 4px;
color: #fff;
background-color: #1890FF;
text-align: center;
cursor: pointer;
font-size: 12px;
<
/style>
效果展示
【(Message组件)】
文章图片
文章图片
推荐阅读
- 全志D1-H Dock ProYoC RTOS 实战(FOTA系统升级)
- scrapy爬取图片站
- MA8601 pin√pin替代汤铭FE1.1s无须更改电路板|完美替代FE1.1s方案
- Docker容器实战九(容器生命周期管理)
- 4G智能安全帽(记录仪)应用分析
- Install Jumpserver
- 以字节跳动内部 Data Catalog 架构升级为例聊业务系统的性能优化
- #yyds干货盘点# 解决剑指offer(跳台阶)
- 108个Python精选库,建议收藏留用!