Vue2知识点-CSDN博客

本文链接：https://blog.csdn.net/qq_53008791/article/details/147575682

Vue2知识点

mixins（混入）

mixins定义：

混入(mixin)是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混合进入该组件本身的选项。

mixins使用步骤：

在mixins文件夹下创建一个mixin.js文件

import FlowView from '@/views/component/flowView/FlowViewIndex.vue';


export default {
  components: {
      			FlowView, // 可在引用mixin.js的文件中直接使用该组件
              },
  data() {
    return {
      flowHistoryVisible: false,
    }
  },

  mounted() {
  },

  methods: {
    //查看审批历史及流程图 可在引用mixin.js的文件中直接调用
    viewApprovalHistory(row) {
      this.updRowInfo = row;
      this.flowHistoryVisible = true;
    },
  }
}

在使用mixin.js的文件中引用

<template>
    // viewApprovalHistory mixins.js文件中的方法 可直接使用
     <span class="name_click_cls" @click="viewApprovalHistory(row)">审批历史</span>

    <!--审批历史及流程图展示-->
    <el-dialog
      title="审批历史查看"
      v-if="flowHistoryVisible"
      :visible.sync="flowHistoryVisible"
      width="70%"
      :close-on-click-modal="false"
      top="2vh"
    >
       <!--  mixins.js文件中的子组件 可直接使用， updRowInfo子组件的state 可直接用 -->
      <flow-view :flowParams="updRowInfo" source="approval" /> 
    </el-dialog>
</template>
<script>
import FlowViewMixin from "@/views/approvalManage/mixins/FlowViewMixin";
export default {
  mixins: [FlowViewMixin], // ---------------  mixins.js文件
};
</script>

$a tt rs 和$ listeners的使用

$attrs定义:

当一个组件没有声明任何prop时，$attrs会包含所有父作用域的绑定(class和style除外)，并且可以通过 v-bind=“${attrs}” 传入内部组件，一般用在子组件的子元素上。v-bind 缩写为 ’ : ’

$attrs的使用：

父组件1中
<Component :data='data' :visible='visible' />

子组件1中
props: {
 visible: {
	type: Boolean,
	default: false
 },
}

created() {
	console.log(this.$attrs) // 父组件1传过来的  输出data 因为props有数据 是除props外的所有绑定
}

父组件2中
<Component :list='list' :visible='visible' />

子组件2中
created() {
	console.log(this.$attrs) // 父组件1传过来的  输出list、visible 因为没有声明props数据 是所有父作用域的绑定
}

$listerners定义：

包含了父作用域中（不含.native修饰器的）v-on（缩写为@）事件监听器；它可以用过 v-on="$listerners" 传入内部组件。

$listerners的使用：

父组件中
<Component @hanleClick="handleClick" />

methods: {
	handleClick() {
		console.log('父组件')
	}
}

子组件中
created(){
	console.log(this.$listerners) // 输出{handleClick: f} 函数 可通过this.$listerners.handleClick调用父组件方法
}

hover时文字放大效果显示：

 .item:hover {
    background: rgba(199, 227, 255, 0.3);
    color: #000;
    transition: all 0.3s;
    transform: scale(1.05);
    div {
    	font-weight: bold;
    }
}

第三方依赖

vue-seamless-scroll：无缝滚动

无缝滚动，可实现大屏页面滚动效果

bignumber.js：算术运算

是一个功能强大的JavaScript库，专门用于处理任意精度的算术运算

bpmn-js：绘制流程图

// 导入
import Modeler from 'bpmn-js/lib/Modeler'
 		
// 生成实例
this.modeler = new Modeler({
  container: this.$refs.canvas,
  additionalModules: [
    {
      labelEditingProvider: ['value', ''], // 禁用编辑
      contextPadProvider: ['value', ''], // 禁用点击出现的contextPad
      bendpoints: ['value', {}], // 禁止流程线变换waypoints
      move: ['value', {}],// 禁止节点拖动
    }
  ],
})

// 后端返回xml或自定义初始化的xml
this.modeler.importXML(this.xml, err => {
	if(err){
		console.log('流程图渲染失败')
	} else {
	
	}
})

v-if和v-for注意事项：

在这里插入图片描述

  1. 在vue2中，v-for的优先级高于v-if，在每次循环列表时，都会执行v-if，会造成不必要的性能浪费；
  		
  2. 在vue3中，v-if的优先级要高于v-for，在v-if用到循环列表中的元素时，获取不到元素从而导致报错。

for…in和for…of的使用与区别：

// for...in 循环遍历的是对象的属性名，而不是属性值。
// for...in 会枚举出对象自身以及原型链上的所有可枚举属性。如果只想遍历对象自身的属性，可以使用hasOwnProperty方法进行过滤。
let obj = {a: 1, b: 2, c: 3};

for (let prop in obj) {
  console.log(`属性名: ${prop}, 属性值: ${obj[prop]}`);
}

/*
	打印结果：
		属性名: a, 属性值: 1
        属性名: b, 属性值: 2
        属性名: c, 属性值: 3

*/

// ----------------------------分割线----------------------------
// for...of 循环遍历的是可迭代对象的元素值，而不是属性名。
// for...of 循环不会遍历对象的原型链。
// for...of 循环适用于数组、字符串、Map、Set等可迭代对象。

let arr = [1, 2, 3, 4, 5];

for (let value of arr) {
  console.log(value);
}

/*
	打印结果：
            1
            2
            3
            4
            5
*/

动画弹跳效果

    <div :class="['data', 'dataBg2']">
        <div>
            <span>{{ countMap.groupCount }}户</span>
            <img src="@/assets/images/risk/entry1.png" alt="" @click="viewDetail(2)">
        </div>
    </div>     


// 对类名为data的div设置弹跳效果
    @keyframes shake {
        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-10px);
            /* 向上移动10px */
        }
    }

    .data {
        display: inline-block;
        /* 或者其他适合的显示类型 */
        transition: transform 0.2s;
        /* 平滑过渡效果 */
    }

    .data:hover {
        animation: shake 0.5s;
        /* 应用动画 */
    }

表格单元格根据内容长度计算列宽


<el-table-column
    prop="failureReasons"
    label="财务处理失败原因"
    align="center"
    :min-width="flexColumnWidth('财务处理失败原因', 'failureReasons', dataList)"
>
</el-table-column>

methods: {
    // 计算文本宽度
    getTextWidth(str) {
      let width = 0;
      const html = document.createElement("span");
      html.innerText = str;
      html.className = "getTextWidth";
      document.querySelector("body").appendChild(html);
      width = document.querySelector(".getTextWidth").offsetWidth * 1.2;
      document.querySelector(".getTextWidth").remove();
      return width;
    },
    // 动态计算列宽
    flexColumnWidth(label, prop, data) {
      // 将表头加入数组
      const arr = data.map((x) => x[prop]);
      arr.push(label);
      // 计算每列内容最大的宽度
      const maxWidth = arr.reduce((acc, item) => {
        if (item) {
          const width = this.getTextWidth(item);
          acc = Math.max(acc, width);
        }
        return acc;
      }, 0);
      // 返回最大宽度加上额外的内间距
      return maxWidth + 25 + "px";
    },
}

NVM包管理工具

nvm list 查看已经安装的版本
nvm list installed 查看已经安装的版本
nvm list available 查看网络可以安装的版本
nvm version 查看当前的版本
nvm install 安装最新版本
nvm nvm use <version> ## 切换使用指定的版本
node nvm ls 列出所有版本 nvm current显示当前版本
nvm reinstall-packages <version> ## 在当前版本node环境下，重新全局安装指定版本号的npm包