<div id="toast" style="position: fixed; z-index: 999; top: 10%; background: ; text-align: center; width: 100%; display:none;"> <span id="toast_content" style="border-radius: 32px;background:rgba(0,0,0,.7);opacity: 0.9;padding: 8px 16px;font-size: 14px;color:#fff;"></span> </div> <script type="text/javascript"> /* 消息提醒 */ var area = ['北京', '广州', '郑州', '武汉', '珠海', '长沙', '淄博', '东莞', '昆山', '无锡', '阳江', '钦州', '天津', '厦门', '深圳', '株洲', '达州', '成都', '重庆', '北海', '福州', '梧州', '青海']; var person = ['赵先生', '吴先生', '高先生', '郑先生', '刘先生', '王先生', '刘先生', '李先生', '罗先生', '罗先生', '黄先生', '孙先生', '朱先生', '何先生', '朱先生', '白先生', '陈先生', '邓先生', '叶先生']; function showToast() { var areaIndex = Math.round(Math.random() * (area.length - 1)); var personIndex = Math.round(Math.random() * (person.length - 1)); $("#toast_content").text("来自" + area[areaIndex] + "的" + person[personIndex] + "购买了该产品"); $("#toast").fadeIn(); setTimeout("dismissToast()", 1500); } function dismissToast() { $("#toast").fadeOut(); setTimeout("showToast()", 1500 + Math.round(Math.random() * 10000)); } dismissToast(); </script>
分类: web
抢购倒计时js特效
直接上代码示例
//html部分 <div data-v-a99540b0 class="time" > <span data-v-a99540b0></span><span data-v-a99540b0></span><span data-v-a99540b0></span> </div> //js部分 <script> let countDown = +'83017'; let _int = setInterval(function(){ let hours = Math.floor(countDown/60/60), minute = Math.floor((countDown - hours*3600)/60), second = countDown - (hours*3600 + minute*60), day = 0; _hours = ('00'+hours).slice(-2); _minute = ('00'+minute).slice(-2); _second = ('00'+second).slice(-2); let _cel = `<span data-v-a99540b0>${_hours}</span><span data-v-a99540b0>${_minute}</span><span data-v-a99540b0>${_second}</span>`; if(hours > 72){ day = Math.floor(hours/24); hours = hours%24; _day = ('00'+day).slice(-2); _cel = `<span data-v-a99540b0>${_hours}</span><span data-v-a99540b0>${_minute}</span><span data-v-a99540b0>${_second}</span>`;; } if(day > 30){ clearInterval(_int);return false; } $('.time').html(_cel); countDown--; },1000); </script>
el-table 多列显示隐藏造成内容错乱得解决办法
当用el-table做自定义列的时候,需要用v-if来控制列的隐藏和显示,这个时候有时候会发现一个bug,有时候刷新表格内容会错乱
解决办法:
就是给每列加一个唯一的key,就可以防止错乱
<el-table-column :key="Math.random()" v-if=""></el-table-column>
[最近有点忙]vue多项目nginx部署,二级目录部署
【最近有点忙干货很多,慢慢来写】
有时候我们单页项目不一定要部署在根目录下,二级目录可能是您想要的,那么看下面步骤
1. 入口文件index.html文件修改
添加 <meta base=”/ weixin/”>
2. config/index.js文件修改
修改 assetsPublicPath: ‘/weixin/’
3.src/router/index.js文件修改
添加 base: ‘/weixin/’
最后 Nginx配置修改
server { listen 9900; server_name localhost; location /lend { try_files $uri $uri/ /weixin/index.html; } }
JS转换HTML转义符
刚用到,在这里记录一下
//去掉html标签 function removeHtmlTab(tab) { return tab.replace(/<[^<>]+?>/g,'');//删除所有HTML标签 } //普通字符转换成转意符 function html2Escape(sHtml) { return sHtml.replace(/[<>&"]/g,function(c){return {'<':'<','>':'>','&':'&','"':'"'}[c];}); } //转意符换成普通字符 function escape2Html(str) { var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'}; return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];}); } // 转成空格 function nbsp2Space(str) { var arrEntities = {'nbsp' : ' '}; return str.replace(/&(nbsp);/ig, function(all, t){return arrEntities[t]}) } //回车转为br标签 function return2Br(str) { return str.replace(/\r?\n/g,"<br />"); } //去除开头结尾换行,并将连续3次以上换行转换成2次换行 function trimBr(str) { str=str.replace(/((\s| )*\r?\n){3,}/g,"\r\n\r\n");//限制最多2次换行 str=str.replace(/^((\s| )*\r?\n)+/g,'');//清除开头换行 str=str.replace(/((\s| )*\r?\n)+$/g,'');//清除结尾换行 return str; } // 将多个连续空格合并成一个空格 function mergeSpace(str) { str=str.replace(/(\s| )+/g,' '); return str; }
Vue单页应用结合后台做第三方登录[QQ授权登录](二)
前言
第三方qq登录我们可以直接利用qq登录的JSdk很方便
文档说明:http://wiki.open.qq.com/wiki/website/JS_SDK%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E
示例代码文档:https://connect.qq.com/intro/login/jssdk-demo
流程
在vue入口index.html中头部引入qq的sdk,在其他页面钩子函数中即可使用qqskd的函数
qq登录流程比较简单,我就稍微说一下
1.在vue页面上点击qq登录跳转到授权页面
2.授权成功后进入回调页面
3.回调页面可以执行一下自己的逻辑,我这边回调页面弄得是后台页面,你也可以是前端的,回调中处理完自己逻辑后可以回跳回来
4.然后在页面中就可以检测到qq是否登录了,看下面代码
created(){ this.test(this.code) this.testqq() }, methods:{ testqq(){ if(QC.Login.check()){ //如果已登录 //这里做自己逻辑处理 }); } } }
Vue单页应用结合后台做第三方登录[微信扫一扫登录授权登录](一)
前言
在之前的mvc开发中,相信大家都也能很熟练的做出结合微信登录qq登录等的第三方登录,今天我这主要说一下前后端分离模式中的第三方登录流程
在说微信登录之前我首先跟大家说一下微信的access_token 在微信中access_token是有俩种的,大家一定要分别仔细,一个是网页授权获取到的access_token,这个token是一次性的,只能获取到一个微信用户信息,是与微信用户一对一的关系,而另外一个基础access_token是专门请求获取token接口拿到的,这个有效期是7200s,大家一定要区分开这俩个token.在今天所说的微信登录中
我首先用一幅图说明一下大致流程(扫一扫登录和微信内授权登录流程大致一样)
网站应用微信登录开发指南
微信文档:
扫一扫登录,大致流程我图中已经给出来了,其实这只是一个流程,并不是最简单的,只要你明白了,你也可以有你自己的流程
前端跳转到微信扫一扫界面
第三方使用网站应用授权登录前请注意已获取相应网页授权作用域(scope=snsapi_login),则可以通过在PC端打开以下链接:
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
若提示“该链接无法访问”,请检查参数是否填写错误,如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。
在回调的url中,我们可以拿到code,然后把这个code给前端,让前端拿着code去请求我们登录接口,然后成功直接返回登录信息前端直接保存即可
vue2 过滤器 | 过滤时间 Monent.js的使用
第一步:安装
npm install moment --save
第二步:在main.js中引用
import moment from 'moment/moment'
第三步:在main.js中添加过滤器
Vue.filter('moment', function (value, formatString) {
formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
// return moment(value).format(formatString); // value可以是普通日期 20170723
return moment.unix(value).format(formatString); // 这是时间戳转时间
});
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
第四步: 在vue页面中使用过滤器
<template>
<div id="app">
<div>
{{ datetime | moment }}
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
datetime: '1500799859'
}
}
}
</script>
vue-router设置页面标题的一种方式
const router = new Router({ routes: [ { path: '/', name: 'EntryConfirmation', meta: { title: "到岗候选人名单确认" }, component: EntryConfirmation } ] }) router.beforeEach((to, from, next) => { if (to.meta.title) {//如果设置标题,拦截后设置标题 document.title = to.meta.title } next() }) export default router
elementUI Message 独立引入的用法
今天在做项目时候,用到了 elementUI 的 Message 组件。因为我是按需 import
引入的方法,结果按照原本的文档API代码不生效。
查看文档之后有俩种引入方法:
全局引入
import ElementUI from ‘element-ui’;
Vue.use(ElementUI);
按需引入
import { Button, Select } from ‘element-ui’;
Vue.use(Button)
Vue.use(Select)
简答来说,如果是全局引入的话,就可以直接使用this.$message,但是按需引入的话能不能像全局引入一样用 this.$message
呢?
问题原因及解决:
查看下 element-ui/package/message/index.js
的实现方法,结果发现:
import Message from './src/main.js';
export default Message;
直接返回了。
而其他的组件,一般都是有 install 方法供Vue来操作的。
知道问题所在就好解决了,给 Message 添加 install 方法就行了。
// 和其他组件一样,一并引入
import {Button, Message} from 'element-ui'
// 在调用 Vue.use 前,给 Message 添加 install 方法
Message.install = function (Vue, options) {
Vue.prototype.$message = Message
}
// 和所有组件一样,一并进行use
Vue.use(Button)
Vue.use(Message)
当然,也可以不用 Vue.use 来实现,比如直接写在 Vue 实例上:
// 和其他组件一样,一并引入
import {Button, Message} from 'element-ui'
Vue.use(Button)
// 将 Message 直接挂在 Vue 实例上
Vue.prototype.$message = Message