实现样式 准备工作，先实现 树状组件的基本样式 <span style="height:500px; display:block; overflow-y:auto;" class="mytree"><el-tree:data="data"show-checkboxnode-key="id":default-expand-all="true":props="defaultProps"></el-tree></span> 接下来修改css ，注： 我使用的是 scss，less 也行 .mytree /deep/ {.el-tree > .el-tree-node:after {border-top: none;}.el-tree-node {position: relative;padding-left:...
<div class="ballContain"> <div v-for="ball in balls"> <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop" > <div class="ball" v-show="ball.show"> <div class="inner inner-hook"></div> </div> </transition> </div></div>methods:{ drop: function (el) { for (let i = 0; i < this.balls.length; i++) { let ball = this....
在日常开发中有很多场景我们都需要用到节流函数和防抖函数，比如：实现输入框的模糊查询因为需要轮询ajax，影响浏览器性能，所以需要用到节流函数；实现手机号、姓名之类的的验证，往往我们只需要验证一次，这个时候我们就需要用到防抖函数；但是网上的很多资料都是不够具体和便于理解。 基本代码如下 <el-input placeholder="请输入搜索内容" suffix-icon="el-icon-search" class="searchItem searchInput" v- model.trim=...
一、起因vue实现的聊天demo要有信息滚动的功能。二、知识储备clientHeight、offsetHeight、scrollHeight、scrollTop简单介绍：网页可见区域高：document.body.clientHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页正文全文高：document.body.scrollHeight网页被卷去的高：document.body.scrollTop详细介绍：（1）clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元...
---恢复内容开始---一、前言 1、底部tab栏实现 2、顶部title栏实现二、主要内容 1、底部tab栏实现（将底部导航提取到公共的组件中） 具体效果：当点击切换不同的tab的时候，对应的显示高亮，并且切换到对应的...
最近花了近半个多月的时间， 自己纯手工写了一个很小型的类angularjs/vue的mvvm 库. 目前已经用于公司一个项目。 项目托管在github https://github.com/leonwgc/link 也许有许多人觉得如今angularjs , react , vue , knockout ,avalon 等框架/库层出不穷， 为什么还要自己造一个相同（类似）的轮子？ 原因如下： 1 . 从最初knockoutjs 到现在用angularjs ，写了不少项目， 一直想自己写一个mvvm练练手,顺便熟悉巩固下最基础的html,...
app.vue<template><div id="app"><input type="text" v-model=‘todo‘ /><button @click="doAdd()">+增加</button><br><hr><br><ul><li v-for="(item,key) in list">{{item}} ---- <button @click="removeData(key)">删除</button></li></ul></div></template><script>export default { data () { return {todo:‘‘ ,list:[]}},methods:{doAdd(){//1、获取文本框输入的值 2、把文本框的值push到list里面this.list.push(...
有时百感交集，却又百口模辩，那些很远的事，仿佛就在昨天模糊搜索！ 模糊搜索！！ 模糊搜索！！！调取后端搜索接口Hello大家好小白一枚，有写的不好的地方请多多指教话不多说 结构搜索框<Inputsearch:placeholder="roleManagementVal.searchValue"class="headerInputg"v-model="selectVal" 双数据绑定@input="handlChange()" 输入框事件这个事件是输入值之后才会触发的/>搜索按钮<Buttontype="primary"style="height:100%;marg...
dom-to-image是一个可以将任意DOM节点转换为用JavaScript编写的矢量（SVG）或光栅（PNG或JPEG）图像的库。 它基于Paul Bakaus的domvas并且已被完全重写，修复了一些错误并添加了一些新功能（如Web字体和图像支持）。github：点击查看线上demo：点击查看npm安装和引用npm install dom-to-imageimport domtoimage from ‘dom-to-image‘;domtoimage方法和属性domtoimage主要的方法有：domtoimage.toPng(...);将节点转化为png格式的图...
当用户指定了watch中的deep属性为true时，如果当时监控的属性是数组类型，会对对象中的每一项进行求值，此时会将当前watcher存入到对应属性的依赖中，这样数组中对象发生变化时也会通知数据更新。内部原理就是递归，耗费性能 。整体流程： initWatch 初期化user watcher(1),user watcher在defineReactive的get中订阅属性的变化（2），在defineReactive的set时触发notify（2），notify调用每个订阅了改属性变化的watcher的update（3...
1.HTML部分<tr v-for="(item,index) in customerVisitList2" :key="index"><td class="customerName"><div class="divEdit" contenteditable="true" @blur="blurFunc($event,2,index,‘customerName‘)">{{customerVisitList2[index].customerName}}</div></td><td class="visitTime"><div class="divEdit" contenteditable="true" @blur="blurFunc($event,2,index,‘visitTime‘)">{{customerVisitList2[index].visitTime}}</div>...
概述Vue.js（读音 /vju?/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。由于它在数据绑定、页面展示和使用简单方面有很大的优势，逐渐被越来越多的前端开发团队使用。本文介绍基于Azure DevOps Server，如何实现Vue框架前端代码的编译和打包。代理服务器配置Azure DevOps Server的自动化流水线，都基于代理服务器Agent Server，需要在你的代理服务器上安装部署好VUE自动打包所需要的环境，这里主要说明如何安装VUE需...
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}</style></head><body><table id=‘app‘><tr><th><in...
第二种使用vue实现分页功能的方法。首先，data数据定义：var vm = new Vue({el: ‘#app‘,data: {listArray:[{‘name‘:‘赵*‘,‘age‘:‘21‘,‘edu‘:‘本科‘,‘phone‘:‘188****888888‘,‘school‘:‘河南农业大学‘},{‘name‘:‘钱*‘,‘age‘:‘22‘,‘edu‘:‘本科‘,‘phone‘:‘188****888888‘,‘school‘:‘郑州大学‘},{‘name‘:‘王*‘,‘age‘:‘23‘,‘edu‘:‘大专‘,‘phone‘:‘188****888888‘,‘school‘...
vue实现div高度可拖拽这里有一个现成的demo，可以实现页面div的拖拽功能，但是和我想要的效果不是很一样，所以说后边有根据我的实际需求又重新修改了一下，先看一下现在的demo效果。<template><div title=""><div @mousedown="dragEagle" ><div title="拖动调整大小" ></div></div></div> </template><script>export default {name: "eagleMap",data() {return {}},methods: {dragEagle: function (e) {var targetDiv = docume...