vue
前端一枚
点关注 不迷路
展开
-
scss切换主题风格
第一步:创建_main.scss文件,定义一个map类型的变量$themes,相当于JS中的对象,不过是用圆括号包裹。$themes中定义不同的主题名称,这里是light,dark。再定义主题对应的颜色。注意不同主题色的键值对的键名要相同。第二步:创建handle.scss文件夹,导入_main.scss文件。1、定义混入器themeify,用来获取data-theme的值。2、@each遍历themes的键值对, themes的键值对,theme-name对应light,dark。原创 2022-12-26 17:56:43 · 1998 阅读 · 0 评论 -
vue2一次注册多个全局组件
在main.js中引入大量公共组件原创 2022-09-14 12:04:17 · 807 阅读 · 0 评论 -
Vue CLI3 开启gzip压缩
首先这个是需要后台帮忙配置的,后台不配合就不用看了。。。。nginx 服务端开启Gzipserver{ listen 80 default_server; server_name 106.13.190.39; index index.php index.html index.htm default.php default.htm default.html; root /www/wwwroot/106.13.190.39;#上面是我服务器自己一些配置转载 2022-02-10 09:48:11 · 691 阅读 · 1 评论 -
查看Vue版本 node.js版本vue-cli版本
查看node.js版本node -v 查看vue版本npm list vue 或者进入项目中package.json文件直接查看查看Vue-cli版本vue -V 或者 vue --version原创 2021-08-13 11:43:02 · 3757 阅读 · 0 评论 -
前端面试题总结
1.解释下vue中的MVVM,这里一张图带过,很详细原创 2021-07-03 17:33:51 · 185 阅读 · 0 评论 -
2021-06-24vue2和vue3比较
一.vue3新特性: 1.数据响应重新实现(ES6的proxy代替Es5的Object.defineProperty) 2.源码使用ts重写,更好的类型推导 3.虚拟DOM新算法(更快,更小) 4.提供了composition api,为更好的逻辑复用与代码组织 5.自定义渲染器(app、小程序、游戏开发) 6.Fragment,模板可以有多个根元素二.vue2 vue3响应原理对比 1.vue2使用Object.defineProperty方法实现响应式数据原创 2021-06-24 09:48:22 · 308 阅读 · 0 评论 -
flexible.js+rem解决pc端和移动端适配
第一步:新建flexible.js文件这里默认是10等份,手动改为24,此时1rem=1920/24px即80px。(设计稿是1920px的)(function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; // adjust body font size function setBodyFontSize().原创 2021-04-09 14:49:57 · 1582 阅读 · 0 评论 -
Vue组件强制刷新(重新渲染)的四种方案对比
Vue的双向绑定用着确实方便,但自动档虽好,手动档也不是一无是处;在特定的情况下,还真的要手工触发“刷新”操作,目前有四种方案可以选择:刷新整个页面(最low的,可以借助route机制)this.$router.go(0) 使用v-if标记(比较low的) 使用内置的forceUpdate方法(较好的) 使用key-changing优化组件(最好的)前面两种种不多介绍了,我们重点介绍后面的两个:$forceUpdate调用强制更新方法this.$forceUpdate()会更新视图和数据转载 2021-06-08 17:40:03 · 1018 阅读 · 0 评论 -
swiper3的前进、后退按钮放到容器的外面
先上效果图注意:我用的swiper3的版本,版本不同初始化的方式不同我把前进、后退按钮放到了swiper-container2容器的外面,防止被外面的容器overflow掉附上代码html <div class="equipBox"> <div class="swiper-container2" ref="swiperRef2"> <div class="swiper-wrapper"> <div原创 2021-06-04 16:08:11 · 2221 阅读 · 0 评论 -
element table 组件内容换行
需要每个基地独占一行,这样挤在一起确实不好看实现方法:1.需要添加js的换行符 “\n”2.需要加css样式.el-table.cells{white-space:pre-line!important;}顺利解决普及小知识:white-space的值:normal 默认。空白会被浏览器忽略。pre 空白会被浏览器保留。其行为方式类似 HTML 中的<pre> 标签。nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 &l...原创 2021-06-01 11:44:27 · 2423 阅读 · 0 评论 -
vue项目实现打印功能
使用的一个叫做“vue-print-nb”的插件,具体步骤:1.下载插件:npm installvue-print-nb --save2.在main导入并注册:// 打印import Print from 'vue-print-nb'// 注册Vue.use(Print)3.在vue文件使用3.1在需要打印的区域添加一个id3.2给打印按钮添加一个v-print指令,如:v-print=“printID”具体代码如下:<div id="printDiv">.转载 2021-05-31 15:52:40 · 418 阅读 · 0 评论 -
动态修改Vue项目中的页面title
一、在main.js中:// 设置浏览器标题Vue.directive('title', { inserted: function (el, binding) { document.title = el.dataset.title }})二、在某个页面最外层的div上:效果:简单的方法:直接在页面里写document.title="溯源平台"或者通过路由const routes = [ { path: '/apply',原创 2021-05-14 16:44:41 · 251 阅读 · 0 评论 -
lottie&vue 把json文件转动画
# with npm npm install lottie-web # with bower bower install bodymovin首先:安装lottile其次:新建一个lottie.vue 页面<template> <div :style="style" ref="lavContainer"></div></template><script>import lottie from 'lottie-we.原创 2021-05-11 11:33:48 · 1320 阅读 · 0 评论 -
vue项目中引入video.js视频播放器
vue项目中引入video.js视频播放器Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。安装 : npm install video.js 在main.js中引入video.jsimport Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$video = Video转载 2021-04-27 14:40:26 · 897 阅读 · 0 评论 -
vue 如何在自定义指令中调用this
// 自定义指令 directives:{ drag(el,binding,vnode) { // 函数里面第三个参数vnode 它的vnode.context就是当前的vm实例 let that = vnode.context } }...原创 2021-03-23 16:41:13 · 2941 阅读 · 1 评论 -
正则表达式校验手机号
手机号的正则表达式校验规则如下:validatePhone = (rule, value, callback) => { var phone=value.replace(/\s/g, "");//去除空格 //校验手机号,号段主要有(不包括上网卡):130~139、150~153,155~159,180~189、170~171、176~178。14号段为上网卡专属号段 let regs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|.原创 2021-03-18 10:49:10 · 8371 阅读 · 0 评论 -
cannot find module ‘xxx‘ 解决办法
将node_module文件夹删掉:rimraf node_modules清缓存输入命令:npm clean cache查看package.json里有没有依赖项,有的话npm install原创 2021-03-18 09:14:17 · 1940 阅读 · 0 评论 -
vue引入原生高德地图
由于工作上的需要,今天捣鼓了半天高德地图。如果定制化开发需求不太高的话,可以用vue-amap,这个我就不多说了,详细就看官网 https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install然而我们公司需要英文版的高德,我看vue-amap中好像没有这方面的配置,而且还有一些其他的定制化开发需求,然后就只用原生的高德。其实原生的引入也不复杂,但是有几个坑要填一下。1. index.html注意,引入的高德js一定要放在头部而转载 2021-03-06 12:08:10 · 573 阅读 · 4 评论 -
vue--改变指定数组指定下标的值 并更新视图
baseClick(index) { this.checkArr[index] = !this.checkArr[index]; this.checkArr = Object.assign([], this.checkArr); },原创 2021-02-03 16:21:39 · 2034 阅读 · 0 评论 -
uniapp上传文件(图片、视频)
uniapp上传文件(图片、视频)不支持FormData格式错误做法:用uni.request()请求,传FormData格式时,报错报错信息:正确做法:需要拿到file格式文件后,调用uni.uploadFile() uni.chooseImage({ count: 1, //默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 sourceType: ['album',.原创 2021-02-02 11:18:05 · 3929 阅读 · 0 评论 -
vue 自动触发点击事件
需要,点击左边的菜单,顶部菜单相应改变,但是都需要点击事件,页面进来时,默认触发点击事件方法一,vue自定义指令 directives:{ trigger:{ inserted(el, binging){ console.log(el.id) el.id == 'nav0' ? el.click() : null // 只点击第一个,id是在循环中手动添加的 // $(el).trigger('click') // 所有都触.原创 2021-01-28 17:51:38 · 10662 阅读 · 2 评论 -
vue中过滤器filters的使用
组件内写法filters:{ filter:function(data,arg1,arg2){ return .... }}全局写法filters('filter',function(data,arg1,arg2){ retrun ....})1.在html中使用{{ msg | filter('arg1','arg2') }}// msg对应函数中的第一个参数data,arg1为第二个参数,类推2.methods中使用,并传转载 2021-01-28 14:09:12 · 567 阅读 · 0 评论 -
v-model修饰符.lazy详解
官网相关内容:在默认情况下,v-model在input事件中同步输入框的值与数据 (除了上述IME 部分),但你可以添加一个修饰符lazy,从而转变为在change事件中同步:个人实践理解:1. 当v-model没有使用.lazy修饰符时:代码:<template> <div> <div> <input v-model="msg" @change="show"> <span&...转载 2021-01-14 10:39:20 · 721 阅读 · 0 评论 -
$attrs和inheritAttrs的联合使用
inheritAttrs :默认值是true,如果是true的话,默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上,即父组件传的属性会绑到子组件根元素上,如果设置成false,则回禁止这种行为。$attrs :包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和style除外)。当一个组件没有声明任何 pr...原创 2021-01-07 16:44:52 · 206 阅读 · 0 评论 -
HBuilerX检测不到苹果手机iPhone
首先安装iTnues这里有官网提供的 Windows 版 iTunes 下载:https://www.apple.com/itunes/download/win64( 64 位)https://www.apple.com/itunes/download/win32( 32 位) 2 . 如果安装完iTunes后还是识别不到苹果手机,再安装iTools(安装4.0版本)软件地址:http://www.itools.cn/我先安装的是iTools3.0的安装完后,一直不停的安装驱动文..原创 2020-12-17 12:08:43 · 9073 阅读 · 11 评论 -
v-model中使用过滤器
v-model不能使用过滤器(filter) 如果v-model绑定的数据需要修改格式,例如input输入框只能输入汉字,数字和字母等都需要过滤掉方法一:使用computed,但是多个框时computed不能很好的复用 <el-input style="width: 217px" v-model="tagName" type="text" size="mini"原创 2020-12-16 17:57:46 · 9547 阅读 · 0 评论 -
el-checkbox 怎么阻止冒泡事件?
问题:在el-card卡片上绑定了点击选中复选框的事件,但是点击复选框会出现冒泡,导致el-card的点击事件也触发,导致点击复选框的时候,出现点击失效的现象解决:在点击el-checkbox复选框的时候,添加阻止冒泡的处理<el-row :gutter="10"> <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="4" .原创 2020-12-15 14:32:51 · 5016 阅读 · 0 评论 -
Vue 如何获取到子组件中的元素
场景:我们在组件A 中引入子组件B,B组件中又引入C组件。这是我们想要直接在A组件中,调用C组件的方法,这样怎么办呐?解决方案:B组件ref='B',c组件ref='C'.我们在A组件中直接使用this.$refs.B.refs.C就可以获取到C组件的方法和属性...转载 2020-12-15 13:50:20 · 3100 阅读 · 0 评论 -
Vmarker图片标注工具使用文档
使用指南操作说明设置Vmarker的渲染以及操作加载图片通过控件的imgUrl属性,可以加载url或base64的图片。<ui-marker ref="aiPanel-editor" class="ai-observer" v-bind:uniqueKey="uuid" :ratio="16/9" :imgUrl="url或base64"> </ui-marker>而当图片加载完成后,vmarker会发送一个vmark原创 2020-12-15 09:38:20 · 2907 阅读 · 1 评论 -
vue-countTo---简单好用的一个数字滚动插件
vue-countTo是一个无依赖,轻量级的vue组件,可以自行覆盖easingFn。你可以设置startVal和endVal,它会自动判断计数或倒计时。支持vue-ssr。vue-countTo参考于countUp.js;安装使用:npm install vue-count-to例子:<template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></...转载 2020-12-09 17:38:24 · 2262 阅读 · 0 评论 -
vue项目如何通过前端实现自动识别并配置服务器环境地址
前言:一般来说,一个web项目的生产环境和测试环境的服务器地址一旦确定下来,很少会频繁变动的。那么就可以单独写一个脚本文件,通过当前访问的域名来判断当前的访问环境,然后再通过一定的规则获取对应的服务器地址。如此一来,只要设计好服务器地址适配文件,那么只需要打一次包,就可以自动区分不同的服务器环境了。你不用再为每次打包上传不同环境都要手动改服务器地址而烦恼,也不会再出现忘了改配置文件而连接到错误的服务器上。解决方案:配置所有环境服务器地址变量——获取当前访问域名——根据域名判断是否包含在服务器地址转载 2020-12-04 11:11:42 · 2404 阅读 · 0 评论 -
node_modules中的依赖包的文件名为何有下划线
开发vue项目过程中发现用cnpm初始化的node_modules文件会出现_@开头的文件,并且文件数量要比用npm初始化的文件数量多出一倍用npm初始化出来的node_modules文件不会有_@但是不影响项目正常运行原创 2020-11-30 11:36:41 · 2287 阅读 · 1 评论 -
vue从后台下载.zip压缩包文件
vue前后端分离,使用element的el-button组件从后台下载文件,并且解决乱码问题1.添加下载按钮2.(更正版)用axios({})这种方式,配置参数 this.$axios({ method: "POST", url: "/api/image_down", responseType: "blob", data: that.qs..原创 2020-11-27 14:22:00 · 2678 阅读 · 0 评论 -
formData打印为空及解决办法
做上传时候需要用到formData,console.log()打印了一下发现为空,当时以为出错了,查找方法原来是方法不对,特意记录一下。let formData = new FormData()formData.append('upload_file','val')formData.append('dir_name','contract')console.log(formData) //{} 发现为空console.log(formData.get('upload_file')) // 'v转载 2020-11-23 18:17:22 · 2611 阅读 · 0 评论 -
解决 primordials is not defined 问题
在安装npm依赖的时候碰到了ReferenceError: primordials is not defined的问题,找了半天没有详细的解决方案,以至于花了几个小时解决,特记录下,以免其他同学遇到这个问题花费太多时间首先, 搜索发现是安装gulp版本与node版本不兼容的问题, 我的项目gulp版本是3.9.1, 本地node版本是12.4.0stackoverflow给出的方法是回退node版本或升级gulp版本:https://stackoverflow.com/q/5592144...转载 2020-11-21 17:33:41 · 862 阅读 · 0 评论 -
在vue里面使用highcharts的 no-data-to-display模块实现暂无数据显示
错误做法在vue里面使用highchartsimportHighchartsfrom'highcharts'然后初始化各种数据,显示表格正常,但是有存在表格没有数据的情况,网上查了一下有这个import'highcharts/modules/no-data-to-display'no-data-to-display模块,然后按照http://api.highcharts.com/hig...这个来配置,但是没有数据的时候 仍然是一片空白正确做法(1)require方...原创 2020-11-19 13:57:34 · 860 阅读 · 2 评论 -
loaderContext.getResolve is not a function报错
loaderContext.getResolve is not a function解决vue-cli安装less-loader时报错直接使用命令npm install less less-loader --save dev运行项目时会出现以下报错:loaderContext.getResolve is not a function报错原因:less-loader版本太高解决办法:修改package.json文件:将less和less-loader版本改为上述版本,然后重新np原创 2020-11-15 18:25:00 · 209 阅读 · 0 评论 -
Use // eslint-disable-next-line to ignore the next line.解决办法
npm run dev启动服务的时候,出现了一下报错:You may use special comments to disable some warnings.Use // eslint-disable-next-line to ignore the next line.Use /* eslint-disable */ to ignore all warnings in a file.都是因为开启了eslint编码规范检查解决办法:1.找到webpack.base.conf.js文转载 2020-11-15 18:20:43 · 6589 阅读 · 0 评论 -
vue query传参刷新后数据变成“[Object Object]“
写法:this.$router.push({ path: '/index', query: obj //直接传递参数,且参数是一个对象 })以这种方式传递参数,且参数为一个对象,刷新页面后可能会出现“[Object Object]”解决方案:this.$router.push({ path: '/index', query: { obj: JSON.stringify(obj) // 将对象转成json字符串 } })//在取参数的时候处原创 2020-11-05 11:51:25 · 1840 阅读 · 1 评论 -
父组件通过props传值给子组件,如何避免子组件改变props的属性值报错问题
父组件通过props传值给子组件,如何避免子组件改变props的属性值报错问题报错信息:Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “status”.原创 2020-10-30 18:00:02 · 778 阅读 · 0 评论