戴某人的博客

1. Pinaia Pinia是一个全新的Vue状态管理库，是Vuex的代替者，尤雨溪强势推荐。 如果你学过Vue2，那么你一定使用过Vuex。我们都知道Vuex在Vue2中主要充当状态管理的角色，所谓状态管理，简单来说就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。 在Vue3中，可以使用传统的Vuex来实现状态管理，也可以使用最新的pinia来实现状态管理，我们来看看官网如何解释pinia的。 官网解释： Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。从上面官网的解释不难看出，pinia和Vuex的作用是一样的，它也充当的是一个存储数据的作用，存储在pinia的数据允许我们在各个组件中使用。 Pinia优势： 支持Vue2和Vue3（Vue 版本大于 2.7） 抛弃传统的 Mutation ，只有 state, getter 和 action ，简化状态管理库 良好的Typescript支持，毕竟我们Vue3都推荐使用TS来编写，这个时候使用pinia就非常合适 不需要嵌套模块，符合 Vue3 ...

这两天开发一个微信小程序，需要让底部导航栏中间图标往上突出一点来。之前都是用组件或者直接原生没有太多定制样式，所以记录一下完成步骤。 1. 自定义tabbar栏配置 在 app.json 文件中的 tabBar 中指定 custom 字段为 true（意思是允许使用自定义 tabBar）； 在 app.json 中全局开启使用组件，或者在所有涉及的 tab 页 json 中申明usingComponents 项； 在 app.json 中添加作为 tabBar 栏的页面； 12345678910111213141516171819202122232425262728293031323334353637383940"tabBar": { "custom": true, "color": "#cccccc", "selectedColor": "#eb585b", "borderStyle": "black&quo ...

代码部分1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071// http.js// 导入 http 模块import http from 'wechat-http'/** * 配置接口基础路径 */http.baseURL = 'https://live-api.itheima.net'/** * 挂载方法到全局 */wx.http = http/** * 配置请求拦截器 */http.intercept.request = (config) => { console.log('config -----> ', config); const app = getApp() if (app.token) { config.header = { Autho ...

记录一下自己写的一些工具类的代码 1. 读取excel表格内容转换为markdown文档 需要安装依赖，主要是用到了一个node-xlsx的npm包 1npm install node-xlsx --save 主要代码部分 excelToMarkdown.js 123456789101112131415161718192021222324const XLSX = require('xlsx');const fs = require('fs');// 读取 Excel 文件const workbook = XLSX.readFile('input.xlsx');const worksheet = workbook.Sheets[workbook.SheetNames[0]];// 将表格数据转换为对象数组const data = XLSX.utils.sheet_to_json(worksheet, { header: ['title', 'content']
...

最近开发一个微信小程序项目的时候有一个需求就是逆地址解析和poi检索，一般来说微信小程序最好还是使用腾讯地图最合适，不会出现奇怪的地理位置偏移什么的。但本着折腾一下的心理去使用高德地图的微信插件，但万万没想到这一下直接掉坑里面去了。 这个坑主要体现在微信使用wx.getLocation()和wx.chooseLocation()方法获取到的数据默认来说是纬度在经度前面，导致数据直接给高德地图sdk使用，就会在失败的回调中报错误代码20011。然后就去翻高德的错误代码说明,说是”查询坐标或规划点（包括起点、终点、途经点）在海外，但没有海外地图权限”。但是我使用腾讯地图就很正常，那时我就在想有没有可能是单词写错了，但是经过排查发现并不是。于是我就在想有没有可能是经度纬度搞反了，但是我查了网上的帖子都是我这样的写的呀，不过我还是抱着试试的心态将经度纬度互换了一下位置。然后…… 然后……数据就出来了。这就让我很是无语了，于是再去翻看高德的文档最后还是在Web服务API下才看到这么一条信息。 我只想说，“高德，你文档可以写的全一点嘛，我只是想在微信小程序上用上你的逆地址解析，真的犯不着把你 ...

简介：vue-qr(项目地址)一款可以生成带logo和背景图片二维码的vue前端插件，功能强大但使用简单，你可以使用该插件生成各种漂亮的二维码图片。需要注意的就是不支持ie浏览器 安装：12345// npmnpm install vue-qr --save// yarnyarn add vue-qr 导入 如果多出组件中需要使用，在main.js中全局导入注册 123456789// 导入// vue2.x import VueQr from 'vue-qr'// vue3.x import vueQr from 'vue-qr/src/packages/vue-qr.vue'// 注册Vue.use(VueQr) 属性 说明 是否必须 text 欲编码的内容 是 correctLevel 容错级别 0-3 size 尺寸, 长宽一致, 包含外边距 margin 二维码图像的外边距, 默认 20px colorDark 实点的颜色 colorLight 空白区的颜色 bgSrc ...

在一个项目中运用到了element-ui的表格组件，但是遇到一个问题就是，当一个单元格内的数据特别多的时候，但是单元格宽度又不够放下全部的内容。于是就会发生在单元格内部换行，这就会让这个页面的布局变得不可控，经过一番搜索找到了一个算是解决问题的方法。 给el-table 设置属性 cell-class-name，自定义 className 代码如下： 1234567<!-- 表格部分 --><el-table :data="tableData" :header-cell-style="headClass" cell-class-name="table_cell" :cell-style="rowClass" border style="width: 100%"></el-table><!-- css部分 ::v-deep 表示将样式穿透到element-ui里面，记得给<style>标签里面加上scoped，不然这个样式就变成 ...

直接上代码，使用的接口还是上一篇文章的给出的接口。实现懒加载数据。 123456789101112131415161718192021222324252627282930313233343536373839404142434445<template> <div class="block"> <el-cascader v-model="value" :props="props" @change="handleChange"></el-cascader> </div></template><script>import { getprovinces, getcities, getareas, getstreets } from '@/api/riskarea'export default { data () { return  ...

​ 最近项目上一个组件需要使用到tree组件来选择省市县乡，因为数据量比较大所以打算使用懒加载的方式来解决一次性加载太多数据而造成体验不好的问题。树组件如果数据比较多的话，一次性把整棵树的数据都请求到，略有耗时。所以为了优化性能，我们就要实现树组件懒加载的效果，也就是当我们点击树节点的时候，再去向后端发请求，获取对应点击的树节点下的数据。这样的话，点击哪里，加载哪里，性能会提高不少。 tree组件常见属性 data—-用来展示数据 props—-树状图配置 label—指定节点标签为节点对象的某个属性值 children—指定子树为节点对象的某个属性值 disabled—指定节点选择框是否禁用为节点对象的某个属性值 show-checkbox—显示选择框 getCheckedKeys—-获取当前选中的节点的keys default-expand—–all-默认展开 check-strictly—-设置true，可以关闭父子关联 this.$refs.tree.setCheckedKeys([])—–清空当前的选择 懒加载按照 elementui官方文档示 ...

以下是我在学习Vue时，对main.js中render函数的个人理解。 在打开利用Vue脚手架创建的项目文件main.js之前，我们猜想它应该长这样 实际上的mian.js如下 跟我们想的不一样，那这里的render又是什么呢？ 我们可以先假设，如果按照我们猜想的写法，会发生什么？ 报错了 ，意料之中 那么我们来分析一下错误提示 错误提示我们引入的是非完整版的Vue，缺少模板解析器，并给出了两种解决方法 我们先来试试第二种方法，引入完整版的Vue，我们怎么知道引入的是不是完整版的？完整版的又在哪呢？ 看代码 实际上我们引入的是vue.runtime.esm.js，是精简版的Vue，它与完整版的不同就是少了模板解析器，那完整版的Vue哪里呢？ 引入完整版的Vue我们只要改一行代码就行 import Vue from ‘vue/dist/vue’ 运行成功！第二种方法可行 接下来我们再来试一下第一种办法，使用非完整版的Vue，把render函数写上去 同样运行成功 此时我们发现，这不就是Vue一开始采用的解决方法吗？ 从vue官网中知道，vue提供了两个版本，完整版和 ...