前言 移动端的页面本应该很少有table表格这样的展示、操作，但总归有这样的需求，然而平时用的vant和iview的小程序组件库都没有table组件，这里将自己编写的table组件展示一下供大家查看。 小程序实现table的问题在于，自定义td的实现，而小程序没办法像react一样使用jsx，也没办法像vue一样用作用域插槽传row行的信息给slot，但是小程序还是留有一样东西可以完成自定义td的功能。 抽象节点 这个特性自小程序基础库版本 1.9.6 开始支持。 有时，自定义组件模板中的一些节点，其对应的自定义组件不是由自定义组件本身确定的，而是自定义组件的调用者确定的。这时可以把这个节点声明为“抽象节点”。 微信官方api地址 通过抽象节点我们可以做到使用自定义组件通过key值分发组件内容到不同的td里。 具体的源码地址可点击下方查看，如果对你有帮助请点个star~~ 源码地址 具体的实现效果可以扫描下方的小程序码。 API prop...
2021, Jan 20 — 3 minute read项目介绍 功能介绍 该项目是使用iframe内嵌到某系统的排课管理模块。功能涉及到动态表单，拖曳排课。 使用插件 项目使用的插件及其版本如下： { "vue": "^3.0.0", "vue-router": "^4.0.0-0", "vuex": "^4.0.0-0", "ant-design-vue": "^2.0.0-rc.1", }...
2020, Dec 08 — 1 minute read该hook是用于方便发送请求的。 import { reactive, onMounted, Ref, toRef, toRaw, ref, UnwrapRef, readonly, DeepReadonly } from 'vue';...
2020, Dec 08 — 4 minute read最近一周正式使用vue3.0编写项目。 在文档尚不健全的情况下，编写中踩了一些小坑。 看法 优点 3.0出来的响应式API，让编写代码有种编写原生代码的感觉，写法较2.0可以写的更加简洁，在编写表单页面时，一套逻辑写下来自我感觉比2.0能少些很多非逻辑代码。通过编写自定义hook，可以有效地封装一些逻辑，而不需要使用mixin了。可能是最近写react比较多，所以对3.0的编写并不会觉得有什么陌生，所以所谓的面条代码的问题倒还好。 难点 ref与reactive，给这两个api写ts的类型定义有点难搞，因为一个数据往往有初始值，如果直接拿这两个api去定义一个值，就会遇到api返回的类型与目标模型不相同的问题（会在外层包裹一层UnwrapRef）。思考了一下后，决定定义一个state拿reactive初始化，当作原来的data字段，所有要存储的值都是state的一个属性，这样就避免了初始值的问题。这也是带来的所谓心智负担吧。更新：看了reactive的定义，当传入的类型变量不同，返回的类型定义也是不同的，现在不使用state，一个个初始化具体去定义也可以了。 对比react 写react，个人很喜欢写函数式组件，看起来非常简洁，API非常的少，掌握不超过十个api，写起就react就没什么问题了。而vue3.0编写的第一感受就是，编写逻辑的方式，真的和react有点相似，摒弃了插槽式的代码编写习惯，相似的逻辑放在一起，3.0通过更多的语义化的api，方便了开发，比如生命周期钩子，同比react，我可以更明确的掌握代码的一举一动。不过，写了vue3.0以后反而更能体会到的react的简洁，这能天下代码殊途同归?如果公司需要明确以后主要要用什么开发，这也许会成为一个问题。 记录 关于基础的新知识就不说了，主要说一下在开发中遇到的一些小问题。 ref与reactive 之前也提了，这两个api是本次更新的重点，是关键的响应式api，ref主要用来定义值变量，reactive主要用来定义引用变量。有这样一个场景，如果你有个detail变量需要声明,等请求来具体值后再修改值，通常我会使用 let detail:Detail|null...
2020, Nov 28 — 1 minute read情景 当在项目中引用一个组件，当子组件内的某个生命周期触发的时候，希望父组件能够进行一些操作，如果子组件没有暴露出对应的接口，那只能够通过修改组件的内部逻辑才能够实现想要的功能。 方法 hookEvent可以实现从父组件给子组件注入生命周期，且不会对子组件的生命周期产生影响。 该方法在vue的官方文档中没有显示，但vue的核心团队成员Damian Dulisz在推文中明确说明了这种方法。 演示 理解 通过类似绑定自定义事件的形式在子组件上绑定形式如@hook:${生命周期}格式的事件(@hook:beforeUpdate="beforeEvent")，则在父组件中可以监听子组件中相对应的事件触发。 代码 <div id="app"> <div> parent component...
2020, Apr 03 — 3 minute readdart 介绍 Dart 是面向对象的编程语言，语法风格对于许多现有的开发人员来说都很熟悉,但对于前端来说，面向对象反而是不熟悉的，因为JavaScript的class在es6才出现，浏览器的兼容差导致前端开发在开始熟悉js的时候往往会避开class这类知识。随着前端webpack等打包程序、三大前端框架的出现，越来越多的前端er开始使用es6的知识来编写代码？？？？扯远了扯远了。Dart的很多语法与ts可以说是十分相似（编程语言大差不差？），这对前端er学习dart提供了极大的便利,下面的内容部分会将Dart与js进行比较。 目标 学习dart的目的是学习flutter，小目标，年前写一个小型flutter项目。 基础知识 重要的概念 任何保存在变量中的都是一个 对象 ， 并且所有的对象都是对应一个 类 的实例。 无论是数字，函数和...
2019, Dec 19 — 8 minute readip 访问网页情况下，cookie 是不区分的，80 端口也可以访问到 81 端口的 cookie，只需要知道 cookie 的名称。 如果向数据库插数据，发现数据格式都对，但就是插不进去，检查一下会不会有保留字被当成字段名了（rank,desc 等）。 HTML 的 Doctype 作用...
2019, Dec 12 — 3 minute read深度优先遍历（DFS）和广度优先遍历（BFS） 深度优先遍历（DFS） 主要思路是从未访问的顶点开始，沿着一条路一直走到底，然后从这条路尽头的节点回退到上一个节点，再从另一条路开始走到底…，不断递归重复此过程，直到所有的顶点都遍历完成，它的特点是不撞南墙不回头，先走完一条路，再换一条路继续走。 先序遍历、中序遍历、后序遍历都是深度优先遍历。 // 下面是先序遍历一个树 function first (node){ if(!node)return console.log(node.val) fn(node.left) fn(node.right) } //...
2019, Dec 12 — 2 minute read