引用插件:饿了么的mint-ui组件中的picker功能,具体API可参照官网说明:http://mint-ui.github.io/docs/#/zh-cn2/picker 背景:项目需要做一个省份-城市-地区的选择级联效果,我从gayhub上找了一下,决定使用mint-ui的组件,因为各个功能都很全而且设计跟我们的项目风格类似。 具体实现: 通过阅读官网的实例,大概就能知道这个组件的用法: 在vue中写入组件:<mt-picker :slots="slots" @change="onValuesChange"></mt-picker> 我...
有时表格太大,滚动时信息查看不方便,需要对表格进行全局表头、首列固定, 上效果: 一、创建多个表格进行覆盖 思路:当页面滚动到临界值时,出现固定表头、首列先创建一个活动表格<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">th,td {min-width: 200px;height: 50px;}#sTable {margin-top: 300px}[v-cloak]{display: none;}</style></head><body v-cloak><!--活动的表格--><table ...
这个示例是模仿官网示例样式和功能用我自己的方式写的,基本上没有看官网的源码,只参考自定义指令。让我们一步步来探讨一下。官网demo 要实现的功能 单条添加todo单条删除todo双击编辑todo单条todo已完成相应样式状态改变全部todo是已完成相应样式状态改变清除全部已完成todos待办todos数量显示所有todos,已完成todos,未完成todos筛选单条添加todo<input type="text" class="todos_add" placeholder="What needs to be done?" ...
本文介绍了vue 2.0 购物车小球抛物线的示例代码,分享给大家,具体如下: 备注:此项目模仿 饿了吗。我用的是最新的Vue, 视频上的一些写法已经被废弃了。 布局代码 <div class="ball-container"><transition name="drop"v-for="ball in balls"@before-enter="beforeDrop"@enter="dropping"@after-enter="afterDrop"><div v-show="ball.show" class="ball" v-bind:css="false"><div class="inner inner-hook" ></div></div></transi...
项目下载地址 vue-cli多页面多路由项目示例 :vue+webpack+vue-router+vuex+mock+axios Usage This is a project template for vue-cli. github上找到某大神的一个基于vue-cli模板的vueAdmin后台管理的模板,根据项目需求改成一个多页面多路由的vue项目。 PC端:后台管理页面,单独的页面入口,单独的路由。 移动端:业务展示页面,单独的页面入口,单独的路由。 踩了无数的坑,终于是初见效果了,随后继续优化更新 Install # inst...
前言 记得以前偶然有一次浏览过一个开源的cms项目,发现这个项目的左边的菜单已经超出了windows的宽度,我就好奇为什么没出滚动条呢?然后我仔细一看,发现它左侧有一个小的div,然后我尝试着拖动它,发现竟能和原生的滚动条一样!可以通过查看它的源码,发现了这款滚动条的叫做slimScroll,然后我去它的github仓库 看了下,研究了一下源码,给我的感觉是我也能做出来一样的滚动条!通过vue实现! 设计 好, 现在开始我们的设计滚动...
写在前面的话: 上一篇文章实现了滑动效果,这部分来试试左右联动效果的实现方法吧 效果:滑动右侧时,左侧也能有相应的变化;点击左侧时,右侧也能自动定位到相应的位置。 如下图所示界面,左侧为分栏,右侧为分栏详情。滑动右边使左边联动的大概的思路: 1)要知道右侧的列表中,每一个分栏所占的高度,存进一个数组中。 2)实现左边联动,则必须要监控 “scroll”事件,获取其高度 3)将scroll 的高度与右侧分栏的高度进行比较,...
实例如下所示: <!DOCTYPE HTML> <html> <head><title></title> </head> <body> <ul><li><input type="checkbox" name="ss" onclick="choose(this)">1</li><li><input type="checkbox" name="ss" onclick="choose(this)">2</li><li><input type="checkbox" name="ss" onclick="choose(this)">3</li><li><input type="checkbox" name="ss" onclick="choose(this)">4</li><li><input type="checkbox" name="ss" onclick="choose(this...
一个关于node上传文件的例子,下面是前端代码,doUpload() {var formData = new FormData($("#uploadForm")[0]);$.ajax({url: http://localhost:3011/upload,type: POST,data: formData,async: false,cache: false,contentType: false,processData: false,success: function (returndata) {alert(returndata);},error: function (returndata) {// alert(returndata);}});} <form id="uploadForm"><p>上传文件:<input id="UpImage" ...
问题描述: 列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置 解决问题思路: 切换到其他页面前记录位置,返回列表页的时候返回位置。这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现. 还有一种更简单粗暴的方法, vue-scroller.min.js源码中添加宽高不为零判断,实现方式见评论,是最近代码优化的时候发现的。 代码部分:beforeRouteEnter(to,from,next){if(!sessionStor...
本文介绍了Vue+Flask实现简单的登录验证跳转,分享给大家,具体如下:文件位置: login.html <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Login</title><script type="text/javascript" src="../static/vue.js"></script><script type="text/javascript" src="../static/axios.js"></script></head> <body><div id="login"><form action="#" novalidate><label for="username">Username</label><input t...
前言最近接手一个老项目,典型的 Vue 组件化前端渲染,后续业务优化可能会朝 SSR 方向走,因此,就先做些技术储备。如果对 Vue SSR 完全不了解,请先阅读官方文档。 思路Vue 提供了一个官方 Demo,该 Demo 优点是功能大而全,缺点是对新手不友好,容易让人看蒙。因此,今天我们来写一个更加容易上手的 Demo。总共分三步走,循序渐进。 写一个简单的前端渲染 Demo(不包含 Ajax 数据);将前端渲染改成后端渲染(仍然不包含 Ajax 数...
本文介绍了Vue+jquery实现表格指定列的文字收缩的示例代码,分享给大家,具体如下:效果很简单,但是写起来真的不容易,因为Vue对于没有React这种前端框架经验的人是不友好的 (少吐槽,多工作,省下时间出去hi) 先说一下我走过的弯路:我之间想通过 v-if 指令去操作这一列代码是这样的: <el-table-column width="250" align="center" label="比较基准"><template scope="scope"><span v-if="isAllTxt">{{getShortStr(scope.row....
WebVR在开始之前,先对WebVR进行介绍,WebVR是一个实验性的Javascript API,允许HMD(head-mounted displays)连接到web apps,同时能够接受这些设备的位置和动作信息。这让使用Javascript开发VR应用成为可能(当然已经有很多接口API让Javascript作为开发语言了,不过这并不影响我们为WebVR感到兴奋)。而让我们能够立马进行预览与体验,移动设备上的chrome已经支持了WebVR并使手机作为一个简易的HMD。手机可以把屏幕分成左右眼视觉...
由于项目需要展示3d模型,所以对three做了点研究,分享出来 希望能帮到大家先看看效果: three.js整体来说 不是很难 只要你静下心来研究研究 很快就会上手的首先我们在页面上需要创建一个能够放置3D模型的画布 也可以说是初始化 Threevar WIDTH,HEIGHT;var renderer;function initThree() {WIDTH = document.documentElement.clientWidth/2; <!--{foreach from=$recommended_goods item=rgoods}--> <!-- {/foreach} -->HEIGHT = do...