Overlay

Examples

Custom positioning

The overlay can be positioned in a custom way within the page.

<template>
<article>
  <veui-button
    ref="toggle"
    @click="open = !open"
  >
    Toggle
  </veui-button>
  <veui-overlay
    :open.sync="open"
    overlay-class="centered-overlay"
  >
    <div v-outside:toggle="hide">
      Centered
    </div>
  </veui-overlay>
</article>
</template>

<script>
import { Overlay, Button, outside } from 'veui'

export default {
  components: {
    'veui-overlay': Overlay,
    'veui-button': Button
  },
  directives: { outside },
  data () {
    return {
      open: false
    }
  },
  methods: {
    hide () {
      this.open = false
    }
  }
}
</script>

<style lang="less" scoped>
.centered-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
}

.centered-overlay {
  line-height: 100px;
  text-align: center;
  border: 1px solid #dbdbdb;
  background-color: #fff;
}
</style>

Anchored positioning

The overlay can be positioned relative to a DOM element within the page.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-button
    ref="toggle"
    class="button"
    @click="open = !open"
  >
    Toggle
  </veui-button>
  <veui-overlay
    target="toggle"
    position="top-start"
    :open.sync="open"
    overlay-class="relative-overlay"
  >
    <div v-outside:toggle="hide">
      Relatively Positioned
    </div>
  </veui-overlay>
</article>
</template>

<script>
import { Overlay, Button, outside } from 'veui'

export default {
  components: {
    'veui-overlay': Overlay,
    'veui-button': Button
  },
  directives: { outside },
  data () {
    return {
      open: false
    }
  },
  methods: {
    hide () {
      this.open = false
    }
  }
}
</script>

<style lang="less" scoped>
.relative-overlay {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #dbdbdb;
  background-color: #fff;

  .button {
    margin-left: 10px;
  }
}
</style>

Stacking order

For overlays with the same priority and at the same level, the later ones will have a higher stacking order.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-button
    ref="a"
    class="button"
    @click="aOpen = !aOpen"
  >
    Toggle A
  </veui-button>
  <veui-overlay
    target="a"
    position="top-start"
    :open.sync="aOpen"
    overlay-class="relative-overlay"
  >
    A
  </veui-overlay>

  <veui-button
    ref="b"
    class="button"
    @click="bOpen = !bOpen"
  >
    Toggle B
  </veui-button>
  <veui-overlay
    target="b"
    position="top-start"
    :open.sync="bOpen"
    overlay-class="relative-overlay"
  >
    B
  </veui-overlay>

  <veui-button
    ref="c"
    class="button"
    @click="cOpen = !cOpen"
  >
    Toggle C
  </veui-button>
  <veui-overlay
    target="c"
    position="top-start"
    :open.sync="cOpen"
    overlay-class="relative-overlay"
  >
    C
  </veui-overlay>
  <veui-button
    class="button"
    ui="xs"
    @click="aOpen = bOpen = cOpen = false"
  >
    Hide all
  </veui-button>
</article>
</template>

<script>
import { Overlay, Button } from 'veui'

export default {
  components: {
    'veui-overlay': Overlay,
    'veui-button': Button
  },
  data () {
    return {
      aOpen: false,
      bOpen: false,
      cOpen: false
    }
  }
}
</script>

<style lang="less" scoped>
.relative-overlay {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #dbdbdb;
  background-color: #fff;

  .button {
    margin-left: 10px;
  }
}
</style>

An opened overlay will establish a new stacking context, and overlays opened from it will have a higher stacking order than the parent overlay.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-button
    ref="parent"
    class="button"
    @click="parentOpen = !parentOpen"
  >
    Toggle
  </veui-button>
  <veui-overlay
    target="parent"
    position="top-start"
    :open.sync="parentOpen"
    overlay-class="relative-overlay"
  >
    <veui-button
      ref="child"
      class="button"
      @click="childOpen = !childOpen"
    >
      Toggle
    </veui-button>
    <veui-overlay
      target="child"
      position="top-start"
      :open.sync="childOpen"
      overlay-class="relative-overlay"
    >
      Child Overlay
    </veui-overlay>
  </veui-overlay>
  <veui-button
    class="button"
    ui="xs"
    @click="parentOpen = childOpen = false"
  >
    Hide all
  </veui-button>
</article>
</template>

<script>
import { Overlay, Button } from 'veui'

