VBottomSheet API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| absolute | ||
| Applies position: absolute to the content element. | ||
| activator | ||
| Explicitly sets the overlay’s activator. | ||
| activator-props | ||
| Apply custom properties to the activator. | ||
| attach | ||
| Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default. | ||
| close-delay | ||
| 组件关闭前等待的毫秒数。仅应用于悬停和焦点事件。 | ||
| close-on-back | ||
| Closes the overlay content when the browser’s back button is pressed or $router.back() is called, cancelling the original navigation. persistent overlays will cancel navigation and animate as if they were clicked outside instead of closing. | ||
| close-on-content-click | ||
| Closes component when you click on its content. | ||
| contained | ||
| Limits the size of the component and scrim to its offset parent. Implies absolute and attach. (Note: The parent element must have position: relative.). | ||
| content-class | ||
| 将自定义的class应用于被分离的此元素。由于此元素的内容将被附加到v-app组件开头(除非你设置了attach属性)，并且class属性不会将css类直接传递给组件，所以这个实行非常有用。 | ||
| content-props | ||
| Apply custom properties to the content. | ||
| disabled | ||
| 移除组件的单击或 target 功能。 | ||
| eager | ||
| Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO. | ||
| fullscreen | ||
| 改变全屏显示的布局。 | ||
| height | ||
| 设定组件的高度。 | ||
| inset | ||
| 将对话框内容最大宽度减少到 70％ | ||
| location | ||
| Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both… | ||
| location-strategy | ||
| A function used to specifies how the component should position relative to its activator. | ||
| max-height | ||
| 设定组件的最大高度。 | ||
| max-width | ||
| 设定组件的最大宽度。 | ||
| min-height | ||
| 设定组件的最小高度。 | ||
| min-width | ||
| 设定组件的最小宽度。 | ||
| model-value | ||
| 组件 v-mode 的值。如果组件支持多属性，默认为空数组。 | ||
| no-click-animation | ||
| 使用 persistent 属性，在 v-dialog 的内容之外点击时，禁用弹跳效果。 | ||
| offset | ||
| A single value that offsets content away from the target based upon what side it is on. | ||
| opacity | ||
| 设置遮罩层的透明度。 | ||
| open-delay | ||
| 组件打开前等待的毫秒数。仅应用于悬停和焦点事件。 | ||
| open-on-click | ||
| Activate the component when the activator is clicked. | ||
| open-on-focus | ||
| Activate the component when the activator is focused. | ||
| open-on-hover | ||
| Activate the component when the activator is hovered. | ||
| origin | ||
| 设置元素上的动画原点。您可以在 MDN 文档上浏览更多 for transition origin | ||
| persistent | ||
| 点击元素外面或按下 esc 键将不会关闭它。 | ||
| retain-focus | ||
| 默认情况下，制表符焦点将返回到对话框的第一个子级。在使用需要焦点的外部工具（如 TinyMCE 或 vue-clipboard）时禁用此选项。 | ||
| scrim | ||
| Accepts true/false to enable background, and string to define color. | ||
| scroll-strategy | ||
| Strategy used when the component is activate and user scrolls. | ||
| scrollable | ||
| 当设置为 true 时，期望有一个 v-card 和一个 v-card-text 组件，并有指定的高度。更多信息，请查看 可滚动示例 。 | ||
| target | ||
| For locationStrategy=“connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| transition | ||
| Sets the component transition. Can be one of the built in or custom transition. | ||
| width | ||
| 设定组件的宽度。 | ||
| z-index | ||
| The z-index used for the component. | ||
事件
| 名称 | 类型 |
|---|---|
| update:modelValue | |
| 当组件的 model-value 更改时引发的事件。 | |
插槽
| activator |
| When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation. |
| default |
| 默认Vue 插槽。 |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $bottom-sheet-border-radius | |
| $bottom-sheet-elevation | |
| $bottom-sheet-inset-width | |
| $bottom-sheet-transition-duration | |