- 博客(167)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 iview树形结构拖拽实现
组件：<template> <div class="tree-wrapper" :style="'height:' + (showQuery ? 'calc(100% - 35px)' : '')"> <div v-if="showQuery" class="tree-search-box"> <Input v-model="queryModel" placeholder="请输入"
2021-12-24 17:29:28
1688
原创 css解决滚动以及滚动遇到的一些问题
一、滚动原理滚动原理很简单，用简单话来说就是有一个固定高度的盒子，当盒子的内容超出该盒子范围时，则设置滚动。二、滚动<template> <div class="pageContent"> <div class="TreeBox"> <div class="scrollBox"> <div v-for="(item, index) in list" :key="i
2021-12-16 10:26:35
4819
原创 iview的表格组件渲染带数组数据报错问题
问题描述：在我们使用iview的表格组件时，渲染数据时会报错，具体的报错是vue或者iview内部的错误，类似：TypeError: Cannot read property '_ischeck' of null，看这种报错，一看就不是自己文件的报错，而是自己文件那个参数有问题导致源码的报错。解决问题：在苦思冥想之后，测试出是后端返回的数据有问题，怀疑是后端返回的数据中包含数组，而且数组的key是children字段，在iview的表格组件中，可能会认为带有children字段的数组是树形表格，
2021-10-29 10:08:37
1251
原创 vue的插槽详解
一、什么是插槽？用一段通俗的话来说就是，把一个html模板插入子组件的指定位置，插槽存在于父子组件之间。<slot>元素作为承载分发内容的出口。正常来说，父组件引入的子组件标签内是无法插入内容的，如下：<template> <div class="main-page"> <div>父组件</div> <div style="border:1px solid red"></div> .
2021-10-13 18:03:54
262
原创 iview的step组件自定义样式
场景：当我们需要在step组件自己设置样式，该怎么做？样式穿透可以改变组件原有的样式，这是改变所有这个dom下的样式，当有step是循环生成的，每个step我要根据特定的字段生成不同样式呢？那可以在每个step组件中判断，那当要改变的样式是step绑定的title或者content呢？这是绑定的字符串呀，直接字符串放标签加样式，貌似解析不了。那就要用到强大的模板template加slot插槽功能。代码： <Steps :current="currentLog" direction="vert
2021-10-07 16:22:31
2137
2
原创 计算属性的传值问题以及应用场景
问题描述：当我们在v-for的循环中需要对数组的一个状态进行转换时，如0的状态转换为“未设置”，通常在计算属性传入值进行判断即可html：<Radio-group v-model="select" vertical @on-change="onSelectchange"> <Radio :label="item.id" v-for="(item, index) in data" :key="index">
2021-09-30 17:01:10
390
原创 vue项目页面缓存，全局刷新，点击进入子组件刷新
实现场景：在页面中我们要实现每个页面自己能控制是否缓存，即是否每次进入页面是否需要刷新页面，每个页面有不同的需求，并且在全局有一个按钮能在每个当前页面按这个按钮都可以刷新。一、页面缓存找到页面的内容区，即系统放页面的区域：<keep-alive> <!-- 是否缓存页面：即每次进入页面是否刷新，若缓存则无法手动刷新页面 --> <router-view v-if="$route.meta.keepAlive&&isRouterViewShow"
2021-09-23 09:56:42
4090
1
原创 vue项目解决一些vuex和路由菜单报错的问题（vuex触发action方法报错问题，路由跳转重复，iview点击子菜单自动关闭一级菜单，刷新浏览器跳转404页面问题）
1.vuex触发action报错的问题，报错如下：意思是定义的action方法SetToken找不到。解决办法：在方法前面加上模块名称user，你这个方法定义在哪个模块下面就加上哪个模块名称this.$store.dispatch('user/SetToken', res.data.authorization)2.路由跳转重复报警告的问题：报警告如下：意思是重复命名的路由定义， 我们在添加路由信息中存在重复添加，在路由守卫中addRouter方法前面删除原来路由即可解.
2021-09-11 10:21:42
1473
原创 vue项目实现Iview表格组件的自定义，动态刷新
需求：要实现表格自定义样式（即表格中自己随意定义html模板），以及要能随着数据库状态手动刷新相关状态，且包含分页功能，如下图：实现：html部分： <Table highlight-row border @on-selection-change="selectChange" :context="self" :columns="columns" :data="data"> <template slot-scope=.
2021-09-09 15:53:46
1694
原创 webpack——简单的webpack代码构建demo
用一句通俗的话讲：webpack会帮你把项目的各种文件，用各种外置的或者内置的插件打包，处理好之间的引用依赖关系（按照自己配置的或者默认的规则去处理），主要是传入一个入口文件（即打包从哪个文件开始），出口文件（最终打包生成的文件）一、创建文件主要创建三个文件：part1.jsexport default function sayHello() { alert('你好啊') console.log('欢迎使用webpack')}index.js：import say f...
2021-08-11 13:57:07
367
原创 微信小程序开发（一）
一、创建微信小程序demo创建微信小程序之前先获取APPID，获取AppID先到微信公众平台注册账号，有账号的话直接扫码登入，然后获取AppID，填入下图创建小程序的AppID，我们使用微信云开发。云开发：包含数据库，云函数，云存储二、引入第三方UI组件微信小程序提供了自己的UI组件，同时也可以开发使用第三方组件，如有赞团队开发的Vant Weapp首先在该目录下右键，用外部终端打开，然后构建package.json文件，执行：npm init，然后再安装..
2021-08-10 11:44:57
274
原创 vue项目的elementui表格合并
**一、固定数据和已知合并行列数的合并**以下分别设置了合并一行和合并多个一行的的表格合并方法<template> <div> <el-table :data="tableData" :cell-style="cellStyle" :header-cell-style="{ color: 'red', borderColor: 'red' }" :span-method="arrySpanMore" border style="width: 100%"
2021-07-16 16:59:50
1937
1
原创 对象Object方法学习记录（一）
一、 Object.assign() 拷贝一个对象属性到另一个对象，有相同属性则会覆盖，后面覆盖前面的属性 拷贝对象中的普通数据类型，不可拷贝引用类型，如对象中的对象 即拷贝普通数据类型：改变原对象和新对象的值不会相互影响 不可深拷贝：即为拷贝对象中的对象时，改变原对象的该值，新对象也会受影响，只是拷贝了原对象的引用地址而已，所以会相互影响 var target = {a:1,b:2} var obj2 = {a:5, c:2} var obj3 =
2021-07-01 15:19:06
98
原创 实现一个简单的vue响应式数据的功能
**一、功能需求**自己写一个vue程序定义为Myvue，实现的功能是实现简单的数据双向绑定**二、效果预览****三、代码实现与解析**<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #app{ text-align: center; } </styl
2021-07-01 10:24:20
168
原创 Echarts图形设置（二）
echart使用文章：添加链接描述一、三角形图// 初始化图表二 initChart2_4() { var myChart = echarts.init(document.getElementById('chart2_4')) var option = { // 提示框组件 tooltip: {
2021-06-23 17:29:41
848
1
原创 vue随机生成验证码组件
一、验证码组件<template> <div> <div id="codeBox"> <canvas width="112" height="38" id="verifyCanvas"></canvas> </div> <img id="code_img" @click="refreshCode"> </div></template><scrip
2021-05-31 14:10:56
1139
原创 修改elementui默认样式的几种方式
在项目中修改其他组件内的样式时，scoped会成为阻碍导致样式修改不成功，有以下几种方式可成功修改样式方式一：添加一个不加scoped的样式<style scoped>.lgbtn >>> .el-button{ background-color:rgba(0, 0, 0, 0.2); color:#fff;}</style><style lang="scss">.lgbtn .el-button{ background-
2021-05-18 13:43:39
1540
原创 解决echart图表显示不全问题
一、问题描述引入echart图表，只显示一部分，并且存放echart图表的盒子加了v-show。二、问题分析echart只显示一部分，可以知道明显是存放echart图表的盒子宽高问题，echart可以显示，说明echart引入是没有问题的，去掉v-show则不存在该问题，说明是在切换v-show时，echart渲染获取宽高的时机存在问题，即当我们设置v-show时，DOM没有立即更新，而先执行了渲染echart的函数，导致获取宽高错误，所以我们的解决办法是加入this.$nextTick(()
2021-05-17 13:56:42
7109
1
原创 elementui的树形结构实现单选
原本树形结构是没有参数去设置单选的，但可以自己用代码实现 el-tree :data="tree" show-checkbox accordion :filter-node-method="filterNode" node-key="id" ref="tree" highlight-current :props="default
2021-04-29 09:38:33
1011
原创 js系列——call、apply、bind的用法区别
一、上下文、作用域在js中，代码块是有上下文和作用域的概念的，我们看一个简单的例子： var name = 'lili', age = 20 var obj = { name: 'allen', objAge: this.age, show: function () { console.log('姓名：', this.name, '年龄：', this.age) } } console.log(obj.objAge)
2021-04-16 17:31:39
89
原创 js系列—继承
继承父类： // 父类 function Person(name) { this.name = name this.show = function() { console.log('名字', this.name) } } Person.prototype.age = 20 var p = new Person('aron')一、原型链继承 // 原型链继承 function Son(n
2021-04-15 17:16:14
75
原创 JS系列——js原型链
一、js的数据类型js的数据类型分为基本数据类型和引用数据类型，其中基本数据类型有：Undefined、Null、Boolean、String、Number；引用数据类型：Object、Array、Function，其中要注意的是：typeof（null）的值为object，而typeof（undefined）的值为undefinedconsole.log(undefined==null) // trueconsole.log(undefined===null) // falsenull表示
2021-04-14 17:22:05
403
原创 JS深拷贝与浅拷贝、for循环优化、装箱拆箱
一、深拷贝与浅拷贝深拷贝与浅拷贝概念：如果A复制了B，当改变A时，B也跟着改变，则是浅拷贝，B不变，则是深拷贝，深拷贝和浅拷贝一般都是针对于object的引用数据类型来说的，像基本数据类型：var a = ‘1’，var b = a,虽然是改变b的值不影响a的值，是因为a，b都开辟了自己独立的内存，和深浅拷贝并没有关系引用类型的数据存储关系与深浅拷贝的原理：解决深浅拷贝的方法：浅拷贝：赋值，遍历都是可以实现浅拷贝深拷贝的两种方法：深层遍历，JSON.parse()和JSON.stri
2021-04-08 14:59:00
265
原创 vue项目加载OCX控件以及控件的主动事件和回调事件的处理
目录一、前言二、控件在项目中使用1.控件在传统项目中html页面中使用2.控件在vue中的使用方式一、前言在项目中可能会遇到加载ocx控件的需求，而加载控件是有局限性的，即只有IE内核的浏览器才支持，像谷歌都不支持，这个是个注意的点，所以页面加载该模块肯定要做判断。首先要在浏览器设置允许加载activex控件：步骤：设置按钮——Internet选项——安全——受信任站点——自定义级别——Activex控件启用 二、控件在项目中使用...
2021-04-01 14:44:37
2215
2
原创 解决eslint报错问题以及更改配置
1.eslint是检查代码规范的一个插件，因为在团队协同开发时，有一个统一的代码规范是很有必要的，这样才会让每个人开发的代码都有一个统一的风格，便于代码的可读性和维护性。可以在vscode编辑器里面的商店里面去下载这个插件2.eslint的配置：可以在项目文件下的.eslintrc.js文件下去配置自己想要的代码规范3.常用的eslint配置：规则：rules: { "规则名": [规则值, 规则配置]}规则的值："off"或者0 //关闭规则关闭"
2021-01-04 13:24:59
15688
1
原创 sequelize的安装、使用
一、安装sequelize和初始化sequelize为ORM的一种框架，ORM全称为：Object Relational Mapping，意思是对象关系映射，使用这个框架，你就不要用繁杂的sql语句去操作数据库了，直接用对象关系去创建数据库首先安装sequelize：npm install sequelize -S再安装sequelize的脚手架,就像vue和vue-cli一样：npm install sequelize-cli -S然后在初始化,一定要用npx命令：npx sequeliz
2020-12-25 23:36:33
1903
原创 常用vscode的插件
1.一个提示譬如括号，中括号匹配的插件，让你更好区分代码块2.一个vscode主题插件，让你的vscode看起来更炫酷3.一个自动闭合标签的插件4.一个自动重命名标签配对的插件（如重命名标签一半，另外一半就自动更改了）5.美化代码的插件6.使用中文的插件7.谷歌浏览器调试代码8.检测代码规范的插件9.css html智能感知插件10.ES6语法片段11.自动补全文件名的插件12.一个写代码不一样的光标主题的插件，老炫酷了
2020-12-25 21:20:53
174
原创 解决cmd命令窗口无法输入中文和txt文件无法保存中文的问题
一、问题描述在电脑出现一次蓝屏后重启，发现重启后cmd进入的命令窗口字体都变了，不显示中文，无法输入中文，cmd打不开中文路径的文件夹，而且txt文件无法保存带有中文文件，即使保存了也是乱码。二、问题解决尝试过更改注册表的文件，发现都没有用，而且文件也没有错，如下：还有说是C盘下缺少conime.exe文件的，但是发现命令窗口正常的电脑也没有该文件最后的解决办法：找到控制面板更改当前使用的语言，改为中文简体，刚进入的时候恰好就是显示使用的英文。而且在保存带有中文的txt文件时
2020-12-25 15:38:29
1117
原创 解决HbuildX无法打开html文件的问题
一、问题描述在hbuildx写的一个html文件，想在hbuildx里面通过浏览器打开进行调试，发现无法打开，如下图：二、问题分析试过用各种方法，比如：打开防火墙允许hbuildx访问，设置chrome代理都没有用，如下：当浏览器设置了“为LAN使用代理服务器”是可能会导致浏览器访问网页，这是正常的网页都无法访问，不单单是hbuildx中打开的文件，但是其他网页可以访问就说明不是这个问题。找到文件位置直接用浏览器打开也可以打开，这就说明是Hbuildx本身的web服务器配置问题。
2020-12-23 15:35:51
15257
19
原创 mySQL数据库的安装、环境变量配置、卸载、启动服务、登入数据库、连接navicat错误
一、下载下载地址：https://dev.mysql.com/downloads/windows/installer/8.0.html二、安装把下载的安装包放到某个文件夹后，双击打开进行安装在这只讲一下需要注意的部分，直接点击next和yes即可：在如下图，有的用户如果出现下面三项，那直接next即可，但是有的用户在下图中出现了mySQL server8.021，需要点击执行execute进行下载在前一步下载了，在如下图才会出现安装mySQLServer8.0.21的选项
2020-12-22 23:02:23
258
原创 cmd命令窗口快捷键与小技巧
常用快捷键：1.F1：按F1一次，命令提示符向后切换到已经执行过的命令字符。如果已经是最后的一条的命令，则不进行任何切换操作。例子：之前输入“node”，按F1一次后自动输入n，按两次自动输入o,三次自动输入d。2.F3：自动输入上次执行过的命令。如已经输入了一些字符，按键后自动输入剩余字符。3.F5：按下F5，自动切换到已经执行过的命令字符。可按下多次选择命令。例如：按下F5，切换上次执行的node -v,在此按F5，又切换到之前执行的npm -v4.按下后可用方向键上下选择之前输入过的命令。
2020-12-19 11:20:21
7899
1
原创 nodejs——express应用的路由、中间件、异常处理
一、express初识express是一个基于nodejs开发的一个web框架，我们都知道，nodejs是一个用js语言开发服务端代码的框架，但是如果要用nodejs直接开发，那如何去处理请求的异常，如何管理进入各个页面的路由，如何处理众多的API请求等等，这都是一系列的问题，都需要自己去实现，而express框架就是帮你处理这些事情的，相当于把这些处理的代码都封装了，只管用就行了，express和nodejs的关系就像是JQ和js一样，原始的js去操作dom太麻烦了，直接用JQ简单多了。安装：np
2020-12-18 21:36:03
961
1
原创 Nodejs———需要的基本环境（服务自启动（nodemon）、npm、nvm、nrm）
一、nodejs基本介绍nodejs是一个基于 Chrome V8 引擎的 JavaScript 运行环境，nodejs的API包括全局、内置模块、第三方模块等三部分。其中我们常见的用npm安装发布的依赖就是第三方模块，当然你也可以自己开发一个第三方模块。nodejs的核心包括内置的V8引擎和libuv开发包，V8引擎我们都熟悉浏览器上的引擎，运行js代码，libuv开发包主要内置了异步IO、事件驱动等核心模块。还有一个就是node底层，任何一个程序需要在系统中运行，都需要有一个兼容系统的底层代码，比如
2020-12-17 21:53:34
668
原创 uniapp——解决checkBox组件无法全选无法选中的bug
一、问题描述在使用checkBox组件时，先点击全选，然后点击某一个或者几个选项不被选中，再点击全选，会发现这几项将无法被选中；如下图：二、问题分析先来看看实现该部分的源代码：html部分：<view class="openLine"> <view><text class="iconfont icon-fenzu1" style="margin-right:20rpx;"></text>设备</view>
2020-12-16 09:31:19
5307
9
原创 unknown directive “ “ in D:\standard\nginx-1.17.6-01/conf/nginx.conf:3（文本编辑器修改nginx配置文件的坑）
在用记事本修改nginx配置后，发现nginx打不开来了，去任务管理器的进程里面并没有这个进程。后来发现，在记事本保存的nginx配置和只在notepad++上修改的配置保存的格式不对，并且查看nginx的log/error.log的错误日志：unknown directive " " in D:\standard\nginx-1.17.6-01/conf/nginx.conf:3。并且用notepad++打开发现格式是：而正常保存的格式应该是：所以，我们找到notepad++打开.
2020-10-15 14:48:55
997
原创 uniapp开发——打包上线
当APP开发完成后，要打包上线，只需后台代码上到服务器上，并且映射到外网，这样APP调用的接口用4G网络或者wifi都可以调用了，而且app接口比浏览器web接口好的一个地方是，不需要考虑跨域的问题，因为他是安卓环境，不是浏览器，只有浏览器才存在跨域的问题。首先我们需要在hbuilderX中的manifest.json对APP做一些配置，比如基础配置中的id，应用名称（就是下载后显示的名称），描述，版本之类的，然后就是图标的配置，这里可以配置不同分辨率的图片。接下来有启动页面配置，如果没有特殊启动页面，
2020-08-29 15:28:54
3462
原创 uniapp开发问题记录之地图模块——（二）
本来需求还算是比较简单的，就是在地图上动态显示一些设备的标注，点击标注弹出一些详情弹窗，然后做一些返回中心点的功能。根据惯例，还是先看文档，从文档可以看出，大部分功能是对nvue的APP和小程序支持，而且官方也建议用nvue写地图组件。但是当我们用nvue引入地图时，遇到以下一些问题：1.css是各种另类的写法，文档也有说明，而且有些最新的css语法还不支持，算是一个比较不习惯的地方吧2.引入地图，设置宽高后，不知为什么显示的永远只有一小块地方，好像宽高设置没效果一样的。3.因为全局用.
2020-08-26 14:41:29
1167
原创 uniapp开发问题记录字体引入（一）
该篇博文主要是对uniapp开发遇到问题的记录，之后会逐步更新。一、uniapp导入阿里巴巴字体库首先在阿里巴巴矢量图标库中收集自己要的字体，专门建立一个项目，然后点击下载到本地，解压，把其中的iconfont.css拷贝到自己的项目下（可以新建一个common/css目录），然后在自己的APP.vue中引入，然后在点击“查看在线连接”——选择Unicode，点此复制代码，把这代码复制到刚才的iconfont.css文件中，添加上https，如下图：使用：如下1在class中加...
2020-08-15 15:10:52
1332
原创 uniapp如何在真机、手机模拟器、微信开发者工具中运行调试
一、在真机上调试1.首先要去手机的设置打开开发者模式，每个手机打开开发者模式的姿势不一样，如OPPO的就需要先找到“关于手机”，然后在版本号上连点几次，然后再退出来点开“其他设置”，才能出现开发者选项，然后打开USB调试，记住，打开usb调试后一定不要选择只进行充电，而是选择文件传输，或者去usb设置里面选择文件传输也可。oppo的打开开发者选项比较隐蔽，每个手机也有点差别，可自行百度。这里一般会下个360手机助手和手机一起连接。手机和电脑连接成功后，在Hbuilderx上就有运行在某某设备上，然后还有
2020-08-10 15:01:13
24945
7
原创 JS系列——学习JS的运行机制
一、js的单线程概念众所周知，js语言是一个单线程语言，单线程也就是说同一时间只能做一件事，这个特点与他的用途有关，JS语言是运行在浏览器端的脚本语言，主要是与客户进行交互和操作DOM，所以单线程也就很好理解了。如果是多线程则会出现问题，例如，有两个线程同时对同一DOM进行添加和删除，那浏览器到底该以哪个线程为主呢？所以，单线程就避免了这个问题。但是，单线程是不是运行效率太低了？为了解决这个问题，设计师引出了同步与异步任务队列的概念。二、同步与异步任务队列同步任务（synchronous）就是在
2020-08-08 14:07:55
147
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人