vue2超实用功能-可修改标题、点击显示全部，折叠内容、自定时间线显示、文字超出隐藏、数组去重、多版本依赖、特效网站、文字走马灯组件、el-scrollbar滚动条、vue监听（持续更新中）

本文链接：https://blog.csdn.net/shi_haoliu/article/details/131696022

显示标题然后旁边有个修改按钮，点击之后是input，然后修改内容，失去焦点或者用回车键保存

 直接上代码-HTML

   <div
     class="title"
     style="display: flex;justify-content: space-between;"
     @keyup.enter.prevent="
       saveEditType('editingType7', 'editingType7Name')
     "
   >
     <span
       ><el-input
         v-if="editingType7"
         type="text"
         class="editingInput"
         maxlength="20"
         show-word-limit
         :ref="`input-editingType7`"
         v-model="editingType7Name"
         @blur="saveEditType('editingType7', 'editingType7Name')"/>
       <span v-else>{{ editingType7Name }}</span>
       <i
         class="el-icon-edit titleIcon"
         @click="editItemType('editingType7')"
       ></i
     ></span>
   </div>

 直接上代码-methods

//获取焦点方法
editItemType(item) {
      // 处理编辑按钮点击事件
      //input打开
      this[item] = true;
      this.$nextTick(() => {
      //获取焦点，这是在ref中写好的
        this.$refs[`input-${item}`].$el.querySelector("input").focus();
      });
    },
//保存方法
    saveEditType(item, itemName) {
    //这里的item喝itemName是我在data中设置的一个对象
      if (this[itemName].length == 0) {
      //this[]这种写法是 使用对象解构赋值将传入的字符串作为对象的属性，并为其赋值
         this[itemName] = "标题";
         //设置默认值
      }
      // 处理失去焦点保存编辑事件
      this[item] = false;
    },

注意一个问题，就是在写这个代码的时候，必须要在点击编辑按钮的时候获取一下input的焦点，否则可能体验会很不友好
这段代码中的定义editingType7是定义是否获取焦点的

文章过长隐藏，然后隐藏的文章后面加个。。。加个显示全部的按钮，点击按钮展开全部内容，展开按钮变成折叠按钮，点击折叠再变回原来的文章

省流版：
单行不换行显示...
			width: 70%;
			display: inline-block;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
两行显示...（记得设置宽高啥的 我这个在层设置了）
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
自动换行
            word-wrap: break-word;
            word-break: normal;

<template>
	<div class="section">
		<div class="box">
			<div class="boxheader">
				<div class="box_left">
					<img src="../../../assets/hot/test.png" alt="" />
					<div class="imgtitle">
						123123
					</div>
				</div>
				<div class="box_right">
					<div class="box_rightrightone">
						<div class="box_right_title">导读</div>
						<!-- <div
							class="box_right_content"
							v-if="rightContent.length <= 120"
						>
							{{ rightContent }}
						</div> -->
						<div class="box_right_content">
							{{
								viewNow
									? rightContent.slice(0, 100) + '...'
									: rightContent
							}}
							<span
								v-if="viewNow"
								style="display:inline"
								class="detail1"
								@click="viewNow = false"
								>&lt;查看全部&gt;</span
							>
							<span
								v-else
								style="display:inline"
								class="detail1"
								@click="viewNow = true"
								>&lt;折叠&gt;</span
							>
						</div>
					</div>
					<div v-if="viewNow == true" class="box_rightrighttwo">
						<div class="box_right_title">
							背景文章：<a
								class="qwLink"
								href=""
								target="_blank"
								>123</a
							>
						</div>
						<div class="box_right_content">
							<a
								id="fineDocUrl"
								href=""
								target="_blank"
								class="zh_text"
							>
								<span id="fineDocContent" class="zh_text"
									>{{
										rightContent2.length <= 120
											? rightContent2
											: rightContent2.slice(0, 120) +
											  '...'
									}}<span
										style="display:inline"
										class="detail1"
										>&lt;全文&gt;</span
									></span
								>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="box2"></div>
	</div>
