Drawer 抽屉

封装了 useDialog Hook，使用该函数可以方便的调用抽屉。

import { useDialog } from 'qin-lantern'

当页面尺寸小于 md 时，会自动全屏抽屉。

提示

<template>
  <el-button @click="open('打开时传递的数据')">
    抽屉展示
  </el-button>

  <ql-drawer
    v-model="show"
    title="提示"
    :confirm="confirm"
  >
    我是内容
  </ql-drawer>
</template>
<script setup lang="ts">
import { useDialog } from 'qin-lantern'

// 模拟接口延时
import { delayed } from '@/utils'
const timedelay = delayed()

// 抽屉Hook
const [show, AOP] = useDialog()
// 打开抽屉
const open = AOP((data) => {
  console.log(data)
})

// 关闭抽屉
const confirm = AOP(async () => {
  const data = await timedelay('我是抽屉确认返回的数据')
  console.log(data)
})
</script>

<style scoped lang='scss'></style>

API

Attributes

属性名	说明	类型	默认
v-model	抽屉展示	boolean	false
footer	是否展示footer	boolean	true
sureText	确认按钮文字	string	确认
cancelText	取消按钮文字	string	取消
confirm	确认按钮事件	Function	() => Promise.resolve()

Other Attributes