这里写目录标题
- 一 前端技术栈实录(不断更新)
- (一)vue
- 1,获取当前时间的方法
- 2,日期格式化(根据返回的时间戳)
- 3,表格分页
- 4,axios模板调用结构
- 5,拖拽配置指令(含禁止拖拽)
- 6,根据两个日期判断相差天数
- 7,请假时长计算
- 8,随机数字生成
- 9,动态插入css样式
- 10,全屏与退出全屏以及判断是否为全屏(浏览器)
- 11,判断是否为空(非正则)封装方法
- 12,动态加载样式,防止内外网样式无法导入问题
- 13,表单验证问题
- 14,localStorage相关方法操作封装
- 15,token 失效时退出登录
- 16,确认键方法调用步骤
- 17,全屏与不全屏 窗口
- 18,按enter键调用登录方法
- 19,手写展开与收起
- 20,数组中某一个对象相同时候,其他项合并成一个数组
- (二)js
- (三) css
- (四)element ui
- 1,el-table 添加序列号
- (五)vue 插件相关
- (六)JQ
- (七)HTML
- (八)微信小程序
- 1,微信小程序获取当前页面的url和参数
- 2,微信小程序跳转到上一个页面会出现直接跳转到首页的问题
- (九)百度小程序
- (十)app
一 前端技术栈实录(不断更新)
(一)vue
主要方法收集
1,获取当前时间的方法
//2021-11-22 2021/11/22 2021年11月22日都可
dateTime( ) {
var date = new Date( )
var seperator1 = '-' //做格式化处理
var year = date.getFullYear( ) //返回年
var month = date.getMonth( ) + 1 //返回月
var strDate = date.getDate( ) //返回日期
var hh=date.getHours() //显示小时
var mm=date.getMinutes() //显示分钟
var sss=date.getMilliseconds() //毫秒
var ss=date.getSeconds() //显示秒
var tt=Math.floor((date.getMonth() + 3) / 3) //季度
if ( month >= 1 && month <= 9 ) { //做判断,如果不是两位数在前面加个0
month = '0' + month
}
if ( strDate >= 0 && strDate <= 9 ) {
strDate = '0' + strDate
}
this.currentdate = year + seperator1 + month + seperator1 + strDate
this.currentdateYear = year
},
获取周期的方式
现在data中定义一个数组,以及一个变量
weeks: {
"0":'星期日',
"1":'星期一',
"2":'星期二',
"3":'星期三',
"4":'星期四',
"5":'星期五',
"6":'星期六',
},
currentWeeks:'',
因为getDay()这个函数返回的是数字下标,以0开始,所以 还需要我们在其一个方法如下
dataDateChange(){
let date = new Date();
let weekIndex = date.getDay();
this.currentWeeks=this.weeks[weekIndex]
console.log("this.currentWeeks=======",this.currentWeeks)
},
如上图所示,weekIndex对应的即为星期一
2,日期格式化(根据返回的时间戳)
var time = new Date(val);
function timeAdd0(str) {
if (str < 10) {
str = "0" + str;
}
return str;
}
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
var h = time.getHours();//获取当前小时数(0-23)
var m = time.getMinutes();//获取当前分钟数(0-59)
var s = time.getSeconds();//获取当前秒数(0-59)
console.log("val",val);
if(val==this.detail.updateDate){
return y + "." + timeAdd0(m) + "." + timeAdd0(d) + " "+timeAdd0(h)+":"+timeAdd0(m)+":"+timeAdd0(s);
}
return y + "." + timeAdd0(m) + "." + timeAdd0(d) + " ";
3,表格分页
//html
<el-pagination v-if="serviceDynamicsValue.length!=0" class="pageSize" @size-change="handleSizeChange"
@current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]" :page-size="10"
layout="sizes, prev, pager, next" :total="total">
</el-pagination>
//script
handleSizeChange( val ) {
this.personalNum = '1'
this.personalSize = val
this.serviceDynamicsM( )
},
//分页页数
handleCurrentChange( val ) {
this.personalNum = val //改变页签
this.serviceDynamicsM( ) //调用数据展示
},
图片效果
1 2 3 4代表personalNum 条/页的数字代表personalSize
4,axios模板调用结构
this.$axios( {
method: 'delete', //方法
url: '/gzhgoa/branchDutyDynamics/' + value[ index ].id, //地址
headers: { //头部参数
isToken: 'false', //token状态
'TENANT-ID': '1',
'Authorization': 'Bearer ' + window.sessionStorage.getItem( "access_token" )
},
} ).then( res => {
//调用成功后进行的操作
}).catch(res=>{
//调用失败后进行的操作
});
5,拖拽配置指令(含禁止拖拽)
import Vue from 'vue';
//使用Vue.directive()定义一个全局指令
//1.参数一:指令的名称,定义时指令前面不需要写v-
//2.参数二:是一个对象,该对象中有相关的操作函数
//3.在调用的时候必须写v-
const drag = Vue.directive('drag', {
//1.指令绑定到元素上回立刻执行bind函数,只执行一次
//2.每个函数中第一个参数永远是el,表示绑定指令的元素,el参数是原生js对象
//3.通过el.focus()是无法获取焦点的,因为只有插入DOM后才生效
bind: function (el) { },
//inserted表示一个元素,插入到DOM中会执行inserted函数,只触发一次
inserted: function (el) {
el.onmousedown = function (e) {
var disx = e.pageX - el.offsetLeft;
var disy = e.pageY - el.offsetTop;
document.onmousemove = function (e) {
el.style.left = e.pageX - disx + 'px';
el.style.top = e.pageY - disy + 'px';
}
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
}
}
},
//当VNode更新的时候会执行updated,可以触发多次
updated: function (el) { }
})
export default drag;
然后再到需要用拖拽的地方,使用v-drag指令即可,在配置一个另外的文件,在不需要使用的地方用v-stopDrag指令即可。
注:两个文件,都需要在main.js中引入才可以使用
import Vue from 'vue';
const stopDrag = Vue.directive('stopDrag', {
inserted: function(el, binding, vnode) {
let element = el;
element.onmousedown = function(e) {
e.stopPropagation()
}
}
})
export default stopDrag;
6,根据两个日期判断相差天数
配置在任意js文件中,需要引入的时候导包即可使用
/**
* 根据两个日期,判断相差天数
* @param bdate 开始日期 如:2016-11-01
* @param edate 结束日期 如:2016-11-02
* @returns {number} 返回相差天数
*/
export function daysBetween(bdate, edate) {
let oneDayMillisecond = 86400000 // 一天毫秒数
let bdateMillisecond = new Date(bdate).getTime()
let edateMillisecond = new Date(edate).getTime()
let diffMillisecond = edateMillisecond - bdateMillisecond
let diffDays = Math.floor(Math.abs(diffMillisecond / oneDayMillisecond))
let date_arr = []
for (let index = 0; index <= diffDays; index++) {
let new_date = dayjs(bdateMillisecond + oneDayMillisecond * index).format('YYYY-MM-DD')
date_arr.push(new_date)
}
// console.log('生成两个起止日期之间的日期数组',date_arr)
return date_arr
}
7,请假时长计算
规则,去除午休时间,法定放假时间,公司规定相关假期时间
/**
* 计算请假时长
* @param {Object} beginTime 开始时间 '2020-09-07 07:00:00'
* @param {Object} endTime 结束时间
* @param {Object} stWorkTime 上班时间
* @param {Object} enWrokTime 下班时间
* @param {Object} isFreeTime 是否要去除午休工作时长
* @param {Object} freeTimeMon 午休开始时间
* @param {Object} freeTimeAft 午休结束时间
* @param { Array } fillterDatas 节假日日期
* @param { String } dateType 请假类型 如果为产假陪产假,不排除节假日与周末
*
*/
export function getLeave(beginTime, endTime, stWorkTime, enWrokTime, isFreeTime, freeTimeMon, freeTimeAft, fillterDatas, dateType) {
var days
var hours
var date
var freeTime = freeTimeAft - freeTimeMon
// beginTime = beginTime.replace(/-/g, '/');
var beginArr = beginTime.split(' ')
// var beginMonth = parseInt(beginArr[0].split('-')[1])
// var beginDay = parseInt(beginArr[0].split('-')[2])
var beginHours = parseInt(beginArr[1].split(':')[0])
var beginMin = parseInt(beginArr[1].split(':')[1])
var beginHoursMin = beginHours + beginMin / 60
// endTime = endTime.replace(/-/g, '/');
var endArr = endTime.split(' ')
// var endMonth = parseInt(endArr[0].split('-')[1])
// var endDay = parseInt(endArr[0].split('-')[2])
var endHours = parseInt(endArr[1].split(':')[0])
var endMin = parseInt(endArr[1].split(':')[1])
var endHoursMin = endHours + endMin / 60
// 如果beginHoursMin时间小于上班时间都算上班时间
if (beginHoursMin <= stWorkTime) {
beginHoursMin = stWorkTime
}
// 如果endHoursMin时间大于上班时间都算下班时间
if (endHoursMin >= enWrokTime) {
endHoursMin = enWrokTime
}
// 如果endHoursMin时间小于上班时间都算下班时间
if (endHoursMin <= stWorkTime) {
endHoursMin = stWorkTime
}
// 如果结束时间在freeTimeMon和freeTimeAft之间都算freeTimeMon
if (isFreeTime === true) {
if (endHoursMin >= freeTimeMon && endHoursMin <= freeTimeAft) {
endHoursMin = freeTimeMon
}
}
// 获取结束时间-开始时间的天数
var daysBetweenlist = daysBetween(beginTime, endTime)
let effectiveLeaveDate
if (dateType === 5 || dateType === 7 || dateType === 8 || dateType === 9) {
effectiveLeaveDate = daysBetweenlist
} else {
effectiveLeaveDate = daysBetweenlist.filter(date => !fillterDatas.includes(date)).filter(date => (new Date(date).getDay() !== 6 && new Date(date).getDay() !== 0))
}
if (beginTime > endTime) {
// Vue.prototype.$Message.warning({
// content: '开始时间需小于结束时间',
// duration: 3
// })
// Vue.prototype.$confirm('开始时间需小于结束时间111', '警告', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// })
return false
}
if (!effectiveLeaveDate.includes(beginTime.split(' ')[0])) {
// Vue.prototype.$Message.warning({
// content: '调休开始、结束时间需在工作日,请您重新选择',
// duration: 3
// })
// alert('调休开始、结束时间需在工作日,请您重新选择')
return false
}
if (effectiveLeaveDate.length > 0) {
var daysBetweenLen = effectiveLeaveDate.length
// 午休
if (isFreeTime === true) {
var hour = enWrokTime - stWorkTime - freeTime
if (daysBetweenLen === 1) {
// 同一天
if (endHoursMin - freeTimeAft > 0 && beginHoursMin <= freeTimeMon) {
hours = (endHoursMin) - (beginHoursMin) - freeTime
} else {
hours = (endHoursMin) - (beginHoursMin)
}
} else if (daysBetweenLen === 2) {
// 跨一天
// 第一天的时长
hours = enWrokTime - beginHoursMin
// 是否有午休
if (beginHoursMin <= freeTimeMon) { hours = hours - freeTime }
// 第二天的时长
hours += endHoursMin - stWorkTime
// 是否有午休
if (endHoursMin >= freeTimeAft) { hours = hours - freeTime }
} else {
// 跨两天以上
// 第一天的时长
hours = enWrokTime - beginHoursMin
// 是否有午休
if (beginHoursMin <= freeTimeMon) { hours = hours - freeTime }
// 中间时长
hours += (daysBetweenLen - 2) * (hour)
// 最后一天时长
hours += endHoursMin - stWorkTime
// 是否有午休
if (endHoursMin >= freeTimeAft) { hours = hours - freeTime }
}
days = Math.floor(hours / hour)
hours = hours % hour
date = {
'days': days,
'hours': hours
}
// date = days * 24 + hours
} else {
// 非午休
hour = enWrokTime - stWorkTime
if (daysBetweenLen === 1) {
// 同一天
hours = (endHoursMin) - (beginHoursMin)
} else if (daysBetweenLen === 2) {
// 跨一天
hours = enWrokTime - beginHoursMin
// 第二天的时长
hours += endHoursMin - stWorkTime
} else {
// 跨两天以上
// 第一天的时长
hours = enWrokTime - beginHoursMin
// 中间时长
hours += (daysBetweenLen - 2) * (hour)
// 最后一天时长
hours += endHoursMin - stWorkTime
}
days = Math.floor(hours / hour)
hours = hours % hour
date = {
'days': days,
'hours': hours
}
// date = days * 24 + hours
}
}
console.log('hours===', hours)
console.log('date===', date)
return date
}
8,随机数字生成
/**
* 生成随机len位数字
*/
export const randomLenNum = (len, date) => {
let random = ''
random = Math.ceil(Math.random() * 100000000000000).toString().substr(0, len || 4)
if (date) random = random + Date.now()
return random
}
9,动态插入css样式
/**
* 动态插入css
*/
export const loadStyle = url => {
const link = document.createElement('link')
link.type = 'text/css'
link.rel = 'stylesheet'
link.href = url
const head = document.getElementsByTagName('head')[0]
head.appendChild(link)
}
10,全屏与退出全屏以及判断是否为全屏(浏览器)
//全屏
export const reqFullScreen = () => {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen()
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen()
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen()
}
}
写任意js,需要用时直接导入即可
/**
* 浏览器退出全屏
*/
export const exitFullScreen = () => {
if (document.documentElement.requestFullScreen) {
document.exitFullScreen()
} else if (document.documentElement.webkitRequestFullScreen) {
document.webkitCancelFullScreen()
} else if (document.documentElement.mozRequestFullScreen) {
document.mozCancelFullScreen()
}
}
/**
* 浏览器判断是否全屏
*/
export const fullscreenEnable = () => {
return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
}
11,判断是否为空(非正则)封装方法
/**
* 判断是否为空
*/
export function validatenull(val) {
if (typeof val === 'boolean') {
return false
}
if (typeof val === 'number') {
return false
}
if (val instanceof Array) {
if (val.length === 0) return true
} else if (val instanceof Object) {
if (JSON.stringify(val) === '{}') return true
} else {
if (val === 'null' || val == null || val === 'undefined' || val === undefined || val === '') return true
return false
}
return false
}
写任意js,需要用时直接导入即可
12,动态加载样式,防止内外网样式无法导入问题
任意js写方法
import Vue from 'vue'
export const loadStyleIcon = url => {
const link = document.createElement('link')
link.type = 'text/css'
link.rel = 'stylesheet'
link.href = url
}
在到main,js里面导入包,之后下载需要动态加载的文件到本地目录,在用之前封装的方法按照如下代码引入即可
import { loadStyleIcon } from './utils/util'
import {iconfontVersion } from '@/config/env'
// 动态加载阿里云字体库
iconfontVersion.forEach(ele => {
// loadStyle(iconfontUrl.replace('$key', ele))
loadStyleIcon('../public/cdn/iconfont/1.0.0/index667895.css')
loadStyleIcon('../public/cdn/iconfont/index1638883.css')
})
13,表单验证问题
/**
* 邮箱
* @param {*} s
*/
export function isEmail(s) {
return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}
/**
* 手机号码
* @param {*} s
*/
export function isMobile(s) {
return /^1[0-9]{10}$/.test(s)
}
/**
* 电话号码
* @param {*} s
*/
export function isPhone(s) {
return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}
/**
* URL地址
* @param {*} s
*/
export function isURL(s) {
return /^http[s]?:\/\/.*/.test(s)
}
export function isvalidUsername(str) {
const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0
}
/* 合法uri */
export function validateURL(textval) {
const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return urlregex.test(textval)
}
/* 小写字母 */
export function validateLowerCase(str) {
const reg = /^[a-z]+$/
return reg.test(str)
}
/* 大写字母 */
export function validateUpperCase(str) {
const reg = /^[A-Z]+$/
return reg.test(str)
}
/* 大小写字母 */
export function validatAlphabets(str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
}
/* 验证pad还是pc */
export const vaildatePc = function() {
const userAgentInfo = navigator.userAgent
const Agents = ['Android', 'iPhone',
'SymbianOS', 'Windows Phone',
'iPad', 'iPod'
]
let flag = true
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false
break
}
}
return flag
}
/**
* validate email
* @param email
* @returns {boolean}
*/
export function validateEmail(email) {
const re = /^(([^<>()\\[\]\\.,;:\s@"]+(\.[^<>()\\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return re.test(email)
}
/**
* 判断身份证号码
*/
export function cardid(code) {
const list = []
let result = true
let msg = ''
var city = {
11: '北京',
12: '天津',
13: '河北',
14: '山西',
15: '内蒙古',
21: '辽宁',
22: '吉林',
23: '黑龙江 ',
31: '上海',
32: '江苏',
33: '浙江',
34: '安徽',
35: '福建',
36: '江西',
37: '山东',
41: '河南',
42: '湖北 ',
43: '湖南',
44: '广东',
45: '广西',
46: '海南',
50: '重庆',
51: '四川',
52: '贵州',
53: '云南',
54: '西藏 ',
61: '陕西',
62: '甘肃',
63: '青海',
64: '宁夏',
65: '新疆',
71: '台湾',
81: '香港',
82: '澳门',
91: '国外 '
}
if (!validatenull(code)) {
if (code.length === 18) {
if (!code || !/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(code)) {
msg = '证件号码格式错误'
} else if (!city[code.substr(0, 2)]) {
msg = '地址编码错误'
} else {
// 18位身份证需要验证最后一位校验位
code = code.split('')
// ∑(ai×Wi)(mod 11)
// 加权因子
var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
// 校验位
var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2, 'x']
var sum = 0
var ai = 0
var wi = 0
for (var i = 0; i < 17; i++) {
ai = code[i]
wi = factor[i]
sum += ai * wi
}
if (parity[sum % 11] !== code[17]) {
msg = '证件号码校验位错误'
} else {
result = false
}
}
} else {
msg = '证件号码长度不为18位'
}
} else {
msg = '证件号码不能为空'
}
list.push(result)
list.push(msg)
return list
}
/**
* 判断手机号码是否正确
*/
export function isvalidatemobile(phone) {
const list = []
let result = true
let msg = ''
var isPhone = /^0\d{2,3}-?\d{7,8}$/
// 增加134 减少|1349[0-9]{7},增加181,增加145,增加17[678]
if (!validatenull(phone)) {
if (phone.length === 11) {
if (isPhone.test(phone)) {
msg = '手机号码格式不正确'
} else {
result = false
}
} else {
msg = '手机号码长度不为11位'
}
} else {
msg = '手机号码不能为空'
}
list.push(result)
list.push(msg)
return list
}
/**
* 判断姓名是否正确
*/
export function validatename(name) {
var regName = /^[\u4e00-\u9fa5]{2,4}$/
if (!regName.test(name)) return false
return true
}
/**
* 判断是否为整数
*/
export function validatenum(num, type) {
let regName = /[^\d.]/g
if (type === 1) {
if (!regName.test(num)) return false
} else if (type === 2) {
regName = /[^\d]/g
if (!regName.test(num)) return false
}
return true
}
/**
* 判断是否为小数
*/
export function validatenumord(num, type) {
let regName = /[^\d.]/g
if (type === 1) {
if (!regName.test(num)) return false
} else if (type === 2) {
regName = /[^\d.]/g
if (!regName.test(num)) return false
}
return true
}
/**
* 判断是否为空
*/
export function validatenull(val) {
if (typeof val === 'boolean') {
return false
}
if (typeof val === 'number') {
return false
}
if (val instanceof Array) {
if (val.length === 0) return true
} else if (val instanceof Object) {
if (JSON.stringify(val) === '{}') return true
} else {
if (val === 'null' || val == null || val === 'undefined' || val === undefined || val === '') return true
return false
}
return false
}
14,localStorage相关方法操作封装
import { validatenull } from '@/util/validate'
const keyName = '海关管理系统' + '-'
/**
* 存储localStorage
*/
export const setStore = (params = {}) => {
let {
name,
content,
type
} = params
name = keyName + name
const obj = {
dataType: typeof (content),
content: content,
type: type,
datetime: new Date().getTime()
}
if (type) window.sessionStorage.setItem(name, JSON.stringify(obj))
else window.localStorage.setItem(name, JSON.stringify(obj))
}
/**
* 获取localStorage
*/
export const getStore = (params = {}) => {
let {
name,
debug
} = params
name = keyName + name
let obj = {}
let content
obj = window.sessionStorage.getItem(name)
if (validatenull(obj)) obj = window.localStorage.getItem(name)
if (validatenull(obj)) return
try {
obj = JSON.parse(obj)
} catch (e) {
return obj
}
if (debug) {
return obj
}
if (obj.dataType === 'string') {
content = obj.content
} else if (obj.dataType === 'number') {
content = Number(obj.content)
} else if (obj.dataType === 'boolean') {
content = eval(obj.content)
} else if (obj.dataType === 'object') {
content = obj.content
}
return content
}
/**
* 删除localStorage
*/
export const removeStore = (params = {}) => {
let {
name,
type
} = params
name = keyName + name
if (type) {
window.sessionStorage.removeItem(name)
} else {
window.localStorage.removeItem(name)
}
}
/**
* 获取全部localStorage
*/
export const getAllStore = (params = {}) => {
const list = []
const {
type
} = params
if (type) {
for (let i = 0; i <= window.sessionStorage.length; i++) {
list.push({
name: window.sessionStorage.key(i),
content: getStore({
name: window.sessionStorage.key(i),
type: 'session'
})
})
}
} else {
for (let i = 0; i <= window.localStorage.length; i++) {
list.push({
name: window.localStorage.key(i),
content: getStore({
name: window.localStorage.key(i)
})
})
}
}
return list
}
/**
* 清空全部localStorage
*/
export const clearStore = (params = {}) => {
const { type } = params
if (type) {
window.sessionStorage.clear()
} else {
window.localStorage.clear()
}
}
15,token 失效时退出登录
// 导航守卫
router.beforeEach( ( to, from, next ) => {
if ( to.path === '/login' ) {
next( );
} else {
// = getStore({ name: 'admin_token' })
let token = window.sessionStorage.getItem( "access_token" );
if ( token == undefined ) {
next( '/login' );
} else {
next( );
}
}
} );
export default router;
16,确认键方法调用步骤
//写方法
handleKeyDown(e) {
let key = null;
if (window.event === undefined) {
key = e.keyCode;
} else {
key = window.event.keyCode;
}
if (key === 13) {
this.login();
}
},
//2,在去created里面调用监听函数
window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件
17,全屏与不全屏 窗口
使用npm 命令安装插件
npm install vue-fullscreen
在到main,js中进行全局配置
import fullscreen from 'vue-fullscreen'
Vue.use(fullscreen)
在再网页中使用
<fullscreen :fullscreen.sync="fullscreen">
<div @click='fullScreen'>全屏</div>
</fullscreen >
fullScreen(){
this.fullscreen=!this.fullscreen //不要忘记了在data中定义他为false
}
18,按enter键调用登录方法
//1,写方法enterSure
enterSure(){
var t = this;
document.onkeydown = function(e){
if(window.event == undefined){
var key = e.keyCode;
}else{
var key = window.event.keyCode;
}
//enter的ASCII码是13
if(key == 13){
t.submit();
}
}
},
//2,在到created()的生命周期里面调用该方法
this.enterSure()
//3,在写登录的调接口的方法暂且命名为 submit
this.$axios( {
method: 'post',
url: '/auth/oauth/token',
data: qs.stringify( {
username: this.form.username,
password: jiami( this.form.password ),
scope: 'server',
grant_type: 'password'
} ),
headers: {
isToken: 'false',
'TENANT-ID': '1',
'Authorization': 'Basic Z3poZzpnemhn'
}
} ).then( res => {
if ( res.status == 200 ) {
document.onkeydown = undefined; //必须在调用成功后,加上这段代码,代表清空enter按下的事件
console.log( "res.data.data===========", res.data.user_info );
this.$message.success( "登录成功!" )
this.$router.push( "/home" );
} else {
}
} ).catch( err => {
this.$message.warning( "用户名或密码错误" )
} )
19,手写展开与收起
html网页结构
```javascript
<div
:class="is_show ? 'product-description-boss' : 'product-description-show'"
>
<div
v-for="(item, index) in productData"
:key="index"
class="product-description"
ref="productDescription"
>
<div class="product-description-title color-blue">
<font class="color-blue data-title">|</font> 产品说明
</div>
<div class="product-text" v-html="item">
</div>
<div v-if="index==productDataIndex" @click="topAction" class="top-acition">
<div v-if="topOrDown">
<div class="display">
<img src='../../../assets/images/top_action.png'>
</div>
<div class="display top-acition-title">
收起
</div>
</div>
<div v-if="!topOrDown" >
<div class="display">
<img src='../../../assets/images/down_action.png'>
</div>
<div class="display top-acition-title">
展开
</div>
</div>
</div>
</div>
</div>
data变量
productData: [],
detailForm:{},
topOrDown:false,
productDataIndex:0,
is_show:true
vue 方法
/**展开 */
topAction(){
if(this.topOrDown==true){
this.topOrDown=false
this.is_show=true
this.productDataIndex=0
console.log("我是收起======");
}else{
this.topOrDown=true
this.is_show=false
this.productDataIndex=this.productData.length-1
console.log("我是展开======");
}
}
CSS
.product-description-boss{
height: 130px ;
overflow: hidden;
}
.product-description-show{
height: auto ;
overflow: hidden;
}
具体思路分析
1,写CSS样式,再最外层写一个BOSSdiv,一个样式设置高度,一个样式auto 2,设置展开收起,显隐方法模板
3,展开时候展开收起的div再第一行,收起后模板再数据的最后一个div中,并且,高度动态绑定的变量跟随改变,根据以下代码来确定
:class="is_show ? ‘product-description-boss’ :
‘product-description-show’" 并且社会 设置一个变量规定起再数组中的哪一个index中,根据以下代码来确定
v-if=“index==productDataIndex”
20,数组中某一个对象相同时候,其他项合并成一个数组
mounted() {
this.CS();
},
methods: {
CS() {
var data = [{
"name": "C",
"size": 240,
"data": 57
},
{
"name": "F",
"size": 520,
"data": 42
},
{
"name": "G",
"size": 240,
"data": 47
},
{
"name": "C",
"size": 520,
"data": 23
},
{
"name": "F",
"size": 240,
"data": 14
},
{
"name": "G",
"size": 520,
"data": 62
},
{
"name": "C",
"size": 240,
"data": 34
},
{
"name": "F",
"size": 520,
"data": 25
},
{
"name": "G",
"size": 240,
"data": 35
}
]
console.log(data)
var echararr = [];
for (var i = 0; i < data.length; i++) {
//判断是否有相等的name
var arrindex=echararr.findIndex((item, index, arr) => {
return item.name === data[i].name
})
//获取下标
if(arrindex==-1){//不存在盘符数据的添加盘符数据
echararr.push({
"name": data[i].name,
"size": data[i].size,
"data": [data[i].data]
});
}else{//有盘符则往盘符数据中添加
echararr[arrindex].data.push(data[i].data)
}
//console.log(arrindex);
}
console.log(echararr)
}
}
(二)js
1,获取时间差
创建方法er
DateDiffer(Date_end){
//date1结束时间
let date1 = new Date(Date_end);
//date2当前时间
let date2 = new Date();
date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
const diff = date1.getTime() - date2.getTime(); //目标时间减去当前时间
const diffDate = diff / (24 * 60 * 60 * 1000); //计算当前时间与结束时间之间相差天数
}
(三) css
一,模板
1,vue 左中右布局模板(数据可视化)
```javascript
<template>
<div class="content border">
<!--最左边-->
<div class="content-left border">
<div class="content-left-top border"></div>
<div class="content-left-center border"></div>
<div class="content-left-bottom border"></div>
</div>
<div class="content-center border"></div>
<!--最右边-->
<div class="content-left border">
<div class="content-left-top border"></div>
<div class="content-left-center border"></div>
<div class="content-left-bottom border"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 85%;
margin-top: 1%;
display: inline-flex;
.content-left {
flex-grow: 1;
min-width: 30%;
max-width: 30%;
height: 100%;
display: inline-flex;
flex-direction: column;
justify-content: space-between;
.content-left-top {
height: 30%;
width: 100%;
}
.content-left-center {
height: 35%;
width: 100%;
}
.content-left-bottom {
height: 30%;
width: 100%;
}
}
.content-center {
flex-grow: 2;
min-width: 40%;
max-width: 40%;
height: 100%;
}
.content-right {
flex-grow: 1;
min-width: 30%;
max-width: 30%;
height: 100%;
}
}
</style>
1,h5 PC端打开网页模式显示不全的解决办法
在template.h5.html的代码中的head复制如下代码即可
```javascript
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=0.3, maxmum-scale=1.0, minimum-scale=0.3">
二,宫格布局
html模块
<view class="wrap">
<view class="item" v-for="(item,index) in 10" :key="index">
<image src="" width="220" height="180"></image>
</view>
</view>
css模块
.wrap {
display: flex;
flex-wrap: wrap;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
height: 190rpx;
flex: 0 0 33.33333333%;
justify-content: center;
overflow: hidden;
}
效果
3,数组方法之判断数组对象中某个值是否都为某个数
if (this.data.rightList.findIndex(target => target.baodanshow === true) == -1) {
console.log('验证通过')
} else {
console.log('验证不通过')
}
(四)element ui
1,el-table 添加序列号
{{scope.$index+1}}
(五)vue 插件相关
(六)JQ
(七)HTML
(八)微信小程序
1,微信小程序获取当前页面的url和参数
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length - 1] //获取当前页面的对象
var url = currentPage.route //当前页面url
console.log(url)
var options = currentPage.options //如果要获取url中所带的参数可以查看options
2,微信小程序跳转到上一个页面会出现直接跳转到首页的问题
1、A -> B -> C C直接返回A
A -> B通过 wx.navigateTo 跳转
B -> C 通过 wx.redirectTo 跳转.跳转触发后 B 页面就会被销毁, C 页面再返回 wx.navigateBack 就会直接到 A 了
2、A -> B -> C 返回效果C -> B -> A
正常 A -> B -> C 都是通过 wx.navigateTo 跳转的,所以 wx.navigateBack 只能返回上一界面