引用插件：饿了么的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...