When developing projects, we often encounter such a project (ERP) background management. There is a need to place the mouse on the left column to achieve an animation effect of widening the width!!!
Effect: It is mainly triggered by the mouse-in event of @mouseenter. Get the initial state set in the data to change. At this time, there will be an animation effect. When the content area on the right moves, a yes/no will appear This is mainly to play the role of a locked state. When the view rendering changes to no when clicking yes/no, it will be locked. Otherwise, it will be locked. After locking, the navigation bar will be fully displayed! ! !
Note: I have written the comment above, if you need it, you can read the comment to get the code!
1. This is <template></template>! ! !
<template>
<div class="home">
<div class="main">
<!-- left的导航栏和动画效果 -->
<ul class="left_main" :class="{ left_main_shou: !openStatus }" @mouseleave='changetow'>
<div style="position: fixed;top: 50px;left: 13%;" @click="changethree" :class="openStatusall?'el-icon-check':'el-icon-close'">{
{openTextname}}</div>
<h1 class="ones" @mouseenter='change'>{
{ openText }}</h1>
<li style="margin-top: 100px;width: 100px;height: 30px;display:block;" class="el-icon-platform-eleme">饿了吗</li>
<li style="margin-top: 5px;width: 100px;height: 30px;display:block;" class="el-icon-user-solid">客户统计</li>
<li style="margin-top: 5px;width: 100px;height: 30px;display:block;" class="el-icon-s-goods">购物天堂</li>
<li style="margin-top: 5px;width: 100px;height: 30px;display:block;" class="el-icon-picture">美食图鉴</li>
<li style="margin-top: 5px;width: 100px;height: 30px;display:block;" class="el-icon-medal-1">综合排名</li>
<li style="margin-top: 5px;width: 100px;height: 30px;display:block;" class="el-icon-s-data">数据统计</li>
<li style="margin-top: 5px;width: 100px;height: 30px;display:block;" class="el-icon-s-tools">系统设置</li>
</ul>
<!-- 这里是right边的主内容区 -->
<div class="right_main" :class="{ right_main_show: !openStatus }">
<!-- 这个是轮播图 -->
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="(item,index) in thinks" :key="index">
<img style="width: 100%;height: 100%;" class="medium" :src="item.url" alt="">
</el-carousel-item>
</el-carousel>
<!-- 这里是进度条 -->
<div class="all">
<el-progress :percentage="40" :format="formatss"></el-progress>
<el-progress :percentage="80" :format="formats"></el-progress>
<el-progress :percentage="100" :format="format"></el-progress>
<el-progress :percentage="120" :format="formatsss"></el-progress>
<el-progress :percentage="50" :format="formatssss"></el-progress>
</div>
<!-- 这里显示的是tab表格 -->
<div class="tab">
<el-table
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
>
<el-table-column
prop="date"
label="日期"
sortable
width="180">
</el-table-column>
<el-table-column
prop="name"
label="饮食种类"
sortable
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址"
:formatter="formatter">
</el-table-column>
<el-table-column
prop="price"
label="单价"
>
</el-table-column>
<el-table-column
prop="displacement"
label="热量"
>
</el-table-column>
<el-table-column
prop="holder"
label="购买人"
>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>2. This is the code in <script></script>! ! !
<script>
// @ is an alias to /src
export default {
name: "Home",
components: {},
data: function () {
return {
// 轮播图数据
thinks:[
{
url:require("../assets/food/baozi.png")
},
{
url:require('../assets/food/hulatang.png')
},
{
url:require('../assets/food/youtiao.png')
},
{
url:require('../assets/food/zaliangjhianbing.png')
},
{
url:require('../assets/nexttick/mobel.png')
},
{
url:require('../assets/nexttick/shopping.png')
},
{
url:require('../assets/nexttick/top.png')
}
],
// 动画效果状态存储
openText: "Touch me",
openTextname: "yes",
openStatus: false,
openStatusall:false,
// tab表格数据存放
tableData: [{
date: '2016-05-02',
name: '包子',
address: '北京市通州区次渠',
price:'10元',
displacement:'227卡/100g',
holder:'唐龙',
}, {
date: '2016-05-04',
name: '杂粮煎饼',
address: '上海市普陀区金沙江路 1517 弄',
price:'10-20元',
displacement:'812大卡',
holder:'凯狗',
}, {
date: '2016-05-01',
name: '油条',
address: '河南省邓州市',
price:'1元',
displacement:'386大卡',
holder:'良狗',
}, {
date: '2016-05-03',
name: '胡辣汤',
address: '河南省邓州市',
price:'5-10元',
displacement:'183大卡',
holder:'任我行',
}],
};
},
methods: {
// tab表格数据方法
formatter(row, column) {
return row.address;
},
// 进度条
format(percentage) {
return percentage === 100 ? `早餐包子${percentage}%的人吃` : `${percentage}%`;
},
formats(percentage) {
return percentage === 80 ? `晚餐炒菜${percentage}%的人吃` : `${percentage}%`;
},
formatss(percentage) {
return percentage === 40 ? `午餐面条${percentage}%的人吃` : `${percentage}%`;
},
formatsss(percentage) {
return percentage === 120 ? `晚餐烧烤${percentage}%的人吃` : `${percentage}%`;
},
formatssss(percentage) {
return percentage === 50 ? `午餐米饭${percentage}%的人吃` : `${percentage}%`;
},
change() {
this.openStatus = true;
if (this.openStatus) {
this.openText = "Touch me";
}
// else {
// this.openText = "打开";
// }
},
changetow() {
if(this.openStatusall==true){
this.openStatus = true;
console.log(this.openStatus,this.openStatusall);
}else if(this.openStatusall==false){
this.openStatus = false;
console.log(this.openStatus,this.openStatusall);
}
// else {
// this.openText = "打开";
// }
},
changethree(){
this.openStatusall=!this.openStatusall
if(this.openStatusall==true){
this.openTextname='no';
this.openStatus = true;
console.log(this.openStatus,this.openStatusall);
}else if(this.openStatusall==false){
this.openTextname='yes';
this.openStatus = false;
console.log(this.openStatus,this.openStatusall);
}
}
},
};
</script>3. This is the code in <style scoped></style>! ! !
<style scoped>
.main {
display: flex;
width: 100%;
height: 100vh;
}
.left_main {
border: solid 1px black;
width: 300px;
text-align: center;
background-color: white;
transition: width 1s;
-webkit-transition: width 1s; /* Safari */
}
.left_main li {
list-style: none;
}
.right_main {
width: calc(100% - 300px);
/* border: solid 1px rgb(116, 12, 235); */
background-color: honeydew;
box-shadow:5px 5px 10px gray inset;
transition: width 1s;
-webkit-transition: width 1s; /* Safari */
z-index:999;
}
.left_main_shou {
width: 100px;
}
.right_main_show {
width: calc(100% - 100px);
}
.ones{
position: fixed;
}
/* 轮播图的代码 */
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
/* 进度条样式 */
.all{
margin-top: 50px;
width: 30%;
height: 20%;
margin-left: 30%;
}
</style>