vue
关注
分享
扫一扫
文章平均质量分 87
hans774882968
这个作者很懒，什么都没留下…
展开
-
沉淀自己的pro-table组件，并发布到npm（Vue3、element-plus）
传送门 约定：npm包名vue3-el-pro-table，引用vue3-el-pro-table的包名为“本项目”。声明：Vue3ProTable.vue代码是在这个项目的基础上进行修改的。Quick Startyarn add vue3-el-pro-tablesrc/main.tsThen use directly in .vue file.Import interface:import { Vue3ProTableProps } from 'vue原创 2023-07-18 01:37:56 · 1899 阅读 · 0 评论 -
UI schema入门demo：应对业务需求变化的强力武器
我们考虑以下场景：在一个需求中，对于两种不同角色的用户，需要展示的UI骨架大同小异（比如：只有具体的字段不同），但逻辑有所不同。对于两个开发时间线大致相同的不同需求，需要展示的UI骨架大同小异，但逻辑有所不同。希望跨需求完成UI复用。项目希望从Vue迁移到React，UI从用户视角来看不能发生变化，但想必描述UI的代码会有很多差异。对于前2个问题，你会怎么实现呢？放弃复用，直接复制粘贴UI代码到两个不同文件，逻辑单独修改。坚持复用，让UI充满if else。原创 2023-07-15 19:54:56 · 777 阅读 · 0 评论 -
【Vue+element_ui】生成Ubuntu自定义壁纸幻灯片的核心xml文本
生成好xml文本后，就在想，命令式地生成xml很麻烦，而vue生成html很方便，能不能用vue快速生成xml呢？本文juejin：https://juejin.cn/post/7129561844678656007/的项目后，我得到了肯定的回答。这大概是我做过的最有创意的休闲项目了。这里实现了一个“复制”按钮处于父元素右上角的功能：父元素相对定位，自己绝对定位。因为要循环的是两个兄弟xml，所以需要加一个。在vue中是有意义的，因此我们使用另一个名称。文本，左边是高亮代码，右边是一个。......原创 2022-08-09 01:48:54 · 581 阅读 · 1 评论 -
观察者模式实现图片预加载，并开放事件监听接口
参考需求实现图片预加载功能。在每张图片加载成功和加载失败时，分别需要调用loadProgress和loadError函数；图片加载完毕后需要调用loadComplete函数。可选：以上3个接口函数可以随时切换，并支持多次预加载。以上3个接口函数拓展为”事件“，可添加任意多个事件监听器。技术栈：vue3。一开始之所以选vue3，是期望vue能比较方便地把预加载所得Image对象插入到DOM。我探究了许久，最后宣布期望落空。下文会探讨这一问题。我们实现一个loader，并期望它可以这么用：原创 2021-12-01 18:48:20 · 776 阅读 · 0 评论 -
vue的diff算法详解
为什么需要虚拟dom？虚拟dom只是一个普通的js对象。由于每次渲染视图都是先创建vnode，然后用它创建真实DOM插入到页面中，所以可以将上一次渲染视图所创建的vnode缓存起来。之后重新渲染视图，就可以对比oldVnode和vnode，基于新旧差异来更新DOM了。这样可以提升性能。（《深入浅出Vue.js》P55）源码专有术语一览新旧虚拟节点在源码里的变量名分别为：vnode和oldVnode。我们以vnode为基准，目标是把dom修改成vnode的样子，并且最小化dom操作次数。如果原创 2021-10-01 14:46:54 · 498 阅读 · 0 评论 -
Vue实现带两个方向过渡效果的轮播图
网上有许多轮播图案例，但只有极少数做了两个方向的滑动过渡效果。而我就是其中一个！所以来关注hans774882968，看技术干货！先看效果图HTML<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>轮播图图片切换</title> <link rel=原创 2021-08-27 15:25:17 · 919 阅读 · 0 评论 -
CSS3+Vue实现动态时钟
这是一个css布局练手的休闲项目。用了一点vue，只是为了获取当前时间+更新时钟。又水了一发效果html<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>时钟</title> <link rel="stylesheet" href="https.原创 2021-08-22 17:03:25 · 924 阅读 · 0 评论 -
用Vue实现一个最简单的树形组件
一个简洁的树形组件实现，作为一个练手。index.html<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>树形组件</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.co原创 2021-08-19 17:10:07 · 2003 阅读 · 0 评论 -
vue封装轮播图组件
前言：心血来潮想做个最简单的轮播图组件练练手。思路框架很简单，首先实现一个demo，再寻找该demo所有的可动态化的量。文件夹结构第一个难点是轮播图的css。我们采用这样的html<div class="carousel"> <div class="photo"> <img v-for="idx in img_num" :src="`./img/${idx}.png`" /> </div></div>我们希望通过控制原创 2021-07-02 18:05:36 · 3721 阅读 · 0 评论 -
功能完备的井字棋——基于css3和vue
我在csdn上浏览过几个井字棋的代码，有的照抄 借鉴太多已有的react版本的井字棋项目，有的代码冗余多、耦合度高，总体质量也不算高。相信我这个版本的代码质量能胜过他们的QAQ效果demo这个井字棋项目的功能基本上都在“游戏说明”里了。可以输入你喜欢的双方标识，左侧为先手~人机模式下不允许查看轮到AI落子的那些棋局~由于作者水平有限， 目前仅支持电脑先手~提供了“历史棋局”功能~对象名为什么叫g1？可以看到我有两个对象g1和g2，g2全程没有使用。把它放着，意在展示可以通过复制html代原创 2021-06-02 16:57:32 · 578 阅读 · 1 评论