Vue Element Vue-Underscore、Qs、Vue-Cookies、CSS 樣式

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、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

*
*
*
*
*
*