cashier_desktop/src/components/remarkModal.vue

71 lines
1.5 KiB
Vue

<template>
<el-dialog title="备注" width="600" v-model="dialogVisible">
<div class="tag_wrap">
<el-button plain type="primary" v-for="item in tagList" :key="item.remark" @click="remark = item.remark">
{{ item.remark }}
</el-button>
</div>
<div class="content">
<el-input type="textarea" :rows="6" v-model="remark" placeholder="请输入备注" @focus="
global.updateData(false)" @blur="global.updateData(true)"></el-input>
</div>
<div class="footer_wrap">
<div class="btn">
<el-button type="primary" style="width: 100%;" @click="confirmHandle">确认</el-button>
</div>
</div>
</el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { useGlobal } from '@/store/global.js'
const global = useGlobal()
const emit = defineEmits(['success'])
const dialogVisible = ref(false)
const remark = ref('')
const tagList = ref([
{
remark: '味道淡一点'
},
{
remark: '味道大一点'
}
])
function confirmHandle() {
emit('success', remark.value)
dialogVisible.value = false
}
// 显示组件
const show = () => {
dialogVisible.value = true
}
defineExpose({
show
})
</script>
<style scoped lang="scss">
.tag_wrap {
display: flex;
flex-wrap: wrap;
}
.content {
padding: 20px 0;
}
.footer_wrap {
display: flex;
.btn {
flex: 1;
}
}
</style>