- 博客(46)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Vue 项目部署到GitHub Pages
运行后，git就会执行该文件里的命令。大致就是，构建打包项目代码，然后将打包后的代码上传到仓库中的 gh-pages 分支。要将项目部署到 https://.github.io// 上 (即仓库地址为 https://github.com//)，可将 publicPath 设为 “//”。在你的github项目的 Settings - Options 下的 GitHub Pages项里，可以看到你的项目线上网站地址。...
2022-08-18 16:04:34
1216
1
原创 vue使用sortablejs结合element Table实现拖拽
vue使用sortablejs结合element Table实现拖拽使用sortablejs中文网
2022-07-12 14:57:24
1056
1
原创 Vue中filter过滤器的使用方法
过滤器分为两种： 全局过滤器：所有组件都可以使用 局部过滤器：只允许在当前组件中使用全局过滤器我们可以新建一个filter文件夹然后新建index.js在main.js中引入接下来就可以在组件中使用了。这样就可以在当前组件使用了。...
2022-07-08 17:15:05
961
原创 js中的深浅拷贝
堆和栈其实深拷贝和浅拷贝的主要区别就是其在内存中的存储类型不同。堆和栈都是内存中划分出来用来存储的区域。栈（stack）为自动分配的内存空间，它由系统自动释放；而堆（heap）则是动态分配的内存，大小不定也不会自动释放。数据类型数据类型分为：基本数据类型 和 引用数据类型。基本类型基本数据类型存放在栈中。存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配，是直接按值存放的，所以可以直接访问。基本类型的比较是值的比较，只要它们的值相等就认为他们是相等的。比较
2022-04-27 16:45:57
124
原创 js执行顺序
JS有同步任务和异步任务，异步任务又分为宏任务和微任务。将JS执行队列分为：执行队列、宏任务队列、微任务队列。微任务包括 ：process.nextTick，promise宏任务包括：script，setTimeout，setInterval，setImmediateJS代码在执行时会先将所有代码放到执行队列中依次执行，在执行中碰到宏任务时，将其放到宏任务队列等候，遇到微任务放到微任务队列等候，执行队列的代码执行完后检查微任务队列，有就放到执行队列中执行，没有就检查宏任务队列...
2022-04-27 15:27:08
3266
原创 vue.sync的用法
vue提供了.sync修饰符，说白了就是一种简写的方式，我们可以将其当做是一种语法糖，比如v-on:click可以简写为@click。sync修饰符，与我们平常使用$emit实现父子组件通信没有区别,只不过是写法上方便一下。.sync修饰符首先我们知道，父组件通过绑定属性的方式向子组件传值，而在子组件中可以通过$emit向父组件通信，通过这种间接的方式改变父组件的data，从而实现子组件改变props的值，比如向下边这样：this.$emit('update:value', newValue)
2022-03-31 17:56:44
1425
2
原创 Vue 运行打包后的项目
安装依赖npm i connectnpm i runjsnpm i serve-static修改package.json在scripts里加入下面代码"preview": "node build/index.js --preview",然后在build文件夹里新建index.js加入以下代码const { run } = require('runjs')const chalk = require('chalk')const config = require('../vu
2022-03-28 10:44:48
2494
原创 Ant D设置table的分页和onchange事件
import React from 'reactimport { Table } from 'antd';export default class Demo extends React.Component{ handleChange=(pagination, filters, sorter, extra)=> { if(extra.action === 'paginate') { fetchData(pagination); } } render.
2022-03-15 16:45:39
2409
1
原创 leaflet清除图层
1.单个清除 let polygon = L.polygon(res, { color: 'rgb(51, 136, 255)', fillColor: 'rgb(51, 136, 255)', weight: 1 }).addTo(map); map.removeLayer(polygon );2.批量清除 map.on("pm:create", e => { suoyouArr.push(e); // 在添加图层时,将其添加在数组 }) // 循
2022-01-21 16:16:08
5367
原创 leaflet和leaflet.pm的使用
1.安装npm install leaflet2.引入import L from 'leaflet';import 'leaflet/dist/leaflet.css';3.初始化地图 map = L.map("mapDiv", { crs: L.CRS.EPSG4326, // 要使用的坐标参考系 center: [29.84, 121.61], // 地图的初始地理中心 zoom: 12, // 初
2022-01-21 15:47:20
3888
1
原创 vue2 v-if和v-for不一起使用的方法
避免在v-for中使用v-if一个超常见的错误是使用v-if来过滤v-for循环的数据。<ul> <li v-for='product in products' :key='product.id' v-if='product.isShow' > {{ product.name }} </li></ul>上述的代码虽然看上去直观明了，但这会导致一个巨大的性能问题Vue中的v-for优先于v-i
2022-01-13 10:44:12
369
原创 ES6之数组的flat(Infinity)扁平化，实现多维数组转成一维数组
let arr= [1,2,[[3,4],[5,6]]] console.log(arr.flat(Infinity)); // [ 1, 2, 3, 4, 5, 6 ] console.log(arr.flat()); // [ 1, 2, [3,4],[5,6] ] console.log(arr.flat(1)); // [ 1, 2, [3,4],[5,6] ] console.log(arr.flat(2)); // [ 1, 2, 3, 4, 5, 6 ]
2021-12-28 16:37:29
817
4
原创 Object.keys、Object.values、Object.entries
Object.keys()参数：要返回其枚举自身属性的对象返回值：一个表示给定对象的所有可枚举属性的字符串数组处理对象，返回可枚举的属性数组 let obj ={ name:'小明', age:18, hobby:'打豆豆' } console.log(Object.keys(obj)); // [ "name", "age", "hobby" ]处理数组，返回索引值数组 let arr = [1, 2, 3, 4, 5, 6] console
2021-12-28 16:23:40
455
原创 使用ES6 新特性
一、关于取值的吐槽取值在程序中非常常见，比如从对象obj中取值。const obj = { a:1, b:2, c:3, d:4, e:5,}吐槽：const a = obj.a;const b = obj.b;const c = obj.c;const d = obj.d;const e = obj.e;或者const f = obj.a + obj.d;const g = obj.c + obj.e;吐槽：“不会用E
2021-12-28 11:23:40
168
原创 vue 实现商品规格选择(sku)
动手之前要先确定自己的商品数据结构，下面是我的商品数据结构 dataInfo: { attr: [ { attr_name: "码数", attr_value: [{attr: "40"}, {attr: "50"}], attr_values: ["40", "50"], }, { attr_name: "颜色",...
2021-12-23 14:18:07
4276
2
原创 vue 一键复制内容到粘贴板
1.安装依赖npm install clipboard --save2.引入 全局注册import Clipboard from 'clipboard';Vue.prototype.Clipboard = Clipboard 单个组件使用import Clipboard from 'clipboard';3.属性说明data-clipboard-target：指向要复制的元素节点data-clipboard-action：copy（复制）或者cut（剪切）...
2021-12-22 11:22:22
1037
1
原创 textarea实现高度自适应
<body> <textarea></textarea><script> var textarea =document.querySelector("textarea"); autoTextarea(textarea); var autoTextarea = function(elem, extra, maxHeight) { extra = extra || 0; var isFirefox = !!document.getBox.
2021-12-22 11:00:50
302
原创 react antd form表单自定义校验
// validateTrigger='onBlur'仅在光标离开输入框时才做验证 <Form.Item name="path" validateTrigger='onBlur' rules={[ { required: true, label: "路由地址", message: '请输入路由地址' }, { //在...
2021-12-03 16:29:27
1287
原创 react antd 获取 清空 初始化form表单的数据
<Form {...layout} name="InfoForm" ref={el => this.InfoForm = el} onFinish={this.confirmFrom} validateMessages={validateMessages}> <Row> <Col span={24}> <Form.Item name='name' label="姓名" rules={[{ requi...
2021-12-03 16:20:59
2174
原创 将具有父子孙结构的平级数据转换成树形结构
// parentdId为0的都是一级，二级的parentId等于一级的id let arr = [ { id: 1, menuName: "并列的一级(1)", parentId: 0, children: [], }, { id: 10, menuName: "(1)的下一级", parentId: 1, children: [], }, .
2021-12-03 15:46:30
303
原创 es6 Object.keys() 一个数组覆盖另一个数组属性值
let pastInfo = { name:'小明', age:18, hobby:'打篮球', school:'高中', placeOfAbode:'北京' } let nowInfo = { name:'小明', age:22, hobby:'学习', schoo..
2021-12-02 18:02:10
998
原创 js格式化标准时间Thu Dec 02 2021 10:29:45 GMT+0800 (中国标准时间)转化成字符串
var nowTime = new Date(); let time = nowTime.getFullYear() + '-' + (nowTime.getMonth() + 1) + '-' +nowTime.getDate() + ' ' + nowTime.getHours() + ':' + nowTime.getMinutes() + ':' + nowTime.getSeconds(); console.log(time);
2021-12-02 10:33:21
2267
原创 微信小程序自定义状态栏
首先我们需要在json文件中修改一下配置。如果我们只需要在一个页面使用自定义状态栏，我们可以在这个页面的json文件中修改；如果所有页面都需要使用，我们直接在app.json中修改。"navigationStyle": "custom",wx.getSystemInfo是获取系统信息的API wx.getSystemInfo({ success(res) { // res是设备信息 // menuButton是右边胶囊按钮的信息 let menu.
2021-11-15 16:23:46
844
原创 解决使用ajax请求后台返回的二进制流图片
后台返回是:而我在浏览器响应里看到的是:解决方法: function getIdentifyingCode( callback) { var xhr = new XMLHttpRequest() xhr.responseType = "blob"; var url = `` xhr.open("GET", url) xhr.send() xhr.onreadystatechange = function () {..
2021-10-27 10:14:47
598
原创 postman设置成中文
postman下载网址：https://www.postman.com/downloads/中文包下载网址：https://gitee.com/hlmd/PostmanCn/releases将下载好的中文包放在postman/app-*/resources文件中，重新打开。
2021-10-20 18:28:08
23333
6
原创 js计算未来时间距离当前时间的时间差
// time格式为yyyy-mm-dd hh:mm:ss 指定时间 function computTime(time) { // 当前时间的时间戳 var nowTime = Date.parse(new Date()); // 指定时间的时间戳 var endTime = Date.parse(new Date(time)); if (endTime < no..
2021-10-20 17:00:44
1137
原创 Vue使用qrcode和vue-qr生成二维码
qrcode将输入框输入的内容生成二维码演示效果1.安装 npm install --save qrcodejs22.引入在需要使用的页面引入 import QRCode from 'qrcodejs2'3.使用html // vant的输入框 <van-field v-model="value" label="生成二维码" placeholder="请输入内容" /> // vant的按钮 <van-button type="..
2021-09-27 15:17:10
1740
3
原创 vue使用Vue-area-linkage实现省市区三级联动和省市区街道四级联动
1.废话不说，先看效果第一个四级联动我设置的默认地址为河南省信阳市光山县弦山街道。2.开始安装 npm i --save area-linkage-vue3.全局注册 import VueAreaLinkage from 'area-linkage-vue'; import 'vue-area-linkage/dist/index.css'; import { pcaa } from "area-data-vue"; Vue.use(VueAreaLinkage); V
2021-09-22 17:29:40
2225
3
原创 VUE使用防抖和节流，避免重复触底加载和点击
1.可以在utils文件夹中新建一个common.js文件 // 防抖 export const Debounce = (fn, t) => { let delay = t || 500; let timer; console.log(fn) console.log(typeof fn) return function () { let args = arguments; if(timer){ cl
2021-09-10 13:53:00
1320
2
原创 js获取当前时间(年月日、小时分钟秒、星期几)
var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"] function formatTime(time, fmt) { if (!time){ return '' }else { const date = new Date(time); const o = { ...
2021-08-27 13:56:39
2106
原创 vue使用watch(监听属性)
监听属性(watch)：vue数据是响应式数据:指的是数据可以进行跟踪和监听。1.比较常用的使用方法 watch:{ // 属性是要监听变化的数据，属性值是监听函数 msg:function(newValue,oldValue){ console.log(newValue); // 变化之后的值 console.log(oldValue); // 变化之前的值 } }2.直接写一个监听函数
2021-08-26 16:06:29
2602
原创 wx.uploadFile不打开调试模式不成功的原因
因为没有设置uploadFile合法域名的原因解决: 1.前往微信公众平台 开发——>开发管理——>开发设置 2.添加uploadFile合法域名即可（注：记得手机端删除一下小程序,重新打开就可以了）...
2021-08-13 11:43:04
670
原创 微信小程序 ios拍照出现白光问题
1.给camera标签添加flash= ' off '<camera device-position="{{cameraPos}}" flash="off"></camera>
2021-08-12 17:55:06
395
1
原创 微信小程序实现拍照功能
index.wxml<camera device-position="{{cameraPos}}"> <view class="CameraOptions"> <view class="takePicBtn"> <!-- 摄像头的返回按钮 --> <cover-image class="confirm" src="" bindtap="goBack"></cover-image>
2021-08-12 17:51:15
5647
4
原创 vue使用vue2-verify(图形验证码)
1.安装npm install vue2-verify2.使用</template> </div> <Verify ref="loginVerifyRef" :type="2" @error="error" :showButton="false" @success="success" :width="'100
2021-07-27 15:29:34
2274
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人