本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- React为 Vue 引入容器组件和展示组件的教程详解
- Vue表单类的父子组件数据传递示例
- Vue SSR 组件加载问题
- vue中的模态对话框组件实现过程
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
- Vue波纹按钮组件制作
- Vue实现PopupWindow组件详解
- vue弹窗组件使用方法
- 学习Vue组件实例
- 详解vue组件基础
