这是一个基于Vue2的简易省市区县三级联动组件，可以控制只显示省级或只显示省市两级，可设置默认值等。提供原始省市县代码和名称数据，适用于各种有关城市区县的应用。 安装 我们使用npm安装： npm install v-distpicker --save 使用 首先在模板中加入组件： <v-distpicker></v-distpicker> 如果要带默认值，则可以这样： <v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>然后在js部分调用组件： <sc...
原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 效果示例地址 <!DOCTYPE html> <html><head><meta charset="UTF-8"><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css" rel="external nofollow" ><style>* {margin: 0;padding: 0 } body {font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun...
事情是这样的，右边有各种控件，可以拖动到右边自由区，在自由区内可以随意拖动。案例一： 开始的我，so easy！ 通过绑定元素的mousedown 事件，监听鼠标的mousemove，和mouseup 事件，于是我轻松实现了同一区域内元素可以拖着跑，上代码！ move (e) {let odiv = e.target // 获取目标元素// 算出鼠标相对元素的位置let disX = e.clientX - odiv.offsetLeftlet disY = e.clientY - odiv.offsetTopdocument.onmousemove = e => {// ...
前言 上篇文章中，已经使用vue实现前端分页效果，这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图代码实现 按照惯例，我们在冻手实现的时候还是先想一想vue实现组件的思路 1、需要提前设定哪些参数需要暴露出来给父组件传递<Paging :name="name"@change="onPageChange":page-size="size":total="total"layout="jumper,total":current-page="curPage"/>方法及参数说明 属性 page-size 每页显示条目个数 total 总条...
菜鸟学习之路 //L6zt github 自己 在造组件轮子，也就是瞎搞。 自己写了个slider组件，想加个气泡提示。为了复用和省事特此写了个指令来解决。 预览地址 项目地址 github 我叫给它胡博效果图片 我对指令的理解: 前不久看过 一部分vnode实现源码，奈何资质有限...看不懂。 vnode的生命周期-----> 生成前、生成后、生成真正dom、更新 vnode、更新dom 、 销毁。 而Vue的指令则是依赖于vnode 的生命周期， 无非也是有以上类似的钩子。 ...
首先得有你想要的过渡效果css代码： .vux-pop-out-enter-active, .vux-pop-out-leave-active, .vux-pop-in-enter-active, .vux-pop-in-leave-active {will-change: transform;transition: all 500ms;height: 100%;position: absolute;backface-visibility: hidden;perspective: 1000; } .vux-pop-out-enter {opacity: 0;transform: translate3d(-100%, 0, 0); } .vux-pop-out-leave-active {opacity: 0;transform: translate3d(100...
使用Vue来实现鼠标悬停效果。可以使用事件处理器v-on指令（简写为：@）来完成。为标签绑定mouseenter以及mouseleave事件即可。 hover是css中的选择器，用于选择鼠标指针浮动在上面的元素。所以a:hover可用于设置当鼠标悬停在超链接之上时超链接的样式。在当今比较流行的前端框架里 vue react 都是以数据驱动的形式来修改元素的状态, 而并非是之前使用jq来操作dom元素, 这样效率也是非常低的, 像vue, react 都是以虚拟dom的形式渲染...
我的代码之前类似下面的结构 <div id="example-1" v-for="item in items"><ul><li>{{ item.message }}</li></ul> </div>结果发现不好用，数据读入了但是没有显示 于是我后来看官网的例子才明白，原来是id和v-for不在一个层级上，官网的例子如下，我按照不在一个层级上改，果然好用了 <ul id="example-1"><li v-for="item in items">{{ item.message }}</li> </ul>以上这篇Vue中的v-for指令不起效果的解决方法就是小编分享给大家的...
vue提供的了transition组件来实现组件的过渡和路由的过渡，合理使用这个组建可以让我们的页面更加的灵活，提高用户体验。 概念 在进入/离开的过渡中， 会有6个class的切换， 抄一张官方的图v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进...
前言现如今移动端APP对用户体验方面的要求越来越高了，最近致力于用户体验优化，因为需要实现类似APP页面切换的动画效果，百度google搜索资料不是很全，所以自己写文档，在实现效果的基础上，顺便恶补一波VueRouter及CSS过渡动画的知识点，欢迎有兴趣的朋友多多指教。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件...
本文实例为大家分享了vue实现多个元素或多个组件之间动画的具体代码，供大家参考，具体内容如下 多个元素的过渡<style>.v-enter,.v-leave-to{opacity: 0;}.v-enter-acitve,.v-leave-active{opacity: opacity 1s;} </style> <div id=app><transition><div v-if=show>hello world</div><div v-else>bye world</div></transition><button @click=handleClick>切换</button> </div> <script> var vm = new Vue({el:#app,data:{show:tru...
1 .起因 今日看完element中分页器的源码实现,比较简单,遂自己按着理解实现了一个简单的分页器,记录下来,以便日后温习. 2.实现难点 分页器的实现难点主要是什么时候显示分页器的省略, 我的思路是: 规定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2),布局代码如下: <div class="pagination" @click="pageClick"><button class="pre">上一页</button><ul class="pa...
问题描述： npm run build 后dist文件夹下面直接浏览器打开index.html，css和js的路径都不正确。 放到跟目录下就正常了。 问题解决： 打开项目所在文件夹里面的 config - index.js在 build 部分的 assetsPublicPath 里面加一个点即可 assetsPublicPath: /, 改为 assetsPublicPath: ./, 解释： 将绝对路径改为相对路径（解释有点不对，凑合着理解吧） 延伸： 这么做的效果主要影响的是 项目所在文件夹里面的 build- webpack.base.co...
vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。 循环列表，html: <template><div class="newslist"><ul><li v-for="(item,index) in newslist" :key="index"><p class="p" ref="liCon">{{item.content}}</p><div class="open" @click="open(item,index)"><div v-if="!item.openFlag">【展开】</div><div v-else>【收缩】</div></div></li></ul></div> </template>在css上加上动画transition.newslist...
1、首先我们在cli中引入element-ui 2、然后在具体的代码中放入uoload组件 <el-upload class="upload-demo" action="" :auto-upload=false :on-change=changeUpload><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> 3、使用element-ui的upload组件中提供的接口：on-change回调函数,然后在回调函数中写入如下代码： ch...