![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
small面包
这个作者很懒,什么都没留下…
展开
-
复制项目到自己电脑npm run dev报错
最近发生一件很奇怪的事情,我同时复制两个项目在同一文件夹下,一个项目可正常运行另一个项目则有千奇百怪的错误,下面来总结一下复制到自己电脑无法正常运行的解决方法(自己亲测有效)1.我只要用npm安装所有的模块都进行报错我安装了cnpm首先输入npm config get proxynpm config get https-proxy确保两个值都为null如果不为null操作下一步npm config set proxy nullnpm config set https-proxy nul原创 2022-03-30 14:16:43 · 845 阅读 · 0 评论 -
vue中根据路由from不同展示同一个页面搜索条件不同
项目要求:从一个页面的按钮跳转页面,该页面搜索条件变化,不从按钮进入搜索条件变成另一种同一个页面同一个路由不同的展示条件思路:假入从a页面的按钮调到b页面那么展示第二张图,如果不通过a页面按钮进入b页面展示第一张图,搜索条件写了两个用v-show显示第一张图,a页面点击按钮的时候this.router.push(′/b′)并在按钮注册的事件中用sessionStorage.setItem(′forma′,′a′)做个标记,现在跳入b页面,对b页面搜索条件进行控制,首先在created中获得sessi原创 2021-02-03 17:28:01 · 715 阅读 · 1 评论 -
watch监听动态隐藏显示el-table列
实现效果是根据弹框的多选控制table列的显示隐藏默认全部选中,就是table全部显示,取消选择table列进行隐藏下面是详细代码el-table <el-table :data="tableData" border stripe :header-cell-style="tableHeaderColor" style="width: 100%; margin-top:2%;margin-left:0%" ref="tab原创 2021-02-02 17:36:10 · 898 阅读 · 0 评论 -
el-dialog中使用走马灯放大图片模糊
最近遇到个奇葩的问题,在el-dailog中使用el-carousel里面的图片打开是模糊的,找了很久的原因发现el-carousel-item设置了transform属性,就从这里下手//原来的代码transform: translateX(0px) scale(1);//即使scale为1但图片还是模糊,在网上找了很多解决方法,发现下面的办法是最有效的,图片瞬间清晰//新代码/deep/ .el-carousel__item.is-animating { transform: tra原创 2020-12-07 13:59:20 · 549 阅读 · 0 评论 -
vue返回上一页不刷新页面
项目需求:由于公司产品较多页面加载相对慢,所以每次进行页面的刷新影响客户下单的效率。1.首先对router.js进行操作import indexOne from '@/components/indexOne' { path: '/indexOne', name: 'indexOne', component: indexOne, link: '/indexOne', meta: { keepAlive: true // 需要缓存 } },原创 2020-11-20 16:26:02 · 4771 阅读 · 0 评论 -
前端随机生成验证码
很多时候前端需要短信获取验证码或者是随机生成的数字和字母的验证码,今天讲一下随机生成的验证码的实现方式这是效果,下面是代码展示<el-form-item label="验证码" prop="code" class="codeGet"> <el-input v-model="ruleForma.code" /></el-form-item><div class="authimg authimg1" @click="cl原创 2020-07-27 15:12:42 · 1683 阅读 · 0 评论 -
在vue中提取公共方法
首先在utils中创建js写公共的方法下面是我的一个简单的例子top.js是我创建的js方法下面是top.js的代码const open = function() { console.log(1)}export { open }下面是main.js中引入代码如下import { open } from './utils/top'Vue.prototype.open = open最重要的是你要进行触发方法的地方要注册事件这样就可以进行正常的操作了...原创 2020-06-18 11:49:58 · 1255 阅读 · 0 评论 -
在vue中添加网站前面的小图标
每个人的需求不相同所以可以自己进行图标的操作,下面是我操作的步骤我在阿里矢量图中找到自己合适的图标https://www.iconfont.cn/加入购物车点开购物车结果如下点击下载素材选择png下面就可以进行.ico的转化我用的是比特虫http://www.bitbug.net/按操作进行.ico转化然后在根目录的index.html中link引入<link rel="icon" href="20200616134801_97948_32 (1).ico" /> 酱紫原创 2020-06-16 14:41:55 · 762 阅读 · 0 评论 -
el-table排序使某些数据不参与排序
排序前端也经常做,以前都做的是很简单排序,所有的数据参与排序,直接用插件封装的就行,但是这次是一些数据不参与排序所以这时候就需要进行自定义的设置思路:首先分成两个数组,一个数组的数据参与排序另一组数据不参与排序,将不参与排序的数据追加到排序的数组后面代码解析:<el-table height="480" ref="table" @row-dblclick="dataBack...原创 2020-04-16 10:29:10 · 2897 阅读 · 2 评论 -
vue中后台返回的数据展示并把嵌套的内容追加在当前数据后面并为嵌套的数据添加标记
前两天发布了个任务是追加表格到当前数据的下面并做标记,本来自己也认为是个简单的东西没想到弄了两天下面跟大家分享一下打开别人的项目首先找初始化的接口,辗转反侧牵扯好几个页面下面咱们先看一下后端返回的数据形式是一个嵌套的数据要把当前的嵌套的数据追加到当前数据的下面其实很简单就是一个简单的数组的操作下面是追加的代码//你自己的接口和要传递的参数一般传递页码和当前页面条数this.$axi...原创 2020-03-31 14:45:35 · 3362 阅读 · 0 评论 -
计算属性将两个数字进行相加
效果如图下面是代码解析<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <!-- ...原创 2020-03-20 11:23:30 · 2409 阅读 · 0 评论 -
vue中使用moment进行时间处理
在vue中要使用moment首先要进行moment的下载1.打开终端进行下载npm i moment 2.进行当前页面的引入import moment from 'moment'下面是完整的代码(时间戳和标准时间都可以用这个方法进行转换):<template> <h6>{{date}}</h6></template><...原创 2020-03-18 17:44:00 · 3552 阅读 · 0 评论 -
用Vue写移动端购物车功能
先看一下效果用计算属性计算比较方便,下面是这部分的逻辑代码<template> <div> <div class="top">购物车</div> <table> <tr v-for="item in list" :key="item.id" >...原创 2020-03-18 11:05:50 · 851 阅读 · 2 评论 -
npm run serve报错
脚手架创建项目会遇到很多问题今天我遇到一个问题总结下来有遇到相同问题的可以进行参考问题主要是红框的没有找到这个文件解决的办法很简单就是运行时打开错了文件所以会进行报错我创建的文件是e/work/file/demo/所以我的文件打开错了...原创 2020-02-23 15:36:51 · 8769 阅读 · 4 评论 -
设置elementUI中el-select的默认值
最近在家办公写到一个问题设置el-select的默认值,其实是一个很简单的问题下面直接上个小demo<el-form ref="form" :model="form"> <el-form-item label-width="10px"> <el-select v-model="form.region" ...原创 2020-02-18 12:10:32 · 58869 阅读 · 5 评论 -
baidu-map did you register the component correctly? For recursive components, make sure to provi
今天我写elementUI中利用弹框弹出地图但是我遇到一个问题控制台报错如下这个问题的意思就是baidu-map没有被找到只需要在components中注册就解决报错问题 components: { BaiduMap },...原创 2020-01-03 12:04:37 · 1557 阅读 · 0 评论 -
vue遍历表格将数字转成千分制报错Cannot read property 'toFixed' of undefined
最近在做后台管理系统,将要将后台的数据转化成千分制的数字,但是出现了问题,看一下报错的情况然后我就对我的这个数据进行打印结果如下其中有undefined所以要进行一定的判断 if (typeof margin === 'undefined') { return } else { return Number(m...原创 2019-12-26 11:53:06 · 1289 阅读 · 0 评论 -
在vue中是文字换行
今天遇到一个问题,在显示静态资源没有请求接口的时候显示的数据可以进行换行,但是访问了接口后返回的数据正常,但是显示超出屏幕出现横向滚动条,找了半天的原因,发现可以用css进行操作对你要进行操作的盒子进行css的设置div{ white-space:normal; word-break:break-all; word-warp:break-word;}进行这样的设置文字自然进行换行...原创 2019-12-23 15:02:34 · 4369 阅读 · 0 评论 -
eCharts表进行宽高的自适应
最近做eCharts图表,但是有个需求就是想要适配不同的屏幕,但是发现eCharts不能自己进行适配,然后就上网进行翻阅,现在进行总结一下首先我把eCharts单独提到一个组件中在需要的组件中进行引入下面看一下Echarts中index.vue中的代码<template> <div id="myChart" :style="{width: '600...原创 2019-12-20 14:06:36 · 2743 阅读 · 0 评论 -
vuex的辅助函数的应用
1.引入import { mapGetters,mapMutations, mapActions } from 'vuex'2.应用mapGetters computed: { // 将store下面的isFooterShow 映射当前组件里的计算属性 isFooterShow // isFooterShow = $store.getters.isFooterSho...原创 2019-12-19 15:56:09 · 166 阅读 · 0 评论 -
前端手写自动旋转3D立方体
上一篇咱们写了一个3D的立方体,但是不能自己旋转,触摸之后可以进行旋转,现在是升级版的是自动旋转的立方体下面直接是代码<template> <div> <div class="top">懵懵懂懂</div> <div class="wrap"> <div class="cube"> ...原创 2019-12-17 17:36:22 · 377 阅读 · 0 评论 -
vue中使用swiper
最近在研究vue的周边技术,发现swiper,在官网中也有说明要如何进行操作,下面我进行进一步的总结首先在终端进行npm install vue-awesome-swiper --save在main.js中引入一下代码import Vue from 'vue'import 'swiper/dist/css/swiper.css'import VueAwesomeSwiper from...原创 2019-12-12 17:25:08 · 372 阅读 · 0 评论