本节讲解Vue3页面组件化开发的原因和操作
1.原因
1.业务需求
2.页面展示
根据菜单选项展示不同的页面布局和页面信息
3.页面源码
<template>
<div class="box">
<div class="UserInfo">
<div class="UserImg">
<img src="../../assets/image/avator.jpg" alt="">
</div>
<div class="userTop">
<div class="uTop">
<div class="userName">
{{ User.userName }}
</div>
<!-- <div class="infoManage">
<el-button></el-button>
</div> -->
</div>
<div class="uMiddle">
<span>{{ User.totalVisits }}</span>
<p>总访问量 | </p>
<span>{{ User.original }}</span>
<p>原创 | </p>
<span>{{ User.ranking }}</span>
<p>排名 | </p>
<span>{{ User.fans }}</span>
<p>粉丝  </p>
</div>
<div class="uBottom">
<span>IP属地：{{ User.IP }}</span>
<span>加入时间：{{ User.joinTime }}</span>
<span>博客简介：{{ User.blogInfo }}</span>
</div>
</div>
</div>
<div class="InfoMsg">
<div class="leftMenu">
</div>
<div class="content">
<div class="header">
<el-tabs v-model="contentTabs" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="最近" name="first"></el-tab-pane>
<el-tab-pane label="文章" name="second"></el-tab-pane>
<el-tab-pane label="资源" name="third"></el-tab-pane>
<el-tab-pane label="问答" name="fourth"></el-tab-pane>
<el-tab-pane label="帖子" name="fifth"></el-tab-pane>
<el-tab-pane label="视频" name="sixth"></el-tab-pane>
<el-tab-pane label="关注/订阅/互动" name="seventh"></el-tab-pane>
<el-tab-pane label="收藏" name="eighth"></el-tab-pane>
</el-tabs>
<el-form v-model="queryParams">
<el-input type="text" v-model="queryParams.title" placeholder="搜TA的内容" />
</el-form>
</div>
<div class="body">
<ul v-show="this.contentTabs == 'first'">
<li v-for="item in items" :key="item">
<div class="ibox">
<div class="img_left">
<img src="../../assets/image/avator.jpg" alt="">
</div>
<div class="content_right">
<div class="title">{{ item.title }}</div>
<div class="info">
<p>{{ item.info }}</p>
</div>
<div class="footer">
<el-tag :type="item.tags == 1 ? 'danger' : 'success'">{{ item.tags == 1
? "原创" : "转载" }}</el-tag>
<span>发布时间:{{ item.publishTime }}</span>
<span>{{ item.read }} 阅读</span>
<span>{{ item.like }} 点赞</span>
<span>{{ item.comment }} 评论</span>
<span>{{ item.collection }} 收藏</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
data() {
return {
items: [
{
title: "前端Vue监听路由变化， 点击页面内按钮跳转菜单更改导航菜单选中状态",
info: "这里产生这个现象的原因和选中状态大致相同，那就是因为页面重新加载后之前的选中的CSS样式并没有清除，那么我们是不是在生命周期-创建的过程中把CSS样式清除就可以了呢？带着这个问题我查阅了一些资料并翻看了ElementPlus中我使用的组件el-menu、el-menu-item的CSS源码，发现想要清除CSS样式并不容易，甚至是无从下手，但是我们换个思路，既然无法在生命周期-创建中清除他的选中样式，那么我们直接全部清除他的选中样式不就解决问题了吗，但是我",
tags: 1,
publishTime: "2021-01-01",
read: 100,
like: 100,
comment: 100,
collection: 100
},
{
title: "前端Vue监听路由变化， 点击页面内按钮跳转菜单更改导航菜单选中状态",
info: "这里产生这个现象的原因和选中状态大致相同，那就是因为页面重新加载后之前的选中的CSS样式并没有清除，那么我们是不是在生命周期-创建的过程中把CSS样式清除就可以了呢？带着这个问题我查阅了一些资料并翻看了ElementPlus中我使用的组件el-menu、el-menu-item的CSS源码，发现想要清除CSS样式并不容易，甚至是无从下手，但是我们换个思路，既然无法在生命周期-创建中清除他的选中样式，那么我们直接全部清除他的选中样式不就解决问题了吗，但是我",
tags: 0,
publishTime: "2021-01-01",
read: 100,
like: 100,
comment: 100,
collection: 100
}
],
contentTabs: ref("first"),
queryParams: {
title: ""
},
User: {
userName: "法外狂徒张三",
totalVisits: 18307,
original: 543,
ranking: 2343,
fans: 2983431,
IP: "北京市",
joinTime: "2021-01-01",
blogInfo: "我是一个程序员"
}
}
},
methods: {
handleClick(tab, event) {
console.log(tab.props.name);
this.contentTabs = tab.props.name;
}
}
}
</script>
<style>
.box .InfoMsg .content .el-tabs__item {
font-size: 17px !important;
}
</style>
<style lang="scss" scoped>
.box {
width: 100%;
height: auto;
margin-top: 50px;
.UserInfo {
width: 100%;
height: 138px;
display: flex;
flex-direction: row;
border-bottom: 10px solid black;
.UserImg {
display: flex;
width: 118px;
height: 118px;
margin: -40px 0 0 48px;
border-radius: 50%;
border: 5px solid rgb(240, 240, 242);
img {
min-height: 118px;
min-width: 118px;
border-radius: 100%;
}
}
.userTop {
width: 90%;
height: 140px;
margin: 0 auto;
display: flex;
flex-direction: column;
overflow: hidden;
.uTop {
width: 100%;
height: 40%;
.userName {
width: 30%;
height: 100%;
font-size: 30px;
display: flex;
justify-content: flex-start;
align-items: flex-end;
padding-left: 20px;
}
}
.uMiddle,
.uBottom {
width: 100%;
height: 25%;
display: flex;
p {
margin: 10px 0 10px 10px;
font-size: 14px;
}
span {
width: auto;
display: block;
padding: 0 0 0 10px;
font-size: 25px;
// font-weight: bold;
}
span:nth-child(1) {
margin-left: 12px;
}
}
.uBottom {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
}
.uBottom span {
font-size: 14px;
margin-right: 100px;
}
}
}
.InfoMsg {
width: 100%;
min-height: calc(100vh - 160px);
display: flex;
overflow: hidden;
.leftMenu {
min-width: 300px;
max-height: 648px;
}
.content {
width: auto;
height: auto;
border-left: 10px solid black;
.header {
width: 100%;
display: flex;
padding: 0 15px 0 25px;
.demo-tabs {
width: 700px;
height: 100%;
padding-left: 20px;
::v-deep .el-tabs__nav-wrap::after {
background-color: white;
}
}
.el-form {
width: 300px;
display: flex;
justify-content: flex-end;
align-items: flex-start;
padding: 5px 30px 0 0;
.el-input {
font-size: 17px;
width: 170px;
}
}
}
.body {
width: 100%;
max-height: 900px;
overflow-y: scroll;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
width: 90%;
margin: 0 auto;
height: 150px;
padding: 10px 0;
border-bottom: 1px solid darkgray;
cursor: pointer;
.ibox {
width: 100%;
height: 100%;
display: flex;
align-items: center;
.img_left {
width: 180px;
height: 120px;
margin: 0 10px 0 20px;
img {
width: 100%;
height: 100%;
}
}
.content_right {
width: calc(100% - 230px);
height: 120px;
display: flex;
flex-direction: column;
align-items: flex-start;
.title,
.info,
.footer {
width: 100%;
}
.title {
height: 30px;
font-size: 22px;
font-weight: bold;
text-align: left;
overflow: hidden;
}
.info {
height: calc(100% - 65px); //90字后省略
overflow: hidden;
white-space: normal;
p {
width: 100%;
height: 100%;
margin: 10px 0 10px 0;
text-indent: 2em;
}
}
.footer {
height: 28px;
display: flex;
flex-direction: row;
align-items: flex-end;
span {
margin-left: 5px;
margin-right: 25px;
font-size: 15px;
}
}
}
}
}
}
}
.body::-webkit-scrollbar {
width: 1px;
height: 1px;
}
.body::-webkit-scrollbar-track {
border-radius: 0;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
background: black;
}
.body::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(27, 190, 208, 0.7);
background: white;
}
}
}
}
</style>源码中div.body下的ul仅用于展示了第一个菜单"最近"页面的信息，仅一个页面布局用了24行，css样式86行，一个菜单子页面110行，8个子菜单页面写完加上主体页面将近1000行代码，无论后期对页面的维护还是二次开发，这么大的代码量对程序员都是一个很大的挑战，故对于这种长代码的页面我们要采用以功能为单位进行划分，以组件为单位进行开发的思想。
2.操作
操作1
1.提取子页面相关的CSS样式和代码放入一个新的vue文件中
<style lang="scss" scoped>
ul {
list-style: none;
margin: 0;
padding: 0;
li {
width: 90%;
margin: 0 auto;
height: 150px;
padding: 10px 0;
border-bottom: 1px solid darkgray;
cursor: pointer;
.ibox {
width: 100%;
height: 100%;
display: flex;
align-items: center;
.img_left {
width: 180px;
height: 120px;
margin: 0 10px 0 20px;
img {
width: 100%;
height: 100%;
}
}
.content_right {
width: calc(100% - 230px);
height: 120px;
display: flex;
flex-direction: column;
align-items: flex-start;
.title,
.info,
.footer {
width: 100%;
}
.title {
height: 30px;
font-size: 22px;
font-weight: bold;
text-align: left;
overflow: hidden;
}
.info {
height: calc(100% - 65px); //90字后省略
overflow: hidden;
white-space: normal;
p {
width: 100%;
height: 100%;
margin: 10px 0 10px 0;
text-indent: 2em;
}
}
.footer {
height: 28px;
display: flex;
flex-direction: row;
align-items: flex-end;
span {
margin-left: 5px;
margin-right: 25px;
font-size: 15px;
}
}
}
}
}
}
</style>操作2
操作3
父组件引入
操作4
页面效果
无异
扫一扫
1702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
