原文:11 - Vue3 UI Framework - Card 组件

卡片是非常常用也是非常重要的组件,特别是在移动端的众多应用场景中,随便打开一个手机 App ,您会发现充斥着各种各样的卡片。 所以,我们也来制作一个简易的 Card 组件 返回阅读列表点击 这里 需求分析 我们先做一个简单的需求分析 允许用户自定义内容 允许更换颜色 那么可以整理出以下参数表格 参数 含义 类型 可选值 默认值 color 颜色 string 任意合法颜色值 d c f 骨架 所 ...

2021-12-21 15:00 0 1094 推荐指数:

查看详情

08 - Vue3 UI Framework - Input 组件

接下来再做一个常用的组件 - input 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 input 组件有两种类型,即 input 和 textarea 类型 当类型为 textarea 时,可以自定义行高,但是当类型为 input 时 ...

Thu Dec 16 17:39:00 CST 2021 0 377
06 - Vue3 UI Framework - Dialog 组件

做完按钮之后,我们应该了解了遮罩层的概念,接下来我们来做 Dialog 组件! 返回阅读列表点击 这里 需求分析 默认是不可见的,在用户触发某个动作后变为可见 自带白板卡片,分为上中下三个区域,分别放置标题、内容、操作 有两个基本操作:确定、取消 卡片后应放置淡 ...

Tue Dec 14 22:56:00 CST 2021 1 679
09 - Vue3 UI Framework - Table 组件

接下来做个自定义的表格组件,即 table 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 基于原生 table 标签的强语义 允许用户自定义表头、表体 可选是否具有边框 那么可以整理出以下参数表格 参数 ...

Fri Dec 17 17:55:00 CST 2021 0 462
05 - Vue3 UI Framework - Button 组件

官网基本做好了,接下来开始做核心组件 返回阅读列表点击 这里 目录准备 在项目 src 目录下创建 lib 文件夹,用来存放所有的核心组件吧。然后再在 lib 文件夹下创建 Button.vue 文件。 您也可以进行结构化设计,比如,这里就不进行了。 需求分析 惯例先行 ...

Mon Dec 13 21:20:00 CST 2021 0 539
10 - Vue3 UI Framework - Tabs 组件

标签页是非常常用的组件,接下来我们来制作一个简单的 Tabs 组件 返回阅读列表点击 这里 需求分析 我们先做一个简单的需求分析 可以选择标签页排列的方向 选中的标签页应当有下划线高亮显示 切换选中时,下划线应当有动画效果 应当允许更换颜色 那么可以整理 ...

Mon Dec 20 17:20:00 CST 2021 0 801
07- Vue3 UI Framework - Switch 组件

为了更好的提升用户体验,我们这里再做一个很常用的开关组件 switch 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 switch 组件应分为选中/未被选中,两种状态 可以通过点击变更选中状态 不同的选中状态有不同的颜色,且有滑块处于 ...

Wed Dec 15 18:28:00 CST 2021 0 383
01 - Vue3 UI Framework - 开始

成本高。浏览了各大博客论坛,千差万别,比较混乱。最终决定参考 Element UI 的设计风格,主题色选 ...

Sat Dec 11 00:54:00 CST 2021 0 895
03 - Vue3 UI Framework - 首页

顶部边栏做完了,接下来开始做官网的首页 返回阅读列表点击 这里 创建视图文件夹 让我们先新建一个 src/views 文件夹,用来存放官网的主要视图 然后在该文件夹下新建两个 vue 文件,作为我们的视图 Home.vue,首页 Document.vue,文档页 ...

Sat Dec 11 18:42:00 CST 2021 0 110
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM