Fxiaoke Developer Manual
Table of Contents

Dialog

# FxDialog Dialog

Informs users while preserving the current page state for carrying out related operations.

# Basic Usage

Dialog pops up a dialog box, suitable for scenarios that require greater customizability.
All popup z-index levels are maintained uniformly, you can get the latest zIndex value via FxUI.Utils.getPopupZIndex().

dialog default dialog witdh:30% dialog fullscreen
Current zIndex:2000
This is a message0
This is a message1
This is a message2
This is a message3
This is a message4
This is a message5
This is a message6
This is a message7
This is a message8
This is a message9
This is a message10
This is a message11
This is a message12
This is a message13
This is a message14
This is a message15
This is a message16
This is a message17
This is a message18
This is a message19
This is a message20
This is a message21
This is a message22
This is a message23
This is a message24
This is a message25
This is a message26
This is a message27
This is a message28
This is a message29
This is a message30
This is a message31
This is a message32
This is a message33
This is a message34
This is a message35
This is a message36
This is a message37
This is a message38
This is a message39
This is a message40
This is a message41
This is a message42
This is a message43
This is a message44
This is a message45
This is a message46
This is a message47
This is a message48
This is a message49
This is a message50
This is a message51
This is a message52
This is a message53
This is a message54
This is a message55
This is a message56
This is a message57
This is a message58
This is a message59
This is a message60
This is a message61
This is a message62
This is a message63
This is a message64
This is a message65
This is a message66
This is a message67
This is a message68
This is a message69
This is a message70
This is a message71
This is a message72
This is a message73
This is a message74
This is a message75
This is a message76
This is a message77
This is a message78
This is a message79
This is a message80
This is a message81
This is a message82
This is a message83
This is a message84
This is a message85
This is a message86
This is a message87
This is a message88
This is a message89
This is a message90
This is a message91
This is a message92
This is a message93
This is a message94
This is a message95
This is a message96
This is a message97
This is a message98
This is a message99
Cancel Confirm Dropdown Menu Golden Cake Lion's Head Luosifen Double Skin Milk Oyster Omelet This is a message 2-0
This is a message 2-1
This is a message 2-2
This is a message 2-3
This is a message 2-4
This is a message 2-5
This is a message 2-6
This is a message 2-7
This is a message 2-8
This is a message 2-9
This is a message 2-10
This is a message 2-11
This is a message 2-12
This is a message 2-13
This is a message 2-14
This is a message 2-15
This is a message 2-16
This is a message 2-17
This is a message 2-18
This is a message 2-19
This is a message 2-20
This is a message 2-21
This is a message 2-22
This is a message 2-23
This is a message 2-24
This is a message 2-25
This is a message 2-26
This is a message 2-27
This is a message 2-28
This is a message 2-29
This is a message 2-30
This is a message 2-31
This is a message 2-32
This is a message 2-33
This is a message 2-34
This is a message 2-35
This is a message 2-36
This is a message 2-37
This is a message 2-38
This is a message 2-39
This is a message 2-40
This is a message 2-41
This is a message 2-42
This is a message 2-43
This is a message 2-44
This is a message 2-45
This is a message 2-46
This is a message 2-47
This is a message 2-48
This is a message 2-49
This is a message 2-50
This is a message 2-51
This is a message 2-52
This is a message 2-53
This is a message 2-54
This is a message 2-55
This is a message 2-56
This is a message 2-57
This is a message 2-58
This is a message 2-59
This is a message 2-60
This is a message 2-61
This is a message 2-62
This is a message 2-63
This is a message 2-64
This is a message 2-65
This is a message 2-66
This is a message 2-67
This is a message 2-68
This is a message 2-69
This is a message 2-70
This is a message 2-71
This is a message 2-72
This is a message 2-73
This is a message 2-74
This is a message 2-75
This is a message 2-76
This is a message 2-77
This is a message 2-78
This is a message 2-79
This is a message 2-80
This is a message 2-81
This is a message 2-82
This is a message 2-83
This is a message 2-84
This is a message 2-85
This is a message 2-86
This is a message 2-87
This is a message 2-88
This is a message 2-89
This is a message 2-90
This is a message 2-91
This is a message 2-92
This is a message 2-93
This is a message 2-94
This is a message 2-95
This is a message 2-96
This is a message 2-97
This is a message 2-98
This is a message 2-99
Cancel Confirm This is a message 3
Cancel Confirm This is a message 4-0
This is a message 4-1
This is a message 4-2
This is a message 4-3
This is a message 4-4
This is a message 4-5
This is a message 4-6
This is a message 4-7
This is a message 4-8
This is a message 4-9
This is a message 4-10
This is a message 4-11
This is a message 4-12
This is a message 4-13
This is a message 4-14
This is a message 4-15
This is a message 4-16
This is a message 4-17
This is a message 4-18
This is a message 4-19
This is a message 4-20
This is a message 4-21
This is a message 4-22
This is a message 4-23
This is a message 4-24
This is a message 4-25
This is a message 4-26
This is a message 4-27
This is a message 4-28
This is a message 4-29
This is a message 4-30
This is a message 4-31
This is a message 4-32
This is a message 4-33
This is a message 4-34
This is a message 4-35
This is a message 4-36
This is a message 4-37
This is a message 4-38
This is a message 4-39
This is a message 4-40
This is a message 4-41
This is a message 4-42
This is a message 4-43
This is a message 4-44
This is a message 4-45
This is a message 4-46
This is a message 4-47
This is a message 4-48
This is a message 4-49
This is a message 4-50
This is a message 4-51
This is a message 4-52
This is a message 4-53
This is a message 4-54
This is a message 4-55
This is a message 4-56
This is a message 4-57
This is a message 4-58
This is a message 4-59
This is a message 4-60
This is a message 4-61
This is a message 4-62
This is a message 4-63
This is a message 4-64
This is a message 4-65
This is a message 4-66
This is a message 4-67
This is a message 4-68
This is a message 4-69
This is a message 4-70
This is a message 4-71
This is a message 4-72
This is a message 4-73
This is a message 4-74
This is a message 4-75
This is a message 4-76
This is a message 4-77
This is a message 4-78
This is a message 4-79
This is a message 4-80
This is a message 4-81
This is a message 4-82
This is a message 4-83
This is a message 4-84
This is a message 4-85
This is a message 4-86
This is a message 4-87
This is a message 4-88
This is a message 4-89
This is a message 4-90
This is a message 4-91
This is a message 4-92
This is a message 4-93
This is a message 4-94
This is a message 4-95
This is a message 4-96
This is a message 4-97
This is a message 4-98
This is a message 4-99
Cancel Confirm This is a message 5
This is a message 5
This is a message 5
This is a message 5
Cancel Confirm

