Baidu DLS

返回 DLS

Embedded 嵌入式面板

示例

尺寸

可选的尺寸 ui 属性值:xs/s/m/l/xl

<template>
<article>
  <section>
    <veui-button @click="open = !open">
      Toggle
    </veui-button>
  </section>

  <section>
    <veui-embedded
      :open.sync="open"
      title="Notification"
    >
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At dolorum eius vero expedita ut voluptates possimus recusandae id incidunt obcaecati asperiores eum, laborum dolore facilis aperiam quidem. Maiores, non eum.</p>
    </veui-embedded>
  </section>

  <section>
    <veui-embedded
      ui="s"
      :open.sync="open"
      title="Notification"
    >
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At dolorum eius vero expedita ut voluptates possimus recusandae id incidunt obcaecati asperiores eum, laborum dolore facilis aperiam quidem. Maiores, non eum.</p>
    </veui-embedded>
  </section>
</article>
</template>

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

export default {
  components: {
    'veui-embedded': Embedded,
    'veui-button': Button
  },
  data () {
    return {
      open: true
    }
  }
}
</script>

API

属性

名称类型默认值描述
uistring=-

预设样式。

描述
s小内容尺寸。
m中内容尺寸。
titlestring=-折叠式面板标题文本。如果指定了 title 插槽,则优先使用 title 插槽。
openbooleanfalse

.sync

是否显示折叠式面板。

closableboolean=true是否显示关闭按钮。
footlessboolean=false是否不显示默认的底部操作栏。
loadingboolean=false是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。
prioritynumber=-折叠式面板浮层层叠权重,参考 Overlay 组件的 priority 属性。
before-closefunction(string): boolean=|Promise<boolean=>-在将触发折叠式面板关闭的操作发生后执行,参考 Dialog 组件的 before-close 属性。
overlay-classstring|Object=-折叠式面板浮层根元素类名,参考 Overlay 组件的 overlay-class 属性。

插槽

名称描述
default内容区。
title标题区。若同时指定了 title 属性和 title 插槽,以后者为准。
foot

底部区域,默认会展示“确定”、“取消”按钮。

名称类型描述
closefunction(type: string): void触发折叠式面板关闭的回调函数。type 为关闭的类型,将作为参数传入 before-close 钩子函数作为参数,同时将同步触发同名的事件。

事件

名称描述
ok点击“确定”按钮时或通过调用作用域函数 close('ok') 时触发。
cancel点击“取消”按钮、关闭按钮、通过 esc 关闭折叠式面板时,或者通过调用作用域函数 close('cancel') 时触发。
<value>通过调用作用域函数 close(value) 时触发。
afterclose浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。