</template>
<script>
export default {
	name: '',
	components: {},
	mixins: [],
	props: {},
	data() {
		return {
			rightContent:
				'文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
			rightContent2:
				'文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
			viewNow: true,
		};
	},
	computed: {},
	watch: {},
	mounted() {},
	methods: {
		viewAllmodel() {
			this.viewNow = !viewNow;
		},
	},
};
</script>
<style lang="less" scoped>
.box {
	width: 1440px;
	margin: 31px auto 78px auto;
	background: #f7f7f7;
	.boxheader {
		background: #fff;
		display: flex;
		height: 416px;
		.box_left {
			position: relative;
			img {
				width: 744px;
				height: 100%;
			}
			.imgtitle {
				position: absolute;
				bottom: 16px;
				left: 23px;
				font-size: 19px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ffffff;
				cursor: pointer;
			}
			.imgtitle:hover {
				text-decoration: underline;
			}
		}
		.box_right {
			padding: 52px 43px 53px 47px;
			.box_right_title {
				font-size: 18px;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #181818;
				.qwLink {
					color: #181818;
				}
				.qwLink:hover {
					color: rgb(71, 71, 250);
				}
			}

			.box_right_content {
				font-size: 17px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #444444;
				line-height: 31px;
				display: block;
				text-indent: 28px;
				overflow: hidden;
				overflow-y: auto;
				max-height: 276px;
				.zh_text {
					font-size: 17px;
					color: #444444;
				}
				.detail1 {
					cursor: pointer;
					color: #da1313;
				}
				scrollbar-width: thin; /* 设置滚动条宽度 */
				scrollbar-color: #ccc #f4f4f4; /* 设置滚动条颜色 */
				&::-webkit-scrollbar {
					width: 8px; /* 设置滚动条宽度 */
				}
				&::-webkit-scrollbar-track {
					background: #f4f4f4; /* 设置滚动条轨道背景色 */
				}
				&::-webkit-scrollbar-thumb {
					background-color: #ccc; /* 设置滚动条滑块颜色 */
					border-radius: 10px; /* 设置滑块圆角 */
				}

				/* Firefox */
				& {
					scrollbar-width: thin; /* 设置滚动条宽度 */
					scrollbar-color: #ccc #f4f4f4; /* 设置滚动条颜色 */
				}
			}
			.box_rightrightone {
				margin-bottom: 53px;
			}
		}
	}
}
</style>

这里有很多判断，根据 viewNow 这个状态判断是否点击了
其次是根据文字长度截断，因为文字过多会不好看
展开的文章内容改了滚动条样式
这段代码是左右结构，左边还有个图片，粘上就能用

自定义时间线功能，样式

前面的点是图片
在这里插入图片描述

<template>
					<ul class="timelist">
						<li
							v-for="(item, index) in times"
							:key="index"
							:class="year == item ? ' redbg' : 'blackbg'"
							@click="year = item"
						>
							<p></p>
							<span class="classA">{{ item }}</span>
						</li>
					</ul>
</template>
<script>
	data() {
		return {
		times: ['2023','2022','2021',],
		year: '2023',
}
}
</script>
<style scoped lang="less">
.timelist {
	margin-top: 25px;
	padding-left: 30%;
	p {
		border-left: 1px solid #cfd3da;
		height: 72px;
		position: absolute;
		top: 20px;
		left: 14px;
	}
	li + li {
		margin-top: 60px;
	}
	li {
		position: relative;
		cursor: pointer;
		padding-left: 42px;
	}
	li:last-child p {
		border-left: 0;
	}
	li:hover {
		.classA {
			font-weight: bold;
			font-size: 18px;
			color: #238c3e;
			line-height: 24px;
		}
		background: url(../../assets/hot/point_hover1.png) no-repeat 5px 3px;
	}
}
.redbg {
	.classA {
		font-weight: bold;
		font-size: 18px;
		color: #238c3e;
		line-height: 24px;
	}
	background: url(../../assets/hot/point_hover1.png) no-repeat 5px 3px;
}
.blackbg {
	.classA {
		font-size: 18px;
		color: #333333;
		line-height: 24px;
	}
	background: url(../../assets/hot/point1.png) no-repeat 5px 3px;
}
</style>

主要再样式上下的功夫，hover和active的一个显示
这两个图片需要自己找找

文字超出隐藏&&禁止换行&&悬浮显示内容&&hover

很简单

<div
	class="boxContent_block_list_rowCt"
	:title="item.title"
	@click="">
	{{ item.title }}
</div>
//css
.boxContent_block_list_rowCt {
	cursor: pointer;
	width: 500px;
	max-width: 500px;//必须有宽
	padding-right: 20px;
	white-space: nowrap;//禁止换行
	overflow: hidden; //这个是设置隐藏的。还有其他的，例如scroll，是超出固定长度，底部显示滚动条的。
	text-overflow: ellipsis; //这个就是设置直接隐藏掉文字，还是显示...的。当前是显示省略号。直接省略是clip
	display: inline-block; //根据不同标签display值，有的不用加。
	display: -webkit-box;//有的需要加
	border-bottom: 1px dashed #e1e1e1;
	&:hover {
		color: rgb(93, 93, 245);
	}
}

使用el-menu，默认展示其中某个内容，不使用default-openeds

