天蚕土豆丝的博客

原创 vscode配置代码片段

1.ctrl + shift + p 然后选择 Snippets:Configure User Snippets （配置用户代码片段）2.选择vue或者vue.json。3.下面为json内容。

原创 js生成pdf并自动上传

2.使用两个插件，import到项目里，然后是获取dom进行生成pdf操作。1.生成pdf前要让js选中生成pdf部分的dom。

原创 python脚本获取cookie写入本地

python获取token并自动填入本地文件

原创 vue3的hooks用法

vue3的hooks使用

原创 crome配置跨域浏览器

配置跨域浏览器

原创 vue中对象属性赋值后，页面不更新解决方案

vue属性值变化后，页面不更新解决方法

原创 vue自定义组件v-model使用心得

父组件 <nameList v-model="nameListVisible" :readId="readId"></nameList>子组件 model: { prop: 'value', event: 'change' }, // 接收父组件传入的参数 props: { value: { type: Boolean, default: false } },子组件更新v-model的值，必须通过

原创 element deep不生效

<el-dialog title="1" :visible.sync="selCustomShow" custom-class="dialogCustom" width="900px"> <div class="custom-body"> <el-tabs v-model="activeNameTab" type="border-card" style="margin-bottom:5px;" @tab-click="handleClick"...

原创 相同key值时，复制后对象中属性值到前一个对象中

setValueSameKey (options1, option2) { Object.keys(options1).forEach(key => { if (option2.hasOwnProperty(key)) { options1[key] = option2[key] } }) },

原创 vue中provide,inject用法

祖父组件中 props: {}, provide () { return { list1: () => this.testItem.list } }孙子组件中 inject: ['list1'],

原创 配置快速生成vue模板

参考链接：http://cache.baiducontent.com/c?m=k6pqu0exhISgkRbrEQ5RSr52Flhzf7aY8TzygyV20zi840cvWyGvLd06TAW1uuXRN2AEDqAK6Zhbq9lP6Hi3NyGtCyJHnrnPJeCDIfmQADt5aOI3ODbyhjhWTaHlPz9aOnpEGPuEwF9AYcKSBVfee04Vt8ODqXYxR3DPXLieqXPBexo2bLEyL4ZB4-zXjR-Q&p=98759a46d6c608bc44

原创 如何解决flex:1撑开父元素问题

开发过程中很多时候需要一个区域自动撑开，并且在刚好撑开的区域内实现滚动，这时用flex:1去做。但实际效果很多时候会出现区域撑的过大，却没有滚动效果。要实现4自动撑满剩余空间，并且里面的内容超出时滚动。容器1设置 display:flex;flex-direction:column;height:100%;容器2设置 display:flex;flex-direction:column;flex:1;overflow:auto;这里overflow:auto不会有滚动效果，只是阻止容器2被撑大，不设置

原创 正则表达式的使用

