前言 需要进行表单数据验证，原先才用html5来完成验证，但是效果很差，也不够灵活，所以需要进行自定义的表单验证，网上的插件都太过庞大，项目并没有这么多的需求。 那让我们自己来写一个吧！ 知识准备 vue的自定义指令具体可以看官方手册，连接如下：https://vuejs.org/v2/guide/custom-directive.html总的来说就是可以帮你在指定的钩子函数中跳用你的函数，参数（el，binding， vnode） el: 绑定的dombinding: 指令的各项属性vn...
代码如下所示： <template> <div id=""><ul v-for="(item,index) in listaaa"><li v-if=dealFun(item.cdate,index)>{{item.cdate}}</li></ul> </div> </template> <script> export default {name: "",data(){return {listaaa: [{cdate: 123},{cdate: 456},],flagName: }},methods: {dealFun(arg, index) {console.log(---------------------------)if (arg == this.flagName) {return false} else {this.flagName = argreturn true...
最近搭建了公司的后台管理系统， 而且系统还比较庞大， 要实现以下几点： 菜单权限， 根据不同权限显示不同的菜单操作权限， 比如有些账号没有新增权限， 有些没有修改或者删除权限数据权限， 比如统计概况， 普通管理员不能看到公司营业概况，但能看到自己所属区域的概况显示权限， 比如列表， 运营能看到那一列的签约金额，但市场不能看到签约金额这一列到目前为止还在构建中， 已经解决菜单权限和操作权限。菜单权限： 最开始的...
说明做项目的时候要使用到一个自定义的树形控件来构建表格树，在github上搜了一下没有搜索到合适的（好看的）可以直接用的，查看Element的组件说明时发现它的Tree控件可以使用render来自定义节点样式，于是基于它封装了一个可以增、删、改的树形组件，现在分享一下它的使用与实现。 控件演示github上挂的gif可能会比较卡，有没有大佬知道还有哪里可以挂静态资源的，谢谢。。！控件使用概要 基于element-ui树形控件的二次封装提供编...
最近一直在研究使用vue做出来一些东西，但都是SPA的单页面应用，但实际工作中，单页面并不一定符合业务需求，所以这篇我就来说说怎么开发多页面的Vue应用，以及在这个过程会遇到的问题。 这是我放在GitHub上的项目，里面有整个配置文件，可以参看一下：multiple-vue-page 准备工作 在本地用vue-cli新建一个项目，这个步骤vue的官网上有，我就不再说了。 这里有一个地方需要改一下，在执行npm install命令之前，在package.json里添加...
本文介绍了vue 粒子特效的示例代码，分享给大家，具体如下：实现效果：没错，你看到的上图那些类似于星座图的点和线，是由vue-particles生成的，而且能与用户鼠标事件产生互动。 传送门：vue-particles 使用教程npm install vue-particles --save-dev main.js文件： import Vue from vue import VueParticles from vue-particles Vue.use(VueParticles) App.vue 文件——一个简单的例子： <template> <div id="app"><vue-particl...
前后端分离，后端提供了接口。但有一部分数据，比较产品说明文件，是存在其他的服务器上的。所以，在页面显示的时候，如果以页面内嵌的形式显示这个说明文件。需要搞点事情以达到想要的效果。 不同以往的IFRAME标签，那种方式比较Low，另外有其他的一些BUG。本文思路是把HTML请求以来，以v-html的形式加载到页面内部。注册全局组件【v-html-panel】 1.HtmlPanel.vue文件 <template><div><mu-circular-progress :size="40" v-if="lo...
实现效果：input未输入值，按钮禁用 jquery操作代码： html <input type="text" name="" placeholder="请输入用户名" id="userName" ><button class="disabled" id="login">登录</button>css.disabled {pointer-events: none;//禁用点击事件cursor: default;//鼠标禁用opacity: 0.4;}js //监听input里的值 $(#userName).on(input propertychange,function(){if(this.value.length != 0){$(#login).removeClass(disabled);}else{$(#...
关于vue2.0的事件发射和接收，大家都知道$dispatch和$broadcast在vue2.0已经被弃用了，取而代之的是更加方便快捷的方式，使用事件中心，组件通过它来互相通信，不管组件在哪一个层都可以通过实例化一个空Vue来实现。上案例： 这是自己写的一个小案例，功能就是点击子组件的加减按钮控制...
1、父组件引入子组件，子组件的加载问题products.vue引入dlAddProd弹框（dlAddProd.vue），由于<div v-show="visible">，所以在products页面加载时，dlAddProd会被加载。但是el-dialog中的body部分不会被加载（不管有没有加v-if指令）；dlAddProd弹框中又引入了dlBlankAdd弹框和dlEditProd弹框，但此时只有dlBlankAdd会被加载，dlEditProd不会被加载（<div v-if="visible">）；2、注意的地方由于element-UI的弹框组件el-dialog在其...
废话不多说了，直接给大家贴代码了，具体代码如下所示：let that = this; for(let i = 0;i<that.tableData.length;i++){this.tableData[i].zzzk = this.midForm.zzzk;console.log(this.tableData[i].zzzk)this.tableData[i].zhje = this.tableData[i].zzzk * this.tableData[i].dj * this.tableData[i].sl * this.tableData[i].hzk//更新tableData中的数据Vue.set(this.tableData,i,this.tableData[i]) }vue监听不到通过索引改变的...
本文介绍了新手vue构建单页面应用实例代码，分享给大家，具体如下 步骤： 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resource请求我们的node服务端 5.使用.vue文件进行组件化的开发 一、目录结构：二、搭建项目 先安装 vue-cli： sudo npm install -g vue-cli 使用vue-cli构建初始化项目：vue init webpack project（创建webpack项目并下载依赖） 输入命令进入项目： cd my-project...
整理文档，搜刮出一个vue 计时器组件的代码，稍微整理精简一下做下分享。<template><div><span :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal">{{countString}}</span></div> </template> <script> export default {data() {return {isStart: false,globalTimer: null,//获取setInterval对象值countString: 0秒, //用来显示时间day: 0,hour: 0,minute: 0,second: 0,millisecond: 0,countVal: this.default...
在功能中有一项是需要实现拖拽的。虽然最终项目没有采取这样的拖拽方式，但是，当初也是费了九牛二虎之力完成了这个功能。增加了对函数的更深理解。下面就再重现一下代码。 下面是代码片段： <div class="fav-fold-panel" v-if="!typeChange" draggable="true" @dragstart="drag($event)"@dragover="allowDrop($event)"><!-- 面板内容 --><div class="favTitle-card" :data="favPanelAllData" v-if="foldDone"><favPanel v-for...
vue 封装自定义组件 tabal列表编辑单元格组件 <template><div class="editable-cell"><div class="editable-cell-input-wrapper" v-if=editable><el-input class="editInput" v-model="cellValue" placeholder="请输入内容" v-loading="editLoading" size="small"></el-input><el-button type="text"><i class="el-icon-check" @click=check></i></el-button></div><div class="editable-cell-text-wrapper" v-else>{{cellValue ||...