1 changed files with 133 additions and 0 deletions
@ -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> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue