FitsDrawer 抽屉

基础用法

基础用法

需要设置 visible 属性，为 true 时显示。dialogProp 属性用于设置弹窗组件的配置。

<template>
    <el-button @click="visible = true" type="primary">
        打开侧边弹窗
    </el-button>

    <fits-drawer :visible="visible" :dialogProp="dialogProp" @cancel="visible = false" @submit="visible = false">
        <h1>我是基础弹窗</h1>
        <h2>我是基础弹窗</h2>
        <h3>我是基础弹窗</h3>
        <div>我是基础弹窗</div>
        <div>我是基础弹窗</div>
    </fits-drawer>
</template>

<script lang="ts" setup>
import { FitsDrawer } from '@/fits-components';
const visible = ref(false)
const dialogProp = reactive({
    title: '侧边弹窗',
})
</script>

<style lang="scss">

</style>

<style lang="scss" scoped>

</style>```

自定义头部、底部内容

自定义头部、底部内容

通过使用插槽 header 和 footer，可以自定义头部和底部按钮区域的内容。通过设置 submitText 和 cancelText，分别定义确定按钮和取消按钮的显示文字。

<template>
    <el-button @click="visible = true" type="primary">
        打开侧边弹窗
    </el-button>

    <fits-drawer :visible="visible" :dialogProp="dialogProp" submitText="提交" cancelText="返回" @cancel="visible = false"
        @submit="visible = false">
        <template #header="{ close, titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">自定义标题！</h4>
            <el-button type="danger" @click="close">
                <el-icon class="el-icon--left">
                    <CircleCloseFilled />
                </el-icon>
                Close
            </el-button>
        </template>
        <h1>我是基础弹窗</h1>
        <h2>我是基础弹窗</h2>
        <h3>我是基础弹窗</h3>
        <div>我是基础弹窗</div>
        <div>我是基础弹窗</div>
    </fits-drawer>
</template>

<script lang="ts" setup>
import { FitsDrawer } from '@/fits-components';
import { CircleCloseFilled } from '@element-plus/icons-vue'

const visible = ref(false)
const dialogProp = reactive({
    title: '侧边弹窗',
    showClose: false
})
</script>

<style lang="scss">

</style>

<style lang="scss" scoped>

</style>```

隐藏头部、底部内容

隐藏头部、底部内容

通过设置 dialogProp.withHeader = false 和 showFooter = false 可以隐藏抽屉的头部和底部内容区域。

<template>
    <el-button @click="visible = true" type="primary">
        打开侧边弹窗
    </el-button>

    <fits-drawer :visible="visible" :dialogProp="dialogProp" :showFooter="false" @cancel="visible = false"
        @submit="visible = false">
        <h1>我是基础弹窗</h1>
        <h2>我是基础弹窗</h2>
        <h3>我是基础弹窗</h3>
        <div>我是基础弹窗</div>
        <div>我是基础弹窗</div>
    </fits-drawer>
</template>

<script lang="ts" setup>
import { FitsDrawer } from '@/fits-components';
const visible = ref(false)
const dialogProp = reactive({
    title: '侧边弹窗',
    withHeader: false
})
</script>

<style lang="scss">

</style>

<style lang="scss" scoped>

</style>```

FitsDrawer 抽屉的属性

属性	说明	类型	必填项	默认值
visible	控制弹窗是否可见	boolean	必填	false
submitText	确定按钮的文字	string	非必填	确定
cancelText	取消按钮的文字	string	非必填	取消
showFooter	是否显示弹窗的底部区域	boolean	非必填	true
dialogProp	抽屉组件的配置	drawerProps	非必填	-

事件

事件名	说明	参数
cancel	点击取消按钮的回调	-
submit	点击确定按钮的回调	-
open	弹窗打开的回调	-

插槽

插槽名	说明
-	弹窗的内容
header	弹窗头部区域的内容
footer	弹窗底部区域的内容