安装vue-layer-mobile// 当前最新版本 1.2.0 npm install vue-layer-mobile // 如新版遇到问题可回退旧版本 npm install vue-layer-mobile@1.0.0此版本安装后启动会报错，报错提示将css里的display:box改成display:flex;在main.js里面全局引用import vue-layer-mobile/need/layer.css import layer from vue-layer-mobile Vue.use(layer)使用方法toast this.$layer.toast({className: icon-check, // 图标className 如果为空 toa...
最近公司的产品上线，一些高级功能在基础版本中不对用户开发，通过视频的形式展示。 产品开发用的是 vue, 经同事介绍使用了vue-video-player 视频播放插件，通过 demo 案例很快实现了视频播放效果 <video-playerclass="vjs-custom-skin"ref="videoPlayer1":options="playerOptions":playsinline="true":events="events"@play="onPlayerPlay($event)"@pause="onPlayerPause($event)"@ended="onPlayerEnded($event)"@loadeddata="o...
本文介绍了Vue 实现展开折叠效果的示例代码，分享给大家，具体如下：效果如见：1.html代码<!DOCTYPE html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js文本段落展开和收拢效果</title><script type="text/javascript" src="//www.gxlcms.com/ajaxjs/jquery-1.6.2.min.js"></script> </head> <body><div id="container"> <div id="wrap"><div><h1>这一段文字是可以折叠展开的，点击下面...
解决方法如下： 1、定义一个self暂存this 2、再改变变量的值，则生效啦var self=this;this.toastrVal = inVal;this.loadState = true;this.noBg = bgState;setTimeout(function () {self.loadState = false;}, 3000) 拓展知识：解决vue在setTimeout内修改this失效的问题 当在vue中使用定时器来修改一个变量值的时候，发现没有效果，这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会使得this指向的是wi...
因为项目需求，最近开始转到微信公众号开发，接触到了Vue框架，这个效果的实现虽说是基于Vue框架下实现的，但是同样也可以借鉴到其他地方，原理都是一样的。 进入正题，先看下效果图： 其实js做这个效果还是挺简单的，因为在css中我们可以设置一个元素的 position: fixed; ，这样它就可以固定在那里，这样不管页面怎么滚动，它的位置都不受影响，所以我们的思路就是在合适的时机把要吸顶的头部元素的position属性设置为fixed就可...
在ios系统，原生 webview 嵌套H5页面使用时，编写完成的6位数输入密码，输入密码卡顿问题的解决方案： 如下图：原因是因为，CSS 这块 造成的。简单来说，style left 为负数的时候出现的，android 目测不会出现此问题 input[type=tel] {opacity: 0;z-index: -1;position: absolute;left:-100%; }解决方案： 重新设置 input样式问题 input[type=tel] {width: 0.1px;height: 0.1px;color: transparent;position: relative;top: 23px;b...
当对象内的某一个元素发生变化，判断对象另一元素，并进行赋值 <template><input type="text" v-model="a.a1.a12"/>{{a.a1.a12}}<input type="text" v-model="a.a2.a22"/>{{a.a2.a22}} </template> <script>data(){retrun{a:{a1:{a12:12},a2:{a22:15}}},watch:{a:{handler(val.oldval){if(val.a1.a12<val.a2.a22){val.a2.a22=val.a1.a12;}},deep:true}} </script>总结 以上所述是小编给大家介绍的vue watch深度监听对象实现数据联动...
什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里 。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 <template><div><div class="goods"><div class="menu-wrapper" ref="menuWrapper"></div><div class="food-wrapper" ref="foodWrapper"></div></div></div> </template>与1.0版本不同的是,我们使用的是ref <script ...
实践 这里将通过四个实践小案例来体验和学习css过渡，css动画，javascript钩子，列表过渡的应用。至于案例用到的知识点就请自行学习官网文档。 1.css过渡–实践 先来看看demo效果：这个案例其实很简单，通过一个transition来触发多个子元素的过渡效果，我们只需要定义元素对应的过渡效果就可以，其他事情vue会帮我们搞定，由此可以扩展出其他酷炫的过渡场景效果。先来看看这个简单案例的代码实现：<template><div class="app"><but...
一.格式化时间 效果图：实现上述界面代码如下： data() {return {loading: false,demandData: [],demandcount: 0,//总条数skip: 0, //分页pageSize: this.LIMIT,columns: [{title: 编号,width: 60,align: center,type: index},{title: 标签名称,key: d_title},{title: 创建者,key: d_create_user},{title: 内容描述,key: d_content,width: "20%"},{title: 创建时间,key: d_create_time,render: (h, params) => {const row = params...
本文介绍了5分钟学会Vue动画效果(小结)，分享给大家，具体如下： 1.哪些元素/那些组件适合在那些条件下实现动画效果 条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点简单经典例子：（文字隐藏到显示效果） <div><button @click="show = !show">show toggle</button><transition name="fade"> //fade 自定义名称<p v-if="show">hello</p></transition> </div><style> .fade-enter-active{ transition: opacity .5s...
Vue 1.0 动画（自定义动画） 步骤： 1.给当前动画元素添加‘transition属性 其值就是动画名称(假如：fade) 2.给动画名称写css定义 a: .fade-transition{/*定义动画过渡*/ transition:1s all ease;} b: .fade-enter{/*定义进入动画 注意：进入离开最终一样*/} c：fade-leave{/*定义离开动画*/} html 如下： <div id="wrap"><input type="button" value="按钮" @click="show"><div class="box" v-show=isShow transition=fade>...
本文实例为大家分享了vue实现红包雨效果的具体代码，供大家参考，具体内容如下下面是代码：<template><div class="ser_home"><ul class="red_packet" id="red_packet"><template v-for="(item, index) in liParams"><li :style="{ left: item.left, animationDuration: item.durTime, webkitAnimationDuration: item.durTime}" :class="item.cls" :data-index="index" @webkitAnimationEnd="removeDom"><a href=javascript:;><i :s...
最近公司项目加了个页面，其中要求是这样的，点击对应列表，展开和收起，其实就是显示和隐藏内容部分；说来惭愧，我花了半天时间才搞出来（自黑一下~），接下来分享给大家，先上效果图：vue页面：<template><div class="dealRecord-wrap"><div class="title-contant" v-for="(item,index) in items " ><div class="title" @click="showHide(index)"><h3>2018年0{{index+6}}月</h3><div class="number">800笔<i></i></div></div><di...
项目中需要做数字滚动增加的效果，一开始很懵，研究了一下原理，发现很简单，贴出来分享一下 ^_^ 数字滚动组件： <template> <div class="number-grow-warp"><span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span></div> </template> <script> export default {props: {time: {type: Number,default: 2},value: {type: Number,default: 720000}},methods: {numberGrow (ele) {let _this = t...