The visible attribute is required, it receives Boolean, when set to true the Dialog will be displayed. Dialog has two parts: body and footer, and footer requires a named slot called footer. The title attribute is used to define the title, it is optional and defaults to empty. Finally, this example also demonstrates the usage of before-close.

<fx-button type="primary" @click="handlerClick" ref="btn1"
  >dialog default</fx-button
>
<!-- <fx-button type="primary" @click="dialogVisible1_2=true">dialog small</fx-button> -->
<!-- <fx-button type="primary" @click="dialogVisible1_3=true">dialog medium</fx-button> -->
<fx-button type="primary" @click="dialogVisible1_4=true"
  >dialog witdh:30%</fx-button
>
<fx-button type="primary" @click="dialogVisible1_5=true"
  >dialog fullscreen</fx-button
>
<div>Current zIndex:{{popupZIndex}}</div>

<fx-dialog
  :visible.sync="dialogVisible"
  ref="dialog1"
  :append-to-body="true"
  title="Tip 1"
  z-index="3000"
  max-height="200px"
  @open="open"
  @opened="opened"
  @close="close"
  @closed="closed"
>
  <template v-for="item in arr">
    <span>This is a message{{item}}</span> <br />
  </template>
  <span slot="footer" class="dialog-footer">
    <fx-button @click="dialogVisible = false">Cancel</fx-button>
    <fx-button type="primary" @click="arr.length=20">Confirm</fx-button>
  </span>
  <fx-dropdown>
    <span class="el-dropdown-link">
      Dropdown Menu<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <fx-dropdown-menu slot="dropdown" z-index="1000">
      <fx-dropdown-item>Golden Cake</fx-dropdown-item>
      <fx-dropdown-item>Lion's Head</fx-dropdown-item>
      <fx-dropdown-item>Luosifen</fx-dropdown-item>
      <fx-dropdown-item disabled>Double Skin Milk</fx-dropdown-item>
      <fx-dropdown-item divided>Oyster Omelet</fx-dropdown-item>
    </fx-dropdown-menu>
  </fx-dropdown>
