layui/example/docs/zh-CN/components/drawer.md

::: anchor :::

::: title 基本介绍 :::

::: describe 屏幕边缘滑出的浮层面板。 :::

::: title 基础使用 :::

::: demo

打开 内容 <script> import { ref } from 'vue' export default { setup() { const visible = ref(false) const changeVisible = function() { visible.value = !visible.value; } return { visible, changeVisible } } } </script>

:::

::: title 抽屉嵌套 :::

::: demo

打开 打开 内容 <script> import { ref } from 'vue' export default { setup() { const visible1 = ref(false) const changeVisible1 = function() { visible1.value = !visible1.value; } const visible2 = ref(false) const changeVisible2 = function() { visible2.value = !visible2.value; } return { visible1, visible2, changeVisible1, changeVisible2 } } } </script>

:::

::: title 函数调用 :::

::: demo

调用 <script> import { ref } from 'vue' import { layer } from "@layui/layer-vue" export default { setup() { const openDrawer = function() { layer.drawer({ title: "标题", content: "内容" }) } return { openDrawer } } } </script>

:::

::: title 不同方向 :::

::: demo

上 下 左 右 <script> import { ref } from 'vue' import { layer } from "@layui/layer-vue" export default { setup() { const openTopDrawer = function() { layer.drawer({ title: "标题", content: "内容", offset: "t" }) } const openBottomDrawer = function() { layer.drawer({ title: "标题", content: "内容", offset: "b" }) } const openLeftDrawer = function() { layer.drawer({ title: "标题", content: "内容", offset: "l" }) } const openRightDrawer = function() { layer.drawer({ title: "标题", content: "内容", offset: "r" }) } return { openTopDrawer, openBottomDrawer, openLeftDrawer, openRightDrawer, } } } </script>

:::