摘要：element-plus 提供的 el-dialog 对话框功能非常强大，只是美中不足不能通过拖拽的方式改变位置，有点小遗憾，那么怎么办呢？我们可以通过 vue 的自定义指令来实现一个可以拖拽的对话框（el-dialog）。 拖拽演示 https://www.zhihu.com/zvideo/138 阅读全文
使用 vue3 的自定义指令给 element-plus 的 el-dialog 增加拖拽功能
2021-05-25 09:17 by 金色海洋（jyk）, 4600 阅读, 0 推荐, 收藏, 编辑基于 el-form 封装一个依赖 json 动态渲染的表单控件
2021-05-19 07:44 by 金色海洋（jyk）, 1795 阅读, 4 推荐, 收藏, 编辑
摘要：nf-form 表单控件的功能 基于 el-form 封装了一个表单控件，包括表单的子控件。 既然要封装，那么就要完善一些，把能想到的功能都要实现出来，不想留遗憾。 毕竟UI库提供的功能都很强大了，不能浪费了对吧。 依赖 json 动态创建表单 可以多行多列 可以调整布局 可以自定义子控件（插槽和动 阅读全文
使用局部状态（轻量级状态）优化博客代码
2021-05-10 11:10 by 金色海洋（jyk）, 584 阅读, 1 推荐, 收藏, 编辑
摘要：上两篇介绍了如何用vite2 + Vue3 搭建一个博客网站，以及轻量级状态的基础使用，那么二者结合起来会发生什么呢？ 做个开源博客学习Vite2 + Vue3 （四）实现博客功能 https://www.cnblogs.com/jyk/p/14696474.html 制作一个轻量级的状态管理插件： 阅读全文
制作一个轻量级的状态管理插件：Vue-data-state
2021-04-26 18:49 by 金色海洋（jyk）, 980 阅读, 0 推荐, 收藏, 编辑
摘要：Vuex 是不是有点繁琐？ Vuex 是针对 Vue2 来设计的，因为 option API 本身有很多缺点，所以 Vuex 只好做各种补丁弥补这些缺点，于是变得比较“复杂”。 现在 Vue3 推出了Composition API，功能更强大也弥补了之前的缺点，但是 Vuex 4.0 只是兼容了 V 阅读全文
做个开源博客学习Vite2 + Vue3 （四）实现博客功能
2021-04-24 11:14 by 金色海洋（jyk）, 1083 阅读, 2 推荐, 收藏, 编辑
摘要：我们再来看一下管理类的设计。 Composition API，就是组合API的意思，那么是不是应该把js代码分离出来，做成独立的管理类的形式呢？ 这样代码可以更整洁一些，主要是setup里面的代码就不会乱掉了。 管理类 import webSQLHelp from '../store/websql- 阅读全文
做个开源博客学习Vite2 + Vue3 （三）博客设计和代码设计
2021-04-23 17:49 by 金色海洋（jyk）, 628 阅读, 3 推荐, 收藏, 编辑
摘要：项目搭建好了之后是不是可以编码了呢？ 等等不要着急，我们是不是应该先设计一下？比如博客的功能等？ 博客设计 先做个简单的个人博客，因为是个人版，所以可以省略注册、登录这些功能，表结构也可以简单一点。 基础功能：添加博文、显示博文、博文列表+查询+分页、讨论列表和添加讨论。 虽然功能弱了一点，但是麻雀 阅读全文
做个开源博客学习Vite2 + Vue3 （二）设置别名、代理和ESLint
2021-04-22 07:04 by 金色海洋（jyk）, 1405 阅读, 0 推荐, 收藏, 编辑
摘要：vite2可以有很多配置，也可以都使用默认配置，这个看项目需要。 vite.config.js 我们先看看 vite.config.js里面的常用配置，其他配置可以看官网：https://cn.vitejs.dev/config/ // vite.config.js import { defineC 阅读全文
做个开源博客学习Vite2 + Vue3 （一）搭建项目
2021-04-22 06:40 by 金色海洋（jyk）, 1463 阅读, 0 推荐, 收藏, 编辑
摘要：前言 不会 webpack，遇到报错就一头雾水，完全不知道怎么办，而且体积还大速度还慢。 所以尤雨溪做了 vite 后就很向往，只是知道自己水平有限还是等大佬先趟趟坑，等差不多了在跳。 现在vite2发布了，官网也有了，网上也能找到大佬写的相关资料，时机应该成熟可以往里跳了。 所以打算做个开源博客， 阅读全文
reactive是如何实现深层响应的？
2021-04-17 12:13 by 金色海洋（jyk）, 273 阅读, 0 推荐, 收藏, 编辑
摘要：深层响应的 reactive 看过官网文档的都知道，Vue3 的响应性分为浅层和深层，我们常用的 reactive 是深层的。 我们也都知道，reactive 是使用 proxy 来实现响应性的，那么问题来了： 既然 proxy 的拦截操作是浅层的，对于嵌套属性的操作无感，那么 reactive 是 阅读全文
Vue3 封装第三方组件（一）做一个合格的传声筒
2021-04-17 10:14 by 金色海洋（jyk）, 2018 阅读, 0 推荐, 收藏, 编辑
摘要：各种UI库的功能都是非常强大的，尤其对于我这种不会 css 的人来说，就更是帮了大忙了。 只是嘛，如果再封装一下的话，那么用起来就会更方便了。 那么如何封装呢？ 封装三要素 —— 属性、插槽、事件、方法 可以封装，但是原生UI库提供的强大功能不能给封装没了吧，吃了回扣可是不好滴。 那么如何做到不遗漏 阅读全文
初探 vite2 + vue3
2021-04-10 09:38 by 金色海洋（jyk）, 1294 阅读, 1 推荐, 收藏, 编辑
摘要：vite2已经出来一段时间了，这几天没忍住尝试了一下，首先体验到的就是 —— 快，真的很快，再也不用痛苦的等待了。 然后就是踩坑，因为vite2还算是比较新，所以介绍文章不多，虽然已经出来官网文档了，但是现在的官网似乎侧重原理介绍，对于最初级的使用方式，似乎没有，或者是我还没有找到。 这里汇总一些基 阅读全文
全面了解Vue3的 ref 和相关函数和计算属性
2021-04-10 09:21 by 金色海洋（jyk）, 3755 阅读, 4 推荐, 收藏, 编辑
摘要：基础类型的响应性 —— ref 在vue3里面，我们可以通过 reactive 来实现引用类型的响应性，那么基础类型的响应性如何来实现呢？ 可能你会想到这样来实现： const count = reactive({value: 0}) count.value += 1 这么做确实可以实现，而且也很像 阅读全文
用 customRef 做一个防抖函数，支持 element 等UI库。
2021-04-03 14:20 by 金色海洋（jyk）, 425 阅读, 0 推荐, 收藏, 编辑
摘要：这几天学习Vue的官网，看到 customRef 提供了一个例子，研究半天发现这是一个防抖函数，觉得挺好，于是把这个例子扩展了一下，可以用于表单子控件和查询子控件。 需求 v-model 基于 element-plus 封装表单控件，同时也要封装一下表单子控件，还有查询控件。 由于 el-input 阅读全文
Vue组件（35）动态组件 component 的 is 到底可以是啥？
2021-04-01 18:56 by 金色海洋（jyk）, 13761 阅读, 2 推荐, 收藏, 编辑
摘要：component 动态组件 Vue官网上提供了一个动态组件 <component :is="currentTabComponent"> ，那么这里的 is 到底是什么呢？ 官网介绍的太分散了，这里尽量全面的列举出来。如果有遗漏欢迎补充。 原生HTML <component is="input" p 阅读全文
全面了解Vue3的 reactive 和相关函数
2021-03-31 16:17 by 金色海洋（jyk）, 3095 阅读, 0 推荐, 收藏, 编辑
摘要：Vue3的 reactive 怎么用，原理是什么，官网上和reactive相关的那些函数又都是做什么用处的？这里会一一解答。 ES6的Proxy Proxy 是 ES6 提供的一个可以拦截对象基础操作的代理。因为 reactive 采用 Proxy 代理的方式，实现引用类型的响应性，所以我们先看看 阅读全文