Skip to content

GitLab

Commit b3fd7d50 authored by Administrator's avatar Administrator
Browse files

added sidebar; added class/style binding; added computed attribute

parent 5635e526
Hide whitespace changes
Inline Side-by-side
src/App.vue
View file @ b3fd7d50
......@@ -2,14 +2,67 @@
// import HelloWorld from './components/HelloWorld.vue'
// import TheWelcome from './components/TheWelcome.vue'
// import UserList from './components/UserList.vue';
import Tutorial_1_options from './components/Tutorial-1-options.vue';
import Tutorial_1_composition from './components/Tutorial-1-composition.vue';
import tutorial_1_options from './components/Tutorial-1-options.vue';
import tutorial_1_composition from './components/Tutorial-1-composition.vue';
import tutorial_2_composition from './components/Tutorial-2-composition.vue';
import sidebar from './components/Sidebar.vue';
import { store } from './components/Store.js';
import { menuList } from './components/Store.js';
const componentMap = {
tutorial_1_options,
tutorial_1_composition,
tutorial_2_composition
};
</script>
<template>
<body>
<!--<TheWelcome />-->
<Tutorial_1_options/>
<!--<Tutorial_1_composition/>-->
</body>
</template>
\ No newline at end of file
<div class="container">
<div class="sidebar">
<sidebar/>
</div>
<div class="main-content">
<!-- 主要内容区域 -->
<div v-for="menu in menuList" :index="menu.id" :key="menu.id">
<!--动态渲染组件-->
<div v-if="menu.id === store.currentId || store.currentId === 0"> <!--选择的是All，或者选择的是当前项-->
<component v-if="menu.id != 0" :is="componentMap[menu.elementName]"></component>
</div>
</div>
</div>
</div>
</template>
<style>
/* styles.css */
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
display: flex; /* 使用Flex布局 */
height: 100%;
}
.sidebar {
width: 200px; /* 设置侧边栏的固定宽度 */
background-color: #f5f5f5; /* 可选：背景颜色以区分 */
/* 以下样式让Sidebar靠左并保持固定 */
position: sticky; /* 或者使用fixed，根据你的具体需求 */
left: 0;
top: 0;
height: 100vh; /* 让Sidebar高度充满视口 */
overflow-y: auto; /* 如果内容超过高度，添加滚动条 */
}
.main-content {
/* 主内容区域将填充除了Sidebar之外的剩余空间 */
flex-grow: 1;
padding-left: 30px; /* 考虑到Sidebar的宽度和可能的边距，调整至适合的值 */
overflow-y: auto; /* 添加滚动条以防内容溢出 */
}
</style>
\ No newline at end of file
src/components/Sidebar.vue 0 → 100644
View file @ b3fd7d50
<!-- Sidebar.vue -->
<template>
<div class="sidebar">
<el-menu
:default-active="0"
class="el-menu-vertical-demo"
@select="handleSelect">
<el-menu-item
v-for="menu in menuList"
:index="String(menu.id)"
:key="menu.id"
:class="{ 'selected': menu.id == store.currentId }">
<i class="el-icon-menu"></i>{{ menu.name }}
</el-menu-item>
</el-menu>
</div>
</template>
<script setup>
import { store } from './Store.js';
import { menuList } from './Store.js';
const handleSelect = (key, keyPath) => {
store.currentId = Number(key);
console.log("keyPath = " + keyPath)
// 这里可以根据需要添加逻辑来处理页面切换
};
</script>
<style scoped>
/* 添加这个样式规则来定义选中时的背景颜色 */
.selected {
background-color: rgb(230, 240, 255); /* 或者你想要的任何颜色 */
color: black; /* 可选：改变文字颜色以提高可读性 */
}
</style>
\ No newline at end of file
src/components/Store.js 0 → 100644
View file @ b3fd7d50
import { reactive } from 'vue'
export const store = reactive({
currentId: 1
})
export const menuList = reactive([
{
id: 0,
name: "All",
elementName: "All"
},
{
id: 1,
name: "Tutorial-1-options",
elementName: "tutorial_1_options"
},
{
id: 2,
name: "Tutorial-1-composition",
elementName: "tutorial_1_composition"
},
{
id: 3,
name: "Tutorial-2-composition",
elementName: "tutorial_2_composition"
}
])
\ No newline at end of file
src/components/Tutorial-1-composition.vue
View file @ b3fd7d50
<template>
<hr style="height: 30px;
border: 0;
box-shadow: inset 0 30px 30px -30px darkblue;">
<H1>
Tutorial-1-composition
</H1>
<br>
<!-- 文本插值演示({{ variable }}) -->
<h3>
<span v-text="textInsertDemo"></span>
......@@ -7,8 +14,7 @@
<label>
输入：
</label>
<input id=input type="text">
</input>
<input id=input2 type="text" value="composition(组合式)"/>
<button v-on:click="onClick" >
点击生成文本插值
</button>
......@@ -64,6 +70,7 @@
<div v-bind:id="idFunction()">
{{ bindFunction() }}
</div>
<br>
</template>
......@@ -78,6 +85,7 @@ export default {
// 定义响应式变量，和唯一的ref绑定
const msg = ref(0)
msg.value = "composition(组合式)"
const textInsertDemo = ref("文本插值演示({{ 变量 }})")
// 原始HTML演示
const htmlStr = ref("<span style='color: red'>This should be red.</span>")
......@@ -92,7 +100,7 @@ export default {
// 定义方法
function onClick() {
this.msg = "Hello " + document.getElementById("input").value
this.msg = "Hello " + document.getElementById("input2").value
}
function onToggleDisplay() {
......
src/components/Tutorial-1-options.vue
View file @ b3fd7d50
<template>
<hr style="height: 30px;
border: 0;
box-shadow: inset 0 30px 30px -30px darkblue;">
<H1>
Tutorial-1-options
</H1>
<br>
<!-- 文本插值演示({{ variable }}) -->
<h3>
<span v-text="textInsertDemo"></span>
......@@ -7,8 +14,7 @@
<label>
输入：
</label>
<input id=input type="text">
</input>
<input id=input1 type="text" value="options(选项式)"/>
<button v-on:click="onClick" >
点击生成文本插值
</button>
......@@ -64,6 +70,7 @@
<div v-bind:id="idFunction()">
{{ bindFunction() }}
</div>
<br>
</template>
......@@ -74,7 +81,7 @@ export default {
data() {
return {
// 文本插值演示
"msg": "",
"msg": "options(选项式)",
"textInsertDemo": "文本插值演示({{ 变量 }})",
// 原始HTML演示
"htmlStr": "<span style='color: red'>This should be red.</span>",
......@@ -90,7 +97,7 @@ export default {
methods: {
// 文本插值演示
onClick() {
this.msg = "Hello " + document.getElementById("input").value
this.msg = "Hello " + document.getElementById("input1").value
},
// Attribute 绑定
onToggleDisplay() {
......@@ -125,7 +132,7 @@ export default {
width: 50%; /* 改变宽度为50%，实现半条线的效果 */
border: none; /* 移除默认边框 */
height: 1px; /* 设置线条的高度 */
background-color: black; /* 设置线条颜色 */
background-color: rgb(0, 0, 0); /* 设置线条颜色 */
float: left;
}
</style>
src/components/Tutorial-2-composition.vue 0 → 100644
View file @ b3fd7d50
<template>
<hr style="height: 30px;
border: 0;
box-shadow: inset 0 30px 30px -30px darkblue;">
<H1>
Tutorial-2-composition
</H1>
<!-- 计算属性 -->
<h3>
<span>计算属性</span>
</h3>
<div>
<span>Has published books:</span>
<span>{{ publishedBooksMessage }}</span>
</div>
<br>
<hr>
<!-- 绑定 HTML class -->
<h3>
<span>绑定 HTML class</span>
</h3>
<div>
<button @click="toggleActive">
Toggle Active
</button>
<button @click="toggleHasError">
Toggle Has Error
</button>
</div>
<div class="static" :class="{ active: isActive, 'text-danger': hasError }">
<span>检查绑定 HTML class结果</span>
</div>
<br>
<hr>
<!-- 绑定 Style -->
<h3>
<span>绑定 Style</span>
</h3>
<div>
<div>
<label>输入字体大小</label>
<input id="inputFontSize" type="number" min="10" max="40"/>
<button @click="changeFontSize">修改字体大小</button>
</div>
<div :style="{ 'font-size': fontSize + 'px' }">
检查绑定style结果
</div>
</div>
<br>
<hr>
<!-- v-for 不绑定 id 的问题 -->
<h3>
<span>v-for 不绑定 id 的问题</span>
</h3>
<div>
<input type="checkbox" v-model="isChecked.result">
v-for中是否添加key
</input>
</div>
<div>
<button @click="shuffle">Shuffle</button>
<output>不加id，只刷新姓名的顺序，input框中的顺序不刷新</output>
<ul>
<li v-for="item in items" :key="isChecked.result? item.id : Undefined">
<input/>
{{ item.name }}
</li>
</ul>
</div>
<br>
</template>
<script>
import {ref} from "vue"
import {reactive} from "vue"
import {computed} from "vue"
export default {
// 固定名称的函数，在生命周期钩子中自动执行
setup() {
// 定义变量
// 用于计算属性
const author = reactive({
name: "John Doe",
books: [
"Vue 2 - Advanced Guide",
"Vue 3 - Basic Guide",
"Vue 4 - The Mystery"
]
})
// 用于绑定 HTML class
const isActive = ref(true)
const hasError = ref(false)
// 用于绑定 Style
const fontSize = ref(24)
// 用于展示v-for 不绑定 id 的问题
var items = reactive([
{
id: 1,
name: 'Alice'
},
{
id: 2,
name: 'Bob'
},
{
id: 3,
name: 'Charlie'
}
])
const isChecked = reactive({
result: true
})
// 定义计算属性
const publishedBooksMessage = computed(() => {
return author.books.length > 0 ? "Yes" : "No"
})
// 定义函数
function toggleActive() {
isActive.value = !isActive.value
}
function toggleHasError() {
hasError.value = !hasError.value
}
function changeFontSize() {
fontSize.value = document.getElementById("inputFontSize").value
}
function shuffle() {
items = items.sort(() => Math.random() - 0.5);
}
// 返回变量和函数，暴露给模板使用
return {
// 变量
author,
isActive,
hasError,
fontSize,
items,
isChecked,
// 计算属性
publishedBooksMessage,
// 函数
toggleActive,
toggleHasError,
changeFontSize,
shuffle
}
}
}
</script>
<style>
.half-line {
width: 50%; /* 改变宽度为50%，实现半条线的效果 */
border: none; /* 移除默认边框 */
height: 0.5px; /* 设置线条的高度 */
background-color: grey; /* 设置线条颜色 */
float: left;
}
.text-danger {
color: red; /* 或其他你希望用来表示危险或错误的颜色 */
}
.active {
/* 你可以在这里定义活动状态下的样式，比如改变背景色、字体颜色等 */
font-size: 30px;
}
</style>
src/main.js
View file @ b3fd7d50
......@@ -3,11 +3,10 @@
import { createApp } from 'vue'
import App from './App.vue'
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'; // 引入Element Plus的样式
const app = createApp(App)
// 挂载ElementPlus
app.use(ElementPlus);
app.mount('#app')
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment