安装
局部注册
test.vue
import {Alert} from 'vux'
export default {
components: {
Alert
}
}
直接看属性：
Alert-属性.png
这里主要使用 value 这个属性控制 Alert 消息弹出框的显示与否，然后使用 title 控制标题，Content 控制提示内容，button-text 控制按钮的文字，其他属性暂时没有用到，一般的情况下默认就可以了。
事件：
Alert-事件.png
事件主要是 @on-show 和 @on-hide 一个用于弹窗显示时使用，一个用于弹窗关闭，我这里只使用了弹窗关闭
<template>
<div id="app">
<input type="button" @click="buy" value="保存">
<alert :is_alert="is_alert"
title="商城提醒你："
:content="alertContent"
@on-hide="hide"
>
</alert>
</div>
</template>
<style>
<style>
<script>
import {Alert} from 'vux';
export default {
components: {
Alert
},
data(){
return {
is_alert: false,
alertContent: ""
}
},
methods: {
hide() {
alert('弹窗关闭了！');
},
buy() {
// 当点击购买时，将弹出框的显示值设置为 true
this.is_alert = true
this.alertContent = '保存成功！'
}
}
}
</script>
然后这是效果图：
Alert 效果图.png
