用vue封装一个poemCard组件

写这个组件的目的是碰巧我遇到一位写诗非常厉害的朋友， 我非常喜欢他的诗， 不知从什么时候开始， 我开始喜欢和他聊天， 和他聊天每次都学到新东西。于是我自己就用为他写了一个poemcard组件。

废话不多说， 我们先来看看效果：

接下来，我们来看看代码（组件代码）：

<script setup>
import { ref, onMounted} from 'vue'

const  openTab = (evt, tab) => {
	var i, tabcontent, tablinks;
	tabcontent = document.getElementsByClassName("content__inner");
	for (i = 0; i < tabcontent.length; i++) {
		tabcontent[i].style.display = "none";
	}
	tablinks = document.getElementsByClassName("tab");
	for (i = 0; i < tablinks.length; i++) {
		tablinks[i].className = tablinks[i].className.replace(" active", "");
	}
	document.getElementById(tab).style.display = "block";
	evt.currentTarget.className += " active";
}

//Horizontal scroll for the tabs on mousewheel. If tabs are longer than the content section, there's a scroll bar but it's hidden to retain the design.
// if (window.innerWidth > 800) {
// 	const scrollContainer = document.querySelector(".tabs");

// 	scrollContainer.addEventListener("wheel", (evt) => {
// 		evt.preventDefault();
// 		scrollContainer.scrollLeft += evt.deltaY;
// 	});
// }
const scrollContainer = ref(null);

onMounted(() => {
    const link1 = document.createElement('link');
      link1.rel = 'preconnect';
      link1.href = 'https://fonts.googleapis.com';
      document.head.appendChild(link1);

      const link2 = document.createElement('link');
      link2.rel = 'preconnect';
      link2.href = 'https://fonts.gstatic.com';
      link2.setAttribute('crossorigin', '');
      document.head.appendChild(link2);

      const link3 = document.createElement('link');
      link3.href = 'https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Yomogi&display=swap';
      link3.rel = 'stylesheet';
      document.head.appendChild(link3);

      const link4 = document.createElement('link');
      link4.rel = 'stylesheet';
      link4.href = 'https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css';
      document.head.appendChild(link4);

      const link5 = document.createElement('link');
      link5.rel = 'stylesheet';
      link5.href = './style.css';
      document.head.appendChild(link5);
    if (window.innerWidth > 800) {
    scrollContainer.value.addEventListener('wheel', (evt) => {
        evt.preventDefault();
        scrollContainer.value.scrollLeft += evt.deltaY;
    });
    }
});

</script>

<template>
 <input class="variation" id="solid" type="radio" value="1" name="border" checked="checked"/>
