91 lines
2.1 KiB
Vue
91 lines
2.1 KiB
Vue
<!-- 取餐号组件 -->
|
|
<template>
|
|
<el-dialog :title="props.title" width="600" v-model="dialogVisible" @open="opne">
|
|
<el-input v-model="number" :placeholder="props.placeholder" readonly></el-input>
|
|
<div class="keybord_wrap">
|
|
<div v-for="item in 9" :key="item">
|
|
<el-button plain type="info" style="width: 100%;" @click="inputHandle(item)">{{ item }}</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button plain type="info" disabled style="width: 100%;">.</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button plain type="info" style="width: 100%;" @click="inputHandle(0)">0</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button plain type="info" icon="CloseBold" style="width: 100%;" @click="delHandle"></el-button>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<el-button type="primary" style="width: 100%;" @click="confirmHandle">确认</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '标题'
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '提示'
|
|
}
|
|
})
|
|
|
|
const dialogVisible = ref(false)
|
|
const number = ref('')
|
|
|
|
const emit = defineEmits(['success'])
|
|
|
|
function show() {
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
function opne() {
|
|
number.value = ''
|
|
}
|
|
|
|
// 输入
|
|
function inputHandle(n) {
|
|
number.value += n
|
|
}
|
|
|
|
// 删除
|
|
function delHandle() {
|
|
if (!number.value) return
|
|
number.value = number.value.substring(0, number.value.length - 1)
|
|
}
|
|
|
|
// 确认
|
|
function confirmHandle() {
|
|
emit('success', number.value)
|
|
dialogVisible.value = false
|
|
}
|
|
|
|
defineExpose({
|
|
show
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.el-input__inner) {
|
|
height: 70px;
|
|
font-size: 36px;
|
|
}
|
|
|
|
.keybord_wrap {
|
|
padding: 20px 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr 1fr 1fr;
|
|
gap: 20px;
|
|
|
|
:deep(.el-button--large) {
|
|
height: 70px;
|
|
}
|
|
}
|
|
</style> |