分类：vue

2020
09-24

vue插槽slot的简单理解与用法实例分析

本文实例讲述了vue插槽slot的简单理解与用法。分享给大家供大家参考，具体如下：vue中插槽的使用非常广泛，本文就插槽的使用和理解简单总结。从字面理解插槽是预先插入一个代码空间，用于后期塞入数据。插槽分类匿名插槽   ------------------   匿名的代码空间具名插槽   ------------------   带有命名的代码空间作用域插槽-------------------  &n... 继续阅读 >

2020
09-24

Vue实现仿iPhone悬浮球的示例代码

悬浮球插件简单的效果图：很遗憾，没找到太好的视频转gif的软件，压缩出来的大小超过了限制，就不放图了可以参考其他人的图，效果一致：简单实用案例：<!--给定一个初始位置position，插槽中填写想滑动的部分--><xuanfuqiu:position="position"><d-add-button@click="addPigFarm"add-item="猪场"></d-add-button></xuanfuqiu>原理示意图请结合代码注释来理解悬浮球插件代码如下：<template><div><divclass="xuanfu"i... 继续阅读 >

2020
09-24

vue动态渲染svg、添加点击事件的实现

业务需求(vue项目中)1.页面展示svg内容2.监听svg内部的点击事件3.动态改变svg内部元素的属性和值html标签经多次实验，用embed、img等标签改变src属性的方式，均无法实现上述全部功能（尤其是svg内部点击事件），最终采用Vue.extend()方法完整实现，代码也较为简洁，html结构如下：<template><div><divid="svgTemplate"></div></div></template>直接将svg文件的内容复制粘贴到.vue文件里，是可以在标签内直接添加@click事件完... 继续阅读 >

2020
09-24

使用vue实现HTML页面生成图片的方法

随着网络的发展，越来越多的网络平台应运而生。如何获得更多的流量，吸引更多的眼球已经成为网络平台生存、发展的必要条件。现在网络平台最常见的一种宣传方式就是人邀人。我最近就接到一个需求，做一个海报页面，并且能保存到手机，方便用户分享给朋友，希望能够达到人邀人的效果。 给人第一感觉这个需求就是保存图片的功能，当时梳理是却发现不是那么简单： 1.动态生成一张带logo的二维码 2.整个海报的html部... 继续阅读 >

2020
09-24

vue实现导航标题栏随页面滚动渐隐渐显效果

项目开发中导航栏随页面滚动渐隐渐显这一功能还是较为常用的，下面作一个用vue实现此功能的代码分享。1.为导航栏元素style属性用v-bind绑定data数据"opacityStyle"。<divclass="header":style="opacityStyle">景点详情//内容我就简约了，实际开发以需求为准</div>2.data中定义opacityStyle，数据内容是opacity透明度属性，设置为0。data(){return{opacityStyle:{opacity:0}}}3.监听scroll事件并执行相应方法，一般我... 继续阅读 >

2020
09-24

Vue使用vue-draggable 插件在不同列表之间拖拽功能

今天分享一个vue项目中在不同列表拖拽设置选项的功能，这个功能也是在做项目中遇到的，先说下这个功能的要点(参考下图)，有2个列表，左侧列表展示已选，右侧列表展示未选，通过拖拽进行设置，已选的选项不能超过4个，超过的话自动将拖拽之前的最后一项清除到右侧，且如果从已选往未选里拖的时候，右侧显示垃圾桶的提示(如图)。拖拽功能图片：垃圾桶显示图：首先讲讲vue-draggable的使用安装vue-draggable:npminstallvuedraggable... 继续阅读 >

2020
09-24

vue项目中使用vue-layer弹框插件的方法