export default {
  components: {
    'veui-overlay': Overlay,
    'veui-button': Button
  },
  data () {
    return {
      parentOpen: false,
      childOpen: false
    }
  },
  watch: {
    parentOpen (val) {
      if (!val) {
        this.childOpen = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.relative-overlay {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #dbdbdb;
  background-color: #fff;

  .button {
    margin-left: 10px;
  }
}
</style>

The stacking order of child overlays is affected by the parent overlay.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-button
    ref="a"
    class="button"
    @click="aOpen = !aOpen"
  >
    Toggle A
  </veui-button>
  <veui-overlay
    target="a"
    position="top-start"
    :open.sync="aOpen"
    overlay-class="relative-overlay"
  >
    A
  </veui-overlay>

  <veui-button
    ref="b"
    class="button"
    @click="bOpen = !bOpen"
  >
    Toggle B
  </veui-button>
  <veui-overlay
    target="b"
    position="top-start"
    :open.sync="bOpen"
    overlay-class="relative-overlay"
  >
    B
    <veui-button
      ref="b-a"
      class="button"
      ui="s"
      @click="bAOpen = !bAOpen"
    >
      Toggle B-A
    </veui-button>
    <veui-overlay
      target="b-a"
      position="top-start"
      :open.sync="bAOpen"
      overlay-class="relative-overlay"
    >
      B-A
    </veui-overlay>
  </veui-overlay>

  <veui-button
    ref="c"
    class="button"
    @click="cOpen = !cOpen"
  >
    Toggle C
  </veui-button>
  <veui-overlay
    target="c"
    position="top-start"
    :open.sync="cOpen"
    overlay-class="relative-overlay"
  >
    C
  </veui-overlay>
  <veui-button
    class="button"
    ui="xs"
    @click="aOpen = bOpen = cOpen = bAOpen = false"
  >
    Hide all
  </veui-button>
</article>
</template>

<script>
import { Overlay, Button } from 'veui'

export default {
  components: {
    'veui-overlay': Overlay,
    'veui-button': Button
  },
  data () {
    return {
      aOpen: false,
      bOpen: false,
      cOpen: false,
      bAOpen: false
    }
  }
}
</script>

<style lang="less" scoped>
.relative-overlay {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #dbdbdb;
  background-color: #fff;

  .button {
    margin-left: 10px;
  }
}
</style>

API

Props

Name	Type	Default	Description
`ui`	`string`	-	Predefined style. Not provided by `veui-theme-dls`, can be customized.
`open`	`boolean`	`false`	Whether the overlay is visible.
`target`	`string \| Vue \| Element`	-	Specifies the target element using `ref`, Vue component instance, or `Element`. If the target element exists, the overlay will be positioned relative to it using the positioning parameters specified by the `options` prop.
`priority`	`number`	-	The priority of the current overlay component instance in the stacking order relative to other instances. The larger the value, the higher it is.
`autofocus`	`boolean`	-	Whether to automatically move focus to the first focusable element in the overlay.
`modal`	`boolean`	`false`	Whether the overlay is a modal overlay. A modal overlay will take focus away and restrict keyboard navigation within the overlay (focus will return after the overlay is closed).
`inline`	`boolean`	`false`	Whether to render the overlay as inline content.
`local`	`boolean`	`false`	Whether to keep the overlay in its original DOM position instead of moving it to a global position and participate in global overlay management.
`overlay-class`	`string \| Array \| Object`	-	Class name for the overlay root element, in the format of any `class` expression supported by Vue.
`overlay-style`	`string \| Array \| Object`	-	Style for the overlay root element, in the format of any `style` expression supported by Vue.
`options`	`Object`	-	Pass-through `modifiers` configuration options for the underlying Popper.js implementation. See here for details.
`position`	`string`	'auto'	Pass-through `placement` configuration option for the underlying Popper.js implementation. See here for details.
`match-width`	`boolean`	`false`	Whether to automatically match the width of the target element when the overlay is narrower.

Slots

Name	Description
`default`	Content of the overlay.

Events

Name	Description
`locate`	Triggered when the position of the overlay changes.
`afteropen`	Triggered after the overlay is opened. The content of the overlay is rendered after opening, so if there is logic that depends on the content being rendered, execute it after this event is triggered.
`afterclose`	Triggered after the overlay is closed. If the theme provides an exit animation, it will be triggered after the animation is complete.
`orderchange`	Triggered when the `z-index` of the overlay changes. The parameter is `(order: number)`, where `order` is the new `z-index`.

Configs

Key	Type	Default	Description
`overlay.overlayClass`	`string \| Array \| Object`	`[]`	Class name(s) to be added to the overlay container globally. The data format is any class binding supported by Vue.

Edit this page on GitHubEdit