VEUI

VEUI on GitHub
中文

Overlay

Demos

Custom positioning

Overlays can be positioned with custom styles.

Edit this demo on GitHubEdit
<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>

Position relative to an element

Overlays can also be positioned relative to an existing DOM element in the page.

Edit this demo on GitHubEdit
<template>
<article>
  <veui-button
    ref="toggle"
    @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>
.veui-overlay {
  display: none;
}

.relative-overlay {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #dbdbdb;
  background-color: #fff;

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

Stacking order

For sibling overlays with same priority, the ones opened later have a higher stacking order.

Edit this demo on GitHubEdit
<template>
<article>
  <veui-button
    ref="a"
    @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"
    @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"
    @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
    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>
.veui-overlay {
  display: none;
}

.relative-overlay {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #dbdbdb;
  background-color: #fff;

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

Opened overlays will establish new stacking contexts and overlays opened inside those overlays will have higher stacking order than their parents.

Edit this demo on GitHubEdit
<template>
<article>
  <veui-button
    ref="parent"
    @click="parentOpen = !parentOpen"
  >
    Toggle
  </veui-button>
  <veui-overlay
    target="parent"
    position="top-start"
    :open.sync="parentOpen"
    overlay-class="relative-overlay"
  >
    <veui-button
      ref="child"
      @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
    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>
.veui-overlay {
  display: none;
}

.relative-overlay {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #dbdbdb;
  background-color: #fff;

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

The stacking order of child overlays a affected by their parent overlays.

Edit this demo on GitHubEdit
<template>
<article>
  <veui-button
    ref="a"
    @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"
    @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"
      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"
    @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
    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>
.veui-overlay {
  display: none;
}

.relative-overlay {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #dbdbdb;
  background-color: #fff;

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

API

Props

NameTypeDefaultDescription
uistring=-Style variants. Not defined by veui-theme-dls but can be customized.
openbooleanfalse

.sync

Whether the overlay is displayed.

targetstring | Vue | HTMLElement-

Either of a valid ref, a Vue component instance or an HTML Element can be used to specify the target element to be relatively positioned against. The positioning logic is specified by position and options.

TypeDescription
stringA ref inside current component context's $refs object. Uses the root element when matches a component.
VueWhen specified as a Vue component instance, use its root element.
HTMLElementSpecify the HTML element directly.
prioritynumber-

The stacking order priority of current overlay. For all overlays under same parent overlay in the stacking context tree, the overlay with higher priority will be displayed over those with lower priority.

autofocusboolean-Whether to automatically focus the first focusable element in the overlay.
modalbooleanfalseWhether the overlay will preempt focus and trap focus upon keyboard navigation (will return focus when closed).
inlinebooleanfalseWhether to render the overlay as inline content.
localbooleanfalseWhether to keep the overlay in it's original DOM location, instead of moving it to the global scope and participates in the global overlay management.
overlay-classstring | Array | Object=-

The class expression applied to the root element of the overlay. Supports all values defined by Vue's class expressions.

overlay-stylestring | Array | Object=-

The style expression applied to the root element of the overlay. Supports all values defined by Vue's style expressions.

Slots

NameDescription
defaultThe content of the overlay.

Events

NameDescription
locateTriggered when the overlay updated its location.
afteropenTriggered after the overlay is opened. The overlay content won't be rendered until after the overlay is opened, so if there is logic that depends on content rendering, please execute it after this event is triggered.
aftercloseTriggered after the overlay is closed. If leave transition is provided by theme, then afterclose will be triggered when the transition finishes.

Configs

KeyTypeDefaultDescription
overlay.overlayClassstring | Array | Object=[]The class name to be applied to every overlay. Supports all values defined by Vue's class expressions.
optionsObject-Configuration object passed to the modifiers option of the underlying Popper.js implementation. See here for more details.
Edit this page on GitHubEdit
© Baidu, Inc. 2023