这次给大家带来vue弹窗消息组件使用步骤详解，vue弹窗消息组件使用的注意事项有哪些，下面就是实战案例，一起来看一下。
本来打算写一个那种提示完了自动消失的弹窗的，但是没有想好淡入淡出的效果。所以暂时算是半成品。
练习代码如下：
ys-alert-component 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; }
章鱼不丸子 http://www.yuki.kim
/* 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:`
{{ iconBar }}
{{ alertContent }}
` }) 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); } } } })
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Vue实现PopupWindow组件使用步骤解析
vue+jquery+lodash滑动时顶部悬浮固定功能实现详解
以上就是vue弹窗消息组件使用步骤详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2761686.html