</fx-dialog>

<fx-dialog
  :visible.sync="dialogVisible1_2"
  ref="dialog1_2"
  size="small"
  :append-to-body="true"
  title="Tip"
  max-height="300px"
  :before-close="handleClose"
  @opened="opened"
>
  <template v-for="item in arr">
    <span>This is a message 2-{{item}}</span> <br />
  </template>

  <span slot="footer" class="dialog-footer">
    <fx-button size="small" @click="dialogVisible1_2 = false">Cancel</fx-button>
    <fx-button size="small" type="primary" @click="dialogVisible1_2 = false"
      >Confirm</fx-button
    >
  </span>
</fx-dialog>
<fx-dialog
  :visible.sync="dialogVisible1_3"
  ref="dialog1_3"
  size="medium"
  :append-to-body="true"
  title="Tip"
  @opened="opened"
>
  <span>This is a message 3</span> <br />
  <span slot="footer" class="dialog-footer">
    <fx-button @click="dialogVisible1_3 = false">Cancel</fx-button>
    <fx-button type="primary" @click="dialogVisible1_3 = false"
      >Confirm</fx-button
    >
  </span>
</fx-dialog>
<fx-dialog
  :visible.sync="dialogVisible1_4"
  ref="dialog1_4"
  width="30%"
  :append-to-body="true"
  title="Tip"
  @opened="opened"
>
  <template v-for="item in arr">
    <span>This is a message 4-{{item}}</span> <br />
  </template>
  <span slot="footer" class="dialog-footer">
    <fx-button @click="dialogVisible1_4 = false">Cancel</fx-button>
    <fx-button type="primary" @click="dialogVisible1_4 = false"
      >Confirm</fx-button
    >
  </span>
</fx-dialog>
<fx-dialog
  :visible.sync="dialogVisible1_5"
  ref="dialog1_5"
  fullscreen
  size="small"
  :append-to-body="true"
  title="Tip"
  @opened="opened"
>
  <span>This is a message 5</span> <br />
  <span>This is a message 5</span> <br />
  <span>This is a message 5</span> <br />
  <span>This is a message 5</span> <br />
  <span slot="footer" class="dialog-footer">
    <fx-button @click="dialogVisible1_5 = false">Cancel</fx-button>
    <fx-button type="primary" @click="dialogVisible1_5 = false"
      >Confirm</fx-button
    >
  </span>
</fx-dialog>

