BilldUI

# 对话框

点击显示modal

# 案例

<template>
  <div>
    <b-modal
      v-model="visible"
      title="tip"
      cancelText="no"
      confirmText="ok"
      :mask="true"
      :maskClosable="false"
      @on-cancel="cancelClick"
      @on-confirm="confirmClick"
      @on-close="closeClick"
      @visible-change="visibleChange"
    >
      <!-- <div slot="foot" slot-scope="aaa">
        <span>自定义foot</span>
      </div> -->
      hello world
    </b-modal>

    <span @click="changeModal">点击显示modal</span>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    changeModal() {
      this.visible = true;
    },
    visibleChange(v) {
      console.log("visibleChange", v);
    },
    cancelClick() {
      console.log("cancelClick,app组件里modal的cancel回调");
    },
    confirmClick() {
      console.log("cancelClick,app组件里modal的confirm回调");
    },
    closeClick() {
      console.log("closeClick,app组件里modal的close回调");
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

# API

参数 说明 类型 默认值
visible 是否显示对话框，可使用 v-model 双向绑定数据。 Boolean false
title 对话框标题 String 标题
cancelText 取消按钮文字 String 取消
confirmText 确定按钮文字 String 确定
mask 是否显示遮罩层 Boolean true
maskClosable 点击遮罩层是否关闭对话框 Boolean true

# 事件

参数 说明 返回值
on-cancel 点击取消按钮回调 无
on-confirm 点击确认按钮回调 无
on-close 点击右上角关闭按钮回调 无
visible-change 显示状态发生变化时触发 true/false

# 插槽

名称 说明
foot 自定义页脚内容

← Table →