面包屑应该是我们在项目中经常使用的一个功能，一般情况下它用来表示我们当前所处的站点位置，也可以帮助我们能够更快的回到上个层级。 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能。以下案例都是使用 Element-UI 进行实现。 最笨的方式 首先我们想到的最笨的方法就是在每个需要面包屑的页面中固定写好。 <template><div class="example-container"><el-breadcrumb separator="/"><el-breadcrumb-itemv-for="(item,index) ...
如上图所示：需要完成的功能是点击更改头像，获取本地文件库，选择图片后将原始图片替换。这里我就直接用html文件引入vue来简单实现在这功能，代码如下： HTML： <div id="app"><div class="item_bock head_p"><div class="head_img"><img :src="userInfo.avatar"/><--图片地址动态绑定--></div><div class="setting_right" @click.stop="uploadHeadImg"><div class="caption">更改头像</div></div><input type="file" accept="ima...
我们的社区前端工程用的是element组件库，后台管理系统用的是iview，组件库都很棒，但是日期、时间选择器没有那种“ 年份 - 月份 -天数 ” 联动选择的组件。虽然两个组件库给出的相关组件也很棒，但是有时候确实不是太好用，不太明白为什么很多组件库都抛弃了日期联动选择。因此考虑自己动手做一个。 将时间戳转换成日期格式 // timestamp 为时间戳 new Date(timestamp) //获取到时间标砖对象，如：Sun Sep 02 2018 00:00:00 GMT+0...
具体代码如下所述：<div><div class="navlist"><ul><li class="navli" v-for="(item,index) in navList" :class="{activeT:nowIndex===index}" @click="tabClick(index)"><i>{{item.name}}</i></li></ul></div><div class="swiper-container swiper_con"><div class="swiper-wrapper"><!-- 第一个swiper --><div class="swiper-slide" ref="viewBox">1111</div><!-- 第二个swiper --><div class="swiper-slide">2222</div></div></...
最近vue项目需要用到三级CheckBox复选框，需要实现全选反选不确定三种状态。但是element-ui table只支持多选行，并不能支持三级及以上的多选，下面通过本文给大家讲解实现方法。 效果图预览：首先是页面布局，当然也可已使用table，但是自己用flex布局后面更容易增删改查其他功能 <div class="deliverySetting-table"><div class="table-head"><div class="selection"><el-checkbox :indeterminate="indeterminate" v-model="ische...
言归正传 我们老样子直接先上效果图再开始今天的分享 这个项目的github可以看一看组件分析 界面组成逻辑分析最终实现界面组成 从上图中，我们可以看出界面主要分为menu和item2块，其中menu的动画是自传，item的动画是位移，然后这里我们通过绝对布局的方式将整个控件定位在四个角落 .menu_container {position: absolute;z-index: 100;border-radius: 50%;transition-duration: 400ms;text-align: center;border: #efefef 3px soli...
使用计算属性app.js var app5 = new Vue({el: #app5,data: {shoppingList: ["Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"],key: ""},computed: {filterShoppingList: function () {// `this` points to the vm instancevar key = this.key;var shoppingList = this.shoppingList;return shoppingList.filter(function (item) ...
这里讲解是图片上传和图片预览。主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果 效果图：样式以及效果图一并展示 1.HTML <div class="rz-picter"><img :src="avatar" class="img-avatar"><input type="file" name="avatar" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage($event)" ref="avatarInput" class="uppic"></div>2.js data()...
element 的上传功能 最近有个需求，需要在上传文件前，可以进行弹窗控制是否上传 upload 看完文档后，感觉有两种思路可以实现before-upload auto-upload, on-changebefore-upload 初始代码 // template <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="ima...
本文主要参考： http://element.eleme.io/#/zh-CN/component/menu 在使用elementUI的时候发现，能够展开的导航栏是不能展开的，效果这里先不演示了。可以在上边的网站上看到。 现在有这样的需求，就是说，默认的时候需要展开这些导航，就是一打开界面的时候就能够显示导航里面的菜单内容。 具体操作是这样的： <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui@1.4.1/lib/index.js"></sc...
1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage （本项目已经封装h5的sessionStorage和localStorage） ( 3 ) vuex设置 SET_LOCK state.isLock = true (为true是锁屏状态) ( 4 ) 在路由里面判断vuex里面的isLock（为true锁屏状态不能让用户后退url和自行修改url跳转页面否则可以） （1）设置锁屏密码handleSetLock() {this.$refs[form].validate(valid => {if (valid) {this.$store.commit(SET_LOCK_PASSWD, this.form.p...
前端项目中经常会下拉或者选项卡，如果通过if,else或者switch去判断加载的话会产生大量冗余代码和变量定义，而且都写在一起后人很难维护。 Vue核心在于组件，如果有内容通过选项卡或者下拉框切换用动态加载子组件最好不过。如图： selects文件夹中，index只负责公共数据（当然公共数据也可以写在其他文件，只留一个入口文件），而comp文件夹中的几个组件则通过动态加载。 动态加载子组件：component // 给下拉框绑定下拉列表的索引...
最近一直在看vue，查了很多资料，看了很多文档和博客，大概半知半解了，然后利用所理解的知识写了一个简单的搜索匹配功能。 大概长这个样子：数据都是假的 代码部分 （注意我引用的是本地vue.min.js文件，请注意文件路径。） <!DOCTYPE html> <html><head><meta charset="utf-8"><title>Vue测试2</title><script type="text/javascript" src="vue.min.js"></script><style type="text/css">*{padding: 0;margin: 0;font-size: 14px...
前些日子做了一个项目关于vue项目需要头像裁剪上传功能，看了一篇文章，在此基础上做的修改完成了这个功能，与大家分享一下。原文：//www.gxlcms.com/article/135719.htm 首先下载引入cropper js， npm install cropper js --save在需要的页面引入：import Cropper from "cropper js" html的代码如下： <template> <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel"> <div> <img id="image" :src="url" alt=...
UEditor官网说不提供单图片的跨域，所以只能自己解决。查了网上的很多方案，但是没看到和vue一起用的，不过倒是获得了一些思路。本着不想改太多源代码的基础上尝试着...一不小心就可以用了 解决方案：上传单图片的时后端不直接返回JSON，而是重定向到前端页面 前端：VUE 后端：WAMP + ThinkPHP5.0 前端 http://localhost:8888 1、去官网下载UEditor到vue中，打开ueditor.config.js配置服务器路径(本地域名可以去hosts文件中添加)，...