Browse Source

MyLogPicker

master
sige 1 year ago
parent
commit
4df00e384e
  1. 133
      src/components/dialogs/MyLogPicker.vue

133
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>
Loading…
Cancel
Save