zhxy-jsd/src/components/BasicNjBjSelect/demo.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>