feat(web-basics): enhance demo components with improved UI and functionality
- Update WebTechTriad component with clearer labels and better visual hierarchy - Improve Flexbox demo with axis visualization and more comprehensive controls - Enhance BoxModel demo with box-sizing toggle and real-world scenario - Refactor DomManipulator with expanded operations and code examples - Add consistent styling and responsive design across all components
This commit is contained in:
sanbuphy
@@ -1,39 +1,65 @@
|
||||
<template>
|
||||
<div class="box-demo">
|
||||
<div class="demo-header">
|
||||
<span class="icon">📦</span>
|
||||
<span class="title">CSS 盒模型</span>
|
||||
<span class="subtitle">理解元素尺寸的构成</span>
|
||||
<span class="subtitle">理解元素实际占用空间的构成</span>
|
||||
</div>
|
||||
|
||||
<div class="scenario">
|
||||
<strong>场景：</strong>你要做三个并排卡片，容器宽度 900px，每个卡片设 width: 200px。结果第三个掉下去了——为什么？
|
||||
</div>
|
||||
|
||||
<div class="main-area">
|
||||
<div class="left-panel">
|
||||
<div class="controls">
|
||||
<div class="control-row">
|
||||
<label>Padding</label>
|
||||
<label>width</label>
|
||||
<input type="range" min="60" max="150" v-model.number="contentW" />
|
||||
<span class="val">{{ contentW }}px</span>
|
||||
</div>
|
||||
<div class="control-row">
|
||||
<label>padding</label>
|
||||
<input type="range" min="0" max="30" v-model.number="padding" />
|
||||
<span class="val">{{ padding }}px</span>
|
||||
</div>
|
||||
<div class="control-row">
|
||||
<label>Border</label>
|
||||
<input type="range" min="0" max="20" v-model.number="border" />
|
||||
<label>border</label>
|
||||
<input type="range" min="0" max="15" v-model.number="border" />
|
||||
<span class="val">{{ border }}px</span>
|
||||
</div>
|
||||
<div class="control-row">
|
||||
<label>Margin</label>
|
||||
<input type="range" min="0" max="30" v-model.number="margin" />
|
||||
<label>margin</label>
|
||||
<input type="range" min="0" max="20" v-model.number="margin" />
|
||||
<span class="val">{{ margin }}px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-sizing-toggle">
|
||||
<span class="toggle-label">box-sizing:</span>
|
||||
<button
|
||||
:class="['toggle-btn', { active: boxSizing === 'content-box' }]"
|
||||
@click="boxSizing = 'content-box'"
|
||||
>
|
||||
content-box
|
||||
</button>
|
||||
<button
|
||||
:class="['toggle-btn', { active: boxSizing === 'border-box' }]"
|
||||
@click="boxSizing = 'border-box'"
|
||||
>
|
||||
border-box
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="visual">
|
||||
<div class="layer margin" :style="{ padding: margin + 'px' }">
|
||||
<span class="label" v-if="margin >= 10">Margin</span>
|
||||
<span class="layer-label" v-if="margin >= 8">margin</span>
|
||||
<div class="layer border" :style="{ borderWidth: border + 'px' }">
|
||||
<span class="label" v-if="border >= 8">Border</span>
|
||||
<span class="layer-label" v-if="border >= 5">border</span>
|
||||
<div class="layer padding" :style="{ padding: padding + 'px' }">
|
||||
<span class="label" v-if="padding >= 10">Padding</span>
|
||||
<div class="content">内容</div>
|
||||
<span class="layer-label" v-if="padding >= 8">padding</span>
|
||||
<div class="content" :style="{ width: contentW + 'px' }">
|
||||
content<br>{{ contentW }}px
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -41,21 +67,37 @@
|
||||
</div>
|
||||
|
||||
<div class="right-panel">
|
||||
<div class="result">
|
||||
<div class="result-row">
|
||||
<span class="result-label">总宽度：</span>
|
||||
<div class="result-card">
|
||||
<div class="result-header">
|
||||
<span class="result-title">实际占用宽度</span>
|
||||
<span class="result-value">{{ total }}px</span>
|
||||
</div>
|
||||
<div class="formula">= {{ margin }}×2 + {{ border }}×2 + {{ padding }}×2 + {{ contentW }}</div>
|
||||
<div class="formula">
|
||||
<template v-if="boxSizing === 'content-box'">
|
||||
{{ contentW }} + {{ padding }}×2 + {{ border }}×2 + {{ margin }}×2 = {{ total }}px
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ contentW }}px（已包含 padding 和 border） + {{ margin }}×2 = {{ total }}px
|
||||
</template>
|
||||
</div>
|
||||
<div class="result-hint" :class="{ warning: total * 3 > 900 }">
|
||||
<template v-if="total * 3 > 900">
|
||||
三个卡片需要 {{ total * 3 }}px，超出容器 900px，第三个会掉下去
|
||||
</template>
|
||||
<template v-else>
|
||||
三个卡片共 {{ total * 3 }}px，可以放下
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-block">
|
||||
<div class="code-title">CSS</div>
|
||||
<div class="code-content">
|
||||
<div class="line">.box {</div>
|
||||
<div class="line hl"> box-sizing: {{ boxSizing }};</div>
|
||||
<div class="line"> width: {{ contentW }}px;</div>
|
||||
<div class="line"> padding: {{ padding }}px;</div>
|
||||
<div class="line"> border: {{ border }}px solid;</div>
|
||||
<div class="line"> border: {{ border }}px solid #ccc;</div>
|
||||
<div class="line"> margin: {{ margin }}px;</div>
|
||||
<div class="line">}</div>
|
||||
</div>
|
||||
@@ -64,8 +106,9 @@
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心思想：</strong>元素实际占用宽度 = 内容宽 + padding×2 + border×2 + margin×2
|
||||
<strong>关键区别：</strong>
|
||||
<code>content-box</code>（默认）的 width 只是内容宽度；
|
||||
<code>border-box</code> 的 width 包含 content + padding + border。推荐全局设置 <code>box-sizing: border-box</code>。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -73,41 +116,66 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const contentW = 80
|
||||
const contentW = ref(100)
|
||||
const padding = ref(15)
|
||||
const border = ref(8)
|
||||
const margin = ref(15)
|
||||
const border = ref(5)
|
||||
const margin = ref(10)
|
||||
const boxSizing = ref('content-box')
|
||||
|
||||
const total = computed(
|
||||
() => margin.value * 2 + border.value * 2 + padding.value * 2 + contentW
|
||||
)
|
||||
const total = computed(() => {
|
||||
if (boxSizing.value === 'border-box') {
|
||||
return contentW.value + margin.value * 2
|
||||
}
|
||||
return contentW.value + padding.value * 2 + border.value * 2 + margin.value * 2
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-header .icon { font-size: 1.25rem; }
|
||||
.demo-header .title { font-weight: bold; font-size: 1rem; }
|
||||
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
|
||||
.demo-header .title {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.scenario {
|
||||
background: var(--vp-c-warning-soft);
|
||||
border: 1px solid var(--vp-c-warning-dimm);
|
||||
border-radius: 6px;
|
||||
padding: 0.6rem 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.scenario strong {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.main-area {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -138,9 +206,10 @@ const total = computed(
|
||||
|
||||
.control-row label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
min-width: 55px;
|
||||
color: var(--vp-c-text-1);
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.control-row input[type='range'] {
|
||||
@@ -153,18 +222,51 @@ const total = computed(
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-brand);
|
||||
min-width: 35px;
|
||||
min-width: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.box-sizing-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
padding: 0.3rem 0.6rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
font-size: 0.7rem;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.toggle-btn:hover { background: var(--vp-c-bg-soft); }
|
||||
.toggle-btn.active {
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
.visual {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 140px;
|
||||
}
|
||||
|
||||
.layer {
|
||||
@@ -176,90 +278,111 @@ const total = computed(
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.layer .label {
|
||||
.layer-label {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
opacity: 0.7;
|
||||
font-weight: 600;
|
||||
opacity: 0.6;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.margin {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px dashed var(--vp-c-divider);
|
||||
background: rgba(251, 191, 36, 0.1);
|
||||
border: 1px dashed rgba(251, 191, 36, 0.5);
|
||||
}
|
||||
.margin .label { color: var(--vp-c-text-3); }
|
||||
.margin .layer-label { color: #d97706; }
|
||||
|
||||
.border {
|
||||
background: var(--vp-c-brand-soft);
|
||||
background: rgba(14, 165, 233, 0.1);
|
||||
border-style: solid;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
.border .label { color: var(--vp-c-brand-1); }
|
||||
.border .layer-label { color: var(--vp-c-brand); }
|
||||
|
||||
.padding {
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px dashed var(--vp-c-divider);
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px dashed rgba(34, 197, 94, 0.5);
|
||||
}
|
||||
.padding .label { color: var(--vp-c-text-2); }
|
||||
.padding .layer-label { color: #16a34a; }
|
||||
|
||||
.content {
|
||||
background: var(--vp-c-brand);
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
width: 80px;
|
||||
font-weight: 600;
|
||||
font-size: 0.7rem;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.result {
|
||||
.result-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.6rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.result-row {
|
||||
.result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
.result-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.result-value {
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-brand);
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.formula {
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 0.25rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.result-hint {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-success);
|
||||
padding: 0.4rem 0.6rem;
|
||||
background: var(--vp-c-success-soft);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.result-hint.warning {
|
||||
color: var(--vp-c-warning);
|
||||
background: var(--vp-c-warning-soft);
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.6rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -267,31 +390,39 @@ const total = computed(
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.code-content {
|
||||
background: #0b1221;
|
||||
background: #1a1a2e;
|
||||
color: #e5e7eb;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.5;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.line { white-space: pre; }
|
||||
.hl {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.6rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-box .icon { flex-shrink: 0; }
|
||||
.info-box strong { color: var(--vp-c-text-1); }
|
||||
.info-box code {
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,15 +1,41 @@
|
||||
<template>
|
||||
<div class="flex-demo">
|
||||
<div class="demo-header">
|
||||
<span class="icon">📐</span>
|
||||
<span class="title">Flex 布局</span>
|
||||
<span class="subtitle">一行代码搞定排列对齐</span>
|
||||
<span class="title">Flexbox 布局</span>
|
||||
<span class="subtitle">通过调整参数观察元素排列方式的变化</span>
|
||||
</div>
|
||||
|
||||
<div class="axis-concept">
|
||||
<div class="concept-row">
|
||||
<div class="concept-item">
|
||||
<div class="concept-visual main">
|
||||
<span class="arrow">→</span>
|
||||
<span class="label">主轴</span>
|
||||
<span class="arrow">→</span>
|
||||
</div>
|
||||
<div class="concept-desc">
|
||||
<strong>主轴 (Main Axis)</strong>
|
||||
<span>元素排列的方向，由 flex-direction 决定</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="concept-item">
|
||||
<div class="concept-visual cross">
|
||||
<span class="arrow">↓</span>
|
||||
<span class="label">交叉轴</span>
|
||||
<span class="arrow">↓</span>
|
||||
</div>
|
||||
<div class="concept-desc">
|
||||
<strong>交叉轴 (Cross Axis)</strong>
|
||||
<span>垂直于主轴，用于对齐元素</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-area">
|
||||
<div class="controls">
|
||||
<div class="control-group">
|
||||
<label>方向</label>
|
||||
<label>flex-direction</label>
|
||||
<div class="chips">
|
||||
<button
|
||||
v-for="d in directions"
|
||||
@@ -22,7 +48,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label>对齐</label>
|
||||
<label>justify-content（主轴对齐）</label>
|
||||
<div class="chips">
|
||||
<button
|
||||
v-for="j in justifies"
|
||||
@@ -35,7 +61,20 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label>换行</label>
|
||||
<label>align-items（交叉轴对齐）</label>
|
||||
<div class="chips">
|
||||
<button
|
||||
v-for="a in aligns"
|
||||
:key="a.id"
|
||||
:class="['chip', { active: align === a.id }]"
|
||||
@click="align = a.id"
|
||||
>
|
||||
{{ a.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label>flex-wrap</label>
|
||||
<div class="chips">
|
||||
<button
|
||||
v-for="w in wraps"
|
||||
@@ -51,19 +90,24 @@
|
||||
|
||||
<div class="preview-area">
|
||||
<div class="canvas" :style="boxStyle">
|
||||
<div v-for="n in 4" :key="n" class="item">{{ n }}</div>
|
||||
<div v-for="n in 6" :key="n" class="item">{{ n }}</div>
|
||||
</div>
|
||||
<div class="axis-hint">
|
||||
<span class="axis-tag main">主轴方向: {{ dir === 'row' ? '水平 →' : '垂直 ↓' }}</span>
|
||||
<span class="axis-tag cross">交叉轴方向: {{ dir === 'row' ? '垂直 ↓' : '水平 →' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-row">
|
||||
<div class="code-label">CSS：</div>
|
||||
<code class="code-text">display: flex; flex-direction: {{ dir }}; justify-content: {{ justify }}; flex-wrap: {{ wrap }};</code>
|
||||
<div class="code-label">CSS</div>
|
||||
<code class="code-text">{{ cssCode }}</code>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心思想：</strong>Flex 让元素自动排列，就像书架上的书会自动对齐一样。
|
||||
<strong>记忆方法：</strong>
|
||||
<code>justify-content</code> 控制主轴方向的对齐（水平时左右，垂直时上下）；
|
||||
<code>align-items</code> 控制交叉轴方向的对齐。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -72,95 +116,188 @@
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const directions = [
|
||||
{ id: 'row', label: '水平' },
|
||||
{ id: 'column', label: '垂直' }
|
||||
{ id: 'row', label: 'row（水平）' },
|
||||
{ id: 'column', label: 'column（垂直）' }
|
||||
]
|
||||
const justifies = [
|
||||
{ id: 'flex-start', label: '靠左' },
|
||||
{ id: 'center', label: '居中' },
|
||||
{ id: 'space-between', label: '两端' }
|
||||
{ id: 'flex-start', label: 'flex-start' },
|
||||
{ id: 'center', label: 'center' },
|
||||
{ id: 'flex-end', label: 'flex-end' },
|
||||
{ id: 'space-between', label: 'space-between' },
|
||||
{ id: 'space-around', label: 'space-around' }
|
||||
]
|
||||
const aligns = [
|
||||
{ id: 'stretch', label: 'stretch' },
|
||||
{ id: 'flex-start', label: 'flex-start' },
|
||||
{ id: 'center', label: 'center' },
|
||||
{ id: 'flex-end', label: 'flex-end' }
|
||||
]
|
||||
const wraps = [
|
||||
{ id: 'nowrap', label: '不换行' },
|
||||
{ id: 'wrap', label: '换行' }
|
||||
{ id: 'nowrap', label: 'nowrap' },
|
||||
{ id: 'wrap', label: 'wrap' }
|
||||
]
|
||||
|
||||
const dir = ref('row')
|
||||
const justify = ref('flex-start')
|
||||
const align = ref('stretch')
|
||||
const wrap = ref('nowrap')
|
||||
|
||||
const boxStyle = computed(() => ({
|
||||
display: 'flex',
|
||||
flexDirection: dir.value,
|
||||
justifyContent: justify.value,
|
||||
alignItems: align.value,
|
||||
flexWrap: wrap.value,
|
||||
gap: '8px',
|
||||
minHeight: dir.value === 'column' ? '140px' : '60px',
|
||||
padding: '12px'
|
||||
minHeight: dir.value === 'column' ? '240px' : '100px'
|
||||
}))
|
||||
|
||||
const cssCode = computed(() => {
|
||||
const parts = ['display: flex']
|
||||
if (dir.value !== 'row') parts.push(`flex-direction: ${dir.value}`)
|
||||
if (justify.value !== 'flex-start') parts.push(`justify-content: ${justify.value}`)
|
||||
if (align.value !== 'stretch') parts.push(`align-items: ${align.value}`)
|
||||
if (wrap.value !== 'nowrap') parts.push(`flex-wrap: ${wrap.value}`)
|
||||
return parts.join('; ') + ';'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.flex-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .icon { font-size: 1.25rem; }
|
||||
.demo-header .title { font-weight: bold; font-size: 1rem; }
|
||||
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
|
||||
.demo-header .title {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.axis-concept {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.concept-row {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.concept-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.concept-visual {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.concept-visual.main {
|
||||
background: rgba(14, 165, 233, 0.15);
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.concept-visual.cross {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.concept-visual .arrow {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.concept-visual .label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.concept-desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.concept-desc strong {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.concept-desc span {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.main-area {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@media (max-width: 768px) {
|
||||
.main-area { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.chips {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.chip {
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.7rem;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
@@ -174,15 +311,16 @@ const boxStyle = computed(() => ({
|
||||
.preview-area {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
background-image: radial-gradient(var(--vp-c-divider) 1px, transparent 1px);
|
||||
background-size: 16px 16px;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.item {
|
||||
@@ -196,17 +334,44 @@ const boxStyle = computed(() => ({
|
||||
place-items: center;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.axis-hint {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.axis-tag {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.axis-tag.main {
|
||||
background: rgba(14, 165, 233, 0.15);
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.axis-tag.cross {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.code-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -214,27 +379,32 @@ const boxStyle = computed(() => ({
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.code-text {
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-1);
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.2rem 0.4rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.6rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-box .icon { flex-shrink: 0; }
|
||||
.info-box strong { color: var(--vp-c-text-1); }
|
||||
.info-box code {
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,48 +1,121 @@
|
||||
<template>
|
||||
<div class="dom-demo">
|
||||
<div class="demo-header">
|
||||
<span class="icon">🎯</span>
|
||||
<span class="title">DOM 操作</span>
|
||||
<span class="subtitle">用代码动态修改页面</span>
|
||||
<span class="title">DOM 操作演示</span>
|
||||
<span class="subtitle">通过 JavaScript 动态修改页面内容、样式和结构</span>
|
||||
</div>
|
||||
|
||||
<div class="main-area">
|
||||
<div class="left-panel">
|
||||
<div class="controls">
|
||||
<div class="field">
|
||||
<label>修改标题</label>
|
||||
<input v-model="title" placeholder="输入新标题" />
|
||||
<div class="operations">
|
||||
<div class="op-group">
|
||||
<div class="op-label">修改内容</div>
|
||||
<div class="op-row">
|
||||
<input v-model="titleText" placeholder="输入标题" class="input" />
|
||||
<button @click="updateTitle" class="btn">更新标题</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="op-group">
|
||||
<div class="op-label">修改样式</div>
|
||||
<div class="op-row">
|
||||
<button
|
||||
v-for="s in styles"
|
||||
:key="s.id"
|
||||
@click="currentStyle = s.id"
|
||||
:class="['btn-sm', { active: currentStyle === s.id }]"
|
||||
>
|
||||
{{ s.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="op-group">
|
||||
<div class="op-label">添加/删除元素</div>
|
||||
<div class="op-row">
|
||||
<button @click="addItem" class="btn">添加项目</button>
|
||||
<button @click="removeLastItem" class="btn btn-danger">删除最后</button>
|
||||
</div>
|
||||
</div>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" v-model="highlight" />
|
||||
高亮模式
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="card" :class="{ highlight }">
|
||||
<h2>{{ title }}</h2>
|
||||
<p>这里是段落说明，勾选高亮看看变化。</p>
|
||||
<button @click="toggleText">{{ buttonText }}</button>
|
||||
<div class="preview-card" :class="currentStyle">
|
||||
<h2 class="card-title">{{ titleText || '点击按钮更新标题' }}</h2>
|
||||
<p class="card-desc">这是一个演示 DOM 操作的卡片区域。</p>
|
||||
<ul class="card-list">
|
||||
<li v-for="(item, i) in items" :key="i">{{ item }}</li>
|
||||
<li v-if="items.length === 0" class="empty">（列表为空）</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-panel">
|
||||
<div class="code-block">
|
||||
<div class="code-title">JavaScript</div>
|
||||
<div class="code-title">对应的 JavaScript 代码</div>
|
||||
<div class="code-content">
|
||||
<div class="line">// 改内容</div>
|
||||
<div class="line">titleEl.textContent = '{{ title }}'</div>
|
||||
<div class="line"></div>
|
||||
<div class="line">// 切换 class</div>
|
||||
<div class="line">card.classList.toggle('highlight', {{ highlight }})</div>
|
||||
<template v-if="lastOp === 'title'">
|
||||
<div class="line comment">// 修改文本内容</div>
|
||||
<div class="line">const el = document.querySelector('.card-title')</div>
|
||||
<div class="line">el.textContent = '{{ titleText }}'</div>
|
||||
</template>
|
||||
<template v-else-if="lastOp === 'style'">
|
||||
<div class="line comment">// 切换 CSS 类</div>
|
||||
<div class="line">const card = document.querySelector('.preview-card')</div>
|
||||
<div class="line">card.className = 'preview-card {{ currentStyle }}'</div>
|
||||
</template>
|
||||
<template v-else-if="lastOp === 'add'">
|
||||
<div class="line comment">// 创建并添加新元素</div>
|
||||
<div class="line">const list = document.querySelector('.card-list')</div>
|
||||
<div class="line">const li = document.createElement('li')</div>
|
||||
<div class="line">li.textContent = '新项目 {{ items.length }}'</div>
|
||||
<div class="line">list.appendChild(li)</div>
|
||||
</template>
|
||||
<template v-else-if="lastOp === 'remove'">
|
||||
<div class="line comment">// 删除最后一个元素</div>
|
||||
<div class="line">const list = document.querySelector('.card-list')</div>
|
||||
<div class="line">const last = list.lastElementChild</div>
|
||||
<div class="line">if (last) last.remove()</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="line comment">// 点击左侧按钮查看对应代码</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="methods-card">
|
||||
<div class="methods-title">常用 DOM 方法</div>
|
||||
<div class="methods-list">
|
||||
<div class="method">
|
||||
<code>querySelector()</code>
|
||||
<span>按选择器查找元素</span>
|
||||
</div>
|
||||
<div class="method">
|
||||
<code>textContent</code>
|
||||
<span>获取/设置文本内容</span>
|
||||
</div>
|
||||
<div class="method">
|
||||
<code>classList</code>
|
||||
<span>操作元素的 CSS 类</span>
|
||||
</div>
|
||||
<div class="method">
|
||||
<code>createElement()</code>
|
||||
<span>创建新元素</span>
|
||||
</div>
|
||||
<div class="method">
|
||||
<code>appendChild()</code>
|
||||
<span>添加子元素</span>
|
||||
</div>
|
||||
<div class="method">
|
||||
<code>remove()</code>
|
||||
<span>删除元素</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心思想：</strong>DOM 是网页的"乐高积木"，JS 可以随时添加、删除、修改这些积木。
|
||||
<strong>注意：</strong>频繁操作 DOM 会影响性能。现代框架（Vue/React）使用虚拟 DOM 来优化这个过程——先在内存中计算差异，再批量更新真实 DOM。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -50,178 +123,307 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const title = ref('欢迎来到我的网站')
|
||||
const highlight = ref(false)
|
||||
const buttonText = ref('点我试试')
|
||||
const titleText = ref('欢迎学习 DOM')
|
||||
const currentStyle = ref('')
|
||||
const items = ref(['项目 1', '项目 2'])
|
||||
const lastOp = ref('')
|
||||
|
||||
const toggleText = () => {
|
||||
buttonText.value = buttonText.value === '点我试试' ? '再点一次' : '点我试试'
|
||||
const styles = [
|
||||
{ id: '', label: '默认' },
|
||||
{ id: 'highlight', label: '高亮' },
|
||||
{ id: 'dark', label: '深色' }
|
||||
]
|
||||
|
||||
const updateTitle = () => {
|
||||
lastOp.value = 'title'
|
||||
}
|
||||
|
||||
const addItem = () => {
|
||||
items.value.push(`新项目 ${items.value.length + 1}`)
|
||||
lastOp.value = 'add'
|
||||
}
|
||||
|
||||
const removeLastItem = () => {
|
||||
if (items.value.length > 0) {
|
||||
items.value.pop()
|
||||
}
|
||||
lastOp.value = 'remove'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dom-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .icon { font-size: 1.25rem; }
|
||||
.demo-header .title { font-weight: bold; font-size: 1rem; }
|
||||
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
|
||||
.demo-header .title {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.main-area {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@media (max-width: 768px) {
|
||||
.main-area { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.operations {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
.op-group {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.4rem 0.6rem;
|
||||
padding: 0.5rem 0.6rem;
|
||||
}
|
||||
|
||||
.field label {
|
||||
font-size: 0.8rem;
|
||||
.op-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 0.35rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.field input[type='text'] {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.85rem;
|
||||
outline: none;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
.op-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkbox input {
|
||||
accent-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.card {
|
||||
.input {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
padding: 0.35rem 0.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 4px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.35rem 0.6rem;
|
||||
border: 1px solid var(--vp-c-brand);
|
||||
border-radius: 4px;
|
||||
background: var(--vp-c-brand);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.card.highlight {
|
||||
border-color: var(--vp-c-warning);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background: var(--vp-c-bg-soft);
|
||||
.btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.95rem;
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.card button {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
padding: 0.35rem 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
transition: opacity 0.2s;
|
||||
font-size: 0.7rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.card button:hover { opacity: 0.9; }
|
||||
.btn-sm:hover {
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.btn-sm.active {
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.preview-card.highlight {
|
||||
border-color: var(--vp-c-warning);
|
||||
background: var(--vp-c-warning-soft);
|
||||
}
|
||||
|
||||
.preview-card.dark {
|
||||
background: #1a1a2e;
|
||||
border-color: #2d2d44;
|
||||
}
|
||||
|
||||
.preview-card.dark .card-title,
|
||||
.preview-card.dark .card-desc,
|
||||
.preview-card.dark .card-list {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 0 0 0.35rem 0;
|
||||
font-size: 0.95rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.card-list {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.card-list li {
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.card-list .empty {
|
||||
color: var(--vp-c-text-3);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.6rem;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.code-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.code-content {
|
||||
background: #0b1221;
|
||||
background: #1a1a2e;
|
||||
color: #e5e7eb;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.5;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.6;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.line { white-space: pre; }
|
||||
.line {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.methods-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.methods-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.methods-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.method {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.method code {
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.15rem 0.35rem;
|
||||
border-radius: 3px;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.method span {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.6rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-box .icon { flex-shrink: 0; }
|
||||
.info-box strong { color: var(--vp-c-text-1); }
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
<template>
|
||||
<div class="triad">
|
||||
<div class="demo-header">
|
||||
<span class="icon">🎭</span>
|
||||
<span class="title">三剑客协作</span>
|
||||
<span class="subtitle">同一段页面，切换看 HTML/CSS/JS 各自的作用</span>
|
||||
<span class="title">HTML / CSS / JavaScript 协作演示</span>
|
||||
<span class="subtitle">同一段页面，切换查看三者各自的作用</span>
|
||||
</div>
|
||||
|
||||
<div class="main-area">
|
||||
@@ -15,6 +14,7 @@
|
||||
:class="['mode-btn', { active: current === m.id }]"
|
||||
@click="current = m.id"
|
||||
>
|
||||
<span class="mode-icon">{{ m.icon }}</span>
|
||||
{{ m.label }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -43,7 +43,7 @@
|
||||
</div>
|
||||
|
||||
<div class="explain-section">
|
||||
<div class="explain-label">发生了什么</div>
|
||||
<div class="explain-label">执行过程</div>
|
||||
<ol class="steps">
|
||||
<li v-for="s in steps" :key="s">{{ s }}</li>
|
||||
</ol>
|
||||
@@ -52,8 +52,7 @@
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心思想：</strong>HTML 是骨架，CSS 是皮肤，JS 是大脑。三者分工明确，缺一不可。
|
||||
<strong>分工原则：</strong>HTML 定义结构（是什么），CSS 定义样式（长什么样），JavaScript 定义行为（能做什么）。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -62,9 +61,9 @@
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const modes = [
|
||||
{ id: 'html', label: 'HTML' },
|
||||
{ id: 'css', label: 'CSS' },
|
||||
{ id: 'js', label: 'JS' }
|
||||
{ id: 'html', label: 'HTML', icon: '结构' },
|
||||
{ id: 'css', label: 'CSS', icon: '样式' },
|
||||
{ id: 'js', label: 'JavaScript', icon: '行为' }
|
||||
]
|
||||
|
||||
const current = ref('html')
|
||||
@@ -72,9 +71,9 @@ const clicks = ref(0)
|
||||
const selectedPart = ref('h1')
|
||||
|
||||
const codeTitle = computed(() => {
|
||||
if (current.value === 'html') return 'HTML：定义结构'
|
||||
if (current.value === 'css') return 'CSS：定义样式'
|
||||
return 'JS：定义行为'
|
||||
if (current.value === 'html') return 'HTML 代码'
|
||||
if (current.value === 'css') return 'CSS 代码'
|
||||
return 'JavaScript 代码'
|
||||
})
|
||||
|
||||
const codeLines = computed(() => {
|
||||
@@ -87,12 +86,15 @@ const codeLines = computed(() => {
|
||||
}
|
||||
if (current.value === 'css') {
|
||||
return [
|
||||
{ key: 'h1', text: '.hero { color: #0ea5e9; font-size: 20px; }' },
|
||||
{ key: 'p', text: '.desc { color: #666; }' },
|
||||
{ key: 'btn', text: '.cta { background: #0ea5e9; color: #fff; }' }
|
||||
{ key: 'h1', text: '.hero {' },
|
||||
{ key: 'h1', text: ' color: #0ea5e9;' },
|
||||
{ key: 'h1', text: ' font-size: 20px;' },
|
||||
{ key: 'h1', text: '}' },
|
||||
{ key: 'btn', text: '.cta { background: #0ea5e9; }' }
|
||||
]
|
||||
}
|
||||
return [
|
||||
{ key: 'btn', text: "const btn = document.querySelector('.cta')" },
|
||||
{ key: 'btn', text: "btn.addEventListener('click', () => {" },
|
||||
{ key: 'btn', text: ' count++' },
|
||||
{ key: 'btn', text: " btn.textContent = '点我 (' + count + ')'" },
|
||||
@@ -102,12 +104,24 @@ const codeLines = computed(() => {
|
||||
|
||||
const steps = computed(() => {
|
||||
if (current.value === 'html') {
|
||||
return ['浏览器读取标签，知道"这是标题、这是按钮"', '按默认样式显示（所以看起来朴素）']
|
||||
return [
|
||||
'浏览器解析标签，识别内容类型',
|
||||
'h1 是标题，p 是段落，button 是按钮',
|
||||
'按默认样式渲染（此时看起来很朴素）'
|
||||
]
|
||||
}
|
||||
if (current.value === 'css') {
|
||||
return ['读取选择器，找到对应元素', '应用颜色、字号、间距等样式']
|
||||
return [
|
||||
'解析选择器，找到对应元素',
|
||||
'应用颜色、字号、间距等样式规则',
|
||||
'页面外观发生变化'
|
||||
]
|
||||
}
|
||||
return ['给按钮绑定点击事件', '点击时更新计数和文字']
|
||||
return [
|
||||
'通过选择器获取按钮元素',
|
||||
'注册 click 事件监听器',
|
||||
'点击时执行回调函数，更新计数'
|
||||
]
|
||||
})
|
||||
|
||||
const handleBtnClick = () => {
|
||||
@@ -119,28 +133,35 @@ const handleBtnClick = () => {
|
||||
<style scoped>
|
||||
.triad {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .icon { font-size: 1.25rem; }
|
||||
.demo-header .title { font-weight: bold; font-size: 1rem; }
|
||||
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
|
||||
.demo-header .title {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.main-area {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -152,24 +173,33 @@ const handleBtnClick = () => {
|
||||
.left-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.modes {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
flex: 1;
|
||||
padding: 0.4rem 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.mode-icon {
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.mode-btn:hover { background: var(--vp-c-bg-soft); }
|
||||
@@ -179,43 +209,62 @@ const handleBtnClick = () => {
|
||||
background: var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
.mode-btn.active .mode-icon {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.preview {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-right: 8px;
|
||||
font-weight: 800;
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hero { margin: 0; cursor: pointer; display: flex; align-items: center; font-size: 1rem; }
|
||||
.desc { margin: 0; color: var(--vp-c-text-2); cursor: pointer; display: flex; align-items: center; font-size: 0.9rem; }
|
||||
.hero {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.1rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.desc {
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-2);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.cta {
|
||||
width: fit-content;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.4rem 0.8rem;
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
background: var(--vp-c-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
@@ -225,68 +274,80 @@ const handleBtnClick = () => {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.preview.css .hero { color: var(--vp-c-brand); font-size: 1.1rem; }
|
||||
.preview.css .desc { color: var(--vp-c-text-2); }
|
||||
.preview.css .cta { background: var(--vp-c-brand); color: #fff; border-color: var(--vp-c-brand); }
|
||||
.preview.css .hero { color: var(--vp-c-brand); font-weight: 600; }
|
||||
.preview.css .cta {
|
||||
background: var(--vp-c-brand);
|
||||
color: #fff;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.preview.js .cta { background: #22c55e; color: #fff; border-color: #22c55e; }
|
||||
.preview.js { border-color: rgba(34, 197, 94, 0.4); }
|
||||
.preview.js .cta {
|
||||
background: #22c55e;
|
||||
color: #fff;
|
||||
border-color: #22c55e;
|
||||
}
|
||||
.preview.js { border-color: rgba(34, 197, 94, 0.3); }
|
||||
|
||||
.right-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.code-section, .explain-section {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.6rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.code-label, .explain-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #0b1221;
|
||||
background: #1a1a2e;
|
||||
color: #e5e7eb;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.5;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.6;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.line { padding-left: 0.25rem; }
|
||||
.hl {
|
||||
background: var(--vp-c-brand-dimm);
|
||||
background: rgba(14, 165, 233, 0.2);
|
||||
border-left: 2px solid var(--vp-c-brand);
|
||||
font-weight: 600;
|
||||
margin-left: -0.25rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.steps {
|
||||
margin: 0;
|
||||
padding-left: 1rem;
|
||||
padding-left: 1.25rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.steps li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.6rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-box .icon { flex-shrink: 0; }
|
||||
.info-box strong { color: var(--vp-c-text-1); }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user