wx-vue

# Alert 警告提示框

提供组件和插件API两种模式。

# 组件模式


 












<wx-button @click="visi = true" type="light">组件模式</wx-button>
<wx-alert :msg="msg" :visible.sync="visi"></wx-alert>

<script>
export default {
  data() {
    return {
      visi: false,
      msg: "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内"
    };
  }
};
</script>

提示

visible 属性绑定需要使用 .sync修饰符

# 插件模式 推荐

使用插件模式，更简单更方便







 





<wx-button @click="showAlert" type="light">插件模式</wx-button>

<script>
export default {
  methods: {
    showAlert() {
      this.$alert("这是 this.$alert 调用的警告提示框");
    }
  }
};
</script>

# 自定义按钮文本

使用 buttonText 属性自定义按钮文本，组件或插件模式一致。

<wx-button @click="showAlert2" type="light">定制按钮文本</wx-button>

<script>
export default {
  methods: {
    showAlert2() {
      this.$alert("按钮文本不宜太长，建议2～4个字", {
        buttonText: "知道了"
      });
    }
  }
};
</script>

# 回调事件

组件通过 @click 绑定，插件通过回调函数绑定

<wx-button @click="showAlert3" type="light">关闭事件</wx-button>

<script>
export default {
  methods: {
    showAlert3() {
      this.$alert("请您确认～", {}, function() {
        this.$toast('已关闭')
      });
    }
  }
};
</script>

# Alert Attributes

参数 说明 类型 可选值 默认值
visible 是否可见，仅组件模式使用，需结合 .sync 修饰符 Boolean - false
msg 消息内容，仅组件模式使用 String - -
buttonText 按钮文本 String - 确定
back
警告提示框

← Confirm 确认提示框 →