网站备案的好处有哪些,深圳建筑设计招聘,上海内贸网站建设,杭州网站建设公司前言#xff1a;哈喽#xff0c;大家好#xff0c;今天给大家分享一篇文章#xff01;并提供具体代码帮助大家深入理解#xff0c;彻底掌握#xff01;创作不易#xff0c;如果能帮助到大家或者给大家一些灵感和启发#xff0c;欢迎收藏关注哦 #x1f495; 目录 Deep… 前言哈喽大家好今天给大家分享一篇文章并提供具体代码帮助大家深入理解彻底掌握创作不易如果能帮助到大家或者给大家一些灵感和启发欢迎收藏关注哦 目录 DeepSeek 助力 Vue 开发打造丝滑的开关切换Switch前言进入安装好的DeepSeek页面效果指令输入think组件代码组件特点说明额外建议 代码测试页面效果自己部署 DeepSeek 安装地址相关文章 ️✍️️️️⚠️⬇️·正文开始⬇️·✅❓ 0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣*️⃣#️⃣
DeepSeek 助力 Vue 开发打造丝滑的开关切换Switch
前言
DeepSeek 采用了一些独特的技术来提升其性能和效率。例如在模型架构方面DeepSeek 采用了混合专家MoE架构这种架构能够根据不同的任务和输入数据动态地选择最合适的子模型进行处理从而提高模型的处理效率和准确性。在训练过程中DeepSeek 采用了 FP8 混合精度训练技术这种技术能够在保证模型精度的前提下大幅降低训练成本和时间。
与其他大模型相比DeepSeek 在性能、成本、功能等方面展现出了显著的优势。
在性能方面DeepSeek 在多项评测中表现出色其性能甚至可以与一些顶级闭源模型相媲美。例如在数学、代码、自然语言推理等任务上DeepSeek-R1 的性能与 OpenAI 的 o1 正式版持平 。在 C-Eval 数学测试中DeepSeek 的准确率达到了 92.3%而 GPT-4 的准确率为 88.1% 。这表明 DeepSeek 在处理复杂任务时具有强大的能力能够为用户提供高质量的服务。
进入安装好的DeepSeek
0基础3步部署自己的DeepSeek安装步骤 打开搭建好的DeepSeek应用。 进入应用。 页面效果 指令输入 已经创建好了一个基于Vue3的组合式API的项目(Composition API)并能正常运行起来请帮我用 Vue3的组合式API(Composition API) 生成一个 开关切换Switch 的功能组件所有代码都保存在components/Switch 下的文件夹中。功能组件的script标签中只有setup属性使用普通 JavaScript 实现,不使用TypeScript。 功能要有如下属性 名称说明类型默认值disabled是否禁用booleanfalsesizeswitch 的大小enumsmall,default,large,自定义大小defaultonIconwitch 状态为 on 时所显示图标stringonTextswitch 打开时的文字描述stringonValueswitch 状态为 on 时的值boolean/string/numbertrueoffIconwitch 状态为 off 时所显示图标stringoffTextswitch 关闭时的文字描述stringoffValueswitch 状态为 off 时的值boolean/string/numberfalsenameswitch 对应的 name 属性string‘’idinput 的 idstring‘’如下事件
事件名说明类型changeswitch 状态发生变化时的回调函数Function
你有更好的建议也可以添加要注明。
下面是现有目录
vueAndDeepseek/ ├── src/ # 源代码目录 │ ├── assets/ # 静态资源 │ │ ├── base.css │ │ ├── main.css │ │ └── logo.svg │ ├── components/ # 组件目录 │ │ ├── HelloWorld.vue │ │ ├── TheWelcome.vue │ │ ├── WelcomeItem.vue │ │ ├── Progress/ │ │ │ └── Progress.vue │ │ ├── Accordion/ │ │ ├── BackToTop/ │ │ ├── Card/ │ │ ├── InfiniteScroll/ │ │ ├── Notification/ │ │ ├── Timeline/ │ │ ├── Switch/ │ │ ├── Tabs/ │ │ └── icons/ │ ├── router/ # 路由配置 │ │ └── index.js │ ├── stores/ # Pinia 状态管理 │ │ └── counter.js │ ├── views/ # 页面组件 │ │ ├── ProgressView.vue │ │ ├── TabsView.vue │ │ ├── SwitchView.vue │ │ ├── TimelineView.vue │ │ ├── NotificationView.vue │ │ ├── CardView.vue │ │ ├── InfiniteScrollView.vue │ │ ├── BackToTopView.vue │ │ ├── AccordionView.vue │ │ └── AboutView.vue │ ├── App.vue # 根组件 │ └── main.js # 应用入口 ├── public/ # 公共资源目录 ├── index.html # HTML 模板 ├── package.json # 项目配置 ├── vite.config.js # Vite 配置 └── node_modules/ # 依赖包目录
think 嗯我现在要帮用户创建一个基于Vue3组合式API的Switch功能组件。用户已经有了项目结构需要我在components/Switch下生成对应的文件。首先我得理解用户的需求。 用户要求这个Switch组件有多个属性比如disabled、size、onIcon等等还有相应的事件change。所有代码都要放在components/Switch目录里并且script标签中只有setup属性不能用TypeScript只能用普通JavaScript。那我得确保整个组件是使用 Composition API 来实现的。 首先我应该考虑如何在组合式API中定义一个可控的Switch。通常组件可以通过ref来控制状态但这里可能需要更灵活的处理因为用户提供了很多属性比如onValue、offValue这些都可能影响switch的状态。所以或许我需要用一个变量来表示当前的状态并根据不同的属性进行响应。 接下来我要处理各种属性。比如disabled属性如果为true的话就不能交换状态。我需要在模板中添加一个控制是否禁用的条件。size属性可能影响到样式所以我得根据size的值来设置相应的类名或者样式对象。 然后是图标部分onIcon和offIcon分别对应switch开启和关闭时显示的图标。这意味着在模板中我需要使用v-if或条件判断来决定哪个图标显示。同样的onText和offText也是如此。 关于事件change当switch状态变化时应该触发一个函数回调。我可以通过计算属性或者直接在模板中用change事件来处理。 接下来我得考虑如何将这些属性和事件结合起来。在setup函数中我需要定义ref来控制当前的状态比如currentValue。然后根据不同的属性来初始设置这个值比如如果onValue为true可能initialCurrentValue设为true否则false。或者用户可能有不同的值类型所以我得确保能够处理boolean、string、number等多种情况。 另外id属性是输入的id这可能在后续的使用中需要用到特别是在测试或与其他组件配合使用时。所以我应该将这个属性传递给input元素以便更好地控制和访问。 然后我要处理双向绑定。用户提供了一些属性比如value或者v-model但在组合式API中这通常通过ref来实现的。因此我需要将这些属性转换为对应的状态并在模板中正确地更新它们。 我还需要考虑如何处理自定义大小的情况size是一个枚举类型包括small、default、large还有自定义大小。这可能意味着当size是自定义时可以通过计算来设置固定的px值比如使用calc函数或者直接赋值。或者我可以提供一个v-bind的类名让用户可以在自己的样式中定制。 接下来关于组件的结构模板部分需要用Vue3的script setup语法。所以我得确保所有元素都用正确的方式引用比如使用ref来控制状态使用computed属性或者直接计算。 另外我需要测试一下当switch状态变化时是否能够触发change事件并且传递正确的值。这可能意味着在setup中定义一个函数用来在状态改变时触发这个事件并将新值传给回调函数。 还有一个问题是用户提到“自定义大小”这可能需要允许用户通过样式或者class来控制Switch的尺寸。因此在组件中我可以根据size的值添加相应的类名比如小写、默认、大写等这些对应着不同的宽度。 最后我应该考虑是否还有其他属性或事件需要添加或者是否有优化空间。比如如果用户需要更多的属性我可以建议在后续版本中增加。但现在按照需求来实现即可。 总结一下我需要创建一个Switch组件内部通过ref控制状态根据各种属性disabled、size、onIcon等来调整外观和行为并提供相应的change事件。整个过程要用Composition API保持代码简洁。 组件代码
我帮你创建一个功能完善的Switch组件。以下是组件代码和调用示例
vueAndDeepseek/src/components/Switch/Switch.vue
templatediv classswitch-container:class[switch-${effectiveSize},{ is-disabled: disabled },{ is-checked: isChecked }]:stylecustomSizeStyleclicktoggleSwitchinputtypecheckbox:namename:ididclassswitch-input:disableddisabled:checkedisCheckedchangehandleInputdiv classswitch-corediv classswitch-innerspan v-ifisChecked classon-contenti v-ifonIcon :classonIcon/ispan v-ifonText{{ onText }}/span/spanspan v-else classoff-contenti v-ifoffIcon :classoffIcon/ispan v-ifoffText{{ offText }}/span/span/divdiv classswitch-button/div/div/div
/templatescript setup
import { computed } from vueconst props defineProps({modelValue: {type: [Boolean, String, Number],default: false},disabled: {type: Boolean,default: false},size: {type: String,default: default,validator: (value) [small, default, large].includes(value) || /^\dpx$/.test(value)},onIcon: String,onText: String,onValue: {type: [Boolean, String, Number],default: true},offIcon: String,offText: String,offValue: {type: [Boolean, String, Number],default: false},name: String,id: String
})const emit defineEmits([update:modelValue, change])const isChecked computed(() {return props.modelValue props.onValue
})const effectiveSize computed(() {return [small, default, large].includes(props.size) ? props.size : custom
})const customSizeStyle computed(() {if (props.size.match(/^\dpx$/)) {const size props.size.replace(px, )return {--switch-width: ${size * 2}px,--switch-height: ${size}px,--button-size: ${size - 8}px}}return null
})const toggleSwitch () {if (props.disabled) returnconst newValue isChecked.value ? props.offValue : props.onValueemit(update:modelValue, newValue)emit(change, newValue)
}const handleInput (e) {const newValue e.target.checked ? props.onValue : props.offValueemit(update:modelValue, newValue)emit(change, newValue)
}
/scriptstyle scoped
.switch-container {position: relative;display: inline-block;vertical-align: middle;
}.switch-input {position: absolute;width: 0;height: 0;opacity: 0;margin: 0;
}.switch-core {position: relative;display: block;border-radius: 16px;background-color: #dcdfe6;transition: background-color 0.3s;cursor: pointer;
}.switch-core:hover {background-color: #c0c4cc;
}.switch-button {position: absolute;top: 4px;left: 4px;border-radius: 50%;background-color: #fff;transition: all 0.3s;box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}.switch-inner {position: absolute;top: 50%;transform: translateY(-50%);color: #fff;font-size: 12px;white-space: nowrap;overflow: hidden;
}/* 默认尺寸 */
.switch-default {--switch-width: 60px;--switch-height: 32px;--button-size: 24px;
}.switch-default .switch-core {width: var(--switch-width);height: var(--switch-height);
}.switch-default .switch-button {width: var(--button-size);height: var(--button-size);
}/* 小尺寸 */
.switch-small {--switch-width: 48px;--switch-height: 24px;--button-size: 16px;
}/* 大尺寸 */
.switch-large {--switch-width: 72px;--switch-height: 40px;--button-size: 32px;
}/* 自定义尺寸 */
.switch-custom .switch-core {width: var(--switch-width);height: var(--switch-height);
}.switch-custom .switch-button {width: var(--button-size);height: var(--button-size);
}/* 选中状态 */
.is-checked .switch-core {background-color: #409eff;
}.is-checked .switch-core:hover {background-color: #66b1ff;
}.is-checked .switch-button {left: calc(100% - var(--button-size) - 4px);
}/* 禁用状态 */
.is-disabled {opacity: 0.6;cursor: not-allowed;
}.on-content,
.off-content {display: flex;align-items: center;height: 100%;padding: 0 8px;
}.on-content {justify-content: flex-start;
}.off-content {justify-content: flex-end;
}
/style调用示例可以在SwitchView.vue中使用
templatediv classswitch-demo!-- 基础用法 --h3基础用法/h3Switch v-modelswitch1 /当前状态{{ switch1 }}!-- 带文字和图标 --h3带文字和图标/h3Switchv-modelswitch2on-text开启off-text关闭on-iconfas fa-sunoff-iconfas fa-moon/!-- 禁用状态 --h3禁用状态/h3Switch v-modelswitch3 disabled /!-- 自定义尺寸 --h3自定义尺寸/h3Switch v-modelswitch4 sizelarge /Switch v-modelswitch4 size60px /!-- 自定义值类型 --h3自定义值类型/h3Switchv-modelswitch5:on-valueactive:off-valueinactive/当前值{{ switch5 }}/div
/templatescript setup
import { ref } from vue
import Switch from /components/Switch/Switch.vueconst switch1 ref(false)
const switch2 ref(true)
const switch3 ref(true)
const switch4 ref(false)
const switch5 ref(inactive)
/script组件特点说明
完全支持v-model双向绑定支持自定义开/关状态的值类型灵活的尺寸控制预设尺寸自定义像素值完整的无障碍支持通过隐藏的input元素平滑的过渡动画完善的禁用状态处理
额外建议
可以添加颜色自定义属性active-color/inactive-color可以增加加载状态loading可以添加表单验证支持可以添加更多过渡动画效果可以支持自定义插槽内容
代码测试 正常 页面效果 自己部署 DeepSeek 安装地址
蓝耘元生代智算云平台地址:https://cloud.lanyun.net/#/registerPage?promoterCode07100c37a0
相关文章 ———— 相 关 文 章 ———— 0基础3步部署自己的DeepSeek安装步骤 DeepSeek 助力 Vue 开发打造丝滑的步骤条 DeepSeek 助力 Vue 开发打造丝滑的进度条Progress Bar 自己部署 DeepSeek 助力 Vue 开发打造丝滑的标签页Tabs 自己部署 DeepSeek 助力 Vue 开发打造丝滑的折叠面板Accordion 自己部署 DeepSeek 助力 Vue 开发打造丝滑的时间线Timeline DeepSeek 助力 Vue 开发打造丝滑的返回顶部按钮Back to Top DeepSeek 助力 Vue 开发打造丝滑的通知栏Notification Bar DeepSeek 助力 Vue 开发打造丝滑的卡片Card DeepSeek 助力 Vue 开发打造丝滑的无限滚动Infinite Scroll 到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章创作不易如果能帮助到大家,希望大家多多支持宝码香车~若转载本文一定注明本文链接。 更多专栏订阅推荐 htmlcssjs 绚丽效果 vue ✈️ Electron ⭐️ js 字符串 ✍️ 时间对象Date()操作
