![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
weixin_43939111
这个作者很懒,什么都没留下…
展开
-
js将数字转十进制+十六进制(联动el-ui下拉选择框)
一开始只想到以0x开头来判断十六进制,其实整数也可以看成是十六进制的数,这样就无法判断用户输入的哪个进制:比如将20看成十六进制,十进制转化后为32。用户想输入十六进制数20,按照querySearch内判断条件,却是将20作为十进制转化的,出来组合是:(20,32)。如果按照用户的想法,十六进制数20-----对应----->十进制数14,出来的组合是:(20与14)//如果是整数,辅助转化十六进制,注意必须是number.toString(16)!解析:十六进制数可用0x或0X标识(可写可不写),原创 2023-02-17 10:44:59 · 463 阅读 · 0 评论 -
自定义el-pagination分页
vue项目使用el-ui库,由于原本的el-pagination显示字段和样式无法满足其他项目的设计要求,需要进行改动el-ui官网:改动后:1、创建自定义分页组件selfPagination.vue2、使用自定义分页组件举例tablePage.vue踩坑记录:1、在selfPagination.vue中,原先el-ui分页的“前往x页”要改成“跳至x页”,以及“共xx条”中样式文字的设置,最好在mounted中,预先初始化设置一下,防止接口数据加载前后显示不同。2、在selfPagin原创 2023-01-11 10:14:54 · 1826 阅读 · 0 评论 -
vue简单侧边栏封装+模拟侧边栏标签淡入淡出
点击标签跳转到对应页面,当然用router-link和router-view可以实现。这里用其他方法来模拟侧边导航栏点击后淡入淡出。原创 2023-01-09 15:49:56 · 374 阅读 · 0 评论 -
修改vue-element-admin出现侧边栏与导航栏空白报错
vue-element-admin添加用户名显示原创 2022-07-19 14:01:19 · 1184 阅读 · 0 评论 -
vue使用postcss适配不同PC端屏幕
vue postcss适配转载 2022-07-07 10:03:55 · 563 阅读 · 0 评论 -
el-select下拉选择缓存
el-select下拉多选原创 2022-06-28 13:55:04 · 996 阅读 · 0 评论 -
js对以下结构数组处理时遇到的问题(arr:[{class:“a“,team:“hero“,member:[{name:“Tom“,hobby:[“读书“,“看报“]}]}],...])
记录一次处理合并数据原创 2022-06-24 11:49:51 · 67 阅读 · 0 评论 -
vue中click防抖
初学自己写的小案例,未封装!!!介意的请看别人封装好的<template> <div class="count"> <span>{{pageIndex}}</span> <span class="add" @click="add">+</span> </div></template><script>export default { name:"Count", d原创 2022-02-22 09:19:40 · 1208 阅读 · 0 评论 -
vue在data中定义变量后依旧报undefined
之前跑的好好项目突然data中报undefined,在mounted打印也出不来。最后排查,还是个人粗心问题:变量太多,自己多加变量时忘了赋值,导致整个运行报错。data(){ return { a:"信息1", b:"信息2", c }},mounted(){ console.log(this.a)//undefined}如上代码,虽然我在末尾加变量,es6语法会默认c为c:c,在编译器里认通过。但是,c没有初始值卡住之后会影响其他data变量的获取,打印a、b的值都是un原创 2022-02-17 10:44:41 · 3205 阅读 · 0 评论 -
better-scroll
快捷入口demodocument转载 2022-01-11 11:00:50 · 52 阅读 · 0 评论 -
vue添加动态路由需要注意的事
https://www.cnblogs.com/mengqiu/p/13949089.html转载 2022-01-06 10:52:35 · 54 阅读 · 0 评论 -
vue使用export
今天突然有个疑问为什么不能直接export+变量常见:export function getUser(){}export const basicAge = 16//等等... 一、以下是解释很详细的一篇文章 强烈推荐阅读!!!参考文章二、直接export+变量导出形式要导出的内容: const num = 16; function getUser(){ return '123'; }1、回顾下export default:export default num/转载 2021-12-30 10:40:00 · 547 阅读 · 0 评论 -
vuex中[‘字符串‘](参数){...}
单独的[]代表数组,与对象或数组结合有两种用法对象中obj['name']代表obj.name,数组中arr[0]代表数组中第1个元素今天在学习的时候突然看到有这么一个写法[](){}[ICONFONT](state){ state.info.name = 'Harry'}这里的[]理解不了,说是数组也说不通。在网上查了一圈,总结为vuex里mutations里定义常量类型使用的一种固定格式,你可以理解为是vuex中mutiations的一种规范。[]里写常量,代表方法名。比如在统一定义原创 2021-12-02 16:34:55 · 883 阅读 · 0 评论 -
vue中slot插槽
一、引用子组件标签中的内容会将子组件内对应的slot替换成添加的内容<div id="app"> 下面是一个子组件 <comp><button>点我</button><p>一个段落</p></comp></div><template> 我是子组件 <slot></slot> <!--slot标签会替换成button和p--></templa原创 2021-11-11 09:05:03 · 1010 阅读 · 0 评论 -
el-form当添加和修改共用一个表单时resetFields()无效
将赋值信息放到nextTick里转载 2021-06-25 10:18:45 · 527 阅读 · 0 评论 -
el-form用自带rules校验输入为number类型
步骤:一、v-model加number后缀 <el-form-item label="port" prop="thingsboard.port"> <el-input v-model.number="basicCfgData.port" placeholder="请输入" ></el-input>原创 2021-05-25 16:14:13 · 4596 阅读 · 2 评论 -
对json数据使用多次转化
灵感来源于设计要求前端在页面展示一段json串,要求显示效果和在编译器里写json数据一样美观(有换行和对齐),可后台发过来的json字符串和对象不定,偶然发现还有这样子的转换结果: var str='{"a":"1","b":"2"}' console.log(JSON.stringify(str)) console.log(JSON.stringify(str,null,4)) console.log(JSON.parse(JSON.stringify(str,null,4))) c原创 2021-05-17 14:59:26 · 888 阅读 · 0 评论 -
给el-table-header加右border后出现表头表身错位
设计中要求:表头两边没有边框,只有单元格之间有,于是乎,看官方文档,通过:header-cell-class-name来给非最后一个单元格添加右border,结果表头出现微错位。解决方法:在样式中添加如下css.el-table__body, .el-table__footer, .el-table__header{ table-layout: auto!important;}...原创 2021-05-12 16:11:48 · 406 阅读 · 0 评论 -
el-ui调整:el-button记录
按照官方文档,el-button前置图标只需要加icon属性,然而,我有些按钮的图标在el-icon库中没有,从icon-font官网下载后引入出现各种错位问题,例如:六角螺丝图标与“配置”文字将行高撑大,我的页面一行有多个按钮,结果引入各种图标后一排按钮高的高矮的矮引入的iconfont.css:@font-face { font-family: "iconfont"; /* Project id 2542332 */ src: url('./iconfont.woff2?t=1620788原创 2021-05-12 11:27:55 · 909 阅读 · 0 评论 -
npm --save-dev的作用
-save和save-dev可以省掉你手动修改package.json文件的步骤。spm install module-name -save 自动把模块和版本号添加到dependencies部分spm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分看了api,感觉好像不太用了;-P, --save-prod: Package will appear in your dependencies. This is the defaul转载 2021-05-10 15:57:43 · 219 阅读 · 0 评论 -
this.$children、this.$refs、this.$parent、this.$root
一、当需要拿到所有子组件的时候才会通过this.$children,返回的是一个存放所有子组件的数组,一般很少用,除非你的组件顺序变化不大且能清楚记住子组件的位置this.$children[3].username//获取第四个子组件的data里的username数据二、this.$ refs,给组件绑定ref属性,相当于html获取dom元素,this.$ refs返回的是一个对象this.$refs.titleCpn.aaa//获取titleCpn组件中的aaa数据...原创 2021-04-28 14:28:18 · 5818 阅读 · 2 评论 -
vue改变数组元素不刷新问题
一、vue响应式设计可以方便将更改后的数据实时更新显示到页面上,但不是任何类型数据都是有效的,如一个不包含对象的简单数组:<div id="app"> <div> <ul> <li v-for="(item,index) in getArr()">{{item}}--{{index}}</li> </ul> <button @click="showArr">打印</button> <原创 2021-04-26 13:56:05 · 555 阅读 · 0 评论 -
vue^2项目各文件
package.json原创 2021-04-20 11:05:40 · 134 阅读 · 0 评论 -
查看Vue版本 node.js版本vue-cli版本
查看node.js版本node -v 查看vue版本npm list vue 或者进入项目中package.json文件直接查看查看Vue-cli版本vue -V 或者 vue --version转载 2021-04-19 14:36:16 · 2676 阅读 · 0 评论 -
echarts折线图无法显示排查基础
当你在网页绘制一个echarts折线图,但无法显示时,请参考以下排查方法。一、布局检查(整个画布空白,连坐标轴都不显示)打开浏览器控制台,查看你设定绘图区域的高度,如果高度为0,图是无法显示的。如果你说css样式设置了绘制区域的宽高,但还是无法显示,尤其是有多张图在一个页面时,请检查你写css是否使用了中文符号,比如中文逗号“,”二、dom渲染(比如弹框中使用布局)弹框没加载时是无法绘制图表的,解决方法:使用$nextTick(_=>{绘制图标函数})三、数据规范(没有折线)请原创 2021-04-19 10:53:53 · 5553 阅读 · 0 评论 -
el-table插槽单行数据获取
数据:tableData = [ {"userId":1,"userName":"小明"}, {"userId":2,"userName":"小红"}]获取整行内容:<el-table :data="tableData"><el-table-column prop="userId" label="用户id"></el-table-column><el-table-column prop="userName" label="用户名称"> &l原创 2021-04-14 09:21:34 · 1116 阅读 · 0 评论 -
vue中前端解析图片文件流显示在页面上
第一步、设置图片显示区域<img :src="currentPicture" alt="">第二步、配置获取图片流接口export function getCurrent(dev){ return api({ url:'/xxx', methid:'get', responseType:'blob', params:{dev} })}第三步、文件流转化地址 init(){原创 2021-03-31 10:20:23 · 3668 阅读 · 1 评论 -
PC端窗口缩放时处理方法
pc端web页面开发时windows系统经常推荐用户使用125%、150%比例的缩放窗口,解决方法https://my.oschina.net/huashijun/blog/4672587转载 2021-03-10 17:17:15 · 653 阅读 · 0 评论 -
vue使用postcss适配在chrome下浏览器字体偏大
最近被适配搞的头疼,设计图基于1920,vue项目用postcss适配后网页在ie和Firefox下正常比例缩小,文字一放到chrome上就乱了,元素检查对比了好几遍尺寸确实缩放的一样,比如某字体大小在postcss处理后都是font-size:.792vw,但chrome显示目测看上去的文字确实比正常的要大!???。在百度查了很久,貌似只有一个人提问,只有提问没有人回答!!!以下是尝试过的方法:①调试font-size尺寸,发现14px及继续调小视觉显示效果一样大②单位大写PX使postc...原创 2021-01-05 17:07:21 · 1946 阅读 · 7 评论 -
.postcssrc.js初始文件
由于对pc适配不熟练,最近用postcss把项目弄崩了,.postcssrc.js文件是vue框架的自动生成的文件,搞半天自己都乱了,特此记录一下原来的配置module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {原创 2021-01-04 17:02:22 · 589 阅读 · 0 评论 -
vue引入组件正确命名方式
https://www.cnblogs.com/e0yu/p/10795176.html转载 2020-12-30 16:21:08 · 1909 阅读 · 0 评论 -
vue配置api代理详解与使用方法
创建的vue框架中,在自动生成的config目录下dev.env.js'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')ule.exports = merge(prodEnv, { NODE_ENV: '"development"', BASE_URL:'"/api"' //这里是自己修改的})config目录下index.js(只放关键代码) dev: {原创 2020-12-09 10:03:35 · 6196 阅读 · 1 评论 -
vue用postcss做适配,背景图无法适应解决方法
vue做适配背景图无法适应解决方法最近使用postcss插件做不同屏幕适配,使之看起来在任何屏幕上显示效果和设计图一样,但是运行时发现按钮的容器是根据适配改变了,但是背景图却没有缩放这是原来的写法和效果.f-btn,.f-btn1{width:82px;height:31px;color:#fff;}.f-btn{text-align:left;background: url("../imgs/auto.png") 100% 100% no-repeat;}这是修改后的写法和效果图.f原创 2020-11-25 10:21:30 · 277 阅读 · 1 评论 -
vue前端适配不同尺寸屏幕
vue前端适配不同尺寸屏幕(使用插件)https://www.jianshu.com/p/1d913261d56f转载 2020-11-25 09:57:52 · 2122 阅读 · 0 评论