uni-app setup + ts 使用拓展组件 uni-swipe-action

在 uni-app 中使用 setup 语法糖结合 TypeScript 来集成拓展组件 uni-swipe-action 是一个常见的需求。uni-swipe-action 组件允许你在列表中实现滑动操作，比如删除、编辑等。以下是一个完整的代码示例，展示了如何在 uni-app 项目中配置并使用这个组件。

1. 安装依赖

首先，确保你已经安装了 uni-ui 库，它包含了 uni-swipe-action 组件。如果还没有安装，可以使用以下命令：

npm install @dcloudio/uni-ui

2. 引入组件

在你的页面中引入 uni-swipe-action 组件。例如，在 pages/index/index.vue 文件中：

<template>
  <view>
    <uni-swipe-action :auto-close="true" @close="handleClose">
      <uni-swipe-action-item name="delete" :style="{ backgroundColor: '#FF4D4F' }">
        <view>删除</view>
      </uni-swipe-action-item>
      <view class="item">
        <text>Item 1</text>
      </view>
    </uni-swipe-action>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import UniSwipeAction, { UniSwipeActionItem } from '@dcloudio/uni-ui/lib/uni-swipe-action/uni-swipe-action.vue';

// 使用组件
defineComponents({
  UniSwipeAction,
  UniSwipeActionItem
});

const handleClose = () => {
  console.log('Swipe action closed');
};
</script>

<style scoped>
.item {
  padding: 20px;
  background-color: #fff;
  margin-bottom: 10px;
}
</style>

3. 使用 `setup` 语法糖

在上面的代码中，我们使用了 setup 语法糖来定义组件的逻辑。defineComponents 是一个假设的函数，用于注册组件（实际上在 uni-app 中，组件注册通常通过 components 选项完成，但在 setup 中，组件是直接在模板中通过全局或局部注册引入的）。

4. 样式调整

你可以根据需要调整样式。上面的示例中，我们简单地给滑动操作项添加了背景色，并在 item 类中设置了基本的样式。

5. 运行项目

确保你的项目配置正确，然后运行项目：

npm run dev:%PLATFORM%

将 %PLATFORM% 替换为你想要运行的平台，如 mp-weixin（微信小程序）。