vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发
在Vue 2中实现一个简单的房间状态图可以通过组件的方式来完成。以下是一个简单的例子,展示了如何使用Vue 2和HTML模拟实现一个房间状态指示器:
<template>
<div id="app">
<room-status :status="roomStatus"></room-status>
<button @click="toggleStatus">Toggle Status</button>
</div>
</template>
<script>
// 自定义组件 'room-status'
Vue.component('room-status', {
props: ['status'],
template: `
<div class="room-status" :class="status">
<div class="circle" />
<div class="status-text">{{ statusText }}</div>
</div>
`,
computed: {
statusText() {
switch (this.status) {
case 'occupied': return 'Occupied';
case 'vacant': return 'Vacant';
default: return 'Unknown';
}
}
}
});
export default {
data() {
return {
roomStatus: 'vacant'
};
},
methods: {
toggleStatus() {
this.roomStatus = this.roomStatus === 'occupied' ? 'vacant' : 'occupied';
}
}
};
</script>
<style>
.room-status {
display: flex;
align-items: center;
width: 100px;
height: 100px;
border-radius: 50%;
font-size: 12px;
text-align: center;
color: white;
}
.occupied {
background-color: #ff4d4f;
}
.vacant {
background-color: #50e3c1;
}
.circle {
margin: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
}
</style>
在这个例子中,我们定义了一个名为room-status
的Vue组件,它接受一个status
属性,并根据这个属性的值显示不同的颜色和状态文本。我们还定义了一个简单的按钮,当点击时,它会改变roomStatus
数据属性的值,从而更新组件的显示状态。CSS用于样式化组件的显示。这个例子提供了一个基本的实现,可以根据具体需求进行扩展和定制。
评论已关闭