- 博客(47)
- 收藏
- 关注
RSS订阅原创 vue3.0新特性
10月5日尤大大公布了 vue 3.0 的源码，目前还是 pre-alpha 状态，预计年后会发布正式版本，这个无疑是国庆期间前端圈最大的新闻了。虽然此前关于 vue 3.0众说纷纭，但是既然已经官宣了，而且明年有可能迁移至新的开发框架，是时候撸起袖子学习一波了。vue3.0的设计目标更小 更快 加强TypeScript支持 加强API设计一致性 提高自身可维护性 开放更多底层功能具体可以从以下方面来理解1，压缩包体积更小当前最小化并被压缩的 Vue 运行时大小约为 20kB（2
2021-12-07 15:39:17
346
原创 创建React项目
在开发React项目前最关键的当然是项目的创建，现在的前端工程化使得前端项目的创建也变得越来越复杂，在这里介绍三种从零开始创建React项目的方式，分别是在浏览器中直接引入、使用官方脚手架create-react-app、使用Webpack创建。浏览器中通过标签直接引入React框架有两个核心的包，分别是react以及react-dom,如何想直接在浏览器中使用React，那么把这两个包直接引入就可以了。<!-- 引入react --><script src="http
2021-11-25 10:59:45
448
原创 WebSocket 动态获取
initSocket();function initSocket(){ webSocket = new WebSocket('ws://'+window.location.host+'/header_soc'); imageSocket = new WebSocket('ws://'+window.location.host+'/capture_soc'); flashSocket = new WebSocket('ws://'+window.location.host+'/live_soc.
2021-10-27 16:18:55
1484
原创 unable to access ‘https://code.srdcloud.cn/a/ifst/ifst-fe/‘: Failed to connect to code.srdcloud.c
如果git pull 的时候出现这个为题可能是网络的为题，要的网络好的情况先在拉代码
2021-10-27 09:49:57
1395
原创 git指令
一、 Git 常用命令速查git branch 查看本地所有分支git status 查看当前状态git commit 提交git branch -a 查看所有的分支git branch -r 查看远程所有分支git commit -am "init" 提交并且加注释git remote add origin git@192.168.1.119:ndshowgit push origin master 将文件给推到服务器上git remote show origin 显示远程库o...
2021-10-25 10:35:16
116
原创 vue下载后台接口返回的二进制流文件转为Excel文件
/* fileName : 文件名 res:二进制流 */function getOutExcel(fileName, res) { let blob = new Blob([res], { type: 'application/x-xls' }); if (window.navigator.msSaveOrOpenBlob) { //兼容 IE & EDGE navigator.msSaveBlob(blob, fileName); } .
2021-09-29 15:40:22
1069
原创 Ant Dresign vue DatePicker 组件库
第一步先安装依赖npm install moment --save第二步 在页面里移入import moment from "moment"第三步 使用方法changeTimeStatus(changeStatus, date) { // console.log('date--', date) this.timeListValue= [moment(date[0]), moment(date[1])] // console.log( t...
2021-09-02 14:56:08
88
原创 npm丢失报错Error: Cannot find module ‘D:\node_modules\npm\bin\npm-cli.js‘
在启动项目的时候会报这个错就是npm丢失然后在ctrl+r 打开cmd小黑框npm -v来查看npm有没有如果没有重新安装node.js然后在npm -v 来查看有没有安装好
2021-08-26 14:10:01
4519
1
原创 html标签类前端笔记
HTML5：布局类标签HTML是具有语义化的语言，针对网页的布局，有一类标签代表各种意义的“布局盒子”。所有的布局类标签都主要用来构建页面的内容区域，是双标签类型，是双标签类型，默认显示为块状元素。通用的布局标签：<div>。语义：无明确的含义，通常就是代表“盒子”；应用：根据布局的需要，可以使用到任何地方，可以用id和class来对<div>进行定义或区分。HTML5版本新增的常用布局标签：标签 语义<header> 页面或区域的头部&l...
2021-08-25 11:06:24
67
原创 从html前端笔记
web前端的定义：是面向用户（浏览者）的互联网技术统称。主要包括Web界面的结构、Web界面的外观视觉表现以及Web界面的交互实现。Web前端的分类：前端设计和前端架构。HTML结构语言：超文本标记语言。通过各种标记符号（标签）来代表网页中的内容元素、将网页中的内容结构化。特点：通过浏览器来解析、文件名为html或htm。 2. CSS样式语言（样式表）：实现表现与结构分离的样式设计语言。控制网页的视觉表现及简单交互。通过浏览器来解析，文件名为css。 3. ...
2021-08-25 11:03:55
113
原创 canvas 流程图bug
问题一：在当前年份点击选择没有取消调选择在去选择年份是会出bug修改：canvas 添加点击事件后状态恢复到初始值修改完：效果图
2021-08-23 17:06:01
74
原创 原型和原型链继承
JavaScript 原型：JavaScript 是一种通过原型实现继承的语言与别的高级语言是有区别的，像 java，C#是通过类型决定继承关系的，JavaScript 是的动态的弱类型语言，总之可以认为 JavaScript 中所有都是对象，在 JavaScript 中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个” prototype”内部属性，这个属性所对应的就是该对象的原型“prototype”作为对象的内部属性，是不能被直接访问的。所以为了
2021-08-19 18:01:20
86
原创 xml转换word文档
// 点击下载 download(value,flag){ let _this = this this.axios({ method: 'get', url: '/url/lengthMeasurementTwice', params:{ machineId:_this.machineID[1], language:_this....
2021-08-19 14:44:30
504
原创 vue监听浏览器窗口的变化，随着窗口变化调整里面table的宽高
1.在data中设置：1 tableHeight:"500",2 screenHeight:window.innerHeight,2.在mounted中设置：mounted() { const that = this window.onresize =() =>{ return (()=>{ window.screenHeight = window.innerHeight this.screenHe..
2021-07-22 14:36:59
517
原创 项目中点击预览PDF文件
参考：https://blog.csdn.net/prey1025/article/details/90029284最近做项目，需要在项目中预览PDF文件，就百度了一下，找到了一个比较简单的方法1、在官网上下载pdfjs文件链接地址： http://mozilla.github.io/pdf.js/getting_started/#download2、将下载的文件放在项目的static文件夹中3、在需要浏览PDF的组件中写入pdfUrl在data中定义的，是pdf文件路径完成之后就可以预
2021-07-16 14:05:25
398
原创 ElementUI 实现el-table 列宽自适应
一、概述Element UI 是 PC 端比较流行的 Vue.js UI 框架，它的组件库基本能满足大部分常见的业务需求。但有时候会有一些定制性比较高的需求，组件本身可能没办法满足。最近在项目里就碰到了。很多页面都需要用到表格组件el-table。如果没有给el-table-column指定宽度，默认情况下会平均分配给剩余的列。在列数比较多的情况，如果el-table宽度限定在容器内，单元格里的内容就会换行。强制不换行，内容要么在单元格内滚动，要么就会溢出或被截断。产品想要的效果是：内容保持..
2021-07-15 17:32:43
3484
3
原创 svn项目的拉取和提交
svn项目的拉取和提交 如何拉取svn项目到本地？ 方法一： （1）.新建一个空的svn目录文件夹，然后直接在桌面空白处鼠标右击，点击Svn Checkout,弹出一个框， URL of repository就是该项目得svn地址，Checkout directory就是刚才创建的目录文件夹，放在了桌面(Deaktop)上，文件夹命名为shexinaghui ，也可以修改该名称，该文件夹就是项目的s...
2021-07-08 10:09:15
14411
原创 element table @cell-mouse-enter=“handleMouseEnter“ @cell-mouse-leave=“handleMouseOut“
<template><el-table :data="tableData" border @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseOut" style="width: 100%"> <el-table-column label="日期" width="180"> <template ...
2021-07-07 10:31:06
5589
原创 element tree 请求多个接口
用清晰的层级结构展示信息，可展开或折叠。基础用法基础的树形结构展示。 1 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> 2 3 <script> 4 export default { 5 data() { 6 return { 7 data: [{ 8 l.
2021-07-06 18:14:51
914
2
原创 element tree 树形控件
组件：Element（地址：http://element.eleme.io/#/zh-CN/component/tree）：Tree树形控件<el-tree ref="expandMenuList" class="expand-tree" :data="setTree" highlight-current :props="defaultProps" :expand-on-click-node="false" .
2021-07-06 17:33:47
215
原创 微信小程序上传头像
这一篇主要说头像 上传，以及修改保存的功能。本章节主要用的知识点有1. wx.chooseImage 从本地相册选择图片或使用相机拍照。2.wx.uploadFile 将本地资源上传到服务器.3. 修改原来的小程序头像并保存，调用后台接口修改操作我这里也贴出来了，不够详细可以去官网看。1、选择图片接口wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。OBJECT参数说明：参数类型必填说明countNumber否最多可以选择的图片张
2021-07-02 18:18:14
3418
原创 微信小程序上传多个图片
在实际开发中，很多时候都需要要上传图片，但是对于上传多张时需要一张张的上传，因为图片都可能比较大，这时就需要我们对上传图片的API进行进一步的处理，这样就解决了我们同时选择上传多张图片需求。所以为了方便以后使用，封装成一个特定的组件分享出来，也许很多能用到，也可能用不到，但是修改一下还是差不多一样可以用的。一.实现原理多张图片上传的原理其实就是用递归的方法，在每一张上传完之后再继续上传下一张，直到完成为止。二.效果微信小程序多张图片上传效果三.实现过程新建一个uploadImag
2021-07-02 18:14:06
3331
原创 vue: Initialize failed: invalid dom 之 dom加载出现的问题
这里遇到的问题是引入 Echarts因为在Dom还没加载的时候，option 获取元素，echarts.init(document.queryselect(’#dom’))就开始检测dom，并尝试去获取它，但是在vue中引用echarts的中，发现在模板dom还没加载的时候echarts.init() 就已经开始执行，所以会报错 Initialize failed: invalid dom2、解决办法：根本原因就是dom没加载，echarts没有检测到dom，那么我就让dom加载后再去获取dom
2021-06-25 15:38:37
5109
原创 以前是使用echarts,现在也是用这个，没什么好纠结的！ 但是最近发现以前每次做图表之类的都没有封装，每次做图表都要从新去配置之类的，写了好多重
vue-Echarts公司最近做项目需要用到图表，以前是使用echarts,现在也是用这个，没什么好纠结的！ 但是最近发现以前每次做图表之类的都没有封装，每次做图表都要从新去配置之类的，写了好多重复代码，感觉很累啊，所以自己把图表封装成子组件使用，代码工作量减轻了很多，而且子组件使用了数据进行监听和图表自适应屏幕大小，这样以后会方便很多了！当然公司的项目肯定不能发出来了，我会做个简单的demo出来先截个图吧！其实我也未作什么太复杂的工作，以前工作中，页面中要2个图表，我在methods:{}
2021-06-25 13:20:33
184
原创 elementUI中table组件会出现空白部分
先上图:造成原因:width全部都写死了，(注释:不要全部都写死width，没写width的会自动分配宽度)那时候我只有一台录音机也没有电脑 也不敢奢求说唱会让自己的生活变好
2021-06-24 17:56:37
1997
原创 element table 头部行高
element UI里面表格的行高需要自己调整高度和设置padding，直接写style是不行的，里面有 ：1、row-style （行的 style）2、header-row-styl（表头行的 style）3、cell-style（单元格的 style）如果设置行高或padding直接在表格中写:row-style="height:'32px'"形式也能生效，但是会报错，值为字符串形式不对，需要对象或函数等形式，正确写法如下黑体处： ...
2021-06-24 10:51:11
987
原创 浏览器的兼容以及写法
浏览器的兼容性以及写法第一个 清除浮动的兼容性第二个 透明度的兼容写法第三个 js获取节点的兼容写法第四个 获取计算机计算的所有属性第五个 获取元素子节点childNodes 这个属性有兼容性第六个 动态创建节点，元素没有子节点，Ie低版本会读取不到，而标准浏览器会。第七个 获取浏览器可见区的高度 宽度 body第八个 解决Css3中的兼容性第九个 Event的兼容性第十个 事件绑定的兼容性写法第十一个 Mouseevent有兼容性第十二个 Event对象的兼容性第十三个 事件源（
2021-06-17 17:43:26
251
原创 父子组件生命周期执行顺序
我们已经非常熟悉单个的vue组件的生命周期执行顺序了，但是，如果有嵌套组件，父子组件的生命周期的执行顺序是什么？当父子组件在加载的时候，执行的先后顺序为父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted然后理解下这个顺序：1.当父组件执行完beforeMount挂载开始后，会依次执行子组件中
2021-06-11 11:15:06
658
1
原创 error when starting dev server
遇到这样的错误现将其他文件夹删除了只留一个文件> dome@0.0.0 dev E:\实训\day14\dome> vite > html:E:/实训/day14/dome/src/views/home/my.vue:12:7: error: Multiple exports with the same name "default" 12 │ export default {} ╵ ~~~~~~~ html:E:/实训/day14
2021-05-26 16:41:43
10544
2
原创 npm 安装、卸载 模块或包的命令
npm 安装、卸载 模块或包的命令（转载）npm安装卸载命令npm安装模块【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录；【npm install -g xxx】利用npm安装全局模块xxx；【npm install xxx】安装但不写入package.json；【npm install xxx –save】 安装并写入package.json的”dependencies”中；【npm install xxx –save-dev】安装并写入packa
2021-05-21 15:39:05
4558
原创 表格树形,级联选择器
第一步：先下载第三方插件npm i vue-table-with-tree-grid -S第二步：全局引用插件在main.jsimport ZkTable from 'vue-table-with-tree-grid'//Vue.component('组件名', 实列组件)Vue.component('tree-table', ZkTable)第三步在要用的页面使用1.data:指定数据源2.columns:指定每列配置选项，是数组形式[{},{},{}]，其中一个对象是一列3.sel
2021-04-27 21:49:18
427
原创 封装过滤器
先创建filters文件在文件里创建index.jsexport function getRights(v){ console.log(v); let rightsList='' switch(v){ case '0': rightsList='一级';break; case '1': rightsList='二级';break; case '2': rightsList='三级';break; } return rig.
2021-04-25 14:39:08
80
原创 防抖(debounce) 和 节流(throttling)
一、函数防抖定义在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。实现原理函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。使用场景文本框输入搜索（连续输入时避免多次请求接口）代码实现/** * 函数防抖 */export function debounce(fn, delay) { /
2021-04-25 08:47:27
129
原创 第三方样式穿透
Vue加粗样式前端框架组件穿透我们目前开发Vue项目中，经常使用第三方组件库如antd，element等。如果需要修改组件的样式，可以通过样式穿透进行修改组件。1.sass 和 less 样式用 /deep/.css /deep/ 第三方组件名 {样式}.css /deep/ 第三方组件样式名{样式}PS：如果组件名未生效可以试试组件的样式名代码举例<u-input class="cash" />1<style lang="scss" scoped>.c
2021-04-21 21:56:21
124
原创 当用户在URL地址上输入要去的页面时买没有登录就去登录，登录后去之前在url地址栏上输入要去的页面怎么去
先在登录的路成功后获取token将token存储本地change() { //对表单对整体合法性验 this.$refs.ruleForm.validate(async valid=>{ //如果表单又不合法的字段，直接返回 if(!valid)return; const res=await login(this.ruleForm) console.log(res); //登录成功之后的步骤
2021-04-21 21:18:38
185
原创 什么是vuex
什么是Vuex？vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。引入Vuex（前提是已经用Vue脚手架工具构建好项目）1、利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。npm install vuex --save要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。2、新建一个store文件夹（这个不是必
2021-04-20 23:22:01
221
原创 小程序的登录授权
项目中的实现思路//点击进入店铺--进入首页--获取到token,uid //如何获取token //第一步：通过wx.login得到code,调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息 // 第二步：通过调用公司后台接口（自动注册/登录接口）获取腾讯用户的匿名信息 //引入接口const {authorize}=require('../../http/api') //登录/注册 goLogin() { wx.login({ success(res
2021-04-20 08:22:24
214
原创 2021-04-14
下面有关CSS中link和@import的区别1，@import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。2，@import 是css2里面的，所以古老的ie5不支持。3，当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。4，link除了能加载css外还能定义RSS，定义re
2021-04-14 20:52:16
229
原创 小程序传参，加，减
先定义个空的数组data: { cartList: [], },定义好的数组赋值this.setData({ cartList: res.items, num: res.price,})然后更新视图 <view class="yc_cart_contnet"> <view class="yc-a-gooods" wx:for="{{cartList}}" wx:key="goodsId"> <view cl.
2021-04-13 20:31:48
123
原创 2021-04-12
、小程序组件复用组件是什么组件：具有完整功能（html-视图,css-样式,js-逻辑），并且独立运行的模块插件：通常是为了完成某项具体的业务功能而开发的js文件 例如：swiper.js,弹框.js，。。。。类库：library,是提供了为了完成项目的工具方法的集合，跟具体的业务无关！ 例如：jQuery,lodash.js框架:framework,分 是为了快速完成项目搭建的基础。框架分：UI 框架和javaScript框架 UI框架：boostStrap,Element UI,va
2021-04-12 22:46:25
47
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人