- 博客(78)
- 收藏
- 关注
RSS订阅原创 【阿里font图标使用流程】
阿里font图标使用流程一、 找到对应项目,点击下载至本地,二、将下载好的压缩包解压,下图是解压后的文件夹,然后打开后将里面的文件全部复制.三、在项目static目录下新建文件夹iconfont,目录结构名称自己定义都可以,将复制的文件粘贴到这个文件夹下,四、在main.js全局引用,注意文件路径不要写错五、在components下新建文件夹SvgIcon,里面新建index.vue文件.代码如下六. 在main.js 全局注册第五步的组件七. HTML中使用,item.icon内容对应你图表库里的名称,s
2021-11-25 18:25:57
1595
1
原创 el-scrollbar隐藏横向滚动条
el-scrollbar隐藏横向滚动条一、 在使用el-scrollbar时,即使横向没有超出宽度,下方依然会出现2个三角形的滚动区域箭头,解决办法;一、 在使用el-scrollbar时,即使横向没有超出宽度,下方依然会出现2个三角形的滚动区域箭头,解决办法;不要在scoped私有变量添加.el-scrollbar__wrap { overflow-x: hidden!important;}...
2021-11-19 15:33:02
2948
3
原创 vue 按钮控制鼠标滚轮放大缩小
vue 按钮控制鼠标滚轮放大缩小一、 思路:首先知道属性为transform(1,0,0,1,0,0),数字1 的位置就是放大缩小的数值,知道后就好办了,设置一个变量,初始值为1,缩小时判断>0.5可以 - =0.1,放大时判断小于2, +=0.1,就达到了放大缩小的目的.二、代码1.data中变量2.函数一、 思路:首先知道属性为transform(1,0,0,1,0,0),数字1 的位置就是放大缩小的数值,知道后就好办了,设置一个变量,初始值为1,缩小时判断>0.5可以 - =0.1,放大
2021-11-18 20:18:57
1700
原创 下载png 图片
vue - html 下载png图片一、 下载二、页面引入三、使用,页面元素的点击事件触发一、 下载npm install html2canvas二、页面引入import html2canvas from 'html2canvas';三、使用,页面元素的点击事件触发<span> <el-link @click="btnDownload">下载png</el-link> </span>btnDownload() { this.ta
2021-11-18 16:26:39
412
原创 2021-11-05
js中获取数组中最小值方法如下方法如下var arry = [1, 3, 2, 9, 5, 3, 1, 5, 3, 0, 9, 3, 2, 4, 2, 5, 7];//方法一：循环遍历var minNum = arry[0];arry.forEach((val, index) => {if (val < arry[index + 1] && val < minNum) {minNum = val;}})console.log(minNum)//方法一：
2021-11-05 17:57:38
48
原创 2021-10-27
js字符串中的 \n 不换行问题1.在js文件字符串中使用\n发现页面显示只有一个空格,并没有换行.而是变成了空格.后来查资料发现说是HTML页面转换的问题.2. 解决: 解决方法网上有好几种,有加css样式的,有写方法替换的,最好用的是使用模板字符串 把\n换成3. 效果图,正常换行1.在js文件字符串中使用\n发现页面显示只有一个空格,并没有换行.而是变成了空格.后来查资料发现说是HTML页面转换的问题.‘点击左上角数据标签开关后可显示/隐藏数据\n点击右上角可下载图片\n点击底部标签可显示隐藏该项
2021-10-27 11:41:38
1747
原创 2021-10-25
vue子组件给插槽传值1.在子组件template里定义中间数据emitmsg，名字可以随便2、在父组件里用res接收，不管是多少个子组件，都是用res接收，res是结果集，如果有多个slot的话，数据都会在里面1.在子组件template里定义中间数据emitmsg，名字可以随便代码如下（示例）：<slot name="a1" :emitmsg="sonmsg"></slot>2、在父组件里用res接收，不管是多少个子组件，都是用res接收，res是结果集，如果有多个sl
2021-10-25 16:52:08
53
原创 2021-10-13
如何使ElementUi中的el-dropdown传入多参数一、ElementUi官方文档中的handleCommand方法只允许接入一个参数，这个参数用于触发你选择的是哪一个选项。而我们实际中还需要传入一个当前行数的对象进去，后面要使用这个对象的某些字段传给后台进行一些增删改查的操作。一、ElementUi官方文档中的handleCommand方法只允许接入一个参数，这个参数用于触发你选择的是哪一个选项。而我们实际中还需要传入一个当前行数的对象进去，后面要使用这个对象的某些字段传给后台进行一些增删改查的
2021-10-13 18:24:47
64
原创 2021-10-13
el-time-picker组件无法选中时间问题给value2[]赋一个初始值即可： value2: ["23:30:00", "04:00:00"],默认不可为空给value2[]赋一个初始值即可： value2: [“23:30:00”, “04:00:00”],默认不可为空 <el-time-picker is-range v-model="value2" range-separator="至" start-placeholder="开始时间" end-pla
2021-10-13 18:18:35
48
原创 2021-09-28
防抖与节流函数的封装使用一、防抖函数封装二、节流函数的封装一、防抖函数封装// 防抖函数function debounce(fn,delay) { let timer; return function () { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this,arguments); },delay); }}window
2021-09-28 17:47:25
43
原创 2021-09-27
JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性一、javascript中制作滚动代码的常用属性一、javascript中制作滚动代码的常用属性页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;window.innerHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.bo
2021-09-27 17:23:33
44
转载 2021-09-07
vue+element ui 滚动加载简介一、HTML二、css三. js简介这篇文章主要介绍了vue+element ui 滚动加载(示例代码)以及相关的经验技巧提示：以下是本篇文章正文内容，下面案例可供参考一、HTML<div id="app"> <div class="infinite-list-wrapper" style="overflow:auto"> <ul class="list" v-infinite-scroll="loa
2021-09-07 09:22:41
68
原创 2021-08-24
app在登录成功后的个人中心数据获取一、在登录成功后数先存到store中,再通过计算属性从store中获取一、在登录成功后数先存到store中,再通过计算属性从store中获取computed:{ userinfo(){ return this.$store.state.user.userInfo ? JSON.parse(this.$store.state.user.userInfo) : {user:{name:'请登录',phone:'--'}} } }, watch:{
2021-08-24 11:06:23
43
原创 2021-08-21
app子组件中刷新父组件页面一、问题:功能要求在个人中心页面点击任何按钮都效验是否登录,未登录就弹出登录页面,登录成功后关闭弹出层页面刷新显示登录的用户名1.问题在于登录成功后的页面怎么刷新,网上找了不少办法,最好用的一个是,在登陆成功后将页面重定向,从而达到刷新页面的效果2. 父组件中传入页面路径,因为个人中心页是需要刷新的,其他页面不需要3. 子组件中接收路径4.登录成功后判断父组件有无传入路径,有传入就重定向刷新页面一、问题:功能要求在个人中心页面点击任何按钮都效验是否登录,未登录就弹出登录页面,登
2021-08-21 17:40:26
68
原创 2021-08-19
npm改淘宝镜像一、按如下方式直接在命令行设置一、按如下方式直接在命令行设置npm config set registry https://registry.npm.taobao.org检测是否成功:npm config get registry这样，我们可以使用淘宝镜像还不用更换成cnpm ！虽然实际都是使用的是淘宝镜像。...
2021-08-19 14:17:55
37
原创 2021-08-17
vue3.0中setup使用一、 setupdata() 变为 setUp()一、 setup1、 beforeCreate：表示组件刚刚被创建出来，组件的data和methods还没有初始化好 Created： 表示组件刚刚被创建出来，并且组件的data和methods已经初始化好2、setup函数是 Composition API（组合API）的入口3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用data() 变为 se
2021-08-17 15:29:43
46
原创 2021-07-28
el-table 表格保留小数一、使用template 获取row,加上toFixed方法,方便保留小数以及拼接字符等一、使用template 获取row,加上toFixed方法,方便保留小数以及拼接字符等 <el-table-column align="center" label='推荐度' > <template slot-scope="scope"> {{scope.row.recommend.toFixed(2) }}
2021-07-28 14:59:00
47
原创 2021-07-27
uniapp 实现滑动切换导航居中显示一、重点在toggleTab 方法中 vm.scrollleft = (index - 2) * data.width二 使用的效果图,以上demo自己调整,仅供参考一、重点在toggleTab 方法中 vm.scrollleft = (index - 2) * data.widthscrollleft 的距离等于当前index-2 * 单个元素的宽度<!-- 横向选项卡（水平滚动导航栏） --><template> <vie
2021-07-27 17:49:49
55
原创 2021-07-16
uniapp 切换滑动导航栏一、滑动切换二、代码实现一、滑动切换示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、代码实现<template> <view class="body-view"> <scroll-view class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft"> <block v-for="(menuTab,i
2021-07-16 19:57:22
46
原创 2021-07-12
vue 后台管理系统导出数据功能一、页面上写好一个按钮二、methods方法里面2.通常导出数据传的参数和查询接口传的参数一样一、页面上写好一个按钮二、methods方法里面 //数据导出 export2Excel( region1 ) { let param = this.$qs.stringify({ region1:region1, offset:this.currentPage1,
2021-07-12 09:13:00
62
原创 2021-07-02
element table 首行高亮一、要求：默认选中table的第一行，将其高亮显示二. 通过监听，设置表格的当前行。一、要求：默认选中table的第一行，将其高亮显示 <el-table ref="monthlyPlanTable" v-loading="listLoading" :data="tableData" stripe highlight-current-row style="width: 100%"
2021-07-02 16:53:52
30
原创 2021-07-02
折线图只有一条线时修改颜色前言一、解决办法:在组件 中 写if判断options.series.length < 2 ,如果小于2说明只有一条数据,这时修改options.color第一个元素的颜色注意:要在写入innerHTML之前写判断 ,否则不会生效二 .修改后前言需求是多根折线时第一个为红色,只有一根时不能为红色,问题是只有一根时默认使用第一个颜色也就是红色.一、解决办法:在组件 中 写if判断options.series.length < 2 ,如果小于2说明只有一条数据,这
2021-07-02 09:13:10
26
原创 2021-06-30
vue后台管理系统的布局布局步骤布局步骤首先新建一个vue项目，然后安装element-ui组件，vuex状态管理等需要用到的。项目建立好能运行之后，在src/commponents文件夹下新建一个layout文件夹用于书写布局相关代码，在文件夹内新建header.vue,slider.vue,footer.vue,contentMain.vue,home.vue文件（当然也可以只新建一个home文件，把相关布局全部写在home.vue文件内，但是不怎么推荐）再在src文件夹内新建一个page文件夹
2021-06-30 18:55:47
34
原创 2021-06-23
insertBefore插入节点的问题一、使用appendChild()和insertBefore()插入节点都会返回给插入的节点，一、使用appendChild()和insertBefore()插入节点都会返回给插入的节点，//由于这两种方法操作的都是某个节点的子节点，所以必须现取得父节点，代码中 someNode 表示父节点//使用appendChild()方法插入节点var returnedNode = someNode.appendChild(newNode);alert(returne
2021-06-23 20:37:03
41
原创 2021-06-22
css盒子在标准流中的定位盒子模型的定位关系盒子模型的定位关系盒子在标准流中的定位用margin控制盒子与盒子之间的位置关系。（1）两个行内元素相邻时距离：左边的margin-right+右边的margin-left；（2）不是行内元素，有换行效果的块级元素：上下间的距离是两者中的较大者，如上面的margin-bottom大于下面的margin-top，距离就取margin-bottom。（3）当div嵌套时，子元素的margin将以父元素的内容区域为参考。“标准流”中，块级元素没有设widt
2021-06-22 18:49:46
35
原创 2021-06-21
vue返回顶部组件封装前言一、组件封装二、使用步骤1.引入组件2.注册3 页面使用三、页面效果前言返回顶部功能是长文本结构页面常用的功能,可能涉及多页面使用,所以进行封装使用后页面更简洁代码更少。一、组件封装1 创建文件夹以及组件2 HTML 部分<template> <transition :name="transitionName"> <div v-show="visible" :style="customStyle" class="back-to
2021-06-21 18:41:12
43
原创 2021-05-31
小程序登录流程一、流程图二、使用步骤1.前端获得code值，并将code传给后端2 后端用code换session_key和openid3 后端生成新的session（3rd_session）4 后端建立对应关系，并存储5 后端将3rd_session发送到小程序前端6 正常请求7 需要访问的微信服务端的api一、流程图示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.前端获得code值，并将code传给后端小程序前端调用wx.login，获
2021-05-31 16:30:50
77
原创 2021-05-28
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档uniapp 修改showModal默认取消确认一、最近写到一个双语的项目,遇到了一个问题,uni.showModal如何修改默认(取消,确认)文字,查看了一下文档,找到了解决方案,很简单一句话搞定,你只需要一个确认按钮,那么看以下代码就对了一、最近写到一个双语的项目,遇到了一个问题,uni.showModal如何修改默认(取消,确认)文字,查看了一下文档,找到了解决方案,很简单一句话搞定,你只需要一个确认按钮,那么看以下代码就对了
2021-05-28 15:14:37
64
原创 2021-05-26
打分小程序断网提交分数失败后将分数缓存前言一、思路:每选择一次分数,就往setStorageSync中存入分数和关键数据,如评委id,考场id,考生id,分数,题目index等,然后进入提交当前题目的分数,提交成功就清除缓存数据,失败就return,提示检查网络等,然后下次进入时,判断Storage有没有数据,有就获取,没有就是{},在数据初始化后判断Storage是否存在数据,存在就判断评委id,考场id,如果相同就证明是同一场考试,循环考生列表,根据考生id,获取考生index,直接显示当前考生,根据题
2021-05-26 17:48:40
49
原创 2021-05-26
uniapp 小程序判断网络状态一、以下方法可以判断当前处以什么网络(断网,或4g WiFi)一、以下方法可以判断当前处以什么网络(断网,或4g WiFi)uni.getNetworkType({ complete: e => { let networkType = e.networkType || 'none'; console.log(networkType); switch (networkType) { case 'none':
2021-05-26 11:31:55
82
原创 2021-05-25
获取数组中的第一个item的属性,不执行后续循环,但执行后续代码一、今天在项目中遇到一个问题,需求是进入页面就显示数组中的第一个没提交分数的考生,实现思路就是forEach数组,然后判断获取第一个未打分的index,然后return二、遇到问题:使用forEach获取的数组结果并不是遇到的第一个index,原因:forEach里判断的return并不会阻止循环的执行,而是跳出了那一次 的循环三 . 解决方法: 单独写一个函数使用for循环执行获取再你需要执行 逻辑的地方调用(如果直接 在当前函数中写for循
2021-05-25 10:15:40
45
原创 2021-05-21
vue 祖先组件与子组件间的数据传递一、除了正常的父子组件传值外，vue也提供了provide/inject一、除了正常的父子组件传值外，vue也提供了provide/inject1 .这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效官网实例// 父级组件提供 'foo'var Provider = { provide: { foo: 'bar' }, // ...} // 子组件注入 'fo
2021-05-21 17:00:09
36
原创 2021-05-21
vue兄弟组件间的数据传递一、路由URL参数1.在传统开发时我们常常把需要跨页面传递的数据放到url后面，跳转到另外页面时直接获取url字符串获取想要的参数即可2 跳转路由二、Bus通信1.在组件之外定义一个bus.js作为组件间通信的桥梁，适用于比较小型不需要vuex又需要兄弟组件通信的2.组件中调用bus.js通过自定义事件传递数据3 兄弟组件中监听事件接受数据一、路由URL参数1.在传统开发时我们常常把需要跨页面传递的数据放到url后面，跳转到另外页面时直接获取url字符串获取想要的参数即可
2021-05-21 16:07:12
27
原创 2021-05-21
长页面跳转后自动返回顶部一、假设第一个页面较长，用户滚动查看到底部，这时如果又跳转到另一个页面，那么滚动条是会默认停在上一个页面的所在位置的。这种场景比较好的设计是：跳转后会自动返回顶端。这可以通过 afterEach 钩子函数来实现一、假设第一个页面较长，用户滚动查看到底部，这时如果又跳转到另一个页面，那么滚动条是会默认停在上一个页面的所在位置的。这种场景比较好的设计是：跳转后会自动返回顶端。这可以通过 afterEach 钩子函数来实现代码如下：router.afterEach((to, from
2021-05-21 14:48:48
35
原创 2021-05-21
vue 动态设置页面标题前言一、利用 vue-router 组件的导航钩子 beforeEach 函数，在路由发生变化时，统一设置。二、使用步骤1.配置 vue-router2.我们在路由匹配表中，为那些需要标题的页面，配置了 meta title 属性：3 然后在 beforeEach 导航钩子函数中，从路由对象中获取 meta title 属性，用于标题设置。beforeEach 有三个入参：前言提示：页面标题是由 来控制的，因为 SPA 只有一个 HTML，所以当切换到不同的页面时，标题是不会
2021-05-21 14:41:36
41
原创 2021-05-20
vue 加载异步组件一、按需加载,异步加载组件二、使用步骤1.解析：通过v-if首先把显示默认为false，再通过在button控制，在components中import。一、按需加载,异步加载组件二、使用步骤1.解析：通过v-if首先把显示默认为false，再通过在button控制，在components中import。代码如下（示例）：<FormDemo v-if = "showFormDemo" /><button @click="showFormDemo = true
2021-05-20 14:29:43
41
原创 2021-05-20
手写实现v-modle双向绑定父组件index.vue,子组件CustomVMode.vue父组件index.vue,子组件CustomVMode.vue1 在父组件中引入子组件。<p>{{name}}</p> <CustomVModel v-model="name"></CustomVModel>2.子组件CustomVMode.vue<template> <input :value="text" type="te
2021-05-20 14:12:23
34
原创 2021-05-19
复合式input组件封装一、需求:项目 中需要在选中上级后,在编码列input前面显示对应的编码数二、实现:1.封装input组件,加上template slot="prepend"插槽,重点:@input="input",实现组件双向数据绑定,子组件传递当前输入的值,父组件通过v-model自动获取传入的input事件的value2.组件中使用一、需求:项目 中需要在选中上级后,在编码列input前面显示对应的编码数二、实现:1.封装input组件,加上template slot="prepend
2021-05-19 09:54:58
32
原创 2021-05-19
echars柱状图数据太少柱子非常宽的问题一、问题:在获取完数据后,有时数据只有1条或者2条,这时页面显示的柱状图就会非常宽,效果很难看,所以我们需要在配置中 加入判断条件二、添加代码:在类目轴的设置中，即type为category的yAxis或者xAxis中添加代码。三 解决后一、问题:在获取完数据后,有时数据只有1条或者2条,这时页面显示的柱状图就会非常宽,效果很难看,所以我们需要在配置中 加入判断条件二、添加代码:在类目轴的设置中，即type为category的yAxis或者xAxis中添加代码
2021-05-19 09:17:39
174
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人