项目实训
文章平均质量分 56
Sunburst7
这个作者很懒,什么都没留下…
展开
-
项目实训 - Scene-UI - 编写select
选择器HTML原生的select组件虽然功能尚可,但是缺乏扩展与美化的方法,因此需要自己使用其他基本组件组合一个Select组件出来,本篇记录自己完成select组件的全过程,分为单选与多选两个模块:单选定义select的props如下:import { isString, isBooleanArray } from "../../core/utils/typeAssert"export const selectProps = { modelValue:{//选择器绑定的值原创 2022-05-23 16:30:48 · 971 阅读 · 1 评论 -
项目实训 - Scene-UI - 编写scrollbar
滚动条滚动条的编写参考了这篇大牛的文章滚动条组件实现 - 掘金 (juejin.cn),在其基础上进行了修改形成了scene-ui的滚动条,关于滚动条的布局可以参考那篇文章。我添加了对不必要的滚动条不加以显示的功能,原版无论真实大小有没有超过可视大小都会显示出XY轴的滚动条,而我通过props.alwaysNeedY与比较真实高度与可视高度的大小这两个方面控制Y轴滚动条的显示滚动条的核心在第191行: _thumbY.getBoundingClientRect().top - wrapEl.getBo原创 2022-05-23 16:27:00 · 285 阅读 · 0 评论 -
项目实训 - Scene-UI - 编写radio
单选框单选按钮允许你选择单一的值来提交表单。编写单选框时要考虑的因素有:单选框的表单控件属性,也就是基础的name、value、label属性单选框的尺寸单选框是否被禁用单选框的大小同时保留了单选框的modelValue改变时的change事件,参数是当前modelValue。radio.ts的代码如下:import { ComponentConstants } from '../../core/constants'; import {isString ,isNumber, isBool原创 2022-05-03 19:26:31 · 385 阅读 · 0 评论 -
项目实训 - Scene-UI - 编写number-input
数字输入框数字输入框组件的特点是:用户只能输入数字,输入其他类型的值会被转化为一个数字。数字输入框左右侧有两个按钮可以调节数字,可以设置调节的步长数字输入框有最大值与最小值限制,超过这个值的数字不允许被输入因此根据这些特点,该组件需要有的属性与事件有:export const numberInputProps = { step: { type: Number, default: 1, }, max: { type: Nu原创 2022-05-03 19:25:47 · 277 阅读 · 0 评论 -
项目实训 - Scene-UI - 编写loading
加载loading组件的实现形式与之前的组件都有所不同,loading组件采用的是函数调用的方式触发,而且其内部编写的方式也与一般组件不同,不是以模板的方式构造组件而是通过渲染函数的方式。挂载的实现主要依靠vue的createApp()API。预定义的类型:import {App, VNode} from 'vue'/** * loading 组件的props类型 */export type loadingProps = { target: VNode | string | HTML原创 2022-05-03 19:24:00 · 283 阅读 · 0 评论 -
项目实训 - Scene-UI - 编写link
链接link组件主要通过修改class名控制不同的主题,同时使用vue的API:this.$slots检测是否需要渲染某些内容。比较简单,源码如下:<template> <a class="scene-link" :class="[ disabled? `scene-link-disabled` : '', `scene-link-underline-${underline}` ]"原创 2022-05-03 19:22:52 · 172 阅读 · 0 评论 -
项目实训 - Scene-UI - 编写input与textarea
输入框与文本域输入框输入框的整体结构并不复杂,主要分为左中右三部分,左右各一个插槽,用于用户自定义内容,中间由一个原生输入框和一个按钮组组成,还有一个提示文本域属于绝对布局:<template> <div :disabled="disabled"> <!-- 前面的插槽 最大图标大小 22 --> <div v-if="$slots.prefix"> <slot name="prefi原创 2022-05-03 19:21:39 · 341 阅读 · 0 评论 -
项目实训 - Scene-UI - 编写icon
图标为了组件库的整体性,考虑编写一个通用的icon组件用于方便的引入图标,同时引入一个开源的图标库作为组件库的图标来源。开源图标库的选择方面我选择的是bootstrap-icon,主要在后期打包时在public文件夹下的图标无法打包,想要在组件库中引入必须将每个svg图标编写为vue组件,再导入。这样的作法对于庞大的svg图标库显然非常麻烦。bootstrap-icon有个非常方便的特性——它可以通过字体的形式导入,只需要提供class名,这样就可以解决通用icon组件的问题而不需要为了每个图标编写一原创 2022-05-03 19:19:45 · 222 阅读 · 0 评论 -
项目实训 - Scene-UI - 编写dialog
对话框对话框的实现主要依靠vue3的两个高级内置组件:<Teleport>:使我们可以将一个组件的一部分模板“传送”到该组件的 DOM 层次结构之外的 DOM 节点中。为 <Teleport> 指定的目标 to 期望接收一个 CSS 选择器字符串或者一个真实的 DOM 节点。实现对话框,可以利用该组件去传送对话框的模板片段到 body 标签下。<Transition> 会在一个元素或组件进入和离开 DOM 时应用动画。利用该内置组件,可以设置对话框进入离开原创 2022-05-03 19:18:28 · 206 阅读 · 0 评论 -
项目实训 - Scene-UI - 编写datetime
日期时间选择器日期选择器核心逻辑制作日期选择器的基本是能获取一页的日期,一页最少需要显示6 x 7 = 42个日期。因此如何计算当月的前一个月与后一个月需要补充几天是关键。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d8LxglOI-1651576561068)(./datetime/image-20220501165151062.png)]该部分逻辑在core文件夹下的date.ts中。首先声明一些基本的关于日期的变量,比如:每个月对应的英文日期,平闰年每个月对原创 2022-05-03 19:17:01 · 159 阅读 · 0 评论 -
项目实训 - Scene-UI - 编写card
Card源码Card的html结构如下:<div ref="el" class="scene-card"> <div v-if="$slots.header || header" class="scene-card-head"> <slot name="header">{{ header }}</slot> </div> <div class="scene-card-body" :style="bo原创 2022-05-03 19:15:31 · 217 阅读 · 0 评论 -
项目实训 - Scene-UI - 编写button
button源码编写按钮组件时主要考虑有以下几个因素:按钮的大小按钮的造型按钮是否可被禁用按钮可以触发的事件同时为了美化按钮,用户可以在按钮中添加图标,这里用到了Vue的插槽技术。因此设置了以下几种Props,NativeType保留了按钮的原生类型:import { ComponentConstants } from '../../core/constants'; export const buttonProps = { type:{// 按钮类型 type原创 2022-05-03 19:13:58 · 196 阅读 · 0 评论