<script>
  export default {
    data() {
      return {
        popupZIndex: 2000,
        arr: [],
        dialogVisible: false,
        dialogVisible1_2: false,
        dialogVisible1_3: false,
        dialogVisible1_4: false,
        dialogVisible1_5: false
      };
    },
    watch: {
      dialogVisible1_4(val) {
        setTimeout(() => {
          this.arr = [];
          for (let i = 0; i < 20; i++) {
            this.arr.push(i);
          }
          this.$refs.dialog1_4.caculatePosition();

          setTimeout(() => {
            for (let i = 0; i < 20; i++) {
              this.arr.push(i);
            }
            this.$refs.dialog1_4.caculatePosition();
          }, 2000);
        }, 2000);
      }
    },
    methods: {
      handlerClick() {
        this.dialogVisible = true;

        // FxUI.Utils.updatePopupZIndex(3000);
      },
      handleClose(done) {
        this.$confirm("Confirm close?")
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      open() {
        console.log("open....");
      },
      opened() {
        console.log("opened....");
        // this.popupZIndex = this.$FxUI.Utils.getPopupZIndex();
      },
      close() {
        console.log("close....");
      },
      closed() {
        console.log("closed....");
      }
    },
    created() {
      for (let i = 0; i < 100; i++) {
        this.arr.push(i);
      }
    }
  };
</script>
Expand Copy

:::tip before-close only works when the user closes the Dialog by clicking the close icon or the mask. If you have added buttons for closing Dialog in the footer named slot, you can add the relevant logic of before-close in the button's click callback function. :::

# Slider Panel

Click to open Dialog1 Click to open Dialog2 This is a message Click to open Dialog Processing Center Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Message Center This is a message Click to open Dialog This is a message Click to open Dialog This is a message This is a message
<fx-button type="text" @click="dialogVisible1 = true"
  >Click to open Dialog1</fx-button
>
<fx-button type="text" @click="dialogVisible2 = true"
  >Click to open Dialog2</fx-button
>

<fx-dialog
  ref="dialog1"
  title="Tip"
  :visible.sync="dialogVisible1"
  width="50%"
  :append-to-body="true"
  :slider-panel="true"
  :modal="false"
  @open="open"
  @opened="opened"
  @closed="closed"
>
  <span>This is a message</span>
  <fx-button type="text" @click="dialogVisible1_1=true"
    >Click to open Dialog</fx-button
  >
  <fx-menu default-active="1" class="el-menu-demo" mode="horizontal">
    <fx-menu-item index="1">Processing Center</fx-menu-item>
    <fx-submenu index="2">
      <template slot="title">My Workspace</template>
      <fx-menu-item index="2-1">Option 1</fx-menu-item>
      <fx-menu-item index="2-2">Option 2</fx-menu-item>
      <fx-menu-item index="2-3">Option 3</fx-menu-item>
      <fx-submenu index="2-4">
        <template slot="title">Option 4</template>
        <fx-menu-item index="2-4-1">Option 1</fx-menu-item>
        <fx-menu-item index="2-4-2">Option 2</fx-menu-item>
        <fx-menu-item index="2-4-3">Option 3</fx-menu-item>
      </fx-submenu>
    </fx-submenu>
    <fx-menu-item index="3" disabled>Message Center</fx-menu-item>
  </fx-menu>
</fx-dialog>
<fx-dialog
  ref="dialog1"
  title="Tip"
  :visible.sync="dialogVisible1_1"
  width="50%"
  :append-to-body="true"
  :slider-panel="true"
  :modal="false"
>
  <span>This is a message</span>
  <fx-button type="text" @click="dialogVisible1_2=true"
    >Click to open Dialog</fx-button
  >
</fx-dialog>
<fx-dialog
  ref="dialog1"
  title="Tip"
  :visible.sync="dialogVisible1_2"
  width="50%"
  :append-to-body="true"
  :slider-panel="true"
  :modal="false"
>
  <span>This is a message</span>
  <fx-button type="text" @click="onClick">Click to open Dialog</fx-button>
</fx-dialog>
<fx-dialog
  title="Tip 2"
  :visible.sync="dialogVisible2"
  width="30%"
  :append-to-body="true"
  :slider-panel="true"
>
  <span>This is a message</span>
</fx-dialog>

<fx-dialog
  :visible.sync="dialogVisible3"
  :append-to-body="true"
  title="Tip 1"
  max-height="200px"
>
  <span>This is a message</span>
</fx-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible1: false,
        dialogVisible1_1: false,
        dialogVisible1_2: false,
        dialogVisible2: false,
        dialogVisible3: false,
        styleObj: {
          top: "30px"
        }
      };
    },
    methods: {
      onClick() {
        this.dialogVisible3 = true;
        // let index = this.$FxUI.Utils.getPopupZIndex();
        // console.log(21222,this.$refs.dialog1,index)
      },
      open() {
        console.log("open....");
      },
      opened() {
        console.log("opened....");
      },
      close() {
        console.log("close....");
      },
      closed() {
        console.log("closed....");
      }
    },
    created() {}
  };
</script>
Expand Copy

# Custom Content

The content of Dialog can be anything, even a table or form. Below are two examples with Element Table and Form components applied.

Open nested table Dialog Open nested form Dialog
Cancel Confirm
<!-- Table -->
<fx-button type="text" @click="dialogTableVisible = true"
  >Open nested table Dialog</fx-button
>

<fx-dialog title="Shipping Address" :visible.sync="dialogTableVisible">
  <fx-table :data="gridData">
    <fx-table-column property="date" label="Date" width="150"></fx-table-column>
    <fx-table-column property="name" label="Name" width="200"></fx-table-column>
    <fx-table-column property="address" label="Address"></fx-table-column>
  </fx-table>
</fx-dialog>

<!-- Form -->
<fx-button type="text" @click="dialogFormVisible = true"
  >Open nested form Dialog</fx-button
>

<fx-dialog title="Shipping Address" :visible.sync="dialogFormVisible">
  <fx-form :model="form">
    <fx-form-item label="Activity Name" :labfx-width="formLabelWidth">
      <fx-input v-model="form.name" autocomplete="off"></fx-input>
    </fx-form-item>
  </fx-form>
  <div slot="footer" class="dialog-footer">
    <fx-button @click="dialogFormVisible = false">Cancel</fx-button>
    <fx-button type="primary" @click="dialogFormVisible = false"
      >Confirm</fx-button
    >
  </div>
</fx-dialog>

<script>
  export default {
    data() {
      return {
        gridData: [
          {
            date: "2016-05-02",
            name: "Wang Xiaohu",
            address: "No. 1518, Jinshajiang Road, Putuo District, Shanghai"
          },
          {
            date: "2016-05-04",
            name: "Wang Xiaohu",
            address: "No. 1518, Jinshajiang Road, Putuo District, Shanghai"
          },
          {
            date: "2016-05-01",
            name: "Wang Xiaohu",
            address: "No. 1518, Jinshajiang Road, Putuo District, Shanghai"
          },
          {
            date: "2016-05-03",
            name: "Wang Xiaohu",
            address: "No. 1518, Jinshajiang Road, Putuo District, Shanghai"
          }
        ],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: "",
          region: "",
          date1: "",
          date2: "",
          delivery: false,
          type: [],
          resource: "",
          desc: ""
        },
        formLabelWidth: "120px"
      };
    }
  };
</script>
Expand Copy

# Nested Dialog

If a Dialog needs to be nested in another Dialog, you need to use the append-to-body attribute.

Click to open outer Dialog
Cancel Open inner Dialog

Normally, we don't recommend using nested Dialog. If you need multiple Dialogs to be displayed on the page at the same time, you can place them at the same level. For scenarios that do require nested Dialog, we provide the append-to-body attribute. Setting the inner Dialog's append-to-body attribute to true, it will be inserted into the body element, thus ensuring the correct hierarchy of the inner and outer Dialog and mask.

<template>
  <fx-button type="text" @click="outerVisible = true"
    >Click to open outer Dialog</fx-button
  >

  <fx-dialog title="Outer Dialog" :visible.sync="outerVisible">
    <fx-dialog
      width="30%"
      title="Inner Dialog"
      :visible.sync="innerVisible"
      append-to-body
    >
    </fx-dialog>
    <div slot="footer" class="dialog-footer">
      <fx-button @click="outerVisible = false">Cancel</fx-button>
      <fx-button type="primary" @click="innerVisible = true"
        >Open inner Dialog</fx-button
      >
    </div>
  </fx-dialog>
</template>

<script>
  export default {
    data() {
      return {
        outerVisible: false,
        innerVisible: false
      };
    }
  };
</script>
Expand Copy

# Centered Layout

