分类：Vue

2020
10-10

vue实践---vue不依赖外部资源实现简单多语操作

vue使用多语，最常见的就是vue-i18n,但是如果开发中的多语很少，比如就不到10个多语，这样就没必要引入vue-i18n了，引入了反正导致代码体积大了，这时候单纯用vue实现多语就是比较好的选择。第一步首先建立一个locales.js存放多语语言包的内容，这里只写了zh-CN,en这两种语言，其他还想新增的话方法一样，代码如下：exportdefault{'zh-CN':{name:'我是中文名字'},'en':{name:'IamEnglishname'}}第二步通过... 继续阅读 >

2020
10-10

不依任何赖第三方,单纯用vue实现Tree 树形控件的案例

这几天接到一个需求，里面有需要做一个属性组件，找的第三方的，但是不能完全满足我的需求，有这时间，我就自己做个小轮子吧。先看效果图（红点之前用的字体图标，是个对号，这里为了方便，用圆圈代替了选中状态，所以不是太好看，需要的自行修改就好）我直接用的vue-cli搭建的项目，代码目录如下：使用方式如下：treeData的格式如下：treeData:[{open:false,name:'1',level:0,checked:true},{open:false,/... 继续阅读 >

2020
10-10

解决vue prop传值default属性如何使用,为何不生效的问题

如果在template中，显示的调用了prop属性，那么default属性就不会生效如果在template中，不调用prop属性，default就会生效default值有效与否，和prop的验证通不通过，没有关系//声明Vue.component("blog-post",{props:{postTitle:{type:Number,default:10000}},template:"<h3>{{postTitle}}</h3>"});//在template中，显示调用prop属性，default不生效<blog-post:postTitle="54"></blog-post>//在... 继续阅读 >

2020
10-10

Vue切换Tab动态渲染组件的操作

使用<component:is="组件名"></component>结合Element-UI的导航菜单:UI组件el-menu-item里的index写对应的组件名点击事件@select="handleSelect"<el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal"@select="handleSelect"><el-menu-itemindex="Home">首页</el-menu-item><el-menu-itemindex="About">关于我们</el-menu-item></el-menu><component:is="activeIndex"></component>在点击事件... 继续阅读 >

2020
10-10

浅谈vue使用axios的回调函数中this不指向vue实例,为undefined

今天在vue-cli脚手架搭建的项目中使用axios时，遇到无法解析this.$route的报错信息，最后发现是作用域的问题。1.解决方法：使用=>原代码：axios.get('/user',{params:{ID:12345}}).then(function(response){console.log(response);}).catch(function(error){console.log(error);});修改为：axios.get('/user',{params:{ID:12345}}).then((response)=>{console.log(response);}).catch((... 继续阅读 >

2020
10-10

vue大型项目之分模块运行/打包的实现

本文以vue-cli3+为例，实现多系统集成下的分模块打包。分模块打包方式多种多样，下文可适用于多系统之间互不干扰，主系统可集成各子系统，各子系统又可单独运行的业务场景。一、目标我们要实现什么？所谓分模块打包，那么各个模块内就必须得有自己独立的入口文件，路由文件。按照这种构想，我在一个新的脚手架src目录下新建了一个projects目录：如上图，可以看到Aproject、B、C、D四个项目。我在A项目中建了assets，common和views... 继续阅读 >

2020
10-10

Vue+Element ui 根据后台返回数据设置动态表头操作

由于后端是多人开发，也没有规范数据格式，所有页面是我一个人开发，所以就会遇到同样的页面不同的返回数据格式问题。一、根据element文档，利用prop属性绑定对应值，label绑定表头。html<el-tableclass="tb-edit"highlight-current-row:data="tableData"borderstyle="width:100%"><templatev-for="(col,index)incols"><el-table-column:prop="col.prop":label="col.label"></el-table-column>... 继续阅读 >

2020
10-10

vue 里面的 $forceUpdate() 强制实例重新渲染操作

迫使Vue实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。比如v-for里面数据层次太多，修改过数据变了，页面没有重新渲染，需手动强制刷新。for(...){...}this.$forceUpdate();补充知识：VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题页面展示：实现效果：点击实现列表内容的展开、折叠。代码：<divclass="invoice-list"v-for="(item,index)inin... 继续阅读 >

2020
10-10

vue组件入门知识全梳理

组件概念：template是入口组件，那么挂载在template下的组件是入口组件的子组件局部组件三步口诀：声子，挂子，用子声明一个局部组件，变量名首字母大写（为了和H5标签做区分），里面的内容和vue实例化对象的内容相似，但是不需要el，data必须是一个函数，函数返回一个对象把组件挂载到入口文件的components对象中。在入口文件的template中使用，可以是双闭合标签也可以是单闭合标签全局组件Vue.component(name,options)第一... 继续阅读 >

2020
10-10

前端vue+elementUI如何实现记住密码功能

我们这回使用纯前端保存密码既然是记住密码，前端也就是使用cookie保存，访问时用cookie读取先来了解下cookie的基本使用吧Cookie所有的cookie信息都在document.cookie中存放着，是一个字符串，里面的cookie以分号和空格分隔。就像这样："key1=value1;key2=value2;key3=value3"//使用document.cookie来获取所有cookiedocuemnt.cookie="id="+value操作cookie/***设置cookie值**@param{String}namecookie名称*@pa... 继续阅读 >

2020
10-10

Vue+element+cookie记住密码功能的简单实现方法

实现功能：1、登录时勾选记住密码，用cookie保存账号和密码并对密码进行两次加密处理（纯前端），下次登录自动输入账号密码2、登录时不勾选，清空cookie，下次登录需要输入效果图：=============================================================================================================================================================================================Html<divclass="login-form-item"><el-... 继续阅读 >

2020
10-10

解决vue项目运行提示Warnings while compiling.警告的问题

是因为创建项目的时候设置了eslint所以才会有下面的警告，UseESLinttolintyourcode?(Y/n)这一步选no如果不想有规范的js代码，可以关掉eslint。解决办法：1、找到build下面的webpack.base.conf.js注释后重启项目2、或者打开config文件下的index.js,里useEslint改为false，重启项目补充知识：vuecli3热更新保存时自动刷新页面内容+分离环境变量.envpackage.json配置前几天ts+vue3.0+view-design撸了一个项目，然后... 继续阅读 >

2020
10-10

vue项目实现多语言切换的思路

Web项目多语言（i18n，即国际化）是比较常见的需求，常规的做法大概有以下几种：每种语言单独开发页面，适用于CMS之类的网站多语言文本和页面结构分离，运行时动态替换。适用于单页应用（SPA）直接用网页翻译插件，机器翻译。这种效果不太理想，同时有一些局限性（后面会讲到）问题每一种方案都有各自的优点和局限性，具体项目应该根据实际情况选择。最近在工作中碰到的需求是要在现有的项目基础上快速推出多语言版本。... 继续阅读 >

2020
10-10

vue实现放大镜效果

本文实例为大家分享了vue实现放大镜效果的具体代码，供大家参考，具体内容如下实现类淘宝放大镜效果前端小白一枚，最近在进行vue方面的学习，逛淘宝闲来无事想试试做个放大镜，结果虽然做出来了，但其中有一些问题让我无法解决，四处搜索也没有找到满意的答案，很是心烦，希望能有大佬帮忙解答，谢谢步骤思路对原图的显示空间（left）可以将显示原图的img换成canvas，来对图片进行保护跟随鼠标移动时显示放大的指示区（... 继续阅读 >

2020
10-10

vue修改Element的el-table样式的4种方法

修改Element中的el-table样式，可以使用以下几种方法：1.row-style行的style的回调方法，也可以使用一个固定的Object为所有行设置一样的Style。2.cell-style单元格的style的回调方法，也可以使用一个固定的Object为所有单元格设置一样的Style。3.header-row-style表头行的style的回调方法，也可以使用一个固定的Object为所有表头行设置一样的Style。4.header-cell-style表头单元格的style... 继续阅读 >

2020
10-10

vue+canvas实现拼图小游戏

利用vue+canvas实现拼图小游戏，供大家参考，具体内容如下思路步骤一个拼图拼盘和一个原图参照对原图的切割以及随机排序通过W/A/D/S或上下左右进行移动难度的自主选择对拼图是否完成的判定JS实现部分数据分析row：拼图的总行数；column：拼图的总列数。(用来设置拼图难度，也是每个拼图块宽高的设置规则)pic[{x,y,row,column,index}]：小拼图的集合，其内元素为小拼图的数据结构。(x、y：拼图块在canvas的绘制... 继续阅读 >