Vue 表单避坑:为什么 v-model 绑定对象属性会偷偷修改父组件数据?
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
场景引入
在 Vue 项目里,表单组件几乎无处不在。为了提高复用性,我们常常会把一堆输入框封装成一个“大表单组件”,然后通过 v-model 直接绑定一个对象给外部组件:
<!-- App.vue -->
<script setup>
import { ref } from 'vue'
import MyForm from './MyForm ...
uni-app使用瓦片实现离线地图的两种方案
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
最近接到一个安卓App的活儿,虽然功能上不算复杂,但因为原本没怎么做过安卓端,所以也是"摸着石头过河"。简单写一下踩过的坑和淌的水吧~
uni-app实现离线地图主要用 leafletjs 实现,但是因为在安卓端运行,存在渲染问题,所以还要用上 renderjs。
实现方案一:web-view
因 ...
Vue 3 组件通信的 4 种正确姿势
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
上个月,我们重构一个老项目,发现一个“祖传组件”:
父组件传 props 给子组件
子组件再传给孙子
孙子改了个状态,通过 $emit 一层层往上抛
中间任意一层改名,整条链就断了……
同事苦笑:“这哪是组件通信,这是传话游戏。”
其实,Vue 3 早就提供了更优雅、更健壮的通 ...
[vue3入门]HTML Learn Data Day 7
学习真的是一件很累的事情,更何况有这么多杂七杂八的事情
唉唉,莎了我吧
原文章地址:https://www.cnblogs.com/Reisentyan/p/19656869
Vue3 构建
Vue3 每一次构建新项目时,都会从 npm 上拉取模板。
在 VS Code 中按:
CTRL + ~
打开终端,然后输入:
npm create vite@latest vue -- --template vue-ts
解释一下这条命 ...
HTML5 自定义属性 data-*:别再把数据塞进 class 里了!
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
前言:由于“无处安放”而引发的混乱
在 HTML5 普及之前,前端开发者为了在 DOM 元素上绑定一些数据(比如用户 ID、商品价格、状态码),可谓是八仙过海,各显神通:
隐藏域流派:到处塞 <input type="hidden" value="123">,导致 HTML 结构像个堆满杂物的仓库。
Class ...
vue 表格 vxe-table 实现复制单元格时自动带表头
vue 表格 vxe-table 实现复制单元格时自动带表头,由于业务需求需要实现用户复制单元格粘贴到 excel 时,不知道对应是哪一列,要求需要在粘贴时自动带上表头,可以通过自带的 isCopyHeader 来启用
https://vxetable.cn
通过 clip-config.isCopyHeader 启用
<template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-g ...
如何使用 vue vxe-table 甘特图 vxe-gantt 渲染显示多行任务,预计完成日期和实际完成日期多条任务条,可以自定义任务条颜色,拖拽调整日期等
如何使用 vue vxe-table 甘特图 vxe-gantt 渲染显示多行任务,预计完成日期和实际完成日期多条任务条,可以自定义任务条颜色,拖拽调整日期等
https://gantt.vxeui.com
使用树结构渲染子任务和隐藏树节点按钮来实现一行拆分多条任务条,每条任务条还可以通过css变量来设置颜色 --vxe-ui-gantt-view-task-bar-completed-bac ...
高德地图-物流路线
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
有些时候我们的项目只使用原生一些内容是无法实现一些功能的,所以今天我带来了一个大家都熟悉的,也是生活中常见的一个功能,也就是大家在网购的时候,下单成功后就可以看到自己的订单,当然也可以查看物流信息,那么物流信息中有一个部分就是地图部分,这部分可以让用户看 ...
vue 甘特图 vxe-gantt 设置每个进度条分为计划和实际两条,实现上下分布任务条
vue 甘特图 vxe-gantt 设置每个进度条分为计划和实际两条,实现上下分布任务条,实现方式是利用子任务的子视图渲染模式,来间每条任务拆分成2条子任务,就可以利用自带的子视图渲染功能来渲染。
https://gantt.vxeui.com
由于放2行超出默认高度,所以还需要通过 cell-config.height设置一下行高,再通过树形表格的子任务来 ...
基于PDF.js的安全PDF预览组件实现:从虚拟滚动到水印渲染
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
基于PDF.js的安全PDF预览组件实现:从虚拟滚动到水印渲染
本文将详细介绍如何基于Mozilla PDF.js实现一个功能完善、安全可靠的PDF预览组件,重点讲解虚拟滚动、双模式渲染、水印实现等核心技术。
前言
在Web应用中实现PDF预览功能是常见需求,尤其是在线教育、文档管理等场 ...
书架效果的实现
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
1. 对齐目标
前端想实现一个类似的书架放置书籍的效果,目标如下:
2. 思路梳理
我们使用的技术栈:vue
实现这样的一个效果,我们需要知道以下信息:
每行可以放置多少书本?
放下所有的书本需要多少行?
需要什么样的数据结构?
我们现在一个个来思考,既然我们选择了vue来 ...
老板:能不能别手动复制路由了?我:写个脚本自动扫描
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
起因
周五快下班,老板过来看权限配置页面。
"这个每次都要手动输路径?"
"对,现在是这样。"我打开给他看:
角色:运营专员
路由路径:[手动输入] /user/list
组件路径:[手动输入] @/views/user/List.vue
"上次运营配错了,/user/list 写成 /user/lists,页面打不开找了 ...
SortableJS 实现 Element UI Table行拖拽排序功能
Element UI Table组件基本使用(官方文档)
Sortable.js 官方文档
实现步骤
1. 安装SortableJS
通过npm安装:
npm install sortablejs --save
或使用国内CDN(推荐):
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
2. 基础拖拽功能实现
在Vue组件中,通过ref获取Table的bod ...
面试官:如何解决按钮重复点击?这个问题挂了80%的人!
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
前言
还记得上周我们团队在招聘前端工程师,一个看起来经验丰富的候选人坐在我对面。
"你们项目中是如何处理按钮重复点击的问题的?"我抛出了这个看似简单的问题。
"这个简单,使用防抖就可以了。"他很快回答。
然而,当我继续追问细节时,他却陷入了沉思...
实际上,这个问 ...
这 5 个冷门的 HTML 标签,能让你少写 100 行 JS
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
大家好!😁。
Code Review 的时候,我最怕看到什么?
不是复杂的算法,也不是什么正则。而是明明一个 HTML 标签就能搞定的事,有人非要写几百行 JS + CSS 去重新发明轮子 。
前几天,我看到一个新同学为了写一个折叠面板(Accordion),引入了一个重型的第三方库,还写了一堆 ...
CSS 有什么奇技淫巧?
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
aspect-ratio
宽高比
<style>
div {
width: 190px; /* 注意,这个数字要能容纳完内容才有效 */
aspect-ratio: 16 / 9;
background: tomato;
}
</style>
<div>我永远保持 16:9</div>
如果,你 aspect-ratio 的值写成 1 ,那么就可以得 ...
wangeditor5自定义扩展设置图片宽高(px)
wangeditor设置图片宽高默认有30%、50%、100%三种等比缩放选择,但是有的时候需要按照像素控制图片大小不在乎图片是否有拉伸的情况。所以只能编写设置图片宽高的自定义扩展。
编辑
1、设置图片大小最好就是与原生一样放置到选中工具栏上最合适,且因为要设置宽高两种属性所以用弹窗嵌套表格方便填写。
2、查看官方文档 ...
Vue 中的 deep、v-deep 和 >>> 有什么区别?什么时候该用?
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
“你用 Element Plus 写了个按钮,想改下 hover 颜色,结果死活不生效!最后查了半天,发现得加个 :deep() 才行”
其实,这是 Vue 中一个非常常见的坑:样式作用域冲突。那为什么用 UI 库时,加上 :deep()、::v-deep 或 >>>后,样式就能生效呢?
它们是什么?有什么区别?什 ...
vue 甘特图 vxe-gantt 自定义任务条插槽模板的用法
vue 甘特图 vxe-gantt 自定义任务条插槽模板的用法
https://gantt.vxeui.com
过设置 taskBar 插槽来自定义模板
<template>
<div>
<vxe-gantt v-bind="ganttOptions">
<template #task-bar-overview="{ row }">
<div class="custom-task-bar" :style="{ backgroundColor: row.bgColor }">
<d ...
🔥 手把手教你实现前端邮件预览功能
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
你是否曾经想过,在浏览器中直接点击一个邮件附件,就能预览完整的邮件内容——包括发件人、收件人、抄送、正文甚至内嵌图片?今天,我们要揭秘一个基于 Vue 3 和 Vant UI 的邮件预览上传组件,它不仅能上传 .eml 格式的邮件文件,还能在弹窗中完整渲染邮件内容, ...