disinfection_high_front_end/src/components/dialogs/LogPicker.vue

<template>
  <div class="log_picker_dialog_container">
    <div class="modal_content">
      <p class="title">设置消毒等级</p>
      <div class="log_select">
        <van-picker
          :columns="columns"
          :show-toolbar="false"
          visible-option-num="3"
          option-height="42"
          v-model="selectedValues"
        />
      </div>
      <div class="ok_btn" @click="chooseLog">确定</div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
  changeLogVal: {
    type: Function,
  },
  logVal: {
    type: String,
  },
})

const columns = ref([
  { text: '1 Log', value: '1' },
  { text: '2 Log', value: '2' },
  { text: '3 Log', value: '3' },
  { text: '4 Log', value: '4' },
  { text: '5 Log', value: '5' },
  { text: '6 Log', value: '6' },
  { text: '7 Log', value: '7' },
  { text: '8 Log', value: '8' },
  { text: '9 Log', value: '9' },
  { text: '10 Log', value: '10' },
  { text: '11 Log', value: '11' },
  { text: '12 Log', value: '12' },
])

const chooseLog = () => {
  props.changeLogVal(selectedValues.value[0])
}

const selectedValues = ref(['3'])

watch(() => {
  selectedValues.value = [props.logVal]
})
</script>

<style lang="scss" scoped>
.log_picker_dialog_container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  .modal_content {
    width: 476px;
    height: 407px;
    border-radius: 16px;
    background: #ffffff;
    box-sizing: border-box;
    padding: 45px 68px 62px 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      font-family: Source Han Sans CN;
      font-size: 22px;
      font-weight: normal;
      letter-spacing: 0.04em;
      color: #000000;
      margin-bottom: 39px;
    }
    .log_select {
      width: 340px;
      height: 113px;
      overflow: hidden;
      margin-bottom: 48px;
    }
    .ok_btn {
      width: 340px;
      height: 68px;
      border-radius: 8px;
      background: #06518b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Source Han Sans CN;
      font-size: 23px;
      font-weight: 350;
      letter-spacing: 0em;
      color: #ffffff;
    }
  }
}
</style>