xtf-drawer

组件说明

xtf-drawer 是抽屉组件，用于从屏幕边缘滑出的面板。支持四个方向（上/下/左/右）、预设尺寸、自定义宽高、标题栏、关闭按钮和底部插槽，适用于筛选面板、详情展示和设置页面等场景。

基础用法

1. 右侧抽屉

默认从右侧滑出：

vue

<template>
  <view>
    <xtf-button label="打开抽屉" @click="showDrawer = true" />
    <xtf-drawer v-model:show="showDrawer" title="筛选条件">
      <xtf-cell-group>
        <xtf-cell title="状态" value="全部" arrow />
        <xtf-cell title="时间" value="最近7天" arrow />
        <xtf-cell title="类型" value="全部" arrow />
      </xtf-cell-group>
    </xtf-drawer>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showDrawer: false
    }
  }
}
</script>

2. 不同方向

通过 position 设置滑出方向：

vue

<template>
  <view style="display: flex; gap: 12rpx; flex-wrap: wrap">
    <xtf-button label="左侧" @click="openDrawer('left')" />
    <xtf-button label="右侧" @click="openDrawer('right')" />
    <xtf-button label="上方" @click="openDrawer('top')" />
    <xtf-button label="下方" @click="openDrawer('bottom')" />
    <xtf-drawer v-model:show="drawerVisible" :position="drawerPosition" title="抽屉面板">
      <xtf-text level="body" text="从不同方向滑出的抽屉内容。" />
    </xtf-drawer>
  </view>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      drawerPosition: 'right'
    }
  },
  methods: {
    openDrawer(position) {
      this.drawerPosition = position
      this.drawerVisible = true
    }
  }
}
</script>

3. 带底部操作

通过 footer 插槽添加底部操作按钮：

vue

<template>
  <view>
    <xtf-button label="筛选" @click="showFilter = true" />
    <xtf-drawer v-model:show="showFilter" title="筛选" size="md">
      <xtf-cell-group>
        <xtf-cell title="分类" value="全部" arrow />
        <xtf-cell title="价格" value="不限" arrow />
      </xtf-cell-group>
      <template #footer>
        <xtf-button-group :gap="12">
          <xtf-button label="重置" type="light" block />
          <xtf-button label="确认" block @click="showFilter = false" />
        </xtf-button-group>
      </template>
    </xtf-drawer>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showFilter: false
    }
  }
}
</script>

全部属性

属性	类型	默认值	作用描述	适用范围
`show` / `modelValue`	`Boolean`	`false`	是否显示	显示控制
`title`	`String`	`''`	标题	标题
`position`	`String`	`'right'`	滑出方向：`'left'` / `'right'` / `'top'` / `'bottom'`	方向
`size`	`String`	`''`	预设尺寸：`'sm'` / `'md'` / `'lg'`	尺寸
`width`	`String \| Number`	`'78vw'`	自定义宽度（左右方向）	宽度
`height`	`String \| Number`	`'100%'`	自定义高度（上下方向）	高度
`overlay`	`Boolean`	`true`	是否显示遮罩	遮罩
`closeable`	`Boolean`	`true`	是否显示关闭按钮	关闭按钮
`closeIcon`	`String`	`''`	关闭图标名称	自定义关闭图标
`closeOnClickOverlay`	`Boolean \| String`	`true`	点击遮罩是否关闭	关闭行为
`closeOnPressEscape`	`Boolean \| String`	`true`	按 Escape 是否关闭（由 `xtf-popup` 处理）	键盘关闭
`beforeClose`	`Function`	`null`	关闭前回调	关闭拦截
`zIndex`	`String \| Number`	`''`	层级	层级
`duration`	`String \| Number`	`320`	动画时长（ms）	动画
`round`	`Boolean`	`true`	是否圆角	圆角
`showHandle`	`Boolean \| String`	`null`	是否显示拖拽手柄	手柄
`radius`	`String \| Number`	`''`	自定义圆角	圆角
`shadow`	`String`	`''`	自定义阴影	阴影
`headerPadding`	`String \| Number`	`''`	头部内边距	内边距
`bodyPadding`	`String \| Number`	`''`	内容区内边距	内边距
`headerBorder`	`Boolean \| String`	`true`	头部是否显示底部边框	边框
`overlayStyle`	`String \| Object`	`''`	传给遮罩层的样式	自定义遮罩
`popupClass`	`String`	`''`	传给内部 `xtf-popup` 的类名	弹层样式
`customClass`	`String`	`''`	自定义类名	样式覆盖
`customStyle`	`String \| Object`	`''`	自定义样式	动态样式覆盖

事件

事件名称	触发时机	回调参数	参数说明
`open`	打开时触发	-	-
`opened`	打开动画结束时触发	-	-
`close`	关闭时触发	-	-
`closed`	关闭动画结束时触发	-	-
`update:show`	显示状态变化时触发	`(show: Boolean)`	显示状态
`update:modelValue`	显示状态变化时触发	`(show: Boolean)`	`v-model` 的新值

事件使用示例

vue

<template>
  <view>
    <xtf-button label="打开" @click="show = true" />
    <xtf-drawer
      v-model="show"
      title="订单筛选"
      @open="log('open')"
      @opened="log('opened')"
      @close="onClose"
      @closed="log('closed')"
      @update:show="onVisible"
      @update:modelValue="onVisible"
    >
      <xtf-text text="筛选内容" />
    </xtf-drawer>
  </view>
</template>

<script>
export default {
  data() {
    return { show: false }
  },
  methods: {
    log(name) {
      console.log(name)
    },
    onClose(reason) {
      console.log('close', reason)
    },
    onVisible(value) {
      console.log('visible', value)
    }
  }
}
</script>

插槽

插槽名称	说明
`default`	可滚动的抽屉主体内容
`footer`	固定在主体下方的操作区

方法

方法名	参数	返回值	说明
`open`	-	-	打开抽屉
`close`	-	-	关闭抽屉
`toggle`	-	-	切换抽屉显示状态

主题说明

弹出层使用 xtf-popup 组件
背景色使用 var(--xtf-popup-bg)
过渡动画使用 cubic-bezier(0.22, 1, 0.36, 1) 缓动曲线
左右方向带阴影效果

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。

xtf-drawer ​

组件说明 ​

基础用法 ​

1. 右侧抽屉 ​

2. 不同方向 ​

3. 带底部操作 ​

全部属性 ​

事件 ​

事件使用示例 ​

插槽 ​

方法 ​

主题说明 ​