YolkPie

前言Vue 3已经正式发布，我们现有的项目基本都是基于Vue 2进行开发的，如何由Vue 2.x迁移到Vue 3.x，官方文档已经提供了迁移指南，本文是对官方迁移指南的总结。 重大改变Vue 3相较于Vue 2有许多Break Change的重大改变，是我们在迁移时需要重点关注的： 全局API 变更为使用应用程序实例 全局和内部API可以被tree shaking 模版指令 v-model用法的变更 v-for节点上key用法的变更 v-if和v-for优先级的变更 v-bind="object"合并策略的变更 v-for中的ref不再注册为ref数组 组件 只能使用普通函数创建功能组件 functional属性及选项被遗弃 使用defineAsyncComponent创建异步组件 渲染函数 渲染函数的API变更 $scopedSlotsproperty已删除，所有插槽都通过$slots作为函数暴露 自定义指令的API和组组件的生命周期保持一致 某些过渡class被重命名 组件的watch选项和实例的$watch方法不再支持点分隔字符串路径 应用程序容器的in ...

前言日常生活中，我们经常会用到即时通讯软件，对聊天对话界面已经很熟悉了。打开聊天界面，最主要的三个UI元素有：头像、文字气泡、和对话缩略图。那我们有没有想过，为什么有的头像是圆形的，有的是方形的？气泡的极限值应该怎么定义？对话中的缩略图又有什么样的展示比例？ 本次我们就从聊天界面中常见的头像、文字气泡、图片展示来分析总结一下，在设计即时聊天界面时应该注意哪些细节。 头像部分最近正好在做一个项目是有关消息列表和聊天对话的页面，那关于界面中的头像我们该如何定义呢？是用方形头像还是圆形头像？这两种形状在产品设计中都非常普遍，那到底应该根据什么因素来做抉择依据呢？交互设计包含五要素：用户、行为、目标、场景、媒介。本文我们主要从用户、媒介维度和场景来作分析。 媒介维度媒介维度这里主要是展示形态的差异，要决定媒介的展示形态，我们需要对媒介本身的用户、行为、目标、产品调性(包括用户目标、行为和场景)进行分析。 方形 通常来讲方形均衡的四边、凸显的棱角给人一种敦实、稳重、可靠、有原则的信赖感。因为棱角的关系，人的视觉会相对分散，出了视觉中心，注意力也会像四个角转移，棱角越尖锐，视线扩散越明显。 方形 ...

简介 Taro 是一套遵循 React 语法规范的 多端开发 解决方案。 现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ 小程序、快应用、H5、React-Native 等）运行的代码。 一、 Taro 的安装与使用1.1 安装12$ npm install -g @tarojs/clitaro -V 1.2 使用使用命令创建模板项目 1$ taro init myApp 1.2.1 微信小程序选择微信小程序模式，需要自行下载并打开微信开发者工具，然后选择项目根目录进行预览 微信小程序编译预览及打包 123# npm script$ npm run dev:weapp$ npm run build:weapp 1.2.2 百度小程序选择百度小程序模式， ...

前言随着互联网行业的聚变式发展，业务模式从“信息透出” 到 “在线交易” 的过程中，网站 UI 构建也经历了“体验一致性”、“设计效率”、“UI系统构建/应用效率”、“多端适配” 等诸多问题。对此，构建一套设计系统（Design System）是解决用户体验规模化问题的关键。设计系统又包含页面框架布局、字体、按钮、表单等部分。首先，我们先来说一说系统的布局。 用户在操作系统时所看到的页面框架其实就是系统布局，它是一个产品最外层的框架结构，一般包含了顶部导航、侧边导航栏、面包屑、图文、卡片、内容等元素。系统布局是页面设计的基础，布局框架是整个产品的基础骨架，在骨架确定之后，才可进行下一步的设计，如统一的视觉表达元素，清晰的功能操作，流畅的交互表达。 布局的原则系统布局规范，需要通过统一的设计元素和间距规范去引导合作设计师，跨平台使用并且能够适配不同屏幕尺寸，目的是达到一致性，可适配、可控性原则。 一致性：对于界面来讲，界面中视觉、结构、行为需要保持一致性。视觉统一：颜色、风格 可适配：布局是可自适应的，跟据用不在不同的设计环境下能够通过交互动效、界面样式有效作出极致适配反应。用户操作后需 ...

