vue+element
honghong.zhou
这个作者很懒,什么都没留下…
展开
-
原生JS实现Touch滑动反弹
<template> <div> <div class="box"> <ul @touchstart='touchstart' @touchmove='touchmove' @touchend='touchend' class="scroll"> <li v-fo...原创 2020-03-04 11:42:01 · 254 阅读 · 0 评论 -
上推动画
<template> <div class="box"> <div class="tab"></div> <div class="content-box"> <div ref="wrapBox" class="wrapBox"> <div class="scrollBox...原创 2020-03-03 14:35:30 · 211 阅读 · 0 评论 -
better-scroll左右联动
<template> <div class="box"> <div class="tab"></div> <div ref="wrapBox" class="wrapBox"> <div class="scrollBox"> <ul v-for="(item, i) in...原创 2020-03-03 10:57:12 · 642 阅读 · 0 评论 -
音乐排行榜动效
<template> <div class="box"> <span class="title">排行榜</span> <div class="top" ref="bgImg"> <!-- <span class="title">排行榜</span&...原创 2020-03-02 12:11:05 · 865 阅读 · 0 评论 -
vue页面切换左右滑动动画
<template> <div class="container"> <!-- <router-link to='/far'>To Far</router-link> <router-link to='/user/1'>User1</router-link> <router-link ...原创 2020-03-01 14:23:01 · 3026 阅读 · 0 评论 -
better-scroll 横向轮播
<template> <div class="box" ref="box"> <div class="slide-box" ref="slideBox"> <div class="slide-item" v-for="(item,i) in imgList" :key='i'> <a> ...原创 2020-02-29 21:07:31 · 182 阅读 · 0 评论 -
better-scroll纵向滚动
<template> <div ref="box" class="box"> <div class="content"> <p v-for="(item,i) in Array(60)" :key='i'>内容</p> </div> </div></template&g...原创 2020-02-29 15:37:40 · 503 阅读 · 0 评论 -
Vue居中弹窗加vue动画
<template> <div> <p @click="toggle" class="h4000">展示弹窗</p> <div class="box"> <transition name="opacity"> <div class="mask" @touchmo...原创 2020-02-23 16:44:22 · 974 阅读 · 0 评论 -
vue中如何将变量带给class的属性名
遇到一个需求,设想是这样,我们需要根据不同的status给li设置样式,那么必须给li添加动态的class,添加方法如下: <li :class="setClass(item.status)" v-for="(item, index) in dataLists1" :key="index" ></li>// 将class赋值给方法,动态生成对象 setC...原创 2018-09-05 22:46:09 · 9194 阅读 · 0 评论 -
element 图片上传
之前在项目中遇到图片上传的问题,其中还是有很多细节要注意。下面是当时要完成的效果图: 思路: logo1和logo2是同一行,点击添加又可以添加一行,这个时候用一个对象数组来存储logo1的name 和 url 属性,用另外一个对象数组来存储logo2的name 和 url 属性。同时,我们点击“点击上传”的时候,要获取到当前的index,这样我才知道,它是给数组中的哪一个进行上传...原创 2018-09-05 22:32:40 · 2861 阅读 · 2 评论 -
Vue 组件和插件的关系
Vue组件(component)用来构成你的App的业务模块,它的目标是App.vue。Vue插件(plugin) 用来增强你的技术栈的功能模块, 它的目标是Vue本身。(插件是对Vue的功能的增强和补充)Vue组件我们通常在src的目录下,新建一个component文件夹来存放公共的组件,在我们要使用组件的页面中引入组件,并且进行一个说明。组件个调用它的页面之间的通信,就是父组件和子...原创 2018-09-02 21:23:22 · 8328 阅读 · 1 评论 -
vue 组件之间的通信
父组件向子组件通信 使用props,父组件可以使用props向子组件传递数据。 使用$children可以在父组件中访问子组件。 子组件向父组件通信 在vue中,不建议在子组件中更改父组件的状态,所以我们通过在子组件中使用vm.$emit( eventName, […args] ),在父组件中监听子组件emit触发的事件来进行通信。 使用$parent可以访问父组件的数据。 非父子组件...原创 2018-09-02 20:21:31 · 203 阅读 · 0 评论 -
vue 响应式原理
在vue中,数据是响应式绑定的,所以我们可以通过改变数据来更新视图。这同时也使得状态管理非常简单直接。官方文档介绍 https://cn.vuejs.org/v2/guide/reactivity.html因此,之前在项目中遇到一个bug,当我在一个数组中添加数据之后,打印数据,但是页面却无法得到更新的问题。‘解决方案:使用 Vue api 中的一个实例的方法 vm.$set( tar...原创 2018-09-02 13:45:40 · 279 阅读 · 0 评论 -
element table表格 头部设置样式
我们在使用element的表格的时候,经常需要我们自己重新设置表格的样式,个人表示加的最多的样式是给表格的第一行添加背景颜色,也就是头部标题添加上背景颜色。这里记录一下怎么实现。在 table attributes 中有一个 header-cell-style 属性(表格单元格的style的回调方法,也可以使用一个固定的Object为所有的表头的单元格设置一样的style)1.使用表格单元...原创 2018-09-02 09:21:55 · 14466 阅读 · 0 评论 -
Element form表单 表单域对齐
在form表单组件中,我们可以通过 label-position 属性来改变表单域或标签的位置,可选的值有 top/left/right ,默认的是 right ,lable-position 必须要和 label-width(表单域标签的宽度,作为 Form 直接子元素的 form-item 会继承该值) 共同使用,才会生效。...原创 2018-09-02 08:49:02 · 26376 阅读 · 2 评论