309 lines
7.2 KiB
Vue
309 lines
7.2 KiB
Vue
<template>
|
||
<view class="test-page">
|
||
<view class="test-section">
|
||
<text class="test-title">Tab组件测试</text>
|
||
|
||
<!-- 基础测试 -->
|
||
<view class="test-item">
|
||
<text class="item-title">基础用法</text>
|
||
<Tab
|
||
:tabs="basicTabs"
|
||
:defaultActive="0"
|
||
@change="handleTabChange"
|
||
/>
|
||
<view class="result">
|
||
<text>当前选中: {{ currentTab.label }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 多标签测试 -->
|
||
<view class="test-item">
|
||
<text class="item-title">多标签测试</text>
|
||
<Tab
|
||
:tabs="multiTabs"
|
||
:defaultActive="1"
|
||
@change="handleMultiTabChange"
|
||
/>
|
||
<view class="result">
|
||
<text>当前选中: {{ currentMultiTab.label }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 快速切换测试 -->
|
||
<view class="test-item">
|
||
<text class="item-title">快速切换测试</text>
|
||
<Tab
|
||
ref="fastTabRef"
|
||
:tabs="fastTabs"
|
||
:defaultActive="0"
|
||
@change="handleFastTabChange"
|
||
/>
|
||
<view class="result">
|
||
<text>当前选中: {{ currentFastTab.label }}</text>
|
||
</view>
|
||
<view class="test-buttons">
|
||
<button
|
||
v-for="(tab, index) in fastTabs"
|
||
:key="index"
|
||
class="test-btn"
|
||
@click="switchToTab(index)"
|
||
>
|
||
切换到{{ tab.label }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 初始化测试 -->
|
||
<view class="test-item">
|
||
<text class="item-title">初始化测试</text>
|
||
<text class="test-desc">测试指示器的动态高度和宽度初始化及错误处理</text>
|
||
<Tab
|
||
v-if="showInitTest"
|
||
:tabs="initTestTabs"
|
||
:defaultActive="initActiveIndex"
|
||
@change="handleInitTestChange"
|
||
/>
|
||
<view class="result">
|
||
<text>当前选中: {{ currentInitTab.label }}</text>
|
||
</view>
|
||
<view class="test-buttons">
|
||
<button class="test-btn" @click="toggleInitTest">
|
||
{{ showInitTest ? '隐藏' : '显示' }}组件
|
||
</button>
|
||
<button class="test-btn" @click="changeInitActive">
|
||
切换默认激活项 (当前: {{ initActiveIndex }})
|
||
</button>
|
||
<button class="test-btn" @click="addInitTab">
|
||
添加Tab
|
||
</button>
|
||
<button class="test-btn" @click="removeInitTab">
|
||
移除Tab
|
||
</button>
|
||
<button class="test-btn" @click="rapidToggle">
|
||
快速切换测试
|
||
</button>
|
||
</view>
|
||
<view class="test-info">
|
||
<text>错误处理测试：组件现在能够安全处理实例为null的情况</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
import Tab from './index.vue'
|
||
|
||
// 基础标签
|
||
const basicTabs = ref([
|
||
{ label: '全部订单', value: 'all' },
|
||
{ label: '服务工单', value: 'service' }
|
||
])
|
||
|
||
// 多标签
|
||
const multiTabs = ref([
|
||
{ label: '全部', value: 'all' },
|
||
{ label: '待支付', value: 'unpaid' },
|
||
{ label: '待确认', value: 'unconfirmed' },
|
||
{ label: '进行中', value: 'processing' },
|
||
{ label: '已完成', value: 'completed' }
|
||
])
|
||
|
||
// 快速切换测试
|
||
const fastTabs = ref([
|
||
{ label: '标签A', value: 'a' },
|
||
{ label: '标签B', value: 'b' },
|
||
{ label: '标签C', value: 'c' },
|
||
{ label: '标签D', value: 'd' }
|
||
])
|
||
|
||
// 初始化测试
|
||
const initTestTabs = ref([
|
||
{ label: '初始1', value: 'init1' },
|
||
{ label: '初始2', value: 'init2' },
|
||
{ label: '初始3', value: 'init3' }
|
||
])
|
||
|
||
// 当前选中索引
|
||
const currentTabIndex = ref(0)
|
||
const currentMultiTabIndex = ref(1)
|
||
const currentFastTabIndex = ref(0)
|
||
const currentInitTabIndex = ref(1)
|
||
|
||
// 初始化测试状态
|
||
const showInitTest = ref(true)
|
||
const initActiveIndex = ref(1)
|
||
|
||
// 计算当前选中项
|
||
const currentTab = computed(() => basicTabs.value[currentTabIndex.value] || {})
|
||
const currentMultiTab = computed(() => multiTabs.value[currentMultiTabIndex.value] || {})
|
||
const currentFastTab = computed(() => fastTabs.value[currentFastTabIndex.value] || {})
|
||
const currentInitTab = computed(() => initTestTabs.value[currentInitTabIndex.value] || {})
|
||
|
||
// Tab引用
|
||
const fastTabRef = ref(null)
|
||
|
||
// 事件处理
|
||
const handleTabChange = ({ index, item }) => {
|
||
currentTabIndex.value = index
|
||
console.log('基础Tab切换:', item)
|
||
}
|
||
|
||
const handleMultiTabChange = ({ index, item }) => {
|
||
currentMultiTabIndex.value = index
|
||
console.log('多标签Tab切换:', item)
|
||
}
|
||
|
||
const handleFastTabChange = ({ index, item }) => {
|
||
currentFastTabIndex.value = index
|
||
console.log('快速Tab切换:', item)
|
||
}
|
||
|
||
const handleInitTestChange = ({ index, item }) => {
|
||
currentInitTabIndex.value = index
|
||
console.log('初始化Tab切换:', item)
|
||
}
|
||
|
||
// 程序化切换
|
||
const switchToTab = (index) => {
|
||
currentFastTabIndex.value = index
|
||
if (fastTabRef.value) {
|
||
fastTabRef.value.setActiveIndex(index)
|
||
}
|
||
}
|
||
|
||
// 初始化测试方法
|
||
const toggleInitTest = () => {
|
||
showInitTest.value = !showInitTest.value
|
||
}
|
||
|
||
const changeInitActive = () => {
|
||
initActiveIndex.value = (initActiveIndex.value + 1) % initTestTabs.value.length
|
||
}
|
||
|
||
const addInitTab = () => {
|
||
const newIndex = initTestTabs.value.length + 1
|
||
initTestTabs.value.push({
|
||
label: `初始${newIndex}`,
|
||
value: `init${newIndex}`
|
||
})
|
||
}
|
||
|
||
const removeInitTab = () => {
|
||
if (initTestTabs.value.length > 1) {
|
||
initTestTabs.value.pop()
|
||
if (initActiveIndex.value >= initTestTabs.value.length) {
|
||
initActiveIndex.value = initTestTabs.value.length - 1
|
||
}
|
||
}
|
||
}
|
||
|
||
const rapidToggle = () => {
|
||
// 快速切换测试，模拟可能导致实例为null的场景
|
||
let count = 0
|
||
const interval = setInterval(() => {
|
||
showInitTest.value = !showInitTest.value
|
||
count++
|
||
if (count >= 6) {
|
||
clearInterval(interval)
|
||
showInitTest.value = true
|
||
}
|
||
}, 200)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.test-page {
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.test-section {
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
}
|
||
|
||
.test-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 20px;
|
||
display: block;
|
||
}
|
||
|
||
.test-item {
|
||
margin-bottom: 30px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.test-item:last-child {
|
||
border-bottom: none;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #666;
|
||
margin-bottom: 15px;
|
||
display: block;
|
||
}
|
||
|
||
.test-desc {
|
||
font-size: 14px;
|
||
color: #999;
|
||
margin-bottom: 10px;
|
||
display: block;
|
||
}
|
||
|
||
.test-info {
|
||
margin-top: 15px;
|
||
padding: 10px;
|
||
background-color: #f0f9ff;
|
||
border-radius: 8px;
|
||
border-left: 4px solid #007AFF;
|
||
}
|
||
|
||
.test-info text {
|
||
font-size: 13px;
|
||
color: #666;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.result {
|
||
margin-top: 15px;
|
||
padding: 10px;
|
||
background-color: #f8f9fa;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.result text {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.test-buttons {
|
||
margin-top: 15px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.test-btn {
|
||
padding: 8px 16px;
|
||
font-size: 14px;
|
||
background-color: #007AFF;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.test-btn:active {
|
||
opacity: 0.7;
|
||
}
|
||
</style> |