Title and footer can be horizontally centered

Click to open Dialog Note that content is not centered by default Cancel Confirm

Setting center to true centers the title and footer horizontally. center only affects the title and footer area. The content of Dialog is arbitrary, and in some cases content is not suitable for centered layout. If you need content to be horizontally centered as well, add CSS for it yourself.

<fx-button type="text" @click="centerDialogVisible = true"
  >Click to open Dialog</fx-button
>

<fx-dialog title="Tip" :visible.sync="centerDialogVisible" width="30%" center>
  <span>Note that content is not centered by default</span>
  <span slot="footer" class="dialog-footer">
    <fx-button @click="centerDialogVisible = false">Cancel</fx-button>
    <fx-button type="primary" @click="centerDialogVisible = false"
      >Confirm</fx-button
    >
  </span>
</fx-dialog>

<script>
  export default {
    data() {
      return {
        centerDialogVisible: false
      };
    }
  };
</script>
Expand Copy

:::tip Dialog content is lazily rendered, which means the default slot passed to Dialog will not be rendered to the DOM until it is opened for the first time. Therefore, if you need to perform DOM manipulation or get corresponding components via ref, please do it in the open event callback. :::

:::tip If the variable bound to the visible attribute is in the Vuex store, .sync will not work properly. In this case, you need to remove the .sync modifier and listen to the open and close events of Dialog, and execute the corresponding mutation in Vuex in the event callback to update the value of the variable bound to the visible attribute. :::

# Attributes

Attribute Description Type Optional Default PC/Mobile Support
visible/v-model Whether Dialog is displayed, supports .sync modifier boolean — false PC: visible only / Mobile: v-model only
title Title of Dialog, can also be passed through named slot (see table below) string — — PC only
width Width of Dialog string — 50% PC only
max-height Maximum height of Dialog's body part, e.g., "200px" string — - PC only
fullscreen Whether Dialog is displayed in full screen boolean — false PC only
modal Whether a mask layer is needed boolean — true PC/Mobile
modal-append-to-body Whether to append mask layer to body element, if false, the mask layer will be appended to Dialog's parent element boolean — true PC only
append-to-body Whether to append Dialog itself to body element. Nested Dialog must specify this attribute and set it to true boolean — false PC only
lock-scroll Whether to lock body scroll when Dialog appears boolean — true PC only
custom-class Custom class name for Dialog string — — PC/Mobile
close-on-press-escape Whether Dialog can be closed by pressing ESC boolean — true PC only
show-close Whether to show close button, only works when title is not empty or there is a slot named header boolean — true PC only
before-close Callback before Dialog closes, will prevent Dialog from closing function(done), done is used to close Dialog — — PC/Mobile
center Whether to center header and footer horizontally boolean — false PC only
autoClose Whether to auto close boolean — - PC only
duration Delay time for auto close, unit: ms number — 3000 PC only
sliderPanel Whether it is a slider panel, default width is 50% of screen boolean — false PC only
close-on-click-outside When sliderPanel is true, whether Dialog can be closed by clicking outside the Dialog boolean — true PC/Mobile
transition Animation mode String fade/slide/scale/shrink fade Mobile only
remove-modal Whether to remove modal DOM Boolean — false Mobile only
close-when-popstate Listen to popstate event, close popup and modal when route changes Boolean — true Mobile only

# Slot

name Description PC/Mobile Support
— Content of Dialog PC/Mobile
title Content of Dialog title area PC only
footer Content of Dialog button area PC only

# Methods

Method Description Parameters PC/Mobile Support
caculatePosition Recalculate dialog position. Can be used when content changes. — PC only

# Events

Event Name Description Callback Parameters PC/Mobile Support
open Callback when Dialog is opened — PC only
opened Callback when Dialog opening animation ends — PC only
close Callback when Dialog is closed — PC only
closed Callback when Dialog closing animation ends — PC/Mobile
update:visible Callback when visible is updated — PC only
click-modal Triggered when modal is clicked — Mobile only
Steps
Card

← Card→