<label for="solid"><span class="circle"></span><span>默认</span></label>
<input class="variation" id="shadow" type="radio" value="2" name="border"/>
<label for="shadow"> <span class="circle"></span><span>更换主题</span></label>
<div class="folder">
  <div class="tabs">
    <button class="tab active" @click="openTab(event, 'tab-1')">
      <div><span>诗词</span></div>
    </button>
    <button class="tab" @click="openTab(event, 'tab-2')">
      <div><span>对联</span></div>
    </button>
    <button class="tab" @click="openTab(event, 'tab-3')">
      <div><span>诗歌</span></div>
    </button>
    <button class="tab" @click="openTab(event, 'tab-4')">
      <div><span>更多</span></div>
    </button>
  </div>
  <div class="content">
    <div class="content__inner" id="tab-1">
      <div class="page">
        <p>分享几句朋友写的诗：</p>
        <p>你是光影间的一处声浪，逆光的落点捎带一场谎</p>
        <p>就是一个人站在逆光的地方，看不清长什么样，人们好奇就会去猜测（声浪），我们目光看过去的时候就会放在人的脸或者身上（落点）  ，然后我们想象她到底长什么样子，我们就希望长这样，是靠我们想象的不是真的长这样（谎）</p>
        <p>当然其中的你 是我写的想象的对象</p>
      </div>
    </div>
    <div class="content__inner" id="tab-2">
      <div class="page">
        <p>I love cheese, especially the big cheese gouda. Monterey jack red leicester roquefort cheese and wine fromage frais smelly cheese melted cheese dolcelatte. Fromage smelly cheese manchego paneer cheese and wine danish fontina macaroni cheese red leicester. </p>
        <p>Stilton fondue queso emmental when the cheese comes out everybody's happy croque monsieur queso paneer. Say cheese pecorino swiss boursin halloumi cottage cheese taleggio boursin. </p>
      </div>
    </div>
    <div class="content__inner" id="tab-3">
      <div class="page">
        <p>春风折好‮我了‬给你写的信，留给每个路过‮人的‬一首诗</p>
        <p>夏日偷看了我‮你给‬写的信，蓝‮白天‬云日落‮时‬一眼深情</p>
        <p>落叶弄丢‮我了‬给你‮的写‬信，惆怅‮努在‬力配合我的足音</p>
        <p>晴雪听说了‮给我‬你写的信，以身犯险有关‮你于‬的细节</p>
        
        
      </div>
    </div>
    <div class="content__inner" id="tab-4">
      <div class="page">
        <p>Miaow then turn around and show you my bum flee in terror at cucumber discovered on floor. Terrorize the hundred-and-twenty-pound rottweiler and steal his bed, not sorry sleep on dog bed, force dog to sleep on floor and grab pompom in mouth and put in water dish cats are fats i like to pets them they like to meow back present belly, scratch hand when stroked. </p>
        <p>Bleghbleghvomit my furball really tie the room together love asdflkjaertvlkjasntvkjn (sits on keyboard) but bawl under human beds.</p>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
* {
	box-sizing: border-box;
}

:root {
	--background: #f9d877;
}

body {
	padding: 4rem 2rem 2rem;
	min-height: 100vh;
	background: linear-gradient(to bottom right, rgb(173, 83, 137), rgb(60, 16, 83));
	font-size: 1.2rem;
	font-family: "Patrick Hand";
	display: grid;
	grid: 2rem auto / repeat(2, 50%);
	grid-column-gap: 2rem;
	justify-content: center;
	width: 100%;
	.folder {
		grid-column: 1 / -1;
	}
}

p {
	margin-bottom: 1rem;
}

.tab {
	font-family: "Patrick Hand";
	text-transform: uppercase;
	line-height: 0.8;
	display: inline-block;
	margin-left: -35px;
	filter: drop-shadow(0px -3px 2px rgba(0, 0, 0, 0.05));
	border: none;
	border-radius: 6px 6px 0 0;
	position: relative;
	margin-right: 4rem;
	background: var(--background);
	white-space: nowrap;
	cursor: pointer;
	background: var(--background);
	&:focus {
		outline: none;
		span {
			border-bottom: 2px solid;
			border-radius: 0;
		}
	}
	&:first-of-type {
		margin-left: 30px;
	}
	div {
		background: var(--background);
		padding: 6px 0;
		position: relative;
		z-index: 10;
	}
	span {
		display: inline-block;
		border: 2px solid transparent;
		padding: 6px 15px 6px;
		border-radius: 5px;
		z-index: 5;
		position: relative;
		font-size: 140%;
		color: #fff;
		min-width: 6rem;
	}
	&:before,
	&:after {
		content: "";
		height: 100%;
		position: absolute;
		background: var(--background);
		border-radius: 8px 8px 0 0;
		width: 30px;
		top: 0;
	}
	&:before {
		right: -16px;
		transform: skew(25deg);
		border-radius: 0 8px 0 0;
	}
	&:after {
		transform: skew(-25deg);
		left: -16px;
		border-radius: 8px 0 0 0;
	}
	&.active {
		z-index: 50;
		position: relative;
		span {
			background: white;
			box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
			border-radius: 5px;
			color: black;
		}
	}
}

