150 lines
3.3 KiB
Vue
150 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>
|