MyLogPicker

src/components/dialogs/MyLogPicker.vue

@@ -0,0 +1,133 @@
+<template>
+  <div v-if="enable" 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 style-btn" @click="actionSelect">确定</div>
+      <img class="close" src="../../assets/img/icon/close.svg" @click="actionClose" />
+    </div>
+  </div>
+
+  <div @click="actionEnable">
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+// emits
+const emits = defineEmits(['update:value','change']);
+// props
+const props = defineProps({
+  value : {},
+});
+// enable
+const enable = ref(false);
+// selected values
+const selectedValues = ref(['6'])
+// values
+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' },
+]);
+// on mounted
+onMounted(mounted);
+
+// mounted
+function mounted() {
+    selectedValues.value = [props.value];
+}
+
+// enable
+function actionEnable() {
+    enable.value = true;
+}
+
+// select
+function actionSelect() {
+    emits('update:value', selectedValues.value[0]);
+    emits('change');
+    enable.value = false;
+}
+
+// close
+function actionClose() {
+    enable.value = false;
+}
+</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;
+    position: relative;
+    .close {
+      position: absolute;
+      right: 24px;
+      top: 18px;
+    }
+    .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>