5. 创建一个栅栏布局组件-DeepSeek辅助编程

news/2025/3/17 11:01:32/文章来源:https://www.cnblogs.com/terry841119/p/18776408
在deepseek中输入:
创建一个vue组件
组件实现栅栏布局的功能

 

deepseek返回的代码:
Row.vue
<template><div class="grid-row":style="rowStyle":class="rowClass"><slot></slot></div>
</template><script setup>
import { computed, provide } from 'vue'const props = defineProps({gutter: {type: [Number, Array],default: 0},justify: {type: String,default: 'start',validator: v => ['start', 'end', 'center', 'space-around', 'space-between'].includes(v)},align: {type: String,default: 'top',validator: v => ['top', 'middle', 'bottom'].includes(v)},wrap: {type: Boolean,default: true}
})// 提供 gutter 给子组件
provide('gridGutter', computed(() => {if (Array.isArray(props.gutter)) {return { x: props.gutter[0] || 0, y: props.gutter[1] || 0 }}return { x: props.gutter, y: props.gutter }
}))const rowStyle = computed(() => {const gutter = props.gutterif (Array.isArray(gutter)) {return { marginLeft: `-${gutter[0]/2}px`,marginRight: `-${gutter[0]/2}px`}}return { marginLeft: `-${gutter/2}px`,marginRight: `-${gutter/2}px`}
})const rowClass = computed(() => [`justify-${props.justify}`,`align-${props.align}`,{ 'nowrap': !props.wrap }
])
</script><style scoped>
.grid-row {display: flex;flex-wrap: wrap;box-sizing: border-box;
}/* 水平排列方式 */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-space-around { justify-content: space-around; }
.justify-space-between { justify-content: space-between; }/* 垂直对齐方式 */
.align-top { align-items: flex-start; }
.align-middle { align-items: center; }
.align-bottom { align-items: flex-end; }.nowrap { flex-wrap: nowrap; }
</style>

 

