vue弹出alert_vue+webpack 实现简单的弹窗(alert)组件
話不多說，下面是alert組件的代碼(需要引用node-sass sass-loader scss-loader，主要是為了用scss樣式)
提示
{{message}}
{{negativeText}}
{{positiveText}}
export default {
name: 'my-alert',
props: {
isShow: {
type: Boolean,
default: false
},
negativeText:{
type:String,
default:'取消'
},
positiveText:{
type:String,
default:'確定'
},
message:{
type:String,
default:'確定?'
},
isOnlyPositive:{
type:Boolean,
default:false
}
},
data() {
return {
visible: this.isShow
};
},
methods: {
close:function() {
this.$emit('closeAlert');
},
open:function() {
this.$emit('openAlert');
},
onPositiveClick:function(){
this.$emit('positiveCb');
},
onNegativeClick:function(){
this.$emit('negativeCb');
this.close();
}
}
};
.wrapper {
position: fixed;
overflow: auto;
margin: 0;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 999999999;
background-color: rgba(0, 0, 0, 0.25);
font-family: "Microsoft Yahei";
}
button{
cursor: pointer;
font-family: "Microsoft Yahei";
}
.close-btn {
cursor: pointer;
position: absolute;
right: 15px;
top: 12px;
}
.alert {
height: 180px;
width: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -90px;
background: #F1F6FF;
box-sizing: border-box;
}
.close {
cursor: pointer;
color: #c0ccda;
&:hover {
color: #20a0ff;
}
}
.sign{
text-align: left;
background-color: #579BFE;
font-size: 14px;
color:#fff;
padding-left:20px;
padding-top:12px;
padding-bottom: 12px;
}
.body {
height: 100px;
width:100%;
display: table;
box-sizing:border-box;
color: #475669;
font-size: 14px;
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size:16px;
color:#777777;
}
}
.footer {
padding:20px;
padding-top:0;
text-align: right;
box-sizing: border-box;
.negative-btn{
padding-left:13px;
padding-right:13px;
height:25px;
line-height:25px;
font-size:12px;
color:#777777;
border:1px solid #777777;
background-color:white;
margin-right:8px;
}
.positive-btn{
padding-left:13px;
padding-right:13px;
height:25px;
line-height:25px;
font-size:12px;
color:#FD6434;
border:1px solid #FD6434;
background-color:white;
}
}
.dialog-fade-enter-active {
animation: dialog-fade-in .3s;
}
.dialog-fade-leave-active {
animation: dialog-fade-out .3s;
}
@keyframes dialog-fade-in {
0% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes dialog-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
使用方法如下
template模板:
打開一個彈窗！！！！js代碼：
import alert from './alert'
export default {
name: 'hello',
components:{
'alert': alert
},
data () {
return {
msg: 'Welcome to Your Vue.js App',
alertVisible: false, //控制彈窗的顯示隱藏
}
},
methods:{
deleteInfoClose: function(){
this.alertVisible = false;
console.log('取消按鈕');
}, //取消按鈕的回調
deleteFollowStudent: function(){
this.alertVisible = false;
console.log('確定按鈕') //確定按鈕的回調
}
}
}
最后頁面的效果如下：
樣式什么的可以根據自己的需要自己調整
總結
以上是生活随笔為你收集整理的vue弹出alert_vue+webpack 实现简单的弹窗(alert)组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 01.神经网络和深度学习 W1.深度学习
- 下一篇： vue获取table一列数据_vue表格