BasicDrawer抽屉组件底部按钮组件自定义

引言

Drawer 抽屉组件
BasicDrawer抽屉组件会提供默认的底部按钮样式，显示的是取消/确定。
在实际业务当中常常需要自定义按钮。
这时就需要自定义底部样式。

实现

• 父页面

function handleDetail(record: Recordable) {
     openDrawer(true, {
       record,
       isUpdate: true,
       showFooter: false, //这个属性控制子页面底部是否显示
     });
   }

• 子页面

const [registerDrawer, {setDrawerProps, closeDrawer}] = useDrawerInner(async (data) => {
    console.log(data);
    //这段代码是控制底部区域是否显示
    // let showFooter = data?.showFooter ?? true
    // setDrawerProps({showFooter })
  });

• 以下代码就是自定义按钮的样式

 <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter
         :width="width" :title="getTitle" @ok="handleSubmit" :body-style="{ backgroundColor: '#f8f8f8'}" >
         
          <!--右下角按钮-->
        <template #footer>
            <PopConfirmButton title="确定放弃编辑？" @confirm="closeDrawer" okText="确定" cancelText="取消">取消</PopConfirmButton>
            <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>
            <a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
        </template>
 </BasicDrawer>