小程序 自定义组件封装相关问题?

我目前有一个demo页面, 点击按钮, 实现简单的抽屉功能

现在需要做成组件, 方便其他地方调用, 应该如何实现?

drawer.wxml

<view class="wrapper">
   <view class="container">
      <button type="primary" bindtap="onOpenDrawerTap">Open Drawer</button>
   </view>

   <block wx:if="{{ showDrawer }}">
      <view class="mask" bindtap="onMaskTap">
         <!-- 遮罩层 -->
      </view>
      <view class="drawer">
         这里是抽屉内容
      </view>
   </block>
</view>

drawer.wxss

.mask {
   height: 100vh;
   width: 100vw;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 0;
   background-color: var(--black-25);
}

.drawer {
   width: 100%;
   position: fixed;
   bottom: 0;
   z-index: 1;
   background-color: var(--white);
}

/* 以下是允许用户自定义的样式 */
.drawer {
   height: 500rpx;
   padding: 30rpx;
   font-size: var(--font-size-3);
   font-weight: bold;
}

drawer.js

Page({

   data: {
      showDrawer: false
   },

   onOpenDrawerTap() {
      this.setData({
         showDrawer: true
      })
   },

   onMaskTap() {
      this.setData({
         showDrawer: false
      })
   },

   onReady() {
      wx.setNavigationBarTitle({
         title: 'Demo Drawer'
      });
   }

})

希望实现的大概效果如下

wxml

<!-- 触发器 -->
<button type="primary" drawer-content="#example">Open Drawer</button>

<!-- 抽屉内容, 遮罩层默认封装进组件里面 -->
<wxc-drawer id="example">
   <view>这里是抽屉内容</view>
</wxc-drawer>