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>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

API

属性

名称类型默认值描述

ui

string

预设样式。

值	描述
`s`	小内容尺寸。
`m`	中内容尺寸。

title string - 折叠式面板标题文本。如果指定了 title 插槽，则优先使用 title 插槽。

open

boolean

false

.sync

是否显示折叠式面板。

closable boolean true 是否显示关闭按钮。

footless boolean false 是否不显示默认的底部操作栏。

loading boolean false 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。

priority number - 折叠式面板浮层层叠权重，参考 Overlay 组件的 priority 属性。

before-close function(string): boolean=|Promise<boolean=> - 在将触发折叠式面板关闭的操作发生后执行，参考 Dialog 组件的 before-close 属性。

overlay-class string | Object - 折叠式面板浮层根元素类名，参考 Overlay 组件的 overlay-class 属性。

插槽

名称描述

default 内容区。

title 标题区。若同时指定了 title 属性和 title 插槽，以后者为准。

foot

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

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

事件

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

在 GitHub 上编辑此页面编辑