@tanzhenxing/zx-pk v1.0.2

zx-pk 组件

一个基于 uni-app 和 Vue3 <script setup> 语法开发的高兼容性 PK 组件，适配 H5、小程序、App。

组件特性

• 多平台支持：兼容 H5、各类小程序（微信/支付宝/百度/字节/QQ/快手等）以及 App。
• 现代语法：采用 Vue3 <script setup> 语法，代码简洁高效。
• 高度自定义：支持按钮模式和进度条模式，满足不同场景需求。
• 响应式设计：灵活配置属性，适应不同布局和交互需求。

属性说明

事件说明

平台兼容性

• H5：完全支持。
• 小程序：兼容微信、支付宝、百度、字节、QQ、快手等主流小程序。
• App：基于 uni-app 开发，适配 iOS 和 Android。

使用方法

1. 将 src/components/zx-pk/zx-pk.vue 文件复制到您的项目组件目录中。
2. 在页面中引入并注册组件。
3. 通过属性配置和事件监听实现交互逻辑。

示例代码

<template>
  <zx-pk
    :title="['队伍A', '队伍B']"
    :btnName="'投票'"
    :status="status"
    :progress="[60, 40, '6000票', '4000票']"
    @choose="onChoose"
  />
  <button @click="toggleStatus">切换模式</button>
</template>

<script setup>
import { ref } from 'vue';
import zxPk from '@/components/zx-pk/zx-pk.vue';

const status = ref('button');
const onChoose = (side) => {
  uni.showToast({ title: `选择了${side === 'left' ? '队伍A' : '队伍B'}` });
};
const toggleStatus = () => {
  status.value = status.value === 'button' ? 'progress' : 'button';
};
</script>

注意事项

• 确保项目中已安装 Vue3 和 uni-app 相关依赖。
• 如需自定义样式，可通过覆盖组件内的 CSS 类名实现。