.content {
	border-radius: 10px;
	position: relative;
	width: 100%;
	#tab-1 {
		display: block;
	}
	&:before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		border-radius: inherit;
	}
	&__inner {
		font-family: "Yomogi", sans-serif;
		display: none;
		background: var(--background);
		border-radius: inherit;
		padding: 1rem;
		filter: drop-shadow(0px -2px 2px rgba(0, 0, 0, 0.1));
		z-index: 5;
	}
}

.folder {
	margin: 1rem auto;
	max-width: 50rem;
	width: 100%;
	scrollbar-height: none; /* Firefox */
	-ms-overflow-style: none; /* IE 10+ */
	::-webkit-scrollbar {
		background: transparent; /* Chrome/Safari/Webkit */
		display: none;
	}
}

.page {
	padding: 1.5rem;
	border-radius: 2px;
	min-height: 20rem;
	line-height: 160%;
	background-color: #f9f9f9;
	filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.15));
	background-image: linear-gradient(#e4e4e4 1px, transparent 1px);
	background-size: 8% 8%, 2px 2px;
}

.tabs {
	padding: 2rem 0 0 0;
	width: 100%;
	margin: 0 0.5rem;
	overflow-x: auto;
	width: calc(100% - 1rem);
	white-space: nowrap;
	@media(min-width: 50rem) {
		margin: 0 2rem;
		width: calc(100% - 4rem);
	}
}

#solid:checked ~ .folder {
	.tab,
	.content__inner {
		&:nth-of-type(1) {
			--background: #af4d98;
		}
		&:nth-of-type(2) {
			--background: #d66ba0;
		}
		&:nth-of-type(3) {
			--background: #e5a9a9;
		}
		&:nth-of-type(4) {
			--background: #6cb6bb;
		}
	}
	.tab {
		border: 2px solid;
		border-width: 2px 0 0;
		&:before,
		&:after {
			top: -2px;
			border-top: 2px solid;
		}
		&:before {
			border-right: 2px solid;
		}
		&:after {
			border-left: 2px solid;
		}
		&.active {
			span {
				border: 2px solid;
			}
			&:focus span {
				outline: 1px solid rgba(255, 255, 255, 0.7);
			}
		}
		&:not(.active) {
			border-bottom: 2px solid;
			&:before,
			&:after {
				box-shadow: 0 1.5px 0 black;
			}
		}
	}
	.content {
		top: -2px;
		left: -2px;
		&__inner {
			box-shadow: 0 0 0 1.5px black;
		}
	}
	.page {
		border: 2px solid;
	}
}

#shadow:checked ~ .folder {
	.tab {
		--background: linear-gradient(to bottom, #fee9a5, #f9d877);
		span {
			color: black;
		}
		&:focus span {
			border-bottom-color: black;
		}
		&.active:focus span {
			border-color: black;
		}
	}
	.content__inner {
		--background: linear-gradient(to bottom, #f9d877, #fee9a5);
	}
}


/* radio buttons styling */
input.variation {
	display: none;
	+ label {
		display: flex;
		column-gap: 10px;
		align-items: center;
		cursor: pointer;
		color: white;
		.circle {
			width: 25px;
			height: 25px;
			border-radius: 50%;
			border: 3px solid white;
		}
	}
	&:checked + label .circle {
		background: white;
		box-shadow: inset 0 0 0 3px #3c1053;
	}
	&:nth-of-type(1) + label {
		justify-self: flex-end;
	}
}
</style>

我们来看看package.json中的devDependencies配置项：

"devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "sass": "^1.63.6",
    "sass-loader": "^13.3.2",
    "vite": "^4.4.0"
 }

由于我的项目平时vue3 + vite 创建的， vue3中项目已经不需要再使用node-sass， 我的样式部分也是用sass写的， 这样确实比之前方便的多！

喜欢就点个赞再走叭~