vue弹窗消息组件的使用方法
更新时间：2020年09月24日 16:52:09 作者：章鱼no丸子
这篇文章主要为大家详细介绍了vue弹窗消息组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue弹窗消息组件的具体代码，供大家参考，具体内容如下
本来打算写一个那种提示完了自动消失的弹窗的，但是没有想好淡入淡出的效果。所以暂时算是半成品。
练习代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ys-alert-component</title>
<style>
input {
border-radius: 5px;
border: 1px solid #2f9df9;
background-color: #39befb;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#39befb),
to(#2091fc));
background: -moz-gradient(linear, 0 0, 0 100%, from(#39befb),
to(#2091fc));
background: -o-gradient(linear, 0 0, 0 100%, from(#39befb), to(#2091fc));
background: -ms-gradient(linear, 0 0, 0 100%, from(#39befb), to(#2091fc));
color: #FFFFFF;
height: 28px;
padding: 0 20px;
cursor: pointer;
line-height: 28px;
display: inline-block;
margin-right: 5px;
outline: none;
}
.ys-alert {
display: inline-block;
height: 26px;
padding: 8px 25px;
min-width: 200px;
border-radius: 5px;
box-shadow: 0 4px 12px rgba(0,0,0,.5);
background: #b8d2f3;
margin: 50px;
}
.icon {
float: left;
width: 26px;
height: 26px;
border: 3px solid #fff;
border-radius: 50%;
font-size: 16px;
line-height: 20px;
font-weight: bold;
text-align: center;
color: #fff;
box-sizing: border-box;
margin-right: 8px;
}
.content {
float: left;
line-height: 26px;
font-size: 15px;
color: #fff;
}
/*成功的样式*/
.success {
background: #9bdda7;
}
/*失败的样式*/
.error {
background: #f7d13b;
}
/*警告样式*/
.warning {
background: #e98c97;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="呼唤默认的按钮" @click="alertShow('info')">
<input type="button" value="呼唤成功的按钮" @click="alertShow('success')">
<input type="button" value="呼唤失败的按钮" @click="alertShow('error')">
<input type="button" value="呼唤警告的按钮" @click="alertShow('warning')">
<input type="button" value="呼唤美美哒博客" @click="alertShow('yuki')">
<ys-alert-component
icon-bar="O"
type="info"
v-if="info"
alert-content="我是默认的按钮哟">
</ys-alert-component>
<ys-alert-component
icon-bar="V"
type="success"
v-if="success"
alert-content="我是成功的按钮哟">
</ys-alert-component>
<ys-alert-component
icon-bar="X"
type="error"
v-if="error"
alert-content="我是失败的按钮哟">
</ys-alert-component>
<ys-alert-component
icon-bar="!"
type="waring"
v-if="warning"
alert-content="我是警告的按钮哟">
</ys-alert-component>
<ys-alert-component
icon-bar="E"
type=""
v-if="yuki"
alert-content="我是灰色定制的按钮哟"
style="background-color: #ccc; color: #fff;">
<div slot="alert-content">
<span>章鱼不丸子</span>
<a href="http://www.yuki.kim" rel="external nofollow" >http://www.yuki.kim</a>
</div>
</ys-alert-component>
</div>
<script>
/*
props：
type:
info: 默认
success: 成功
error: 失败
warning：警告
iconBar： 字符串，我没有图标，就用字母写的。很low...
alertContent： 定制提醒的内容
hideIcon: 隐藏或者显示丑丑的图标
slot：
alert-content: 定制提醒信息内容及icon整套模板
methods：
无，没有写方法
*/
Vue.component("ys-alert-component", {
props: {
iconBar: {
type: String,
default: ""
},
alertContent: {
type: String,
default: "请定制提醒内容"
},
hideIcon: {
type: Boolean,
default: false
},
type: {
type: String,
default: ""
}
},
template:`
<div class="ys-alert" :class="type">
<slot name="alert-content">
<div class="icon" >{{ iconBar }}</div>
<div class="content">
{{ alertContent }}
</div>
</slot>
</div>`
})
var vm = new Vue({
el: "#app",
data: {
info: false,
error: false,
success: false,
warning: false,
yuki: false
},
methods: {
alertShow (type) {
switch (type) {
case "info" :
this.info = !this.info;
//setTimeout("vm.info = !vm.info", 2000);
break;
case "error" :
this.error = !this.error;
//setTimeout("vm.error = !vm.error", 2000);
break;
case "success" :
this.success = !this.success;
//setTimeout("vm.success = !vm.success", 2000);
break;
case "warning" :
this.warning = !this.warning;
//setTimeout("vm.warning = !vm.warning", 2000);
break;
default:
this.yuki = !this.yuki;
//setTimeout("vm.yuki = !vm.yuki", 2000);
}
}
}
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了在vue中使用G2图表的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
本篇文章主要介绍了如何去除vue项目中的#及其ie9兼容性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
移动端页面，有时候会出现一些固定定位在底部图标，比如购物车等。这篇文章主要介绍了Vue制作固定定位图标滑动隐藏效果,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了Vue-Router源码分析路由实现原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
Tailwind CSS是一个全新的、可定制的CSS框架,它提供了一系列的CSS类,用于构建现代化的Web界面,这篇文章主要介绍了Vue2使用TailwindCSS方法及遇到问题小结,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue中@keyup.enter失效问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Swiper是一个很常用的用于实现各种滑动效果的插件，PC端和移动端都能很好的适配。本文将利用Swiper实现封装轮播图组件，感兴趣的可以了解一下2022-09-09
vue3+element-plus Dialog对话框的使用与setup 写法的用法
这篇文章主要介绍了vue3+element-plus Dialog对话框的使用 与 setup 写法的使用,本文通过两种方式结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
今天小编就为大家分享一篇在vue中读取本地Json文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本篇文章主要介绍了Vue路由跳转问题记录详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最新评论