摘要：学习Vue3学习vue3,学习使用vue3开发一个组件库,学习使用vue3开发一个项目开

前言

通过前面的准备, 我们已经有了基本的zdpui的框架, 接下来, 我们就使用实战的方式, 一边做一些实战项目, 一边积累的完善组件.

比如接下来, 我们就来做一个看板项目,这也是我一直想做的一个项目.

基本卡片

首先, 封装一个基本的卡片.

学习Vue3

学习vue3,学习使用vue3开发一个组件库,学习使用vue3开发一个项目

开始时间: 2025-01-01 12:33:33

状态:
未开始

卡片列表

初步封装了一个状态卡片组件:

{{ props.title }}

{{ props.content }}

开始时间: {{ props.date }}

{{ statusText }}

然后封装了一个卡片列表组件.

{{ props.title }}

:title="v.name"
:status="v.status"
:content="v.content"
:date="v.start_time"
/>






.plan {
background: linear-gradient(-45deg, #007BFF, #00BFFF, #1E90FF, #4169E1);
background-size: 400%400%;
animation: gradientAnimation 15s ease infinite;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 20px;
color: white;
}

@keyframes gradientAnimation {
0% {
background-position: 050%;
}
50% {
background-position: 100%50%;
}
100% {
background-position: 050%;
}
}

.title {
margin-bottom: 30px;
font-size: 2em;
text-shadow: 2px2px4pxrgba(0, 0, 0, 0.5);
animation: fadeIn 1s ease-in-out;
}

.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 80%;
}

/* 如果你想为 ZdpStatusCard1 组件添加一些通用的样式，可以添加以下内容，假设 ZdpStatusCard1 组件的最外层元素是一个 div */
.cardsdiv {
margin: 20px;
transition: transform 0.3s ease-in-out;
}

.cardsdiv:hover {
transform: translateY(-10px);
}

最后在App.vue里面使用.

import ZdpStatusCard1 from"@/ZdpStatusCard1.vue";
import ZdpStatusCardList1 from"@/ZdpStatusCardList1.vue";

const tasks =
for (let i = 1; i < 60; i += 4) {
tasks.push({
id: i,
name: '学习Vue3',
content: "学习Vue3基础语法, 包括组件、路由、状态管理等",
status: 'init',
start_time: '2025-05-01 12:00:00',
})
tasks.push({
id: i + 1,
name: '学习Vue3',
content: ,
status: 'start',
start_time: ,
})
tasks.push({
id: i + 2,
name: '学习Vue3',
content: ,
status: 'finish',
start_time: ,
})
tasks.push({
id: i + 3,
name: '学习Vue3',
content: ,
status: 'delete',
start_time: ,
})
}



:tasks="tasks"
/>

此时的页面效果如下.

在这里插入图片描述

修改状态

当我们点击卡片的时候, 可以弹出一个对话框, 让用户修改状态.

在这里插入图片描述

点击取消就是不修改, 点击确定则执行修改.

此时App.vue完整代码如下.

import ZdpStatusCardList1 from"@/ZdpStatusCardList1.vue";
import ZdpModal1 from"@/zdpui/components/ZdpModal1.vue";
import {reactive, ref} from"vue";
import ZdpSelect1 from"@/zdpui/components/ZdpSelect1.vue";

const tasks =
for (let i = 1; i < 60; i += 4) {
tasks.push({
id: i,
name: '学习Vue3',
content: "学习Vue3基础语法, 包括组件、路由、状态管理等",
status: 'init',
start_time: '2025-05-01 12:00:00',
})
tasks.push({
id: i + 1,
name: '学习Vue3',
content: ,
status: 'start',
start_time: ,
})
tasks.push({
id: i + 2,
name: '学习Vue3',
content: ,
status: 'finish',
start_time: ,
})
tasks.push({
id: i + 3,
name: '学习Vue3',
content: ,
status: 'delete',
start_time: ,
})
}
const onTaskClick = (task) => {
console.log(task)
modalShow.value = true
}
const formData = reactive({
status: "init",
});
const modalShow = ref(false)
const options = [
{label: "未开始", value: "init"},
{label: "进行中", value: "start"},
{label: "已完成", value: "finish"},
{label: "已删除", value: "delete"},
{label: "直接移除", value: "rel_delete"},
]
const on​ChangeTaskStatus = =>{
console.log("修改任务状态", formData.status)
modalShow.value = false
}



:tasks="tasks"
@click="onTaskClick"
/>
:show="modalShow"
@confirm="on​ChangeTaskStatus"
@close="modalShow = false"
>
label="状态"
v-model="formData.status"
:options="options"
/>

但是此时我们并没有真正的修改, 我们应该查找到要修改的任务, 修改其状态.

const on​ChangeTaskStatus = =>{
console.log("修改任务状态", formData.status)
modalShow.value = false
if(formData.status === "rel_delete"){
array.remove(tasks.value, editIndex.value)
return
}
tasks.value[editIndex.value].status = formData.status
formData.status = "init"
}

封装组合式API

这个也可以封装成组合式API.

import {reactive, ref} from"vue";
import array from"@/zdpui/js/array.js";

