- 博客(41)
- 收藏
- 关注
RSS订阅原创 Python test
#coding:utf-8data_list=[ [‘ch1’,“ce1”,“lun1”,“TU1”], [‘ch0’,“ce1”,“lun1”,“TU1”], [‘ch1’,“ce1”,“lun1”,“TU2”], [‘ch1’,“ce1”,“lun1”,“TU1”], [‘ch1’,“ce1”,“lun1”,“TU2”], [‘ch1’
2022-06-28 13:59:36
257
原创 封装双击编辑组件，包含input(单行，多行)，select（单选，多选），date（日期间隔，单个日期）
组件代码思想就是根据父组件传值的type属性来显示不同的功能<template> <div> <span v-show="!show" @dblclick="dblclick" :style="`display:inline-block;width:${width};height:23px;background:red`">{{arryToString(data)}}</span> <!-- 输入框 -->
2021-10-11 14:44:29
227
原创 Echarts封装环形百分比组件，基于vue进行封装
首先引入Echarts图，在项目中安装或者直接在线引入封装代码如下：<template> <div id="main" style="width: 600px; height: 400px"> <span>fdfd</span> </div></template><script>export default { props: { number: { type: [Number
2021-06-26 15:35:17
1200
8
原创 uniapp实现和webview中的H5进行通讯，返回跳出webview页面到app页面中
uniapp向webview中发送数据，通过打开的src在src后面拼接上想要的传送的数据，类似于前端的query的传值方式 <web-view @message="message" src="/hybrid/html/index.html?userId=335656"></web-view>在webview也就H5页面中，通过window.location.herf可以获取到url，通过window.location.search可以获取到？后面的数据，进行处理。webv
2021-06-23 23:55:00
3641
原创 element中el-date-picker动态设置type导致样式错乱
*我们在使用日期组件的时候，有时候需要对日期组件的格式进行切换，这样可以达到一个组件既可以选择 日 月份 时间间隔，等功能，但是你在动态设置的时候，日期选择框的位置或者样式会出现错乱的情况 *解决方法1.使用v-show ，写多个不同的日期组件，通过设置v-show进行动态切换。2.在日期组件上添加属性key :key="绑定的type值"，这样在设置type的时候，也会设置key的值，就会起到刷新的作用...
2021-06-16 09:33:50
2422
原创 vue实现数字变化时滚动效果，封装数字滚动插件
<template><div class="number-grow-warp"> <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span> </div></template><script>export default { props: { time: { type
2021-05-29 16:45:12
434
2
原创 element自定义下拉框组件，使用el-input和el-tree封装下拉树
封装SelectTree下拉选择树有时候我们需要再select中嵌套一个Tree组件，如下这样：代码如下<template> <div> <el-popover placement="bottom-start" v-model="popover" trigger="click" > <el-input sty
2021-05-28 17:16:36
1893
原创 vue递归组件的使用
封装的list组件，在组件中调用组件本身<template> <div> <div class="list-item" v-for="(item, index) in list" :key="index"> <div class="item-name"> <span>{{item.name}}</span> </div>
2021-05-15 10:30:08
67
原创 原生JavaScript实现贪吃蛇
使用原生JavaScript实现贪吃蛇，代码如下<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2021-04-12 10:05:42
120
原创 webpack基本配置信息以及常用插件的使用方法
概念不像大多数的模块打包机，webpack是收把项目当作一个整体，通过一个给定的的主文件，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件install首先添加我们即将使用的包：npm install webpack webpack-dev-server --save-devwebpack是我们需要的模块打包机，webpack-dev-server用来创建本地服务器，监听你的代码修改，并自动刷新修改后的结果。这些是有
2021-03-27 09:32:41
163
原创 TypeScript设置自动编译自动监视文件（热更新）以及tsconfig.json文件配置信息
安装npm install -g typescript初始化tsc -inittsc -init 是用来初始化构建的ts文件的，这时候该目录下会有一个 tsconfig.json 文件。在这里面可以做一些关于ts文件的配置，具体配置如下{ "compilerOptions": { /* Basic Options */ // "incremental": true, /* TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译
2021-03-26 09:58:22
3858
原创 el-select下拉选择器“多选”对选择的数量进行限制
el-select选择器在多选的时候我们希望对选择的数量进行一些限制，比如对多可以选择两个，就需要在选择大于两个的时候，让多选的数据提交不上去，并且给客户进行提示思想:通过change事件获取下拉选择器的数据变化，并且进行判断，在数组长度大于2的时候，我们吧select双向绑定的数据进行裁剪，去掉最后一位//bindPeople绑定的数据 <el-select v-model="bindPeople" multiple style="width:220px" @change="bindChan
2021-03-18 15:03:37
8090
4
原创 JavaScript 工具中包管理类型
简介JavaScript 项目经常要使用第三方库和资源，以避免代码重复和加速开发。第三方库也称为“包”，托管在公开代码仓库中。包的形式可以是直接交付给浏览器的资源、与项目一起编译的 JavaScript 库，或者是项目开发流程中的工具。这些包总在活跃开发和不断修订，有不同的版本。JavaScript 包管理器可以管理项目依赖的包，涉及获取和安装，以及版本控制。包管理器提供了命令行界面，用于安装和删除项目依赖。项目的配置通常存储在项目本地的配置文件中。npmnpm，即 Node 包管理
2021-03-16 09:17:19
116
原创 后端数据一把给，前端进行分页显示
后端数据一把给，前端进行分页显示应用场景是，后端把所有的数据都给前端，前端进行分页显示，思路就是我们用一个变量存储所有的数据，然后根据所传的页码，在总数据中进行截取。 //数据进行分页显示 paging(e){ //计算出最大的页数上线 this.pageNumber=(this.total/this.pageSize)+1; //如果传进来的页数在当前页数范围内 if(e<this.pageNumber){
2021-03-08 10:11:39
1961
原创 el-select下拉选择器中自定义“全选”功能
在select选择器中，我们有时候需要一次选中全部数据，如果我们一个一个的点击选中，那样速度就会很慢也很耗时间，所以我们需要有一个全选的按钮，但是el-select并没有给我们提供全选选项，所以我们需要自定义一个全选的选项<Form-item label="可升级大区："> <el-select @change='managementGroupChange' v-model="formItemModal.managementGroupCodesList" col
2021-02-25 10:19:14
1293
原创 原生JavaScript实现烟花效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
2021-01-29 18:45:39
221
原创 Nuxt.js配置proxy跨域代理以及asyncData使用方法
首先下载proxycnpm i @nuxtjs/proxy -D在nuxt.config.js中配置//找到modules模块，把proxy添加到里面 modules: [ '@nuxtjs/axios', '@nuxtjs/proxy' ], axios: { proxy: true // Can be also an object with default options }, proxy: { '/api': { change
2021-01-09 15:31:00
4576
4
原创 Network中的xhr的请求中的中文意思
GeneralRequest URL ：资源的请求urlRequest Method：HTTP方法（请求类型 get、post、put、delete等）Status Code：响应状态码，常见的包括200（服务器成功返回网页）、404（请求的网页不存在）、503（服务不可用）、301（资源被永久转移到其它URL）、500（内部服务器错误），可参考HTTP状态码->HTTP Status Code - Hanami - 博客园Remote Address：域名对应的真实IP:portRefer
2021-01-09 14:09:29
1324
原创 Vue中父组件调用子组件方法和子组件调用父组件方法总结
//父组件<template> <Son ref='son' @fun="jj" //注册自定义事件 fun :parentFun="parentFun" //将parentFun这个方法通过属性传值传给子组件 /></template><script>exprot default{ methods:{ parentFun(){ console.log('父组件的方法')
2021-01-07 14:56:19
282
原创 对存放对象的数组进行去重
对数组中存放对象类型的元素进行去重const arr=[ {value:'101',name:'小明'}, {value:'1102',name:'小红'}, {value:'111',name:'小王'}, {value:'55',name:'小李'}, {value:'101',name:'小三'},];比如上面这个数据，我们要对arr中的value进行比较，去掉value重复的对象元素，去重的思想就是，我们要新建一个对象用来存放arr中的value这个属
2021-01-06 11:18:32
194
原创 一张图看懂原型，原型链的关系
这个图是原型的关系，原型链是当调用函数或则对象的方法和属性的时候，首先会在本身去找，如果本身没有，去原型上找，原型上没有在去原型的原型上去找，这一个追宗溯祖形成的链式关系就是原型链...
2020-12-25 11:24:56
241
原创 Select下拉选择器实现懒加载和无限加载
情况：项目出现了下拉数据量过大，一次加载数据量过大的时候，出现页面卡死问题这时我们希望做到分页加载，即懒加载的情况，可以先在下拉框中加载20条，当滚动条滚动到底部的时候，我后再请求出具再加载20条这样子实现方法：首先要自定义一个指令，这样来获取元素的滚动条是否触底，触底之后就请求数据，然后把新请求的第二页的数据拼接到原来的数据上自定义触底指令Vue.directive('loadmore', { bind(el, binding) { // 获取element-ui定义好的sc
2020-12-08 10:19:41
2026
原创 日期组件校验设置的时间选择范围
日期组件限定选择日期的范围为1个月，就拿element的DatePicker 日期选择器来举例；场景是怕后台拉取数据太多影响sql速度，从而限定了日期选择的范围必须是1个月datepicker中绑定change方法 <el-date-picker v-model="timeArr" @change='changeDate'
2020-12-07 20:15:39
615
原创 javaScript判断变量是否为整数的方法
方式一、使用取余运算符判断任何整数都会被1整除，即余数是0。利用这个规则来判断是否是整数。function isInteger(obj) { return obj % 1 === 0}isInteger(3);//trueisInteger(3.3);//flase以上输出可以看出这个函数挺好用，但对于字符串和某些特殊值显得力不从心isInteger(''); //trueisInteger('3'); //trueisInteger(true); //trueisIntege
2020-11-28 10:51:36
706
原创 解决element中的form设置label-width后，form-item的内容和label名会产生跟label-width一样的左边距
form组件中设置label-width这个属性然后配合label-position可以设置标签对齐方式。达到以下的效果：但是在设置之后却出现了这种情况在form中添加这个属性inline=false就可以解决这个问题
2020-11-27 14:52:53
12813
原创 uniapp动态设置元素的高度
在uniapp中如果要适配各种不同大小的屏幕的高度，那么就得动态设置元素的高度，比如我们写的一个滚动列表，那么滚动列表的长度不能给他固定住，因为有的屏幕的比例相对要高一些，所以这个list就要改成动态的onLoad() {//我们在onload钩子中获取到屏幕可用的高度//然后减去其他元素的所占的高度总和，那么获取的的就是你要动态设置的元素的高度//也就实现了自适应的效果 this.h=uni.getSystemInfoSync().windowHeight-uni.upx2px(810);
2020-11-23 17:30:24
12630
3
原创 父子页面通信，ifram嵌套使用postMessage通信
使用postMessage实现页面之间的通信核心代码只有postMessage那一段这是主页面的代码<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initia
2020-11-18 15:02:05
329
原创 uniapp使用picker动态获取省市区
使用picker的多列选择 将mode属性设置为 ：mode=“multiSelector”，利用@columnchange这个方法，获取到哪个列发生了更改，当第一列省发生了更改，那么将刷新第二列，将第三列的数据设置为:[]；<template> <view> <view class="header"> </view> <view>{{newArea}}</view> <picker mode="multiSe
2020-11-12 16:06:15
3759
2
原创 flutter中Text常用属性总结
fullter中Text常用属性总结 Text("text文本样式联系 hello world", textAlign: TextAlign.center, maxLines: 1, overflow: TextOverflow.ellipsis,//溢出显示 clip剪裁fade 渐隐ellipsis省略号 //textDirection: TextDirection.ltr,//文本方向 softWrap: false,//是否自动换行 fal
2020-11-04 10:41:35
727
原创 Dart基础语法入门
Hello, DartHello Worldvoid main(List args) {print(‘hello, flutter’);}Dart语言的入口也是main函数, 并且必须显式进行定义Dart的入口函数main也是没有返回值的传递给main的命令行参数, 是通过List完成的从字面值就可以理解List是Dart中的集合类型其中的每一个String都表示传递给main的一个参数;定义字符串的时候, 可以使用单引号或双引号每行语句必须使用分号结尾, 很多语言并不需要分号, 比如
2020-11-03 11:02:44
231
原创 选择 Object 还是 Map，性能对比
对于多数 Web 开发任务来说，选择 Object 还是 Map 只是个人偏好问题，影响不大。不过，对于在乎内存和性能的开发者来说，对象和映射之间确实存在显著的差别。1. 内存占用Object 和 Map 的工程级实现在不同浏览器间存在明显差异，但存储单个键/值对所占用的内存数量都会随键的数量线性增加。批量添加或删除键/值对则取决于各浏览器对该类型内存分配的工程实现。不同浏览器的情况不同，但给定固定大小的内存，Map 大约可以比 Object 多存储 50%的键/值对。2. 插入性能向 Obj
2020-10-29 10:11:21
1520
原创 vue 3.0项目中怎么手动配置TypeScript
手动配置ts，用脚手架创建项目的时候选择TypeScript这个选项，项目在创建的时候会脚手架会帮我们自动配置好ts，但是如果一开始没有选择TypeScript这个选项，后面怎么手动添加vue add @vue/typescript只需要运行这个命令就行了，如果看看不同后面配置的英文，直接全选Yes就行了...
2020-10-11 08:50:38
436
原创 关于闭包函数（防抖函数）的使用和清除的方法
vue中使用闭包的使用这是抽离出去的闭包函数的封装export default function debounce(func, wait=1000) { var timer=null; return function() { if (timer){ clearTimeout(timer); } timer = setTimeout(() => { func(); }, wait); }
2020-09-26 20:04:50
2736
原创 vuex的基本属性以及使用方法详解
意义：实现组件之间的数据共享vuex中的属性：1.state提供唯一的数据源，获取的方法，this.$store.state.索要获取的数据。第二中获取state中的数据的方法，导入{mapState}映射到computed中，使用展开运算符。2.mutation；作用是用于变更store中的数据，通过这种方式，可以集中监控store中的数据变化，方便后期中维护，mutation中写的方法，moutation（state）{}，第一个参数永远代表state数据，外部调用mutation中函数的
2020-09-09 08:11:22
463
原创 vue路由跳转的时候隐藏或去掉导航栏或者菜单栏
我们在用路由跳转的时候发现，并不是每一个跳转页面都是有导航栏的，就比如，跳转登录页面的时候，底部的导航栏就会消失，以下提供两个能让导航栏消失的方法第一种 使用v-show1.给导航栏加上v-show的判断条件，$route可以获取meta中的信息，istrun是我们在路由中添加的一个变量（用来判断v-show成立的条件）<template> <div id="app"&...
2020-03-31 00:01:55
15425
6
原创 jscript中冒泡排序的实现原理
所谓冒泡排序就是两两相比较，然后将大的值放在后面。整体的思路就是：如何交换两个变量和要理清总共要比较多少次。1.如何交换两个变量？var a = 10;var b=22;var tmp =a;a = b;b= tmp;123452.如何将数组中最大的值放到最后？这种情况只要循环遍历数组，然后两两比较，大的放后面即可，此种情况只需要遍历一次var arr = [9,8...
2020-03-30 20:32:10
123
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人