Alert 组件使用总结

安装

局部注册

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