- 博客(30)
- 收藏
- 关注
RSS订阅原创 vue3+ts+vite+pinia 项目搭建
1. 起始，项目搭建yarn 创建项目yarn create vitepnpm 安装依赖（如果没有可以用npm）// mac安装pnpmsudo npm i -g yarn// 安装依赖pnpm i//启动项目yarn dev//安装一下pretter和eslintpnpm i prettier eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue vue-eslint-parser @types
2021-12-28 14:09:41
2224
原创 使用vue-seamless-scroll 无限滚动echarts横向柱状图
效果图标题table栏可以切换，这里就不上代码了，切换的时候需要重新销毁和重建一下dom节点，否则会出现bug，使用这个插件的时候需要注意一下dom节点的问题首先需要装一下 这个插件可以看一下插件的文档：https://chenxuan0000.github.io/vue-seamless-scroll/guide/npm install vue-seamless-scroll --save主要代码：样式根据自己需求调整，请求接口请换成自己的，根据数据处理<template&
2021-09-15 14:15:08
2038
原创 echarts实现立体柱状图
效果图：代码：写的比较着急，有些地方没有改，记录一下 initChart2(dom) { const myChart = echarts.init(dom) var xData2 = ['容城谷庄'] var data1 = [50] myChart.setOption({ backgroundColor: 'rgba(0,0,0,0)', grid: { left: 0, b
2021-09-14 16:39:44
7341
原创 vue利用canvas实现签名合并合同，图片大小等比例调整
话不多说上代码页面代码<template> <div class="signHandle"> <canvas ref="signHandle" class="canvas" /> <div class="btn_container" :style="{ height: height + 'px' }"> <van-button style="margin-left: auto;" round @touchstart=
2021-08-23 16:31:58
984
原创 ES6-ES12的开发技巧
let 和 const这两个的出现，总感觉是为了开发的代码规范而出现的。我们要逐渐放弃var，在项目中多用let和const 与var的区别：var有变量提升，有初始化提升，值可变 let有变量提升，没有初始化提升，值可变const有变量提升，没有初始化提升，值不可变，但如果是定义对象，则属性可变暂时性死区问题说明：其实let和const是有变量提升的，但是没有初始化提升： 扩展运算符 扩展运算符曾经的我，想要拼接多个数组，我只能这么做const arr1 = [1, 2, 4]co
2021-08-13 12:14:57
271
原创 vue父子组件的双向绑定
实现效果子组件的代码<template> <div> <div class="common-switch-tab-wrapper"> <span class="title">{{ title }}</span> <div class="tab-wrapper"> <a class="tab-item" v-for="tab in ta
2021-08-03 09:57:22
246
原创 高德导航不需要marke点位
let lng1 = sessionStorage.getItem("lng"); let lat1 = sessionStorage.getItem("lat"); let url = "http://uri.amap.com/navigation//uri.amap.com/navigation?from=" + lng1 + "," + lat1 + ",我的位置&to=" + this.point...
2021-07-12 11:39:23
296
原创 前端实现表格的导入导出功能
最近项目中使用了导入导出的功能，在这里记录一下项目框架vueui框架 antd导出 _exportFile(all) { var ids = all === true ? { judgeInfoList: [] } : { judgeInfoList: this.row } this.allLoading = true const obj = Object.assign({}, this.form) console.log(ids, obj
2021-07-12 11:35:19
708
原创 蚂蚁金服的design Vue表格 动态合并
蚂蚁金服的design Vue表格 动态合并你好！我们本次合并表格是实现的列 合并 rowSpan在上代码 之前 我们先讲一下表格Ui框架：1、Vue2、Ant design Vue表格：1、行是 colSpan2、列是 rowSpandesign 表格的title 是不计算 索引的最终效果封装的合并方法rowSpan(key) { // console.log(key, this.data) const arr = this.data .reduce((resul
2021-07-09 17:07:47
333
原创 js的三个高阶函数
高阶函数map()定义和用法:map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。注意： map() 不会对空数组进行检测。注意： map() 不会改变原始数组。<script>// 需求:让数组内的数字乘以2返回新数组var numbers = [4, 9, 16, 25];var newNumbers=numbers.map(item => item*2)console.log(newNu
2021-06-10 11:42:34
195
原创 vue中使用keep alive
vue官网的描述： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。通过描述我们知道，它会缓存不活动的组件，而不是销毁。这样组件之间的切换就能保存上个组件的状态，而不是切换之后又得重新操作。在app.vue文件中写入<template> <div id="app"&
2021-02-01 19:26:15
203
原创 js判断当前时间是否在一个时间范围内
beginDateStr是开始时间，endDateStr结束时间 /** * [isDuringDate 比较当前时间是否在指定时间段内] * @author dongsir * @DateTime 2019-08-21 * @version 1.0 * @param date [beginDateStr] [开始时间] * @param date [endDateStr] [结束时间] * @return Boolean */ var dat
2021-01-29 16:04:18
7903
原创 【教程】想在小程序领域成为高手，此文必看！小程序被反编译，如何应对？
List item一般人会反编译么？难么？不难 玩明白的人 3-5 分钟反编译一个小程序。反编译会得到全部代码么？会得到前端的全部代码，wxml 、wxss、 js，包括一些代码包里面的静态图片。其中 wxss 不管用什么框架开发 都会反编译下来 不会混淆 不会压缩。但是代码是否是原生开发，js是否具有可读性，还得看小程序是用哪种框架开发的。如果用uni-app、wepy开发的，那么反编译下来的js代码是混淆的，没有几年的js功底，你根本就看不懂。如果用原生开发，那恭喜你代码都是可读的。.
2021-01-20 14:23:11
1351
原创 vue前端接口api统一管理封装
在src文件夹下创建这两个文件在mapApi.js中写入页面的接口信息根据实际情况进行改变注意需要引入你的axios封装文件在需要用到接口的页面引入在页面用调用你的接口这里我用的是async await进行调用的如果不会使用建议去看一下相关内容...
2021-01-20 14:22:39
1617
原创 0成本开发一个外卖领劵小程序
前序准备注册美团联盟和淘宝联盟美团联盟个人无法注册，可以挂靠在企业帐号下。淘宝联盟：https://pub.alimama.com/ (opens new window)你需要在本地安装 hbuilderx (opens new window)。如使用云开发版本还需开通 云开发 (opens new window)，如使用静态版本，无需云开发。拉取代码并导入hbuilderx克隆项目git clone https://github.com/zwpro/coupons静态版使用以下命令git
2020-12-31 09:24:14
10517
5
原创 对象创建具有私有属性的对象
约定凡是是用下划线开始的属性都是对象私有的属性，不要访问它们。var obj1 = {name: ‘张尊娟’,__age: 19};通过立即执行的函数表达式创建一个私有的空间（函数作用域），在此空间的中创建的所有内容都是私有的（函数外部访问不到）除非我们手动地向函数外部返回（暴露）一些内容（公共的）没有返回到外部内容就是私有的当属性名与属性值的名字相同时，可以简写成如下形式，这是 ES...
2019-11-23 11:21:52
523
原创 借用父类的构造函数
构造函数 Rectangle （矩形）function Rectangle(w, h) { this.width = w; this.height = h; } // 将 getArea() 方法添加到原型对象中 Rectangle.prototype.getArea = function () {...
2019-11-23 11:20:40
196
原创 Object 对象实例的原型对象链
Object 对象实例的原型对象链是最短的原型对象链中的所有属性和方法会被构造函数的实例共享（继承）。当我们访问对象的属性和方法时，首先在当前对象的属性列表中查找，如果找到则使用它。如果找不到，则回去对象的原型对象中查找，如果找到，则使用它。如果对象的原型对象中也没有，则会去原型对象的原型对象中查找。以此类推，直到原型链的最顶端（Object.prototype）。最终把原型对象链...
2019-11-23 11:20:08
810
原创 禁止，封印，冻结对象
检测对象是否可扩展，true 表示可扩展，false 表示不可扩展 console.log(Object.isExtensible(obj1)); // true禁止对象扩展 Object.preventExtensions(obj1)检测对象是否是被封印的，true 表示已被封印，false 表示未被封印 console.log(Object.isSealed(...
2019-11-23 11:19:36
253
原创 遍历object的属性
方式一：使用 for-in 遍历对象的属性for (var key in obj1) { console.log(key, obj1[key]) }方式二：先使用 Object 对象的 keys() 方法获取 obj1 对象中的所有属性名（key)var keys = Object.keys(obj1)然后在遍历所有属性名使用 for 循环遍历属...
2019-11-23 11:19:00
2185
原创 函数内的对象
global 对象是作为 window 对象的一部分实现的，我们无法通过代码访问到 global 对象。我们平时在全局环境下定义的内容（变量，函数，常量等等）都是作为 global 对象的属性存在的（都属于 global 对象）。typeof:检查数据类型是什么变量在存储原始类型的数据时，直接将数据存储到变量的内容空间中。当我们将存储原始数据的变量赋值给另一个变量时，其实是将变量存储的数据...
2019-11-23 11:18:31
225
原创 this的指向 call apply bind
// 1. 普通的函数调用时 function max () { this.x = 1; // this 指的是 global 对象，由于 global 对象是作为 window 对象的一部分实现的，因此 this 认为是 window 对象 console.log(this) } max();// 2. 作为对象的方法调...
2019-11-23 11:17:58
122
原创 构造函数，用来创建自定义对象的实例
// 构造函数，用来创建自定义对象的实例 function Dog(dogName, dogAge) { this.name = dogName; this.age = dogAge; } // 调用构造函数 var dog1 = new Dog('哈士奇', 3); va...
2019-11-23 11:17:24
1017
原创 闭包函数
闭包函数是连接函数内部和外部的桥梁。闭包可以让你从内部函数访问外部函数作用域。在JavaScript，函数在每次创建时生成闭包。var listItems = document.getElementsByTagName('li'); //通过为 dom 对象添加自定义属性 idx 来记录索引值 for(var i = 0, len = listItems.l...
2019-11-23 11:08:59
142
原创 当函数作为对象的属性值存在时，我们通常把它称为对象的方法。例如，obj 对象的 sayName() 方法
当函数作为对象的属性值存在时，我们通常把它称为对象的方法。例如，obj 对象的 sayName() 方法 var obj = { name: '张康', sayName: function () { return this.name; } }; ...
2019-11-23 11:08:17
1300
原创 函数内的return
// 我们可以使用 return 语句从函数中返回一个值// 一个函数中可以有多个 return 语句，但是只有一个 return 语句会被执行// 在函数的执行体中只要执行到 return 语句之后，函数就调用结束，return 语句后面的其他代码就不再执行了。// 任何没有返回值的【普通函数】，默认返回 undefinedfunction foo(x, y, z) { ...
2019-11-23 11:07:42
1103
原创 数体内有一个 arguments
function foo (x, y, z) { // 函数体内有一个 arguments 类似于数组的对象，对象中保存着所有传入的实参 console.log(arguments) console.log(arguments.length) // 实参的数量 console.log(foo.leng...
2019-11-23 11:06:52
102
原创 Markdown语法
Markdown syntaxHeading（标题）一级标题二级标题三级标题四级标题五级标题六级标题Paragraph（段落）Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.Strong（重点）Sass is the mos...
2019-11-23 11:03:03
112
原创 按钮组，工具栏，按钮组的尺寸，两端对齐的按钮组，垂直排列的按钮组，具有下拉菜单的按钮组
按钮组<div class="btn-group"> <div class="btn btn-info">消息</div> <div class="btn btn-info">群聊</div> <div class="btn btn-info">通话</div></div>...
2019-11-23 10:56:42
331
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人