在 Firefox 上使用手机模式tabs right-slot 会出现重复点击两次的情况,其它浏览器正常。
lihe6666 opened this issue · comments
lion commented
我开始一个最小化复现方式
首现使用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>