climblee/uv-ui

在 Firefox 上使用手机模式tabs right-slot 会出现重复点击两次的情况,其它浏览器正常。

Opened this issue · 0 comments

我开始一个最小化复现方式

首现使用uniapp 的架子

#创建模板
$npx degit dcloudio/uni-preset-vue#vite-ts example

#添加 climblee/uv-ui
$pnpm install && pnpm add @climblee/uv-ui  // 这里添加的是1.1.20 版本

#启动
$pnpm run dev:h5

#使用手机模式发现问题
<template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <view style="width: 100%; height: 100px;">
      <uv-tabs :list="tabs" :activeStyle="activeStyle" :current="current" :scrollable="true">
            <template v-slot:right>
                <view class="px-2" @tap="() => { console.log('') }">
                    <uv-icon name="list" color="#FF0000" size="20" bold></uv-icon>
                </view>
            </template>
        </uv-tabs>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Tags from '@/components/tags.vue'

const title = ref('Hello')

const tabs = ref([
    { name: '推荐' }, { name: '生活' }, { name: '学术' }, { name: '求职' }, { name: '直播' }, { name: '热门' }, { name: '热门' }, { name: '热门' }, { name: '热门' },
    { name: '推荐' }, { name: '生活' }, { name: '学术' }, { name: '求职' }, { name: '直播' }, { name: '热门' }, { name: '热门' }, { name: '热门' }, { name: '热门' }
])

const activeStyle = ref(
    {
        color: '#0B1526',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
    }
)

const current = ref(0)
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
Screen.Recording.2024-07-19.at.03.54.45.mov