default-openeds不适用，因为在其他地方也会用其他方法触发menu的数据变化，如果设置了default-openeds的值，会导致在触发menu的变化时，menu-item展不开，所以只能用dom的方式处理
挂载在menu加载出来之后

	mounted() {
		this.$nextTick(() => {
		//因为我的页面是模板加载出来的所以需要控制当前页面
		//当前页面的内容不会发生改变，只会展开column_l_nav_style1的第一个内容
			if (this.$store.state.uid == 'A201A0') {
				// 获取具有特定类名的元素
				//注意：这里是el-submenu的元素，也就是说这个是获取的点击的那个标题
				const element = document.getElementsByClassName(
					'column_l_nav_style1'
				)[0];
				// 创建一个包含参数的自定义事件
				const customEvent = new CustomEvent('click');
				// 手动触发click事件并传递参数，我这里不需要传 const customEvent = new CustomEvent('click', { detail: { yourParameter: 'Your parameter value' } });
				element.dispatchEvent(customEvent);//点击事件点击标题，点击标题后会触发我的点击事件，这个方法不会展开menu，需要下面手动展开
				// 获取具有特定类名的 el-menu 元素
				const menuElement =
					document.querySelector('.el-submenu__title');
				// 利用 Element UI 的 API 或实例方法展开 el-submenu
				menuElement.click();//这个会展开menu但是不会触发点击事件

			}
		});
	},

toFixed保留小数（判断数据类型）

判断如果是数值类型再保留两位，非则会报错

 toFixeds(value) {
      //去掉成两位小数的时候需要判断数值类型
      if (typeof value == "string") {
        return value;
      } else if (
        typeof value == "double" ||
        typeof value == "float" ||
        typeof value == "number"
      ) {
        return value.toFixed(2);
      } else {
        return value;
      }
    },

在添加依赖的时候使用不同的依赖版本（示例为echarts）和强制定义下载地址（本地依赖库）

开发旧项目怕出现修改版本导致代码出问题就用两个不同的版本

package.json文件中的dependencies添加

"echarts5": "npm:echarts@^5.5.0"

在main.js文件中添加 
import * as echarts from 'echarts'; // 在import的后面，echarts的前面加一个 * as
Vue.prototype.$echarts = echarts;
import * as echarts5 from "echarts5"; // 新增一个版本号
Vue.prototype.$echarts5 = echarts5;

在代码中调用
var myChart = this.$echarts5.init(chartDom);

强制定义依赖下载地址

"dependencies": {
"依赖包名": "http://地址：端口号（或者是域名）/依赖包路径/依赖包地址",
}

特效网站

好用的一
https://www.17sucai.com/
ant的
https://motion.ant.design/components/tween-one-cn
echarts图：
https://www.isqqw.com/ 这个网站现在收费和引流了我已不太常用，但是我之前把好多写好的都放上去了，还得用
https://www.makeapie.cn/echarts 这个不收费

文字走马灯组件

在这里插入图片描述

功能：鼠标移入自动暂停，可设置上下滚动等
注意:如果内容没有超过走马灯的宽度的话就不会滚动，如果长度不够，走马灯第一条数据显示的位置可能不对，最好让走马灯的条数多一点
demo地址：https://wxhboy.cn/vue-marquee-component/
源码地址：https://github.com/Wxh16144/vue-marquee-component?tab=readme-ov-file
下载依赖

npm install vue-marquee-component --save

全局引入

import Vue from 'vue';
import VueMarquee from 'vue-marquee-component';

Vue.use(VueMarquee);

代码导入

<vue-marquee
style="height:23px ;width: 100%;"
	:showProgress="false"
>
	<vue-marquee-slide v-for="i in 30" :key="i">
		<span> VUE-MARQUEE-COMPONENT </span>
	</vue-marquee-slide>
</vue-marquee>

滚动条-el-scrollbar

使用el自带的滚动条（在文档里没有），在源码中有
滚动条是在块中存在，悬浮到块里面后出现滚动条

默认
悬浮出现

代码：

<div>
	<el-scrollbar class="detailsBlocksContent">
		<p>{{ item.content }}</p>
	</el-scrollbar>
</div>

样式：不是很好控制要根据实际的情况去配置

.detailsBlocksContent {
			// width: 100%;
			max-width: 400px;
			height: 120px;
			// overflow-y: auto;
			padding: 15px;
			border: 1px solid rgba(229, 234, 229, 1);

			p {
				text-indent: 2em;
				font-family: Microsoft YaHei;
				font-weight: 400;
				font-size: 14px;
				color: #333333;
				line-height: 26px;
			}
		}
/deep/ .el-scrollbar__wrap {
	margin-right: -33px !important;
	padding-right: 15px;
	padding-bottom: 5px;
	overflow-x: auto;
	overflow-y: scroll !important;
}

vue深度监听

其中immediate类似于深度监听，在获取这个参数的时候为空的情况下也会监听，如果使用，请注意数据为空的时候可能dom还没加载出来，会导致报错

watch: {
	echartsData: {
		handler(val) {
			this.getEcharts(val);
		},
		// immediate: true,不能加深度监听  数据为空的时候也加载了
	},
},