<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3 牙位图选择器</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.tooth-chart {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 5px;
margin: 20px 0;
}
.tooth {
width: 40px;
height: 40px;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s;
}
.tooth:hover {
background-color: #f0f0f0;
}
.tooth.selected {
background-color: #4CAF50;
color: white;
}
.tooth-label {
font-size: 12px;
font-weight: bold;
}
.selected-teeth {
margin-top: 20px;
padding: 10px;
border: 1px solid #eee;
border-radius: 5px;
}
h1 {
color: #333;
text-align: center;
}
.footer {
margin-top: 30px;
text-align: center;
color: #666;
font-size: 12px;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<h1>牙位图选择器</h1>
<div class="tooth-chart">
<!-- 上颌牙齿 -->
<div v-for="tooth in upperTeeth"
:key="tooth.number"
class="tooth"
:class="{ selected: selectedTeeth.includes(tooth.number) }"
@click="toggleTooth(tooth.number)">
<span class="tooth-label">{{ tooth.number }}</span>
</div>
<!-- 下颌牙齿 -->
<div v-for="tooth in lowerTeeth"
:key="tooth.number"
class="tooth"
:class="{ selected: selectedTeeth.includes(tooth.number) }"
@click="toggleTooth(tooth.number)">
<span class="tooth-label">{{ tooth.number }}</span>
</div>
</div>
<div class="selected-teeth">
<h3>已选牙位: {{ selectedTeeth.join(', ') || '无' }}</h3>
<button @click="clearSelection">清空选择</button>
</div>
</div>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
// 牙齿数据
const upperTeeth = ref([
{ number: 18 }, { number: 17 }, { number: 16 }, { number: 15 },
{ number: 14 }, { number: 13 }, { number: 12 }, { number: 11 },
{ number: 21 }, { number: 22 }, { number: 23 }, { number: 24 },
{ number: 25 }, { number: 26 }, { number: 27 }, { number: 28 }
]);
const lowerTeeth = ref([
{ number: 48 }, { number: 47 }, { number: 46 }, { number: 45 },
{ number: 44 }, { number: 43 }, { number: 42 }, { number: 41 },
{ number: 31 }, { number: 32 }, { number: 33 }, { number: 34 },
{ number: 35 }, { number: 36 }, { number: 37 }, { number: 38 }
]);
// 选中的牙齿
const selectedTeeth = ref([]);
// 切换牙齿选择状态
const toggleTooth = (toothNumber) => {
const index = selectedTeeth.value.indexOf(toothNumber);
if (index === -1) {
selectedTeeth.value.push(toothNumber);
} else {
selectedTeeth.value.splice(index, 1);
}
};
// 清空选择
const clearSelection = () => {
selectedTeeth.value = [];
};
return {
upperTeeth,
lowerTeeth,
selectedTeeth,
toggleTooth,
clearSelection
};
}
}).mount('#app');
</script>
</body>
</html>
扫一扫
1539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
