Vue 提示框组件
OK,首先看看效果:
一、子组件(alert.vue)
<template>
<transition name="alert">
<div class="alert-all">
<div class="alert-wraper determine">
<p class="close-alert">
<!-- <i class="fa fa-times" aria-hidden="true" title="关闭" @click="close()"></i> -->
</p>
<p :class="[{fail: ifFail}, 'title']">{{title}}</p>
<div class="btn_wrapper">
<!--<div class="cancel" @click="ok(false)">取消</div>-->
<div class="ok" @click="ok(true)">确定</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'alert',
props: {
title: {
type: String,
default () {
return {}
}
},
type: {
type: String,
default () {
return {}
}
},
autoHide: {
type: Boolean,
default () {
return true
}
}
},
data () {
return {
ifFail: ''
}
},
methods: {
ok: function (flag) {
let data = {
show: flag,
type: this.type
}
this.$emit('okAlert', data)
}
},
mounted () {
if (this.type === 'fail') {
this.ifFail = true
} else {
this.ifFail = false
}
}
}
</script>
<style lang="less" scoped>
.alert-all{
position:fixed;
width:%;
height:%;
top:;
left:;
z-index:;
.alert-wraper{
width:400px;
height:160px;
background:#fff;
position:absolute;
top:;
left:;
right:;
bottom:;
margin:auto;
box-shadow:0px 0px 20px #ddd;
.close-alert{
height:30px;
height:30px;
width:%;
background:#4499ee;
position:relative;
z-index:;
i{
position:absolute;
right:;
width:30px;
height:30px;
font-size: 20px;
cursor:pointer;
color:#fff;
}
i::before{
position:absolute;
left:6px;
top:4px;
}
i:hover{
background:#6db2f8;
}
}
.fail{
color:red;
}
.title{
box-sizing: border-box;
padding: 10px;
width:%;
height:130px;
line-height: 25px;
font-size:14px;
font-weight: normal;
text-align:center;
display: flex;
justify-content: center;
align-items: center;
}
}
.determine{
height: 220px;
}
.btn_wrapper{
text-align: center;
}
.cancel, .ok{
display: inline-block;
width: 80px;
height: 30px;
border-radius: 20px;
border: 1px solid #4499ee;
text-align: center;
line-height: 30px;
color: #4499ee;
margin: 20px;
}
.cancel:hover, .ok:hover{
cursor: pointer;
box-shadow: 4px #4499ee;
}
}
.alert-enter-active,.alert-leave-active{
transition: all .4s
}
.alert-enter, .alert-leave-to{
opacity: ;
transform: translateY(-60px);
}
</style>
二、父组件中引用子组件(alert.vue)
<template>
<div class="container">
<alerter
v-if="alertManager.show"
:type="alertManager.type"
:title="alertManager.title">
</alerter>
</div>
</template>
三、父组件中定义变量
export default {
data () {
return {
alertManager: {
show: false,
type: '',
title: ''
}
}
}
四、父组件中写弹出框方法
methods: {
alert (show, type, title, autoHide) {
this.alertManager = {
show: show,
type: type,
title: title
}
if (autoHide === true) {
let that = this
setTimeout(function () {
that.alertManager.show = false
}, 2000)
}
}
}
五、调用方法
that.alert(true, 'success', '提交成功', true)
Vue 提示框组件的更多相关文章
- tooltip提示框组件
Tooltip 提示框组件 可独立于其他组件通过$.fn.tooltip.defaults重写默认的defaults.当用户移动鼠标指针在某个元素上时,出现提示信息窗口来显示额外信息.提示内容可以包含 ...
- 第一百九十六节,jQuery EasyUI,Tooltip(提示框)组件
jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...
- 学习EXTJS6(4)基本功能-信息提示框组件
1.使用组件,主要配置表现形式有二种(是否可以说参数) 用逗号分隔的传统参数列表方式: <script type="text/javascript"> Ext.onRe ...
- 一个vue的全局提示框组件
<template> <!-- 全局提示框 --> <div v-show="visible" class="dialog-tips dia ...
- jQuery Easy UI Tooptip(提示框)组件
我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...
- Tooltip(提示框)组件
一.加载方式 //class加载方式 <a href="http://www.ycku.com" title="这是一个提示信息!" class=&quo ...
- vue 自定义 提示框(Toast)组件
1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...
- 在vue项目中添加全局提示框
1.写一个提示框组件:msg.vue (注明:这里用两个div的原因是成功和失败的提示不能用同一个div,因为他们可能紧接着出现,所以不能从始至终只有一个提示框在工作) 2.写一个调用此组建的js : ...
- vue2.0 自定义 提示框(Toast)组件
1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...
随机推荐
- 好用的抓取dump的工具-ProcDump
Procdump是一个轻量级的Sysinternal团队开发的命令行工具, 它的主要目的是监控应用程序的CPU异常动向, 并在此异常时生成crash dump文件, 供研发人员和管理员确定问题发生的原 ...
- STM32之glossary
glossary Word: data/instruction of 32-bit length. Half word: data/instruction of 16-bit length. Byte ...
- springboot跨域访问
写一个WebMvc配置类重写addCorsMappings即可 @Configuration public class MyMvcConfig implements WebMvcConfigurer ...
- 在VMare Workstation 10中安装Ubuntu
(1) 下面就是成功配置了VM的环境 (2)在弹出的settings里,点击"CD/DVD(IDE)",然后在右侧点击"Use ISO image file", ...
- ABP Linq 扩展的 WhereIf 查询内部实现
public static class QueryableExtensions { public static IQueryable<T> WhereIf<T>(this IQ ...
- WebException: The underlying connection was closed: Could not establish trust relationship for the SSL/TLS secure channel
关于这个异常的问题网上有很多的解决方案. 最为靠谱的有: http://www.cnblogs.com/hjf1223/archive/2007/03/14/674502.html(若因为链接而导致不 ...
- JavaScript中定义函数的几种方式
函数的组成:函数名 + 函数体 1.使用function关键字定义函数 -- 具有优先级,优先将function关键字定义的函数优先执行 function functionName(arg0, ar ...
- css3 ---2 属性的选择器
存在和值属性选择器1:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何. [name]{ background: pink; } <!DOCTYPE html& ...
- IPMI 远程配置
#重启ipmi服务 #重启ipmi服务 #将 channel 1 设置为静态 IP #设置 IP #设置 channel 1 掩码 #设置 channel 1 网关 #查看用户名及 ID #设置ID号 ...
- MVVM test
示例代码 public class RegisterUserViewModel { public UserInfo userInfo { get; set; } public ICommand Cli ...