vue-layer弹框插件安装npmi--savevue-layer引用importlayerfrom'vue-layer'Vue.prototype.$layer=layer(Vue);参数说明{type:0,//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）title:'信息',content:'',area:'auto',offset:'auto',icon:-1,btn:'确定',time:0,shade:true,//是否显示遮罩yes:'',cancel:'',tips:[0,{}],//支持上右下左四个方向，通过1-4进行方向设定,可以设定ti... 继续阅读 >

2020
09-24

Vue组件模板及组件互相引用代码实例

1.vue组件都是由这三部分组成<template><div></div></template><script>exportdefault{}</script><style></style>2.组件间的引用分3步走，假设现在有两个组件App.vue，和Add.vue，现在要把Add.vue组件引入到App.vue组件中App.vue<template>//第3步<Add/></template><script>//第1步importAddfrom'./components/Add.vue'//第2步components:{Add}}</script><style></style>3.组件间数据的传递假... 继续阅读 >

2020
09-24

Vue组件间的通信pubsub-js实现步骤解析

本文介绍使用发布订阅的方式进行vue组件间的通信我认为这种方式比较自由，不存在组件间的关系问题1.首先安装pubsub-jsnpminstall--savepubsub-js2.订阅方组件importPubSubfrom'pubsub-js'mounted(){//执行异常代码//订阅消息PubSub.subscribe('deleteTodo',(msg,index)=>{this.deleteTodo(index)//调用deleteTodo方法执行真正的业务逻辑});},3.发布方组件<script>importPubSubfrom'pubsub-js'exportdefa... 继续阅读 >

2020
09-24

Vue事件处理原理及过程详解

Vue事件监听的方式貌似违背了关注点分离(separationofconcern)的传统理念。实际上，所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上，它不会导致维护上的困难，使用v-on有以下好处：1、扫一眼HTML模板便能轻松定位在JS代码里对应的方法。2、无须在JS里手动绑定事件，ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试。3、当一个ViewModel被销毁时，所有的事件处理器都会自动被删除，无须担心... 继续阅读 >

2020
09-24

Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)

1.实现效果2.实现原理在父组件中点击编辑按钮，将当前点击对象的id传给子组件，子组件根据id修改相应的内容父组件中代码：//放置编辑按钮的位置<buttontype="button"class="layui-btnlayui-btn-normallayui-btn-sm"v-on:click="edit(manage.id)"><iclass="layui-icon">&#xe642;</i>编辑</button>//在methods中设计edit()方法//需要先引入编辑组件importEditManagefrom'./EditManage'edit(id){this.$layer.iframe({... 继续阅读 >

2020
09-24

vue 移动端记录页面浏览位置的方法

记录一下本次项目我使用的方法，有更简单便捷的方法，欢迎交流描述：假设有abc页面从a页面到b页面，b页面到c页面b到c页面的时候需要记录当前b的浏览位置，c返回到b的时候滚动到上次浏览的位置b在返回a的时候，在从a进入b返回的是b的顶部（也就是不记录浏览位置）做法：使用到了vuex，beforeRouteLeave1.首先在vuex中state定义一个变量来记录当前的浏览的位置//state中定义数据state:{carrerTouScroll:{hei... 继续阅读 >

2020
09-24

详解vue-template-admin三级路由无法缓存的解决方案

1.为什么三级会缓存不了在src/layout/AppMain组件:keep-alive的组件依赖cachedViews,cachedViews是store中的一个状态，cachedViews的逻辑在src/layout/TagView当路由变更时就会调用addViewTags,addViewTag会根据匹配的路由name属性进行缓存。而用到三级路由的时候，拿到name只能时第三级路由的name，二级路由组件的名字会丢失，keep-alive就不会进行缓存。知道原因之后，第一个想法就是把二级路由的name也加上去就好了。要实现这... 继续阅读 >

2020
09-24

Vue项目打包压缩的实现(让页面更快响应)

影响网页响应速度的因素有很多，例如：http请求次数太多、服务器本身处理请求太久、请求内容太大、JS脚本执行耗时过长、浏览器回流重绘等。网站页面的响应速度与用户体验息息相关，直接影响到用户是否愿意继续访问你的网站。对于Vue项目而言，最普遍的问题可能在于打包后的文件太大，导致加载时间过长。我的一个小项目，仅有三四个页面，但因为服务器带宽太小了，加载时间过长的问题尤为明显，于是采用路由懒加载和gzip压... 继续阅读 >

2020
09-24

vue中的使用token的方法示例

初始于登录页面Home.vue<template><divclass="home"></div></template><script>//@isanaliasto/srcimportHelloWorldfrom'@/components/HelloWorld.vue'importaxiosfrom'axios';exportdefault{name:'home',components:{HelloWorld},created(){axios.get('/api/userinfo').then(res=>console.log(res.data))}}</script>About.vue<template><divclass="about"><h1>Thisisanaboutpage</h1></div... 继续阅读 >

2020
09-24

vue实现简单瀑布流布局

vue简单实现瀑布流布局的一种方式（vue瀑布流组件），供大家参考，具体内容如下vue中的瀑布流布局组件需求：图片容器宽度固定，高度根据图片自适应，图片一行不能排列时候，换行依次从左往右排列。（瀑布流概念）另外结合vue-lazy实现懒加载（npmivue-lazyload--save-dev）使用也很简单，在需要懒加载的img标签上将:src换成v-lazy父组件传递数据：waterfallData:[{e_img:"test.jpg",//图片e_intro:"描述信息",u_img:... 继续阅读 >