guoqing2016-CSDN博客

原创 css食用技巧

表格布局父元素display: table;table-layout: fixed;子display: table-cell;vertical-align: middle;表格布局内只有外padding才能撑开display: table-cell;如果内部是个图，需要外面加一层a标签a标签的宽度和高度想撑起了就要用height: 48px;width: 48px;box-sizing: border-box;display: block;margin: 0 auto;pos

2020-07-15 09:25:58 633

原创 echarts 多y轴数据有负数导致0刻度线不对齐

先计算出每列的最大数占比数量和最小数占比数量，然后分别去对比，少数量的就根据分段间隔去补数量，保证两边的最大数列数和最小数列数相同，就可以保持一致的列刻度。先分别读取出两个数组的最大值和最小值，如果数组的长度为0，为了方面后面的计算先设置值为1。目的是为了让最大和最小数刚好分段间隔成比例，这个时候的最大和最小数就是根据间隔比例来的。网上找了很多方法去尝试，效果都不是很好，这边自己写了个处理的方法。然后分别计算出，每个数组在理想分段数下的每段实际间隔数。然后根据计算的实际分段间隔数去重新计算最大和最小数。

2023-04-24 11:40:11 1729 1

原创 vue3 vite 使用 unplugin-icon 数据动态渲染图标

vue3 vite 使用 unplugin-icon 数据动态渲染图标当遇到路由图标那种需要根据数据渲染出图标，就不行了，这里的解决方法是封装图标渲染的组件。本地的图标好像有点问题，还在研究为啥动态渲染不了，后面发现问题了再改。或者有没有大佬看看，是啥原因导致本地svg动态导入不进去。图标库的时候遇到的图标动态渲染问题，这里记录一下。其实就是个全局常量代表图标的前缀而已。然后到渲染的地方呢读取出你绑定的字段。常量这块直接写死都一样的。使用的时候直接导出封装的。

2023-02-24 14:13:10 4295 7

原创汇总 git 常用命令

git push 提交 git pull 拉取 git fetch 获取 git merge 合并 git commit 提交文件 git add 添加 git branch 分支 git checkout 切换/检出

2022-10-27 10:19:44 324

原创 node 根据xlsx表格数据，批量生成表格文件，并且设置样式和行高

任务目标就是根据数据1的字段相同的每条的数据，去生成一个表格文件（数据1的值为1的全放一个表格文件里，数据1的值为2的放下一个文件里，以此类推）的一些问题，会导致行高没效果，还需要进行下面的操作。(代码中有不太了解的地方，可以留言问我哈)文件夹找到index.js 打开编辑。文件夹找到xlsx.js 打开编辑。假如我们有这么一个数据的表格文件。文件，在136行添加代码。将下面的代码对其进行替换。下面先来进行准备操作。

2022-09-16 10:55:55 2100 1

原创 uniapp vue3 如何调用uni-popup组件的this.$refs.xxx.close()

uniapp vue3 如何调用uni-popup组件的this.$refs.xxx.close(),在uniapp使用vue3进行开发时，使用了uni-popup弹框，但是在对弹框进行操作的时候，发现调用`this.$refs.xxx.close()`报错`Cannot read property '$refs' of undefined`......

2022-07-08 10:05:51 6925 11

原创 vue3 实现简易的router

