Drawer 抽屉 #

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <vi-button @click="visible = true">打开</vi-button>
  <vi-drawer v-model="visible" title="爱就一个字">
    我只说一次
    <template #footer>
      <vi-button type="info" @click="visible = false">取消</vi-button>
      <vi-button @click="visible = false">确定</vi-button>
    </template>
  </vi-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
const direction = ref('l-r')
</script>

<template>
  <vi-row align="center">
    <vi-radio-group v-model="direction">
      <vi-radio label="l-r">左边</vi-radio>
      <vi-radio label="r-l">右边</vi-radio>
      <vi-radio label="t-b">上面</vi-radio>
      <vi-radio label="b-t">下面</vi-radio>
    </vi-radio-group>
    <vi-button @click="visible = true">打开</vi-button>
  </vi-row>
  <vi-drawer v-model="visible" title="爱就一个字" :direction="direction"> 我只说一次 </vi-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <vi-button @click="visible = true">打开</vi-button>
  <vi-drawer v-model="visible" title="外部" width="40%" :show-close="false">
    <template #header>
      <h4>定义头部</h4>
    </template>
    <p> 主体内容 </p>
    <template #footer>
      <span>定义底部</span>
      <vi-button type="info" @click="visible = false">取消</vi-button>
      <vi-button @click="visible = false">确定</vi-button>
    </template>
  </vi-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible1 = ref(false)
const visible2 = ref(false)
</script>

<template>
  <vi-button @click="visible1 = true">打开</vi-button>
  <vi-drawer v-model="visible1" title="外部" width="40%">
    <vi-button @click="visible2 = true">打开内部</vi-button>
    <vi-drawer v-model="visible2" append-to-body>内部</vi-drawer>
  </vi-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)

const beforeClose = (close: () => void) => {
 console.log('before close 阻止了关闭', close)
}
</script>

<template>
  <vi-button @click="visible = true">打开</vi-button>
  <vi-drawer v-model="visible" title="阻止关闭" :before-close="beforeClose">
    <span>试着点击右上角 "关闭按钮" 与 "遮罩层"。他们都无法关闭此 Drawer，但下方按钮可以。</span>
    <template #footer>
      <vi-button @click="visible = false">修改 v-model 关闭</vi-button>
    </template>
  </vi-drawer>
</template>