const useTaskStatus = (tasks, apiUpdate = null, apiDelete = null) => {
// 编辑任务索引
const editIndex = ref(null)
// 编辑任务
const editTask = ref(null)
// 表单数据
const formData = reactive({
status: "init", // init start finish delete rel_delete
});
// 点击任务
const onTaskClick = (index, task) => {
modalShow.value = true
editIndex.value = index
editTask.value = task
formData.status = task.status
}
// 弹窗显示
const modalShow = ref(false)
// 下拉框选项列表
const options = [
{label: "未开始", value: "init"},
{label: "进行中", value: "start"},
{label: "已完成", value: "finish"},
{label: "已删除", value: "delete"},
{label: "直接移除", value: "rel_delete"},
]
// 点击确认修改任务状态
const on​ChangeTaskStatus = async => {
modalShow.value = false
if (formData.status === "rel_delete") {
array.remove(tasks.value, editIndex.value)
if (apiDelete) await apiDelete(tasks.value[editIndex.value])
} else {
tasks.value[editIndex.value].status = formData.status
if (apiUpdate) await apiUpdate(tasks.value[editIndex.value])
}
formData.status = "init"
}

return {
editIndex,
editTask,
formData,
onTaskClick,
modalShow,
options,
on​ChangeTaskStatus,
}
}

exportdefault {
useTaskStatus,
}

此时App.vue代码已经很少了.

import ZdpStatusCardList1 from"@/zdpui/components/ZdpStatusCardList1.vue";
import ZdpModal1 from"@/zdpui/components/ZdpModal1.vue";
import {reactive, ref} from"vue";
import ZdpSelect1 from"@/zdpui/components/ZdpSelect1.vue";
import status from"@/zdpui/compsable/status.js";

const tasks = ref()
for (let i = 1; i < 60; i += 4) {
tasks.value.push({
id: i,
name: `学习Vue3${i}`,
content: "学习Vue3基础语法, 包括组件、路由、状态管理等",
status: 'init',
start_time: '2025-05-01 12:00:00',
})
tasks.value.push({
id: i + 1,
name: `学习Vue3${i + 1}`,
content: ,
status: 'start',
start_time: ,
})
tasks.value.push({
id: i + 2,
name: `学习Vue3${i + 2}`,
content: ,
status: 'finish',
start_time: ,
})
tasks.value.push({
id: i + 3,
name: `学习Vue3${i + 3}`,
content: ,
status: 'delete',
start_time: ,
})
}

const apiUpdate = null
const apiDelete = null
const {
formData,
onTaskClick,
modalShow,
options,
on​ChangeTaskStatus,
} =status.useTaskStatus(tasks, apiUpdate, apiDelete)



:tasks="tasks"
@click="onTaskClick"
/>
:show="modalShow"
@confirm="on​ChangeTaskStatus"
@close="modalShow = false"
>
label="状态"
v-model="formData.status"
:options="options"
/>

不过我感觉还有优化空间, 就是这个任务列表. 任务列表的数据理论上应该是从后端动态生成的, 如果没有就用前端的模拟数据. 加载过程中应该也要有加载中的效果.

模拟任务列表接口

// 模拟获取所有的任务
const mockStatusGetAll = =>{
returnnewPromise((resolve, reject) => {
setTimeout( => {
try {
let tasks =
for (let i = 1; i < 30; i += 4) {
tasks.push({
id: i,
name: `学习Vue3${i}`,
content: "学习Vue3基础语法, 包括组件、路由、状态管理等",
status: 'init',
start_time: '2025-05-01 12:00:00',
})
tasks.push({
id: i + 1,
name: `学习Vue3${i + 1}`,
content: ,
status: 'start',
start_time: ,
})
tasks.push({
id: i + 2,
name: `学习Vue3${i + 2}`,
content: ,
status: 'finish',
start_time: ,
})
tasks.push({
id: i + 3,
name: `学习Vue3${i + 3}`,
content: ,
status: 'delete',
start_time: ,
})
}
resolve(tasks);
} catch (error) {
reject(error);
}
}, 1000); // 模拟 1 秒的延迟
});
}

exportdefault {
mockStatusGetAll,
}

加载中状态

经过一番努力以后, 加载中的状态也实现了.

在这里插入图片描述

最终App.vue的代码如下.

import ZdpStatusCardList1 from"@/zdpui/components/ZdpStatusCardList1.vue";
import ZdpModal1 from"@/zdpui/components/ZdpModal1.vue";
import {onMounted} from"vue";
import ZdpSelect1 from"@/zdpui/components/ZdpSelect1.vue";
import status from"@/zdpui/compsable/status.js";
import mockStatus from"@/zdpui/mock/status.js";

const apiGetAll = mockStatus.mockStatusGetAll
const apiUpdate = null
const apiDelete = null
const {
tasks,
loading,
loadData,
} = status.useTaskList(apiGetAll)
const {
formData,
onTaskClick,
modalShow,
options,
on​ChangeTaskStatus,
} = status.useTaskStatus(tasks, apiUpdate, apiDelete)

onMounted(async => {
await loadData
})



:tasks="tasks"
:loading="loading"
@click="onTaskClick"
/>
:show="modalShow"
@confirm="on​ChangeTaskStatus"
@close="modalShow = false"
>
label="状态"
v-model="formData.status"
:options="options"
/>

此时整体效果看上去也还不错.

在这里插入图片描述

总结

整体而言, 这个计划看板的案例比想象中简单了很多.

整体风格还算比较酷炫.

暂时能用就很棒了, 后面结合fastapi还有zdppy等其他框架打通前后端, 就能够成为一个不错的看板项目了.

宝子们，我在 Python 的世界里摸爬滚打十余载，积累了不少心得体会。如今想把这些年的经验和知识毫无保留地分享给有缘的小伙伴。要是你对 Python 学习感兴趣，欢迎来试听一二，也可以随时在评论区留言或者私信我，咱们一起探讨，共同进步，开启 Python 学习的奇妙之旅！

人生苦短, 我用Python, 坚持每天学习, 坚持每天进步一点点...

#深度好文计划#

来源：晓霞科技观