实现了个简易的router，只做了路由切换支持hash和history模式index.js 代码import {ref,inject} from 'vue'import RouterView from "./RouterView.vue"import RouterLink from "./RouterLink.vue"const ROUTER_KEY = '__router__'function createRouter(options){ return new Router(optio

2022-05-31 11:45:26 261

原创 vue3 实现一个vuex

实现了个简易的vuex，包含 state、getters、mutations、actions 等import { inject, reactive, computed} from 'vue';const STORE_KEY = '__store__'function useStore() { return inject(STORE_KEY)}function createStore(options) { return new Store(options)}clas

2022-05-30 19:05:37 318

原创微信小程序 canvas生成海报

最近遇到个需求，需要根据一个指定的页面，生成图片并且进行保存，大致就是需要在canvas上画出来和当前页面一样内容，然后转存为图片这样。准备工作先获取到canvas对象const query = wx.createSelectorQuery()query.select('#myCanvas').fields({ node: true, size: true}).exec((res) => { const canvas = res[0].node const ctx = c

2022-04-28 17:32:47 1253

原创微信小程序 canvas设置字体无效问题

在使用canvas画海报图的时候有一些特殊字体，但是，无论使用方法引入还是css直接引用，都无效。ctx.font = "normal 20px 'SourceHanSerifCN'";后面发现，在方法内引入时需要设置scopes参数，默认为webview还需要额外加上native即可wx.loadFontFace({ global: true, family: 'SourceHanSerifCN', source: 'url("xxx.OTF")', scopes:

2022-04-28 13:53:48 3636

原创微信小程序通用节流函数

throttle(fn, gapTime) { if (gapTime == null || gapTime == undefined) { gapTime = 1000 } let _lastTime = null return function (e) { let _nowTime = +new Date() if (_nowTime - _lastTime > gapTime || !_lastTime) {

2022-04-28 13:46:31 463

原创 uniapp 自定义底部tabbar 点两下会闪烁问题

在做自定义tabbar时，遇到了个问题，第一次切换tab，底部操作栏会明显的感觉闪烁，并且选中状态还会有抖动现象出现这里在网上找到几个解决方法汇总一下1、在tab页的onShow生命周期写了切换选中状态后，tab组件那边的切换就没必要再加setData去修改选择的状态了，可以直接注释掉tab组件的`wxml`文件中 `cover-view` 和`cover-image` 分别替换为 `view` 和 `image`

2022-04-08 16:23:38 4150

转载 uni-app小程序画布转base64并且进行压缩

在做一个签名的功能时，遇到的问题，签名后的画布需要转成图片，转成图片后，图片还要转base64，并且base64必须要很小（不能超过8kb），具体代码如下uni.canvasToTempFilePath({ fileType: 'jpg', canvasId: 'mycanvas', quality: 1, success: function(res) { console.log("第一个画布生成图片",res,res.tempFilePath) uni.getImageInfo({ //

2021-11-12 14:48:57 1427

原创 nuxt 使用图片懒加载 lazy-component 标签报错

在nuxt使用图片懒加载的时遇到的问题，在未使用<lazy-component>标签的时候还是正常的，但是使用了之后，就直接40多个异常提示出来后面发现，需要在<lazy-component>标签外面加多个<no-ssr>标签就好了<no-ssr> <lazy-component> ... </lazy-component></no-ssr>个人博客地址：nuxt 使用图片懒加载 lazy-componen

2021-11-03 17:54:03 699

原创 nuxt github-markdown-css 无法正常加载

最近在使用nuxt搭建博客，文章详情使用的是mavon-editor做写入和展示，但是在使用的时候，发现有时候highlight和github-markdown.min.css的一些样式和css加载失败其实是网络的问题，有的网络无法访问github的，就会出现这种情况这边的做法就是把文件下载下来，直接丢服务器上，去设置mavon-editor使用自定义的样式和js地址<mavon-editor ...:external-link="externalLink"></mavon-e

2021-11-03 17:52:17 680

原创我有自己的博客啦，自己搭建的博客网站

社会喵 - 一个基于内容分享,创作与交流学习结合的分享博客经过一个月的折腾，终于搞出了自己的博客网站，前端是用的nuxt，听说这个可以有很好的seo效果，才选的这个框架，等后面看看收录情况，再决定要不要换别的吧后端使用的是renren-fast那套框架，也是比较熟悉了有一定的经验，在写博客中主要遇到的一些问题就是ui和nuxt的使用，ui确实很难受，找了半天也没找到喜欢的那种，博主本身不太会搞设计，都是东抄抄西改改什么的，不过最终还是搞完了，感觉界面上还可以吧，二次元的主题，哈哈哈哈csdn这边的博客

2021-11-03 17:49:46 114

原创中间带文字的hr分割线

<hr class="hr">.hr { color: #000; border: 0; font-size: 12px; padding: 10px 0; position: relative;}.hr::before { content: "分隔线"; position: absolute; padding: 0 10px; line-height: 1px; border: solid red; .

2021-09-29 17:49:02 2133 2

原创 uni-app 小程序蓝牙库

分享一下之前用uni-app写小程序的时候，做的蓝牙库git地址：https://github.com/qinnnn/bleTool使用方法主要是项目中 utils/bleTool.js 的文件，这个是库的本体，可以单独使用首先需要执行 init 去初始化BleTool.init()在开启搜索前，需要执行 getBleState获取蓝牙状态，返回参数为状态，如果蓝牙状态正常，则可以开始搜索BleTool.getBleState((state)=>{})搜索的方法为search 返

2021-08-10 17:34:43 945 6

转载 css3 按钮翻转效果

css3 按钮翻转效果html<div class="flipper"> <span class="flipper-object flipper-vertical"> <span class="panel front">the front</span> <span class="panel back">the back</span> </span></div>css.flipper

2021-08-06 10:16:33 478

原创 web前端开发随缘------随便聊聊

唠嗑入职新公司也有一个月了，新公司这边工作制度为大小周，我觉得可以接受，每天上下班挺准时的，到点了没事没事就都走了（在上一家做外包的时候，很少准时6点下班），晚上不加班的感觉很舒服了，在这边我主要是负责做小程序，使用uni-app去写小程序，这里要吐槽一下，这边小程序的商场系统，购物车的优惠金额折扣什么的都是前端计算，然后计算好直接传给后端进行创建订单的，就感觉很奇怪，这种金额计算，不应该是后端那边处理的吗？还是说大家都是这样？我也算是第一次做购物车商场小程序，没什么经验，有经验的大佬可以评论区说下那边是

2021-08-04 21:59:41 362 6

原创记录6月面试遇到的面试题

跳转目录js相关作用域考察继承和this指向考察js中判断数据类型有哪些方法，各有什么优缺点？防抖和节流有什么作用（是否可以手写防抖和节流？）vue和react对比Vue组件通讯vuex 有几种模式？vue响应式原理React组件通讯redux其他相关对webpack的了解对gulp的了解部分问题的答案出自个人理解，或者是摘抄别处的，这里只做问题的汇总（附带“答案”好看一些）js相关作用域考察var a = 10;(function () { console.log(a) a =

2021-06-10 10:32:09 265 2

原创输入框input组件在Safari光标占满的问题

只有在苹果系统的Safari才这样，windows浏览器正常解决方法：输入框不可以设置高度100%，上下间距使用padding控制

2021-03-04 10:11:18 344 1

原创 react hook 组件默认值

import { useState, useRef, SyntheticEvent } from 'react';/** * 表单受控组件中，输入输出的统一规范 * * - `value` 用于输入组件当前值 * - `onChange` 用于回调组件最新值 */export interface ControlledProps< V, E extends SyntheticEvent = SyntheticEvent, C extends ChangeContext<

2021-03-04 09:35:08 1825

原创 Can‘t resolve ‘core-js/modules/es.symbol‘ in

启动项目时，遇到的一个神奇的bug看情况好像是 core2.0 与 core-js 3.0 都会同时调用到的问题在windows电脑上会出现，同样的项目mac电脑上未出现这种情况尝试解决方法：回退 core版本为2.6.5已经是2.6.5了，无效~重新安装 corecnpm install core-js@2无效~升级到core 3.5.6版本cnpm install [email protected]无效~...

2020-09-17 15:40:58 3413

原创一个模仿mikutap的半成品

前段时间用空闲时间搞个小页面，内容就是模仿的mikutap，原作者地址：mikutap效果demo：暂时只做了一种效果，其他的有人想写的话，就直接去git下载写吧，注释我都有好好加的，可以当做新手的练手项目，哈哈哈动画的效果是使用 PIXI+tweenmax 做的，有一个示例的动画，根据这个进行扩展，可以写写其他的一些特效git地址：https://github.com/qinnnn/keyboardMusic纯静态，除了动画之外，没有其他框架引入其他问题请留言评论...

2020-09-11 17:20:46 536

原创 js 模拟锚点跳转

使用scrollIntoView// 找到锚点let anchorElement = document.getElementById(anchorName);// 如果对应id的锚点存在，就跳转到锚点if (anchorElement) { anchorElement.scrollIntoView({ inline: 'start', block: 'start', behavior: 'smooth' }); }Element.scrollIntoView() 方法让当前的元素滚动到浏览

2020-08-26 09:49:58 1170

原创 React 个人常用代码，防止采坑专用版

这里写目录标题dom事件绑定模板dom事件绑定模板class class extends React.Component { constructor(props) { super(props); this.state = {number: 0}; // 为了在回调中使用 `this`，这个绑定是必不可少的 this.handleClick = this.handleClick.bind(this); } handleClick(e,id) { //为

2020-08-26 09:40:19 149

原创 web前端开发日记------腾讯外包工作内容

前端开发日记专栏系列文章来到腾讯外包已经半个多月了，算是已经度过了刚来时那段适应期了先说说大家可能比较关心的加班问题吧加班的话我一般都是8点多才走的还有关于工作内容方面，外包仔的话一般不会安排那种技术要求高的工作给你，或者说比较少吧

2020-07-17 20:27:05 1813 5

原创 css 去掉列表中每一行最后一个元素的外边距或属性

css 去掉列表中每一行最后一个元素的外边距或属性设定外框的宽度为`180px`内部的每个tag宽度`34px`右边距为`12px`并列排列后，一行够排列3个我们计算一下剩余的宽度：`180-(34+12)*3 = 42`最终得出剩余宽度为`42`很显然，其实如果最右边的tag的右边距为空，他就可以变成4个一排了

2020-07-17 19:57:43 6003 4

原创 web前端开发日记------入职腾讯外包

入职了腾讯的外包了面试前还是准备了几天，在网上刷刷基础题，具体面试的时候，只有一次的技术面，具体的面试题可以看我另一篇文章web前端腾讯外包面试记录入职的第一天，上午在外包公司办理入职，下午就到了腾讯这边，被分配到松日鼎盛大厦里面办公，里面也都是一些同样的外包同学，入职还安排了一位导师，导师我觉得人很好，先是带我见了一遍项目组的所有人（包括腾讯大厦里的），一一刷了波脸后，我基本没记住几个人… 突然感觉记名字也是个技术活，腾讯对信息安全感觉很重视，访问一些网站有些域名都需要申请后才可以访问的到福利方面

2020-06-23 12:48:11 2706

puppeteer爬取大众点评的demo

js实现日历效果，html日历效果展示

Mycat-server-1.6.5-release-20180122220033-linux

空空如也