Confirm 确认提示框

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

组件模式

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

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

提示

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

插件模式 推荐

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

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

<script>
export default {
  methods: {
    showConfirm() {
      this.$confirm("这是 this.$confirm 调用的确认提示框");
    }
  }
};
</script>

带有标题

<wx-button @click="showConfirm2" type="light">带有标题</wx-button>

<script>
export default {
  methods: {
    showConfirm2() {
      this.$confirm("标题文本不宜太长，建议4～6个字", {
        title: "这是标题"
      });
    }
  }
};
</script>

自定义按钮文本

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

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

<script>
export default {
  methods: {
    showConfirm3() {
      this.$confirm("按钮文本不宜太长，建议2～4个字", {
        cancelButtonText: "离开",
        okButtonText: "继续"
      });
    }
  }
};
</script>

回调事件

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

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

<script>
export default {
  methods: {
    showConfirm4() {
      this.$confirm("是否继续？", {}, function(result) {
        if (result === 0) {
          this.$toast("取消了");
        } else {
          this.$toast("确认了");
        }
      });
    }
  }
};
</script>

Alert Attributes

参数	说明	类型	可选值	默认值
visible	是否可见，仅组件模式使用，需结合 .sync 修饰符	Boolean	-	false
msg	消息内容，仅组件模式使用	String	-	-
title	标题文本，空值即不显示	String	-	-
cancelButtonText	取消按钮文本	String	-	取消
okButtonText	确认按钮文本	String	-	确认

确认提示框