本文介绍了基于 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...