Col.vue
<template><div class="grid-col":class="colClass":style="colStyle"><slot></slot></div>
</template><script setup>
import { inject, computed } from 'vue'const props = defineProps({span: {type: Number,default: 24,validator: v => v >= 0 && v <= 24},offset: {type: Number,default: 0,validator: v => v >= 0 && v <= 24},xs: [Number, Object],sm: [Number, Object],md: [Number, Object],lg: [Number, Object],xl: [Number, Object]
})const gutter = inject('gridGutter')// 生成响应式 class
const colClass = computed(() => {const classes = []const breakpoints = { xs: 'xs', sm: 'sm', md: 'md', lg: 'lg', xl: 'xl' }Object.keys(breakpoints).forEach(breakpoint => {if (props[breakpoint]) {if (typeof props[breakpoint] === 'number') {classes.push(`col-${breakpoint}-${props[breakpoint]}`)} else if (typeof props[breakpoint] === 'object') {classes.push(`col-${breakpoint}-${props[breakpoint].span}`,`offset-${breakpoint}-${props[breakpoint].offset || 0}`)}}})return classes
})// 计算列样式
const colStyle = computed(() => ({paddingLeft: `${gutter.value.x / 2}px`,paddingRight: `${gutter.value.x / 2}px`,paddingTop: `${gutter.value.y / 2}px`,paddingBottom: `${gutter.value.y / 2}px`
}))// 基础宽度计算
const baseWidth = computed(() => (props.span / 24) * 100 + '%')
const offsetWidth = computed(() => (props.offset / 24) * 100 + '%')
</script><style scoped>
.grid-col {box-sizing: border-box;width: v-bind(baseWidth);margin-left: v-bind(offsetWidth);
}/* 响应式断点 */
@media (max-width: 575px) {.col-xs-0 { display: none; }@for $i from 1 through 24 {.col-xs-#{$i} { width: ($i / 24) * 100%; }.offset-xs-#{$i} { margin-left: ($i / 24) * 100%; }}
}@media (min-width: 576px) {.col-sm-0 { display: none; }@for $i from 1 through 24 {.col-sm-#{$i} { width: ($i / 24) * 100%; }.offset-sm-#{$i} { margin-left: ($i / 24) * 100%; }}
}@media (min-width: 768px) {.col-md-0 { display: none; }@for $i from 1 through 24 {.col-md-#{$i} { width: ($i / 24) * 100%; }.offset-md-#{$i} { margin-left: ($i / 24) * 100%; }}
}@media (min-width: 992px) {.col-lg-0 { display: none; }@for $i from 1 through 24 {.col-lg-#{$i} { width: ($i / 24) * 100%; }.offset-lg-#{$i} { margin-left: ($i / 24) * 100%; }}
}@media (min-width: 1200px) {.col-xl-0 { display: none; }@for $i from 1 through 24 {.col-xl-#{$i} { width: ($i / 24) * 100%; }.offset-xl-#{$i} { margin-left: ($i / 24) * 100%; }}
}
</style>

 

调用的代码
<template><Row :gutter="20"><!-- 基础用法 --><Col :span="12"><div class="demo">50% 宽度</div></Col><Col :span="12"><div class="demo">50% 宽度</div></Col><!-- 响应式布局 --><Col :xs="24" :sm="12" :md="8" :lg="6"><div class="demo">响应式列</div></Col><!-- 带偏移量 --><Col :span="8" :offset="4"><div class="demo">偏移列</div></Col><!-- 混合配置 --><Col :span="6" :md="{ span: 8, offset: 2 }"><div class="demo">复杂配置</div></Col></Row>
</template><script setup>
import { Row, Col } from '@/components/Grid'
</script><style>
.demo {background: #f0f2f5;height: 100px;display: flex;align-items: center;justify-content: center;
}
</style>

这里会碰到一个错误

ERROR in ./src/components/Grid/TCol.vue?vue&type=style&index=0&id=be77a196&scoped=true&lang=css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/Grid/TCol.vue?vue&type=style&index=0&id=be77a196&scoped=true&lang=css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError(12:17) D:\xxx\Demo\my-vue-project\src\components\Grid\TCol.vue Unknown word $i10 |     .col-xs-0 { display: none; }11 |     @for $i from 1 through 24 {
> 12 |       .col-xs-#{$i} { width: ($i / 24) * 100%; }|                 ^13 |       .offset-xs-#{$i} { margin-left: ($i / 24) * 100%; }14 |     }@ ./node_modules/vue-style-loader/index.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/Grid/TCol.vue?vue&type=style&index=0&id=be77a196&scoped=true&lang=css 4:14-360 15:3-20:5 16:22-368@ ./src/components/Grid/TCol.vue?vue&type=style&index=0&id=be77a196&scoped=true&lang=css 1:0-424 1:0-424@ ./src/components/Grid/TCol.vue 5:0-75@ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&setup=true&lang=js 9:0-50 67:6-10@ ./src/App.vue?vue&type=script&setup=true&lang=js 1:0-200 1:0-200 1:201-390 1:201-390@ ./src/App.vue 2:0-65 3:0-60 3:0-60 6:49-55@ ./src/main.js 2:0-28 3:10-13webpack compiled with 1 error

 

可以继续询问deepseek
报错 D:\xxx\Demo\my-vue-project\src\components\Grid\TCol.vue Unknown word $i 如何解决
deepseek返回:
安装 Sass 预处理器:npm install sass sass-loader --save-dev
替换col.vue的样式
<style lang="scss" scoped>
.grid-col {box-sizing: border-box;width: v-bind(baseWidth);margin-left: v-bind(offsetWidth);
}/* 响应式断点 */
@mixin generate-col($breakpoint) {@for $i from 0 through 24 {.col-#{$breakpoint}-#{$i} {width: ($i / 24) * 100%;}.offset-#{$breakpoint}-#{$i} {margin-left: ($i / 24) * 100%;}}
}@media (max-width: 575px) {@include generate-col('xs');.col-xs-0 { display: none; }
}@media (min-width: 576px) {@include generate-col('sm');.col-sm-0 { display: none; }
}@media (min-width: 768px) {@include generate-col('md');.col-md-0 { display: none; }
}@media (min-width: 992px) {@include generate-col('lg');.col-lg-0 { display: none; }
}@media (min-width: 1200px) {@include generate-col('xl');.col-xl-0 { display: none; }
}
</style>

 

运行之后可以得到结果
0
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/900288.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

突破卡脖子工程:6大信创项目管理平台横向测评

随着信息技术的快速发展,信创项目管理平台在推动我国信息技术创新和产业发展方面发挥着重要作用。为了帮助读者更好地了解和选择适合的信创项目管理平台,本文对 6 大信创项目管理平台进行了横向测评。 禅道——信创国产化项目管理解决方案 禅道是一款国产的项目管理软件,禅道…

夜莺监控如何对接飞书、飞书卡片发送告警

新版通知规则的介绍文章:夜莺监控巨大革新:抽象出通知规则,增强告警通知的灵活性 新版通知规则对接钉钉:夜莺监控 v8.0 新版通知规则 | 对接钉钉告警 新版通知规则对接企微:夜莺监控 v8.0 新版通知规则 | 对接企微告警本文对背景信息不做额外描述了,大家一定要先看看上面…

网络攻防实验三

1.实验内容 (1)动手实践tcpdump 使用tcpdump开源软件对在本机上访问www.tianya.cn网站过程进行嗅探,回答问题:你在访问www.tianya.cn网站首页时,浏览器将访问多少个Web服务器?他们的IP地址都是什么? (2)动手实践Wireshark 使用Wireshark开源软件对在本机上以TELNET方式…

Debian:apt-get命令汇总

apt-get命令 是Debian Linux发行版中的APT软件包管理工具。所有基于Debian的发行(常见的 10 个基于 Debian 的 Linux 发行版)都使用这个包管理系统。deb包可以把一个应用的文件包在一起,大体就如同Windows上的安装文件。语法 apt-get [OPTION] PACKAGE 选项 apt-get install…

Edge浏览器的设备仿真模式下显示鼠标指针

在使用Edge浏览器进行网页开发时,设备仿真模式是一个非常有用的工具,它可以帮助开发者模拟不同设备上的用户体验。但在设备仿真模式下,鼠标指针会显示为一个圆形触摸指示器,而不是我们熟悉的鼠标箭头,这可能会对精确测试鼠标交互造成影响。 改变方法 在设备仿真工具栏中,…

openmanus 代码分析 #2 - agent classes

根据你提供的 agent 目录下各个类的信息,下面是对应的 PlantUML 代码,用于绘制类图展示这些类之间的关系:@startuml定义抽象基类 abstract class BaseAgent {+ name: str+ description: Optional[str]+ system_prompt: Optional[str]+ next_step_prompt: Optional[str]+ l…

实践四:数据模型与数据库

实践四:数据模型与数据库 内容概述:本节课我们将引入数据模型(model),通过创建数据模型和数据表,我们就可以将信息存储在数据库中,并将数据库中的信息呈现在页面上。 1. 在完成实践一、实践二、实践三的基础上开始本项目,进入激活虚拟环境。pipenv shel提示:接下来我们…

clickhouse 开启认证 SQL 方式

ClickHouse 访问控制 RBAC 用户账户:包含身份信息、权限、允许的主机、角色和设置。 角色:权限容器,可分配给用户或其他角色。 行策略:定义表中行的可见性。 设置配置文件:集中管理用户/角色的配置参数。 配额:限制资源使用(如查询次数、内存)。 权限层级 权限按层级划…

No.66 Vue---Vue引入路由配置、路由传递参数、嵌套路由配置

一、Vue引入路由配置在Vue中,我们可以通过 vue-router 路由管理页面之间的关系 Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举.1.1 在vue中引入路由 第一步:安装路由npm install -save vue-router第二步:配置独立的路由…

开源!Django-Vue3-Admin的Python后台管理系统

DjangoAdmin 是一个基于 Django + Vue3 的前后端分离的后台管理系统,采用了最新的前后端技术栈,内置了丰富的功能模块,可以帮助开发者快速搭建企业级中后台产品。Django-Vue3-Admin 项目简介 Django-Vue3-Admin 是一个基于 Django + Vue3 的前后端分离的后台管理系统,采用了…

陕西人文:1964年陕西14座古县因何纷纷“改县名”?

2016年11月西安市户县撤县设区,改名鄠邑区。其中有一节简介:”1964年“鄠县”改名“户县”,实际上在同一时期改名的还有:盩厔,邠县,醴泉,栒邑,汧阳,郿县,郃阳,雒南,商雒、洵阳,沔县,鄜县,葭县,这13个古县。 【户县老县城】鄠县(hu xian)就是现在之西安市鄠邑区…

在鸿蒙NEXT中实现完全自定义导航栏

在日常app开发中,导航栏扮演着重要的角色。鸿蒙提供了系统导航栏Navigation,它支持很多属性的修改,但是应用需求更加灵活多变,比如有的导航栏有背景图片,有的导航栏要求渐变色,有的导航栏需要随时隐藏和显示等等。 遇到这些需求系统的Navigation就无法实现,这时候我们就需…