npm发包配置环境 安装node.js 官网下载最新的node安装包，正常安装node.js 安装完成后，执行 node -v, 查看是否正常安装 执行：sudo npm update npm -g，将npm 升级到最新 查看npm是否正常： npm -v 发包具体示例 注册npm账号，填写 用户名、密码和邮箱 找个位置，新建一个文件夹 cd 进入文件夹，执行 npm init -y, 有需要改变的内容自己再去文件修改和添加 使用 npm login，登录自己的 npm 账号 使用 npm publish，发布自己的包到 npm 查看自己发布的包是否成功，可以去别的项目执行 npm install 你发布的包名，下载成功 1234注意：1. 发布自己包之前，应先去 npm 官网搜索自己要发布的包名是否已经存在，已存在的包名会提交失败2. 自己发布的包更新时，每次都要到package.json, 将 version 修改，例如：从1.0.0改为1.0.1。然后再执行 npm publish进行更新整体步骤示例图片如下： 查看自己发布的包 打开npm官网，输入你的包名，如有结果则存在 ...

前言虚拟DOM的核心之一就是它的Diff算法，其中最为核心的就是核心Diff算法，只有在新旧虚拟DOM的子节点都是多个的时候，核心Diff算法才会派上用场。 无论何种类型的核心Diff算法，它们采用的核心思想是一致的： 1、找到需要移动的节点，并移动它们； 2、添加新的节点； 3、移除不存在的节点。 新旧虚拟DOM子节点的可能情况如下： 旧的children的个数 新的children的个数 操作 1 1 patch 1 0 remove 1 n remove旧的子节点，mount新的子节点 0 1 mount 0 0 无操作 0 n mount n 1 remove旧的子节点，mount新的子节点 n 0 remove n n 核心Diff 虚拟DOM的结构123456789export interface VNode { _isVNode: true // _isVNode是一个始终为 true 的值，有了它，我们就可以判断一个对象是否是 VNode 对象 el: Element | ...

参数定义 url: url地址参数； params：需要拼接或修改的参数对象列表123456789101112131415161718192021222324252627/** * 给url后面动态拼接参数或修改参数 * @param url * @param params */function changeURLArg(url, params) { let resUrl = url || '' if (url && params) { Object.keys(params).forEach((key, index) => { if (params[key]) { const regExp = new RegExp(`(${key}=)([^&]*)`, 'ig') if (regExp.test(resUrl)) { ...

要实现顶部或底部有凹凸弧度的矩形或图片，实现的效果如下： 第一步：需要定义生成顶部或底部有弧度的矩形的函数 参数定义：topRadianHeight： 顶部弧度的高度，大于0为顶部凸，小于0为顶部凹；bottomRadianHeight：底部弧度高度，大于0为底部凸，小于0为底部凹1234567891011121314151617181920212223242526272829303132333435363738394041424344454647/** * 画顶部或底部有弧度的矩形或图片需要用到的方法 * @param params * @param topRadianHeight 顶部弧度，大于0为顶部凸，小于0为顶部凹 * @param bottomRadianHeight 底部弧度，大于0为底部凸，小于0为底部凹 * @param ctx */const toDrawArcRect = (params, ctx) => { // 画上下左右方向有弧度的矩形 const { left, ...

参考了大牛文章的方案，链接如下：https://juejin.im/post/5b7e48566fb9a01a1059543f他的方案只能同时设置四个角的圆角值，在这里优化了大牛的方案，可根据需要给四个圆角设置不同的值。 需要定义生成圆角矩形的函数 参数定义：可以通过设置borderRadius或borderTopLeftRadius、borderTopRightRadius、 borderBottomRightRadius和borderBottomLeftRadius来生成四个方向的圆角矩形或图片123456789101112131415161718192021222324252627282930313233343536373839404142434445464748/** * 画圆角矩形、圆角边框和圆角图片所用到的方法 * @param params * @param ctx */const toDrawRadiusRect = (params, ctx) => { const { left, top, wi ...

storybookStorybook简介 Storybook是一个辅助UI控件开发的工具。通过story创建独立的控件，让每个控件开发都有一个独立的开发调试环境。 Storybook的运行不依赖于项目，开发人员不用担心由于开发环境、依赖问题导致不能开发控件。 Storybook支持的框架覆盖主流的框架（React、Vue、Angular）。 本文将介绍使用react的项目如何配置Storybook环境。 安装 1、安装命令 1npm i --save-dev @storybook/react 2、package.json中 12345{ "scripts": { "storybook": "start-storybook -p 9001 -c .storybook" }} 3、在工程根目录创建.storybook目录 4、在.storybook目录下创建config.js文件 12345678 import { configure } ...