JavaScript

超轻量级php框架startmvc

vue弹窗消息组件的使用方法

更新时间:2020-07-07 14:24:01 作者:startmvc
本文实例为大家分享了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弹窗消息组件 vue弹窗组件 vue弹窗消息