liudan123012的博客

原创 Vue使用小技巧（注意事项--坑点）

1.给子组件动态传入数据（$attrs使用）// 父组件<parent />// 子组件(第三方组件--quasar)// 组件中的字段不确定(filled outline standout ……)，如何根据需要填入对应的值，而不需要在子组件中props所有可能出现的值<child /> ----> <q-select />方法：父组件（parent）----按需传入对应值（如：filled: true）子组件（child ）--

原创 工作笔记：node中读取文件流（createReadStream）信息不全

工作中有一个需求是手动维护一个路由文件（项目太大，该文件只维护关键内容--name/key/children），通过node读取该文件内容，设置想要的格式并输出到最终路由文件。通过命令行运行node即可生成文件内容。由于项目太大，手动维护文件一直在不停地往里面添加路由关键信息。直到有一天，同事告诉我无法运行node命令，报错！！！经过一番问题排查，初步判定可能是因为文件太大了。打印生成内容发现返回的是undefind。前几次打印createReadStream中on('data')的data值都

原创 工作笔记：关于node的使用

1.使用localStoragevue-cli根目录创建node文件用于将后台给的数据处理成前端想要的数据字典表，后台给的数据是中英文的码值表。在这里，我需要判断当前localstorage中存储是中文模式还是英文模式。但是，我发现使用localstorage.getItem('lang)会报错：localstorage is not defined通过其他文件引入也不行，因为node读取的是文本，仍然会报错：localstorage is not defined后来，经过在网上搜

原创 echarts实现地图散点图---问题解决方案

项目上有一个需求是，根据总/分部信息显示相关地图，同时根据信息查询相关数据，并以散点图的形式显示在地图上。我查询了一下echarts官网的文档和案例，代码如下：series中的参数coordinateSystem值为option参数中定义的bmap。我于是按着这个方式去调试，发现并未显示任何东西。该引入的都引入了，就是显示不出来。于是，我又去看了一下文档，发现coordinateSystem的值只有如图三个选项：而且，option参数中没有bmap相关配置项。然后，我又去查看geo的相.

原创 工作笔记：Element-UI Dialog自定义组件点关闭按钮 报错：Avoid mutating a prop directly since the value will be overwr...

页面打开Dialog对话框，点击取消和确认正常，点击关闭按钮能关闭Dialog对话框，但是会报错。修改之前的代码：//父组件<set-refund-withdraw v-if="withdrawDialogVisible" :visible.sync="withdrawDialogVisible"></set-refund-withdraw>//子组件<el-dialog :close-on-click-modal="false" title

原创 工作笔记：小程序中，标题固定到顶部在iphone手机中滑到底部出现闪烁的问题

需求：页面往上滚动，当红框内容位置滚动到页面顶部时，固定到顶部；反过来，页面往下滚动，当页面滚动高度小于红框内容距离顶部正常高度时（未固定到顶部），则脱离顶部固定。实现：//jsonPageScroll: function (e) { if(e.scrollTop >= this.data.tabScrollTop + 10){ this.setData({ tabFixed: true }) } else { thi..

原创 工作笔记：使用slice()最后一个参数为负数的方式去掉时间毫秒

定义和用法slice(start, end) 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。使用 start（包含） 和 end（不包含） 参数来指定字符串提取的部分。字符串中第一个字符位置为 0, 第二个字符位置为 1, 以此类推。提示：如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。实例let str = "2020-08-19 20:23:41";let s = str.sl.

原创 工作笔记：elementUI实现数组（需要验证的数据是以数组的形式呈现）表单验证

<el-form :model="couponForm" ref="couponForm" label-width="200px"> <el-form-item v-for="(item,idx) in couponForm.actIdList" :label="'活动期间第' + (idx + 1) + '次下单得'" :prop="'actIdList['+idx+']'" :rules="{ required: true, message: '请选择'}"> .

原创 wx.createSelectorQuery()返回值为null的解决方案

在我的工作项目中需要通过wx.createSelectorQuery()获取一个元素的高度来设置另一个元素的margin值，然后wx.createSelectorQuery()返回的值为null。我查了百度，找到了一位前辈的解决方案。wx.createSelectorQuery().in(this) // .in(this) 的使用运行结果：能访问到数据了，非常感谢那位前辈的分享！当然，如果是你要获取的元素是要通过后台数据渲染的，你也可以将其放到异步请求成功函数中。

原创 margin-top:负值，padding-top:值--解决顶部一条白线的兼容性问题

自定义顶部导航中遇到一个兼容性问题，顶部总是有一条不明白线，大多数手机都不会出现，但是有部分手机可能会出现。我采用margin-top: -1px;padding-top: 1px;的方式来解决，发现好像可以实现。//wxml<view class="navBar"> <view style="height: {{statusBarHeight}}px;></view> <view> <text style="line

原创 关于自定义tabbar项的问题

我们项目中有一个需求：也就是说，tabbar的“分类”项会应该需求显示为“分类”/“管理台”，我们的tabbar项已经有5个，再加上一个就是6个。小程序规定tabbar中的list项不能超过5个。而且，小程序未提供显示/隐藏tabbar某一项的功能。我们知道小程序2.7.0版本增加了一个API（wx.setTabBarItem(Object object)）用于动态设置tabbar某一项的内容。但是有一个问题，无法设置pagePath。相关API：https://developers.weixi

原创 笔记：javascript相关知识点---闭包

1.闭包闭包是指有权访问另外一个函数作用域中的变量的函数。方法：在一个函数内部创建另一个函数。用途：1.设置私有的方法和变量；2.匿名函数最大的用途是创建闭包，并且还可以构建命名空间，以减少全局变量的使用。从而使用闭包模块化代码，减少全局变量的污染。3.对结果进行缓存。var fn=(function(){ var cache={}//将结果缓存到该对象中 return function(){ var str=JSON.stringify(arg

原创 笔记：vue相关重点

1.内部监听生命周期函数在Vue组件中，可以用过$on,$once去监听所有的生命周期钩子函数，如监听组件的updated钩子函数可以写成this.$on('hook:updated', () => {})。2.外部监听生命周期函数<template> <!--通过@hook:updated监听组件的updated生命钩子函数--> <!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发--> <custom-s.

原创 笔记：ES6中的promise

Promise状态：pending / fulfilled / reject作用：将异步操作队列化，解决回调地狱创建Promise对象：new Promise(function(resolve, reject){...}）//resolve()---成功时调用；reject()---失败时调用；调用：单个调用：对象.then() 多个调用(要求所有请求都成功)：Promise.all([对象1，对象2...]).then(//成功).catch(//失败) 多个调用(其中一个请求成.

原创 小程序--获取容器内各元素宽度之和-坑

已知元素个数和各元素之间的距离（单位：rpx），求各元素宽度之和，以获取容器宽度并设置其宽度（单位：rpx）。思路一：获取各元素宽度+距离（单位：rpx；因此，距离应该是rpx单位值除以2）；累加后得到总的值（单位：px）；this.setData()值=得到的总值（单位：px）* 2 - 最后一个元素的距离（单位：rpx）；代码：<view class="label-list...

原创 针对Webpack加载样式文件的坑

main.css代码：body{ background: #ccc; }app.js代码：import './main.css';webpack_config.js代码：const HtmlWebpackPlugin = require('html-webpack-plugin');const path = require('path');module.export...

转载 JS创建类的方法--附实例

Javascript是一种基于对象的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有Class。（不过，ES6引入了Class这个概念，作为对象的模板。通过class关键字，可以定义类。ES6入门：http://es6.ruanyifeng.com/）。　　但是在项目开发中，经常用到JS面向对象开发，这就需要我们去用JS创建类，从而去实...

原创 微信分享链接返回代码 JS

返回上一页，一般我们可以使用：history.go(-1)或者history.back()，可以正常返回第一层。以下截图摘自：http://www.jb51.net/article/106388.htm我试了一下，根本就实现不了。那么，还得想办法才行！后面，我找到了一个方法。跳转链接使用_blank,弹出新窗口，那么对于微信新打开窗口做关闭处理，上级页面就显示出来了！代码：WeixinJSBrid...

转载 Javascript中的函数--图解

原创 JQ修改css样式小结

1、修改标签属性$(选择器).attr('style','属性：属性值')；// 如：$('.attr').attr('style','color:red');注：不过，此方法有一个不足之处。即：不论是你修改样式还是添加别的样式，都会覆盖之前所有的样式。如需保留之前的样式，则需要重新写一遍。2、修改标签className添加CSS类（addCla

原创 position:fixed;实现底层页面不跟随浮层模块滚动

由于工作需要，在首页做一个搜索浮层，要求浮层全屏显示（即：width:100%;height:100%;）。当页面内容超出屏幕高度时，页面添加滚动条（overflow:scroll;）。                搜索页面（浮层）代码：        可是问题是，当我们滑动到浮层底部或顶部时，底层页面（首页）也会跟着滑动，那么就会出现底层页面的滚动条。

原创 针对X5新内核Blink以及google chrome主要字体主动放大问题

3月中旬刚进入现在的公司，为了让我尽快地熟悉公司的流程，领导让我来完成移动wap网站……但是公司的要求是做0.5倍缩放（initial-scale=0.5）的页面，好吧！这下我可为难了一下，因为之前一直都是做不缩放页面，现在突然要改变我一时无从下手！

原创 第一章：XML简介

xml（可扩展标记语言）简介，与html的区别，xml的优点及应用