273 lines
10 KiB
Vue
273 lines
10 KiB
Vue
<template>
|
||
<!-- Vant 主题色测试页面 -->
|
||
<div class="vant-theme-test p-4">
|
||
<van-nav-bar title="Vant主题色测试" left-arrow @click-left="onClickLeft" />
|
||
|
||
<div class="mt-4 space-y-4">
|
||
<!-- 按钮组件测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">按钮组件</h3>
|
||
<div class="flex gap-2 flex-wrap">
|
||
<van-button type="primary">主要按钮</van-button>
|
||
<van-button type="success">成功按钮</van-button>
|
||
<van-button type="warning">警告按钮</van-button>
|
||
<van-button type="danger">危险按钮</van-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 开关组件测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">开关组件</h3>
|
||
<div class="flex items-center gap-4">
|
||
<van-switch v-model="switchValue" />
|
||
<span>开关状态: {{ switchValue ? '开启' : '关闭' }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 复选框组件测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">复选框组件</h3>
|
||
<div class="space-y-2">
|
||
<van-checkbox v-model="checkboxValue1">选项1</van-checkbox>
|
||
<van-checkbox v-model="checkboxValue2">选项2</van-checkbox>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 单选框组件测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">单选框组件</h3>
|
||
<div class="space-y-2">
|
||
<van-radio v-model="radioValue" name="1">选项1</van-radio>
|
||
<van-radio v-model="radioValue" name="2">选项2</van-radio>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 滑动条组件测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">滑动条组件</h3>
|
||
<van-slider v-model="sliderValue" />
|
||
<p class="text-sm text-gray-600 mt-2">当前值: {{ sliderValue }}</p>
|
||
</div>
|
||
|
||
<!-- 进度条组件测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">进度条组件</h3>
|
||
<van-progress :percentage="progressValue" />
|
||
<p class="text-sm text-gray-600 mt-2">进度: {{ progressValue }}%</p>
|
||
</div>
|
||
|
||
<!-- 评分组件测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">评分组件</h3>
|
||
<van-rate v-model="rateValue" />
|
||
<p class="text-sm text-gray-600 mt-2">评分: {{ rateValue }} 星</p>
|
||
</div>
|
||
|
||
<!-- 步进器组件测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">步进器组件</h3>
|
||
<van-stepper v-model="stepperValue" />
|
||
<p class="text-sm text-gray-600 mt-2">当前值: {{ stepperValue }}</p>
|
||
</div>
|
||
|
||
<!-- 标签组件测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">标签组件</h3>
|
||
<div class="flex gap-2 flex-wrap">
|
||
<van-tag type="primary">主要标签</van-tag>
|
||
<van-tag type="success">成功标签</van-tag>
|
||
<van-tag type="warning">警告标签</van-tag>
|
||
<van-tag type="danger">危险标签</van-tag>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 徽章组件测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">徽章组件</h3>
|
||
<div class="flex gap-4">
|
||
<van-badge content="5">
|
||
<div class="w-8 h-8 bg-gray-200 rounded"></div>
|
||
</van-badge>
|
||
<van-badge content="99+">
|
||
<div class="w-8 h-8 bg-gray-200 rounded"></div>
|
||
</van-badge>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 通知栏组件测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">通知栏组件</h3>
|
||
<van-notice-bar left-icon="volume-o" text="这是一条通知栏消息，用于测试主题色配置效果。" />
|
||
</div>
|
||
|
||
<!-- 轮播图组件测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">轮播图组件</h3>
|
||
<van-swipe :autoplay="3000" indicator-color="white">
|
||
<van-swipe-item>
|
||
<div
|
||
class="h-32 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white">
|
||
轮播图 1
|
||
</div>
|
||
</van-swipe-item>
|
||
<van-swipe-item>
|
||
<div
|
||
class="h-32 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center text-white">
|
||
轮播图 2
|
||
</div>
|
||
</van-swipe-item>
|
||
<van-swipe-item>
|
||
<div
|
||
class="h-32 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center text-white">
|
||
轮播图 3
|
||
</div>
|
||
</van-swipe-item>
|
||
</van-swipe>
|
||
</div>
|
||
|
||
<!-- 加载组件测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">加载组件</h3>
|
||
<div class="flex gap-4 items-center">
|
||
<van-loading type="spinner" />
|
||
<van-loading type="circular" />
|
||
<span>加载中...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤条组件测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">步骤条组件</h3>
|
||
<van-steps :active="2" active-icon="success" inactive-icon="arrow">
|
||
<van-step>步骤一</van-step>
|
||
<van-step>步骤二</van-step>
|
||
<van-step>步骤三</van-step>
|
||
</van-steps>
|
||
</div>
|
||
|
||
<!-- 弹窗测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">弹窗组件</h3>
|
||
<van-button type="primary" @click="showDialog = true">显示弹窗</van-button>
|
||
<van-dialog v-model:show="showDialog" title="主题色测试" message="这是一个测试弹窗，用于验证主题色配置效果。"
|
||
show-cancel-button />
|
||
</div>
|
||
|
||
<!-- 动作面板测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">动作面板组件</h3>
|
||
<van-button type="primary" @click="showActionSheet = true">显示动作面板</van-button>
|
||
<van-action-sheet v-model:show="showActionSheet" :actions="actions" @select="onSelect" />
|
||
</div>
|
||
|
||
<!-- Toast 测试 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">Toast 提示组件</h3>
|
||
<div class="flex gap-2 flex-wrap">
|
||
<van-button type="primary" @click="showSuccessToast">成功提示</van-button>
|
||
<van-button type="warning" @click="showFailToast">失败提示</van-button>
|
||
<van-button type="default" @click="showTextToast">文字提示</van-button>
|
||
<van-button type="success" @click="showLoadingToastHandler">加载提示</van-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 颜色说明 -->
|
||
<div class="card">
|
||
<h3 class="text-lg font-bold mb-3">主题色说明</h3>
|
||
<div class="space-y-2">
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-4 h-4 rounded" style="background-color: var(--van-theme-primary);"></div>
|
||
<span>主色调: <span class="font-mono">var(--van-theme-primary)</span></span>
|
||
</div>
|
||
<p class="text-sm text-gray-600">
|
||
以上所有组件的主色调都已配置为 <span class="font-mono">#5d7eeb</span>，通过 <span
|
||
class="font-mono">var(--van-theme-primary)</span>
|
||
CSS变量统一管理。包括按钮、开关、复选框、单选框等组件的激活状态。通过修改CSS变量可以轻松更改整个主题。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 测试数据
|
||
const switchValue = ref(true)
|
||
const checkboxValue1 = ref(true)
|
||
const checkboxValue2 = ref(false)
|
||
const radioValue = ref('1')
|
||
const sliderValue = ref(50)
|
||
const progressValue = ref(75)
|
||
const rateValue = ref(4)
|
||
const stepperValue = ref(1)
|
||
const showDialog = ref(false)
|
||
const showActionSheet = ref(false)
|
||
|
||
// 动作面板选项
|
||
const actions = [
|
||
{ name: '选项一', color: 'var(--van-theme-primary)' },
|
||
{ name: '选项二', color: 'var(--van-theme-primary)' },
|
||
{ name: '选项三', color: 'var(--van-theme-primary)' },
|
||
]
|
||
|
||
// 选择动作面板选项
|
||
const onSelect = (action) => {
|
||
console.log('选择了:', action.name)
|
||
showActionSheet.value = false
|
||
}
|
||
|
||
// Toast 测试方法
|
||
const showSuccessToast = () => {
|
||
showToast({
|
||
type: 'success',
|
||
message: '操作成功！',
|
||
duration: 2000
|
||
})
|
||
}
|
||
|
||
const showFailToast = () => {
|
||
showToast({
|
||
type: 'fail',
|
||
message: '操作失败，请重试',
|
||
duration: 2000
|
||
})
|
||
}
|
||
|
||
const showTextToast = () => {
|
||
showToast({
|
||
message: '这是一条普通的文字提示',
|
||
duration: 2000
|
||
})
|
||
}
|
||
|
||
const showLoadingToastHandler = () => {
|
||
const toast = showLoadingToast({
|
||
message: "加载中...",
|
||
forbidClick: true,
|
||
duration: 0, // 设置为 0 表示不会自动关闭
|
||
loadingType: "spinner",
|
||
});
|
||
|
||
// 3秒后关闭加载提示
|
||
setTimeout(() => {
|
||
toast.close()
|
||
showToast({
|
||
type: 'success',
|
||
message: '加载完成！'
|
||
})
|
||
}, 3000)
|
||
}
|
||
|
||
// 返回上一页
|
||
const onClickLeft = () => {
|
||
window.history.back()
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.vant-theme-test {
|
||
min-height: 100vh;
|
||
background-color: #f8f8f8;
|
||
}
|
||
</style>
|