var obj = {name:'张三', age: 12, test: [{company:'软通动力'}]}var template = "欢迎来到{{name}}的面试，你的年龄是{{age}}，公司是{{test[0].company}}，面试时间30分钟"function render(ctx, template){ let reg = /\{\{.*?(\}\})/g // 匹配{{}}需要用\做非转义处理，.表示任意字符，*表示不限次数匹配，?表示非贪婪，不然会匹配到第三个}},而不是

转载 git clone出现错误“fatal: unable to access ‘https://github.com/XXX.git/‘: Failed to connect to github.com

解决办法将https改成gitgit clone git://github.com/XXX.git参考链接：https://www.cnblogs.com/yunjiao/p/15039629.html

原创 table中如何格式化porps方式

```html <el-table-column prop="userTypeStr" label="类型" :formatter="formatUserType"> </el-table-column>格式化props```javascript formatUserType (row, column) { let showName = '' switch (row.userType) { case 0: .

原创 vue date-picker 时间格式化

```html <el-date-picker v-model="formData.createTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>其中value-format可以将formData.createTime最后的日期格式为2021-11-11这种模式

原创 vscode eslint 爬坑

eslint官方文档 https://eslint.bootcss.com/docs/user-guide/getting-started很多项目都是根目录（和.git同级）中有.eslintrc，文件保存按照里面的规则自动格式化一般小程序setttings.json中这样配置 "editor.wordWrap": "on", "editor.formatOnSave": false, "editor.tabSize": 2, "eslint.enable": true, "le.

原创 vue for循环带label的input，多触发一次change事件的解决方案

for循环一个列表，列表中有上传图片组件时，点击一个上传组件，上传完图片后，change事件触发两次。 <li v-for="(item, index) in list" :key="index"> <div> <div>1</div> <div>2</div> <div style="position:relative;"> <labe

原创 element dialog 垂直水平居中显示

如何让组件中的dialog在可视区域垂直水平居中先将dialog放到body的下层，保证自己写的样式相对于视口区域生效。element dialog文档中有个append-to-body属性，将其设置为true,会将dialog扔到body下面。再设置一个自定义dialog的class<el-dialog title="标题" custom-class="selfDialog" :visible.sync="dialogVisible" :append-to-body="true">

原创 获取图片的原始宽高

loadImg (url) { let img = new Image() img.src = url let that = this img.onload = function () { if (img.width / img.height > 1000 / 600) { that.fix = 'widthFix' } else { that.fix = 'heightFi...

转载 小程序，vue中如何使用空格

https://developers.weixin.qq.com/community/develop/doc/0000424e84819076dff691d3e56000复制回复里面的空格即可

原创 git的bash脚本

var="feature/myfeature/test"target="dev"git add .git rm --cached bash.shgit commit -m "commit提交备注"git pullgit push origin $vargit checkout $targetgit pullgit merge origin/$vargit push origin $targetgit checkout $var使用方法：将上面的代码复制到新建的bash.sh文件中

原创 小程序js文件过大导致主包超出2M解决方案

小程序占用主包空间一般分四种情况：1.通过node_modules构建的miniprogram_npm包，如vant,qs2.js库（不是由npm构建而成的），会单独放一个文件如：city.js(省市区文件，424KB),qqmap-wx-jssdk.min.js,cryptojs等3. 静态资源图片，static下的images4. 主包下pages里的页面，主包下components里的通用组件解决方案：针对1，vant是所有页面都可能会用的，从这里优化内存空间不现实。针对2，优化这

原创 小程序基础版本库与微信版本关系

小程序有基本版本库的概念，有些api在低版本基础库用不了，那么小程序运行在手机时，基础版本库跟微信版本有什么关系么，来看对比不同微信版本时的结果。

原创 vue项目省市区数组绑定到dom上，JS运行时间超长解决方案

https://dmp.hikvision.com/h5wechat/general/index.html?code=021P5mFa1rKUsB0ov3Ga12CDog1P5mFI&appId=wx8dc5d974555fbcb5#/registerResult

原创 小程序步骤条组件

代码块1.该组件是仿照van-steps组件设计的（数据结构），依赖van-icon, 只支持纵向的，移动端横向的步骤条基本不常用，暂时就不支持了2.wxml结构 3.js 结构data{active:1,steps: [ {text:‘申请成功’,desc: ‘2021-10-29 15:22:33’,inactiveIcon: ‘location-o’,activeIcon: ‘checked’},{text: ‘商家开票中’,desc: ‘2021-10-29 15:22.

原创 vue数组更新

原创 小程序组件中数据（变量）被共享问题及解决方法

问题描述：小程序A页面中引入了通用组件share,B页面中也用到了share,A页面有按钮能跳到B页面，当跳转到B页面，并且share组件数据（let 声明的变量，在component函数外）都刷新一遍后，返回A页面，发现A中的share组件中let 声明的变量跟B页面中的share组件一样，但data中声明的变量是之前进B页面前的。得出结论：组件中用let声明在顶部的变量，会被共享到，第二次渲染的组件更改let数据，会影响到第一次渲染的let变量。但声明在data中的不会被影响到。解决方案: 把let

原创 pc端video视频播放的注意点，video兼容ie播放

问题：pc端使用video播放视频，ie浏览器出现视频解析错误导致问题原因：pc端页面中，直接在html中放入多个video标签，12个左右，点击每一个让它自己播放。解决方案：不要直接在html中放入多个video。每次播放一个视频时，可以通过js往页面中的dom里扔一个video,保证整个html中只出现一个video我自己实际的处理方式为，在一个swiper中，放入多个video的poster预览图，注意这里都是图片。在点击图片时弹出一个框，通过js把video加载到弹框中播放。完美解决整个页面卡

原创 h5阻止弹窗下的页面滑动

1.弹窗打开时使用 document.body.style.cssText += 'position:fixed;width:100%;'阻止页面滚动2.关闭弹窗时，让页面恢复滚动 document.body.style.cssText += ‘position:static;’

原创 冒泡排序

let arr=[]let len = arr.lengthfor (j = 0; j < len - 1; j++){let flag = truefor (i = 0; i < len - 2 - j; i++){if (a[i] > a[i + 1]){temp = a[i];a[i] = a[i + 1];a[i + 1] = temp;}}if(flag){break}}

转载 微信授权登录页面返回问题，监听微信返回并关闭浏览器

1.我的业务问题 ，ios在打开一个未登陆的页面后，使用 window.location.replace(“https://open.weixin.qq.com/connect/oauth2/authorize?appid=” + window.wxappId + “&redirect_uri=” + window.tosignUrl + “&response_type=code&scope=snsapi_userinfo&state=”+ urlparmas +"&

转载 SourceTree如何修改账号密码

修改SourceTree账号或密码修改账号找到 C:\Users\Administrator\AppData\Local\Atlassian\SourceTree 中的 userhosts 文件删除其中要修改的账户 返回SourceTree中重新提交即可修改密码找到 C:\Users\Administrator\AppData\Local\Atlassian\SourceTree 中的 passwd 文件删除文件中的内容即可 返回SourceTree中重新提交即可修改完文件重新打开Source

原创 移动端rem适配

var html = document.documentElementvar width = html.getBoundingClientRect().widthhtml.style.fontSize = width / 37.5 + ‘px’//屏幕为375px时 1rem=10px; 设计稿值 / 10 = rem

原创 vant的h5 picker DatetimePicker change事件不触发。如何停止惯性滚动

使用vant的picker滑动选择功能时，发现滑动每停止时，关闭了picker组件change事件没有触发。于是乎出现了这种情况，刚才明明选的2月5号，怎么还是显示的上一个选择的值。解决方案：贴代码 <van-picker ref=“columnsValuePicker” :default-index=“defaultIndex” :columns=“columns” @change=“onChange” />然后在关闭选择器的按钮事件中（这个事件是绑定在自己写的button上），强制..

原创 js 校验，替换表情输入

var reg = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g //表情的正则匹配let val=‘☹☺♂测试’if (val.match(reg)) {val = val.replace(reg, ‘’)}

原创 css中 calc不生效

vue项目calc不生效，百度了一下都说要加空格，但加了发现还是没用，最后发现要用2里面的写法才行，亲测可行1.常用的长度值几乎都可以使用calc()函数进行计算（包括%，px等），calc()函数支持 “+”, “-”, “*”, “/” 运算，运算符前后必须空格隔开，否则不生效；2.calc()函数在less中不能使用不生效（less的运算方式和calc发送了冲突），比如calc(100% - 250px )会被编译为calc(-150% )，解决办法将函数写为calc(~“100% - 250px

原创 element el-date-picker 禁用多个时间段

项目需求要在联动的日期选择器里禁用后端返回的多个时间段，element官方案例中只禁用一个，而且是写死的。所以自己百度加处理实现了这个功能。1.data中 pickerOption: {disabledDate: function (date) { // 禁止选择今天之前的日期const today = new Date().toLocaleDateString()return date < new Date(today)}}这个是禁用当前时间的，我需要这个功能就带着了2.添加后端返回

原创 小程序↵符号替换不生效

最近写小程序的时候后端返回了类似a={name:‘哈哈哈↵aaa’}这种数据，但是页面里{{a.name}}显示出来的结果是哈哈哈 aaa。并没有换行。所以就想到用正则替换↵符号。开始这么写的a.name=a.name.replace(/↵/g, ‘\n’)发现根本没效果后面发现看到的↵符号在小程序里会转化成\r\n，看到的↵在代码里其实是\r\n，但换行只识别\n所以就这样写了a.name=a.name.replace(/[(\r\n)|(\n)|(↵)]+/g, ‘\n’)，还有很重要的一步，

原创 小程序 video 调用play无效解决方法

小程序 video 调用play方法视频没有播放最近在做小程序视频播放流量提醒，用户点击确定后用js调用wx.createVideoContext(‘myVideo’).play()播放视频，发现视频不会播放。各种百度发现问题出在我把video放在了自定义组件里（为了做通用的组件），而不是直接放在page页面里。后面去掉自定义组件，直接把video写在page里就正常了。请多多点赞哦...