学习项目
- 一、深度(穿透)选择器
- 1. /deep/
- 2.>>>
- 3. ::v-deep
- 二、vue-particles
- 1.安装
- 2.全局引入
- 3.使用
- 三、v-bind对于样式控制的增强之操作类名class
- 四、CryptoJs加密
- 五、自定义指令的封装和使用
- 防抖
- 六、mixins
- 七、复制字段
- vue-clipboard复制文本插件
- 八、vue.prototype
- 九、rules属性
- 十、vue实现动态路由和懒加载
- 十一、\$router和\$route的区别详解
- 十二、正则表达式
一、深度(穿透)选择器
在vue项目的开发过程中,当我们想修改element-ui组件库的原生样式时,需要去掉scoped属性才能直接修改成功,但是这样可能会作用于全局样式,因此我们可以使用深度选择器,才能修改成功。
1. /deep/
特点主要适用于vue的老版本 vue.js 2;css扩展语言是less或者node-sass
<style lang="less" scoped>
/deep/.el-button{
span{
color: '#f00'
}
}
</style>
2.>>>
适用于css的原生样式
<style lang="css" scoped>
.el-button >>> span{
color: '#f00'
}
</style>
3. ::v-deep
通用于所有扩展的css语言,在vue3中更推荐使用,如果使用/deep/可能会因为无法编译而报错 :deep是vue3中对其的别名
<style lang="scss" scoped>
.el-button::v-deep{
span{
color: '#f00'
}
}
</style>
二、vue-particles
粒子动画特效背景 粒子可以跟随鼠标移动
1.安装
npm install vue-particles --save-dev
2.全局引入
//main.js
import VueParticles from ‘vue-particles’
Vue.use(VueParticles)
3.使用
<vue-particles color="#0087ff" :particleOpacity="1" :particlesNumber="100" shapeType="circle" :particleSize="4"
linesColor="#dedede" :linesWidth="2" :lineLinked="true" :lineOpacity="1" :linesDistance="150" :moveSpeed="3"
:hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push">
</vue-particles>
color: String类型。默认'#dedede'。粒子颜色。
particleOpacity: Number类型。默认0.7。粒子透明度。
particlesNumber: Number类型。默认80。粒子数量。
shapeType: String类型。默认'circle'。可用的粒子外观类型有:"circle","edge","triangle", "polygon","star"。
particleSize: Number类型。默认80。单个粒子大小。
linesColor: String类型。默认'#dedede'。线条颜色。
linesWidth: Number类型。默认1。线条宽度。
lineLinked: 布尔类型。默认true。连接线是否可用。
lineOpacity: Number类型。默认0.4。线条透明度。
linesDistance: Number类型。默认150。线条距离。
moveSpeed: Number类型。默认3。粒子运动速度。
hoverEffect: 布尔类型。默认true。是否有hover特效。
hoverMode: String类型。默认true。可用的hover模式有: "grab", "repulse", "bubble"。
clickEffect: 布尔类型。默认true。是否有click特效。
clickMode: String类型。默认true。可用的click模式有: "push", "remove", "repulse", "bubble"
三、v-bind对于样式控制的增强之操作类名class
:前是绑定的类名,:后是布尔值,根据布尔值是否为true绑定对应的class
默认情况下绑定的类名是userDefault,当userFocus变为true时绑定类名为userFocus
通过动态绑定class实现鼠标focus时输入框的边框变为高亮
当账户和密码为空时控制p标签的隐藏和显示也可以用此方法
四、CryptoJs加密
链接: 详情
五、自定义指令的封装和使用
链接: 详情参考
//index.js
import copy from './modules/copy'
import permission from './modules/permission'
import debounce from './modules/debounce'
// 自定义指令
const directives = {
copy,
permission,
debounce
};
// 这种写法可以批量注册指令
export default {
install(app) {
Object.keys(directives).forEach((key) => {
app.directive(key, directives[key]);
});
},
};
防抖
在main.js中导入
import Vue from 'vue';
import debounce from './directives/debounce';
Vue.directive('debounce', debounce);
使用:
<div>
<button @click="addRequest" v-debounce>发送请求<button>
<div/>
六、mixins
链接: 详解
七、复制字段
// 点击复制
toCopy(row, column, cell, event) {
let filterArr = ["操作", "状态", "是否可用","是否启用","是否手动调度","是否受保护","是否有效","公网IP地址","SD-WAN","客户端地址"]; //不需要复制的字段
let dom = event.target; //点击的dom
let key = column.property; //当前单元格数据接收的数据字段
let value = String(row[key]) ; //当前单元格对应的数据
dom.classList.add("copy");
let res = this.isCopy(column.label, filterArr);//判断是否可以复制
// 值为空 或者 被过滤的字段不能复制
if (!value || !res) return;
let clipboard = new Clipboard(".copy", { text: () => value});
//成功回调
clipboard.on("success", function (e) {
Notification({
title: "复制成功",
dangerouslyUseHTMLString: true,
message: `<b> ${column.label}</b> 已复制到粘贴板上`,
type: "success",
});
e.clearSelection();
clipboard.off("success");
dom.classList.remove("copy");
clipboard.destroy();
});
},
// 判断字段是否可以复制
isCopy(value, arr) {
return !arr.some((str) => value.includes(str));
}
vue-clipboard复制文本插件
链接: 详解
八、vue.prototype
链接: 详解
九、rules属性
链接: 详解
十、vue实现动态路由和懒加载
链接: 详解
十一、$router和$route的区别详解
链接: 详解
十二、正则表达式
链接: 详解