160 lines
3.3 KiB
Vue
160 lines
3.3 KiB
Vue
<template>
|
||
<view class="demo-page">
|
||
<view class="demo-section">
|
||
<text class="section-title">基础用法</text>
|
||
<BasicNjBjSelect
|
||
v-model="selectedClass1"
|
||
placeholder="请选择年级班级"
|
||
@change="onClassChange1"
|
||
/>
|
||
<view v-if="selectedClass1" class="result-display">
|
||
<text>已选择：{{ selectedClass1.njmc }} {{ selectedClass1.bjmc }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="demo-section">
|
||
<text class="section-title">自定义样式</text>
|
||
<BasicNjBjSelect
|
||
v-model="selectedClass2"
|
||
:custom-style="{
|
||
backgroundColor: '#f0f9ff',
|
||
borderColor: '#0ea5e9',
|
||
borderRadius: '12px'
|
||
}"
|
||
placeholder="自定义样式选择器"
|
||
icon-color="#0ea5e9"
|
||
/>
|
||
</view>
|
||
|
||
<view class="demo-section">
|
||
<text class="section-title">不受权限控制</text>
|
||
<BasicNjBjSelect
|
||
v-model="selectedClass3"
|
||
:use-kz-tree="true"
|
||
title="选择年级班级（全部）"
|
||
placeholder="选择全部年级班级"
|
||
/>
|
||
</view>
|
||
|
||
<view class="demo-section">
|
||
<text class="section-title">禁用状态</text>
|
||
<BasicNjBjSelect
|
||
v-model="selectedClass4"
|
||
:disabled="true"
|
||
placeholder="禁用状态"
|
||
/>
|
||
</view>
|
||
|
||
<view class="demo-section">
|
||
<text class="section-title">操作按钮</text>
|
||
<view class="button-group">
|
||
<button @click="resetAll" class="demo-btn">重置所有</button>
|
||
<button @click="setDefaultValue" class="demo-btn">设置默认值</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import BasicNjBjSelect from './index.vue'
|
||
|
||
// 响应式数据
|
||
const selectedClass1 = ref(null)
|
||
const selectedClass2 = ref(null)
|
||
const selectedClass3 = ref(null)
|
||
const selectedClass4 = ref(null)
|
||
|
||
// 事件处理
|
||
const onClassChange1 = (result) => {
|
||
console.log('选择变化:', result)
|
||
}
|
||
|
||
// 重置所有选择
|
||
const resetAll = () => {
|
||
selectedClass1.value = null
|
||
selectedClass2.value = null
|
||
selectedClass3.value = null
|
||
selectedClass4.value = null
|
||
}
|
||
|
||
// 设置默认值
|
||
const setDefaultValue = () => {
|
||
// 这里可以设置一个默认的年级班级
|
||
// 注意：需要确保数据存在
|
||
console.log('设置默认值功能需要根据实际数据调整')
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.demo-page {
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.demo-section {
|
||
margin-bottom: 30px;
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
|
||
.section-title {
|
||
display: block;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.result-display {
|
||
margin-top: 10px;
|
||
padding: 10px;
|
||
background-color: #f0f9ff;
|
||
border-radius: 6px;
|
||
border-left: 3px solid #0ea5e9;
|
||
|
||
text {
|
||
font-size: 14px;
|
||
color: #0369a1;
|
||
}
|
||
}
|
||
|
||
.button-group {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 15px;
|
||
|
||
.demo-btn {
|
||
flex: 1;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
background-color: #1890ff;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
|
||
&:active {
|
||
background-color: #1677ff;
|
||
}
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|