- 博客(28)
- 收藏
- 关注
RSS订阅原创 Vue前端 · 初回顾React框架
回顾react已经忘掉的差不多了~ 时隔已久已经想不起来内部的业务逻辑和该如何编写代码了，于是又重刷了一下React官方文档~重头看到尾之后一点点回顾react中的一些小小的知识点，以及使用内部的CodePen照着敲react中的核心概念和使用。react核心概念 第12小节----React 哲学 简介是这么说的 ：React最棒的部分之一是引导我们思考如何构建一个应用。在这篇文档中，我们将会通过 React 构建一个可搜索的产品数据表格来更深刻地领会 React哲学。所以照着理解.
2022-02-24 14:34:26
657
转载 css背景颜色半透明，文字不透明（兼容ie、火狐、chrome）
<style type="text/css">.div { background:rgba(255, 255, 255, 0.4) none repeat scroll 0 0 !important; /* 实现FF背景透明，文字不透明 */ filter:alpha(opacity=40); background:#fff; /* 实现IE背景透明 */}.div p { position:relative; }</style>..
2021-07-19 10:24:28
454
原创 重置微信分享参数（微信二次分享）
一、引入sdk.js1.安装：npm install weixin-js-sdkimport wx from 'weixin-js-sdk' //引入微信sdk依赖import axios from 'axios'; // 引用全局const jsApiList = ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ','onMenuShareWeibo']//要用到微信APIfuncti.
2021-03-29 16:03:36
899
1
原创 input type=“file“实现上传视频/图片
html：<p style="padding-left: 11px"> 上传图片/视频<span style="font-size: 14px; color: #999"> ( 限制最大500M )</span > </p> <div class="head-img" id="video"> <div v-for="(i..
2021-03-15 18:11:21
2579
原创 elementui关闭弹窗清空表单验证 清空表单
给form添加一个ref属性 给弹窗添加close关闭事件 <el-dialog :title="tjyh" :visible.sync="xxxxx" @close='closedialog' > <el-form :model="formData" ref="ruleForm">调用方法，注意先清空验证再清空表单，这样就可以清除自定义的表单验证器了。 // 关闭弹窗 closedialog(){ // 清空form验证 this.$ref
2021-01-06 17:57:55
1120
原创 隐藏滚动条内容仍可滚动
原理：自定义滚动条的伪对象选择器::-webkit-scrollbar，不过这个方法不兼容IE，做移动端的可以使用。代码如下：.wrapper{ width: 300px; height: 200px; overflow:auto;}/*chrome 和Safari*/.wrapper::-webkit-scrollbar { width: 0 !important }/*IE 10+*/.wrapper { -ms-overflow-style: none; }/*Firefox*/
2021-01-04 14:47:17
115
原创 [Vue warn]: Invalid prop: type check failed for prop “name“. Expected String with value “1“, got Num
vue warn我在循环 时使用index来做每一项 的name值，但是在循环成功后，点击切换tab时出现大量报错[Vue warn]: Invalid prop: type check failed for prop “name”. ExpectedString with value “1”, got Num…看代码<el-tab-pane v-for="(item, index) in describe" :label="item.YY"
2020-12-23 13:38:04
1524
原创 echarts折线图变为曲线图+渐层
公司的一个大屏要做整改，UI小姐姐设计了新的图，其中一个圆滑的曲线图让我搜了好久，下面看看这个样子是什么的吧其实不是很难哦，参考echarts官网以及其他的博客就完成了 ，下面上代码series: [ { name: "邮件营销", smooth: true,//变为曲线 默认false折线 symbolSize: 1,//去掉页面上显示的圆点 type: "line",
2020-12-04 16:32:24
2668
1
原创 解决echarts显示隐藏宽度发生变化
解决方法：先给ehcarts赋值高宽，再隐藏。js$("#map").css({"width":$("#map").width(),"height":$("#map").height()}); //隐藏之前先设置高、宽，防止出现100px document.getElementById("mapDiv").style.display= "none"; 示echarts时再重新赋值高宽： $("#map").css({"width":
2020-12-03 15:22:11
812
原创 vue无法识别require，执行一下命令即可
vue无法识别require，执行一下命令即可：npm install @types/node --save-dev
2020-11-25 12:00:58
2045
翻译 Vue 与 element table 结合后端请求实现排序
1、如果需要后端排序，需设置sortable，同时在 Table 上增加sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。<el-table @sort-change='sortTableFun'> <el-table-column type="index" label="序号" width="50"></el-table-column> <el-table-column pro
2020-11-10 17:07:23
1189
原创 pc管理平台 —上传图片
只上传一张图片> function image(addPics) {> var Pics= $(`.ZuId${addPics}`)> // console.log(Pics.find('.olcc div').length)> > Pics.off().on("change", ".file", function (e) {> e.preventDefault();>
2020-09-15 17:01:05
213
原创 vue - 吸顶效果实现
吸顶效果实现一开始我是在mounted()中直接监听Window的滚动事件，但是 this.offsetTop 会报错 就将它放在我数据获取完后再获取监听的事件 ，比较简单的吸顶就是这样啦
2020-09-15 16:18:09
380
原创 微信小程序生命周期
App:App()函数用来注册一个小程序。接受一个object参数，其指定小程序的生命周期函数等。关于小程序的退出：当用户点击小程序左上角关闭，或者按设备Home键离开微信，小程序并没有直接销毁，而是触发onHide方法进入了后台，短时间内当再次进入微信或者再次打开小程序，小程序会从后台状态进入前台，此为“热启动”。注意当小程序进入后台状态一定时间后，或者系统资源占用过高，微信会真正销毁小程序。用户第一次进入小程序或者在小程序销毁后再次进入小程序是为“冷启动”。小程序的冷启动：小程序在冷.
2020-06-24 20:29:53
160
原创 微信小程序使用canvas绘图
微信小程序的绘图是使用canvas，canvas的使用和普通的h5的canvas使用一样，没有什么区别想使用canvas，首先是要在页面是创建canvas标签，如果只是想要获得图片，可以把canvas定位到页面之外<canvas style="width: 300px; height: 200px;" canvas-id="myCanvas"></canvas><button bindtap='click'>canvas绘图</button>然
2020-06-23 22:03:28
1872
原创 微信小程序如何请求数据
微信小程序呢不存在ajax，那么它是如何实现数据请求功能的呢？在微信官方文档中提供了API的调用wx.request()来请求数据在数据请求之前，我们需要把微信小程序数据请求的坑过一遍1:微信小程序的请求地址需要在开发者小程序设置里配置2:微信的小程序必须是https接口，并且默认443端口，也是就是说不允许修改默认端口。3:域名必须经过 ICP 备案4:关于https证书然后把这个勾勾去掉 然后就ok了在小程序的声明周期函数中使用wx.request({ url: 'https:
2020-06-22 23:17:39
1798
原创 使用小程序scoll-view注意事项
小程序自带了组件scorll-view 很好用，但使用时要注意一此事项1.scorll-view 的内部不支持 flex布局2.根据滑动方向的不同，x轴方向上的滑动，要给soroll-view的宽度给一个固定的值，如果是y轴方向上的滑动，要给scroll-view的高度给一个固定的值3.当设置是x轴方向滚动时内部的各个滑动块不要以 float的方动来进行横排因为这样会脱离 scorll-view的包裹，使其没有做用，解决的办法是，把内部的各个元素设置为inline-block...
2020-06-21 00:34:18
302
原创 vue属性 filter过滤器
官方解释：注册或获取全局过滤器在下理解：不改变data的数据格式，在界面显示处理后的数据格式应用场景：比如表格的字段显示，接口返回是数组，但表格里肯定需要显示字符串。例：<template> <el-table :data="tbData"> <el-table-column prop="name" label="姓名"> <template scope="scope">
2020-06-19 23:14:39
220
原创 vue封装一个搜索组件
vue封装一个搜索组件话不多说，直接上代码！！！搜索组件：<template> <div> <input type="text" v-model="inputValue" placeholder="请输入" @input="getValue" @keydown.enter="search" /> </div></template><scrip
2020-06-18 22:01:17
759
原创 Vue封装一个星星评分组件
<template> <div class="rate"> <span v-if="showText" class="text">{{curScore||score}}分</span> <div class="star-wrap"> <i v-for="(i, index) in 5" :key="index" @mouseenter="disabled ? '.
2020-06-18 10:16:22
930
1
原创 为什么要使用$nextTick？
为什么要使用$nextTick：这是由于Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的watcher推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和dom操作。而在下一个事件循环开始时，Vue会进行必要的dom更新，并清空队列（$nextTick方法就相当于在dom更新和清空队列后额外插入的执行步骤）举一个栗子吧：.
2020-06-17 22:39:51
971
原创 JS--数组扁平化
一、递归方法var arr = [1, 2, null, [4, 5, "a", [6, 7, 8]]] function filter(arr) { var res = [] for(let i = 0; i < arr.length; i++){ if(Array.isArray(arr[i])){ res = res.concat(filter(arr[i])) // arr.push.apply(arr,filter(ar
2020-06-16 17:27:44
125
原创 async / await的介绍哦！
asayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数 异步async函数调用，跟普通函数的使用方式一样 异步async函数返回一个promise对象 async函数配合await关键字使用(阻塞代码往下执行) 是异步方法，但是阻塞式的使用场景async主要来处理异步的操作，需求：执行第一步，将执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据，后使用第一部返回的数据执行第二步操作的接口调用，达到异步操作。…模拟出一个摇色子的异步操作，先通过一个
2020-06-15 21:22:59
120
原创 Vue 父向子组件传递参数
Vue 向子组件传递参数Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：<div id="app"> <blog-info v-for="info in infos" v-bind:info="info" ></blog-info&g...
2020-06-15 16:23:33
173
原创 vue踩过的坑 ***未使用过no-unuse -vars
今天在写后台管理系统时，封装的数据，在获取用户列表时有个错误''flag'' is assigned a value but never used no-unused-vars）Failed to compile../src/views/userlist/index.vueModule Error (from ./node_modules/eslint-loader/index.js):C:\Users\hasee\Desktop\大实训\后台管理系统\demo\src\views\us
2020-06-11 19:35:46
3046
4
原创 解决axios请求cookie无法携带问题
在写代码时遇到了cookie无法传递导致axios请求无法请求到我的数据然后找到了解决这个cookie的问题：js-cookie： https://www.npmjs.com/package/js-cookie 可以访问这个链接通过下载 npm install js-cookie --save 先下载下来然后在组件内引入 import cookies from 'js-cookies'然后通过set来设置我们的cookieCookies.set('n...
2020-05-26 20:43:34
2686
原创 vue 点击谁 谁变色
vue 点击谁 让谁变色（添加class属性）改变当前元素的样式1.先设置一下要点中的样式<style>.active { border: 6px solid #ff6c00; color: #ff6c00; background: #fff7e9;}</style>2. 然后就可以给我们的 li 添加点击事件<ul id="app"><li v-for='(item,index) in items' ...
2020-05-21 18:55:56
5113
1
原创 解决 Vue3 版本的跨域问题
我们可以在自己创建的vue.config,js上来使用反向代理的方法来解决我们的跨域devServer: {proxy: { '/api': {//请求称号 target: 'https://m.genshuixue.com',//请求的接口 changeOrigin: true,//允许跨域 pathRewrite: { '^/api': '/' ...
2020-05-19 20:55:33
512
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人