2023-02-13发表2023-04-23更新Web前端1 分钟读完 (大约119个字)

纯CSS实现全屏滚动效果

实现全屏滚动可以不依赖 JS, 只使用纯 CSS 实现, 不过只有较新版本的浏览器支持这一特性

主要使用了以下 CSS 属性

scroll-snap-type: y mandatory; 给父元素设置, 设置贴合类型
scroll-snap-align: start; 给子元素设置, 设置贴合点

2023-02-03发表2023-04-23更新Web前端3 分钟读完 (大约505个字)

JavaScript实现图片压缩

图片等比缩小的方法

图片压缩的基本思路

压缩图片主要利用了canvas的toBlob方法, toBlob方法可以将canvas画布的画面转换成Blob对象, 同时设置质量

获取input数据, 使用fileReader转换成 dataUrl
将dataUrl的值赋给image的src
将image绘制进canvas, 注意这里可以对图片尺寸进行控制
使用canvas.toBlob获取 blob 对象, 可以在其中设置压缩比例
上传图片

2023-01-20发表2023-05-14更新技术分享1 分钟读完 (大约199个字)

通过Acme.sh + CloudFlare Dns认证申请泛域名证书

使用 acme.sh 这个神器, 可以快速的申请泛域名证书, 省去繁琐的手动申请的步骤

由于我的域名使用了 CloudFlare Dns , 所以我用了 CloudFlare 的 api 认证方式

2023-01-20发表2023-04-23更新软件技巧1 分钟读完 (大约116个字)

利用pandoc合并markdown及转换为docx

最近有需求把 markdown 文档合并起来然后转换为 word 文档以供打印的需求, 所以了解到了 pandoc 这一款命令行文本处理神器

2023-01-14发表2023-05-18更新Web前端1 分钟读完 (大约205个字)

Vue3中 v-model 实现父子组件数据通信双向绑定

如果使用 v-model 给子组件绑定一个数据, 例如v-model="msg", 那么子组件 props 传进来的数据为modelValue, 要手动触发的事件为update:modelValue

2023-01-13发表2023-04-23更新Web前端几秒读完 (大约15个字)

JavaScript获取剪贴板文件

const btn = document.querySelector("button");
document.addEventListener("paste", e => {
    console.log(e.clipboardData.files);
});

2023-01-06发表2023-04-23更新Web前端2 分钟读完 (大约264个字)

vue vee-validate 表单验证

使用步骤

使用第三包提供的Form标签将表单整个区域包裹起来, 如果要进行整体验证, 需要给Form打ref
使用第三方包提供的Filed标签将输入框的input替换掉
如果表单需要校验，那么必须有name属性
将校验规则通过rules绑定到需要校验的Field标签上
当用户输入的内容未通过验证规则时，错误信息是从Form标签上的插槽中解构出来的

2022-12-16发表2023-04-23更新Web前端几秒读完 (大约14个字)

CSS实现遮罩效果

1
2
3

background: url(@/img/bg.jpg) rgba(0, 0, 0, 0.3);
background-size: cover;
background-blend-mode: multiply;

2022-12-14发表2023-04-23更新Web前端1 分钟读完 (大约192个字)

数据结构学习-栈

栈结构遵循以下规则

数据从栈顶 (又称为栈尾) 进入
从栈顶退出
遵循后进先出的 LIFO 原则

一个栈应该有以下方法: push pop peek isEmpty size clear toString

2022-12-05发表2023-04-23更新Web前端9 分钟读完 (大约1277个字)

JavaScript数组总结

js 中的数组拥有众多方法, 在这里我加以总结便于复习

图片等比缩小的方法

图片压缩的基本思路

链接

分类

最新文章

归档

标签