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

*
*
*
*
*
*

发布了303 篇原创文章 · 获赞 42 · 访问量 68万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览