本文介绍了基于 Vue 的树形选择组件。分享给大家，具体如下：系统要求：Vue 2基本特性 完美的多级联动效果 支持无限多的分级 有 全选、半选、不选 三种状态 截图展示代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><link rel="icon" href="https://v1-cn.vuejs.org/images/logo.png" rel="external nofollow" type="image/x-icon"><title>Vue Tree Select Example</title><script src="https://cdn.bo...
富文本编辑器在任何项目中都会用到，在Element中我们推荐vue-quill-editor组件，现在我就把它提供给大家，希望对大家有用。具体截图如下：安装编辑器组件 具体方法：npm install vue-quill-editor --save 编写组件 首先我们在components文件夹里创建ue.vue组件，效果图如下：组件<!-- 组件代码如下 --> <template><div><script id="editor" type="text/plain"></script></div> </template> <script>export default {name: UE,data ...
?最近在vue项目中需要使用富文本编辑器，于是将Ueditor集成进来，作为公共组件。项目地址：https://github.com/suweiteng/vue2-management-platform 1.放入静态资源并配置 首先把官网下载的Ueditor资源，放入静态资源src/static中。 修改ueditor.config.js中的window.UEDITOR_HOME_URL配置，如下图：2.引入 在main.js中引入import ../static/UE/ueditor.config.js import ../static/UE/ueditor.all.min.js import ../static/UE/la...
前言之前的文章讲得太多安装了，今天就不说这个了，因为我的项目是前后端分离的，所以基本是分开执行代码逻辑。其中还有跨域问题，主要还是在laravel中添加头信息放行之类的，这里会提一下做法。 element-ui的upload组件我的vue代码： <template><el-upload:action="uploadAction"list-type="picture-card":on-remove="handleRemove":on-success="handleSuccess":before-upload="handleBefore":file-list="files"><i class="el-ico...
前言最近在学习vue框架的基本原理，看了一些技术博客以及一些对vue源码的简单实现，对数据代理、数据劫持、模板解析、变异数组方法、双向绑定有了更深的理解。于是乎，尝试着去实践自己学到的知识，用vue的一些基本原理实现一个简单的todo-list，完成对深度复杂对象的双向绑定以及对数组的监听，加深了对vue基本原理的印象。 github地址：todo-list 学习链接前排感谢以下文章，对我理解vue的基本原理有很大的帮助！ 剖析vue实现原...
在Vue项目中，我们经常把某个功能模块封装起来，形成组件，下次调用时非常方便，同时也是在一些循环中进行dom操作的一种较好方式。 本次我想以一个评价组件来说一下组件的事件和参数是怎样传递的，如何完成的组件通讯。 示例如下：这里先说一下组件设计思路： 明确整个功能场景，找出存在的事件操作，此例是一个简单的评价功能，即点击某一个星星时左边以及当前为选中的黄色星，右边为未选中的白色星。确定可复用的组件，即具有重复...
前言在开发项目的过程中，经常会需要开发一些弹出框效果，但原生的alert和confirm往往都无法满足项目的要求。这次在开发基于Vue.js的读书WebApp的时候总共有两处需要进行提示的地方，因为一开始就没有引入其他的组件库，现在只好自己写一个模态框组件了。目前只是一个仅满足当前项目需求的初始版本，因为这个项目比较简单，也就没有保留很多的扩展功能。这个组件还是有很多扩展空间的，可以增加更多的自定义内容和样式。这里只介绍...
这个功能我感觉在任何项目中都会涉及到，今天我就把我的实现方法跟大家分享一下，有不对的地方还请指出，我好更新。下面是整体代码，我把轮播图单独做了一个组件，大家可以拿来就用，具体代码如下： <template><div class="content"><div class="focus"><!-- focus begin --><swiper :options="swiperOption"> <!-- map是数组 这里我们用v-for把数据循环出来 --><swiper-slide v-for="item in map"><a :href="item.i_route" rel="e...
最近在做移动端h5页面，所以分页什么的就不能按照传统pc端的分页器的思维去做了，这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多，符合正常使用习惯。 首先简单写一下模板部分的html代码,，很简单清晰的逻辑： <template><div class="loadmore"><div class="loadmore__body"><slot></slot></div><div class="loadmore__footer"><span v-if="loading"><i class="tc-loading"></i><span>正在加载</span></span><span v...
1，使用save会在package.json中自动添加。 npm install node-sass --save-devnpm install sass-loader --save-dev 注： 通常使用npm安装会出现以下报错，安装失败。（网路问题）可以通过淘宝的npm镜像安装node-sass，解决以上问题。 $ npm install -g cnpm --registry=https://registry.npm.taobao.org （安装淘宝镜像）$ cnpm install node-sass --save （使用淘宝镜像安装node-sass） 2.进入webpack.base.config.js 配置scss ...
本人刚学习vue,用vue做了个图片轮播，下面我来记录一下,有需要了解VUE开发一个图片轮播的组件的朋友可参考。希望此文章对各位有所帮助。完成效果图如下：vue开发的思路主要是数据绑定，代码如下： <template><div ref="root" style="user-select: none;-webkit-user-select: none;overflow: hidden"><div class="sliderPanel":class="{transitionAni:ani}":style="{height:height,transform:translateX}"><div v-for="item in item...
vue + vuex + elementUi + socket.io实现一个简易的在线聊天室，提高自己在对vue系列在项目中应用的深度。因为学会一个库或者框架容易，但要结合项目使用一个库或框架就不是那么容易了。功能虽然不多，但还是有收获。设计和实现思路较为拙劣，恳请各位道友指正。 可以达到的需求 能查看在线用户列表能发送和接受消息使用到的框架和库 socket.io做为实时通讯基础vuex/vue：客户端Ui层使用Element-ui：客户端Ui组件类文件关系图 服务...
本篇文章主要介绍vue添加标签，废话不多说了，下面上具体代码 效果如下：html <div id="app"> <div style="margin-bottom: 4px;"><span class="selectedItem" v-for="item in selectedItems">{{item.name}} <i class="red fa fa-close (alias)"v-on:click="deleteSelectedItem($index)"></i></span><input v-model="inputItem" type="text" v-on:focus="showDropmenu" v-on:keyup.enter="addItem"> </div> <div v-show="isShowDrop...
先来看一下效果图： 功能描述： 1. 点击页面序号跳转到相应页面； 2. 点击单左/单右，向后/向前跳转一个页面； 3. 点击双左/双右，直接跳转到最后一页/第一页； 4. 一次显示当前页面的前三个与后三个页面； 5. 始终显示最后一个页面； HTML：<!-- 分页开始 --> <div class="u-pages" style="margin-bottom:20px; margin-top:10px;"><ul><li v-if="showPre" class="crt"><a v-on:click="jumpFirst(cur)"> << </a></li><li v-if="s...
想用vue.js写一个联动效果，按照自己的思路实验了下，并没有成功。请大家指点下我的思路是：通过遍历YX数组，如果某个对象的text和第一个select的selected value相同，则显示对应院系的专业<div id="test"><select v-model="A"><option v-for="yx in YX">{{yx.text}}</option> </select><select name="ZY"><option v-for="zy in {{ selection }}">{{zy.text}}</option> </select> </div><script> new Vue({el:#test,data:{YX:[{tex...