话不多说，下面是alert组件的代码(需要引用node-sass sass-loader scss-loader，主要是为了用scss样式)

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('确定按钮') //确定按钮的回调

}

}

}

最后页面的效果如下：

样式什么的可以根据自己的需要自己调整