hdxg

2022年10月4日

摘要：最近在写一个列表组件，其中有一个功能是查询条件发生改变时，清空列表数据，重新请求第一页。简化版代码如下：  <template> <p>{{ search }}</p> <p>{{ list }}</p </template> <script> export d 阅读全文

posted @ 2022-10-04 08:35 hdxg 阅读(134) 评论(0) 推荐(0)

对组合式API的理解

摘要：第一次试用vue3的组合式API，十分不适应。于是想知道组合式API的优点是什么，为什么vue3中要单独拎出来重点说明。下面就来探讨一下。代码的组织不管是选项式API还是组合式API，他们都是一种代码组织方式。那么这两种组织方式孰优孰劣呢？官网的说法是：把在vue2中分散在各选项中的数据上相关阅读全文

posted @ 2022-10-04 08:33 hdxg 阅读(362) 评论(0) 推荐(0)

底部栏的三种实现方式

摘要：将bar固定在底部是一个非常常见的需求，比如分页器。于是，今天就来说一说有哪些方法能够将bar固定在底部。 fixed法这是最简单的，但同时缺陷也最大，因为fixed元素的百分比宽度是相对于浏览器视口来计算的，因此如果出现像下面这样的布局，fixed元素将无法实现宽度自适应父容器的需求。 <bod 阅读全文

posted @ 2022-10-04 08:33 hdxg 阅读(116) 评论(0) 推荐(0)

2022年9月16日

vue3响应性的丢失和保留

摘要：为什么会丢失响应性失去响应性的情况出现在解构时。 vue2中使用Object.defineProperty()实现响应式，其原理是拦截了对象中属性的get/set，即使该属性被解构出来，仍然保留了get/set，因此不会丢失响应性。而vue3中使用Proxy实现响应式，其原理是拦截了proxy对阅读全文

posted @ 2022-09-16 15:46 hdxg 阅读(1684) 评论(0) 推荐(0)

控制透传路径

摘要： vue中的透传会将父组件传给子组件的$attrs放到子组件的根元素上，我们常用这个特性来传递class、style，以指定子组件的长宽。但在写诸如对话框这样的组件时，对话框组件的根组件是那一层黑色的蒙版。父组件并不希望指定蒙版的长宽，而是希望指定对话框的长宽，这时候我们就需要控制透传的路径。具体做阅读全文

posted @ 2022-09-16 12:26 hdxg 阅读(30) 评论(0) 推荐(0)

2022年9月15日

nextTick

摘要：在Vue中，数据的更新不会马上同步到视图上，而是放在一个异步更新队列中，在下一个事件循环tick集中更新。由于这个机制，我们如果想在基于更新后的DOM状态做点什么，就没办法在更新数据后马上获取DOM，因此为此时数据还未同步到视图上。而Vue提供了nextTick()，它可以传入一个回调函数，这个回阅读全文

posted @ 2022-09-15 17:19 hdxg 阅读(107) 评论(0) 推荐(0)

2022年8月21日

启动vue3报错不支持await import

摘要：按照官网的步骤先使用create-vue创建vue3项目，再执行npm run dev启动项目，发现报错： PS D:\my-project> npm run dev > my-project@0.0.0 dev D:\my-project > vite file:///D:/my-project/ 阅读全文

posted @ 2022-08-21 10:30 hdxg 阅读(6083) 评论(0) 推荐(1)

2022年5月26日

在canvas上使用ref报错：不能将类型“RefObject<unknown>”分配给类型“RefObject<HTMLCanvasElement>”

摘要：执行下面的代码时，报错：不能将类型“RefObject<unknown>”分配给类型“RefObject<HTMLCanvasElement>”。 function App () { const canvasRef = useRef() return ( <div> <canvas ref={thi 阅读全文

posted @ 2022-05-26 18:05 hdxg 阅读(1017) 评论(0) 推荐(0)

2022年5月23日

slot多层传递

摘要：在写组件库的时候，我们会需要用到多层slot的情况，如：组件Panel，定义了header、body、footer等插槽，且给予了一些基础的样式，head、body、foot等通过slot传出，让父组件定义。组件Dialog，使用了组件Panel，定制了head（给右上角增加了关闭按钮）和foo 阅读全文

posted @ 2022-05-23 00:47 hdxg 阅读(466) 评论(0) 推荐(0)

2022年5月12日

vue项目使用less，结果报错Unkown word

摘要：创建一个test.less文件，里面使用了循环，内容如下： .font(@i) when(@i <= 28){ f@{i} { font-size: @i + 0px ; } .font((@i + 2)); } .font(12); 然后在vue文件中导入这份文件： <style> @import 阅读全文

posted @ 2022-05-12 19:56 hdxg 阅读(822) 评论(0) 推荐(0)

公告