2023-02-20发表2023-04-23更新Web前端2 分钟读完 (大约370个字)

为 Vue 项目开启 PWA

之前的网络上的教程都是 vue/cli 的, 经过我的一番摸索, 终于弄明白了 vite+vue3+pwa 的正确打开方式

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-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 中的数组拥有众多方法, 在这里我加以总结便于复习

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

Vue封装一个分页器组件

一个分页器组件最重要的四个参数(需要外界传入)

当前第几页: pageNo
每页展示的数据数量: pageSize
共有多少数据: total
显示的连续页码: continues

图片等比缩小的方法

图片压缩的基本思路

链接

分类

最新文章

归档

标签