1、vue-underscore
本示例以 Vue Element Admin 项目为基础，介绍 vue-underscore
● 官网
vue-underscore
● 安装
npm install vue-underscore
npm i vue-underscore
● /src/main.js
import Vue from 'vue';
import underscore from 'vue-underscore';
import App from './App';
Vue.use(underscore);
new Vue({
...App
}).$mount('#app');
● Examples
<template>
<div id="app">
<el-button type="primary" @click="test">underscore test</el-button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
test() {
let testArr = [{ id: 1 }, { id: 2 }];
let foundInfo = this.$_.findWhere(testArr, { id: 1 });
let menuArr = [{ id: 1, name: "a" }, { id: 2, name: "b" }];
let foundMenu = this.$_.findWhere(menuArr, { id: 2 });
console.log(`${JSON.stringify(foundInfo)} ${JSON.stringify(foundMenu)}`);
}
}
};
</script>
2、qs
本示例以 Vue Element Admin 项目为基础，介绍 qs
● 安装
npm install qs
npm i qs
【提示：貌似 qs 这个库是 axios 里面包含的，不需要再下载】
● URL 解析成 对象
qs.parse()
● 对象 序列化成 URL，以【&】进行拼接
qs.stringify()
● arrayFormat【格式化数组】
qs.stringify({ids: [48,49]},{arrayFormat: 'brackets'})
● main.js 引入【全局引入】
import Vue from 'vue'
import qs from 'qs'
// 全局属性配置，在任意组件内可以使用this.$qs获取qs对象
Vue.prototype.$qs = qs
● Examples【全局引入示例】
<template>
<div id="app">
<el-button type="primary" @click="qsTest">qs test</el-button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
qsTest() {
var obj = this.$qs.parse("money=100000000&level=99999999");
console.log(`URL 解析成 对象：${JSON.stringify(obj)}`);
var str = this.$qs.stringify({ id: 1, name: "mayun" });
console.log(`对象 序列化成 URL：${str}`);
}
}
};
</script>
● Examples【在需要用到的组件中引入】
<template>
<div id="app">
<el-button type="primary" @click="qsTest">qs test</el-button>
</div>
</template>
<script>
import qs from "qs";
export default {
data() {
return {};
},
methods: {
qsTest() {
var obj = qs.parse("money=100000000&level=99999999");
console.log(`URL 解析成 对象：${JSON.stringify(obj)}`);
var str = qs.stringify({ id: 1, name: "mayun" });
console.log(`对象 序列化成 URL：${str}`);
}
}
};
</script>
3、vue-cookies
本示例以 Vue Element Admin 项目为基础，介绍 vue-cookies
● 官网
vue-cookies
● 安装
npm install vue-cookies --save● main.js 全局引入【全局引入】
import Vue from 'Vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)● 设置默认值
this.$cookies.config(expireTimes, path)
expireTimes：默认1d
path：默认'/'
domain：cookie所在的域，默认为请求地址● Examples
<template>
<div id="app">
<el-button type="primary" @click="cookiesTest">vue cookies test</el-button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
cookiesTest() {
//不写过期时间，默认为1天过期
this.$cookies.set("user_session1", "25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX");
// 1天过期，忽略大小写(1d,1D)
this.$cookies.set("user_session2","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX","1D")
// 以秒为单位，设置1天过去
this.$cookies.set("user_session3","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX",60 * 60 * 24)
// 填写一个时间字符串，指定过期时间
this.$cookies.set("user_session5","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", "Sat, 13 Mar 2017 12:25:57 GMT")
//浏览器会话结束时过期
this.$cookies.set("default_unit_second1","input_value","0");
//永不过期
this.$cookies.set("default_unit_second2","input_value",-1);
// 获取cookies
console.log(this.$cookies.get("user_session1"));
// 删除 cookie
this.$cookies.remove('user_session1')
// 获取所有cookie名称
this.$cookies.keys()
// 是否有key cookie
this.$cookies.isKey("token")
}
}
};
</script>
● 设置过期时间单位类型
单位 名称
y year
m month
d day
h hour
min minute
s second
4、Local Storage
// set 保存
localStorage.setItem('room', JSON.stringify({'room_code':'1','room_name':'房间1'}))
// get 获取
var room = JSON.parse(localStorage.getItem('room'))
console.log(`Ln 346 ${localStorage.getItem('room')};${room.room_code}`)
// remove 删除
localStorage.removeItem('room');
5、CSS
● 注意
*scoped：当一个style有这个标签，它的样式就只能作用于当前的Vue组件，可以使组件的样式不相互污染；去掉scoped，可能会造成全局污染。
首先
，因为element-ui的属性是全局的，style不能设置scoped，否则不起作用
其次
，因为element-ui的属性是全局的，所以如果改变当前页面为了不影响其他页面，必须给当前页面一个id，再设置他的style
<div id="custom" class="app-container"></div>#custom .el-table__body tr.current-row > td { background-color: #1890ff !important;color: white; }
#custom .el-table--enable-row-hover .el-table__body tr:hover > td { background-color: #1890ff; color: white; }
● 注意
有scss的地方一定要用deep；不用scss时就要用>>>
● 重写 <style scoped> 样式要加（>>>或者/deep/），不然不会生效
.table-wrapper /deep/ .el-table--fit{ padding: 20px; }
● tree 背景色修改，选择行背景色修改【注意：不要在 <style> 中加 scoped， 这样全局样式都会被修改】
<style>
/* element全局tree 树节点选中时的背景色 */
.el-tree-node.is-current > .el-tree-node__content { background-color: #2F8DFB !important; color: white; }
.el-checkbox__input.is-checked+.el-checkbox__label { color: black; }
/* element全局tree 树节点鼠标悬浮时的背景色*/
.el-tree-node__content:hover { background-color: #1890ff; color: white; }
/* element全局tree 树节点鼠标悬浮时【三角图标】的背景色*/
.el-tree-node__content:hover .el-tree-node__expand-icon { color:violet; }
</style>
● table背景色修改【注意：不要在 <style> 中加 scoped， 这样全局样式都会被修改，若只想修改本页面的样式，则在上一级标签中添加 class】
<style>
/* element全局table 选中某行时的背景色*/
.el-table__body tr.current-row > td { background-color: #1890ff !important; color: white; }
/* element全局table 鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover>td { background-color: #1890ff; color: white; }
/* 只修改本页面的样式 */
.custom {
.el-table__body tr.current-row > td { background-color: #1890ff !important; color: white; }
.el-table--enable-row-hover .el-table__body tr:hover>td { background-color: #1890ff; color: white; }
}
</style>
6、覆盖 element 样式
覆盖 element 样式，css必须要去掉scope，才能作用到外面，要注意不要污染全局css，如果只是修改某个el-input，可以在其外层加一个<div class=”custom”></div>， 然后用子代选择器选出来。
<div class="custom"></div>.custom > .el_input
或
.custom .el_input
*
*
*
*
*
*