ds在使用vue得过程中往往有些功能UI库里是没有得，这里就需要我们自己写写样式来使得页面更好看.
css中hover这个属性就有一个过渡得效果，下面笔者需要实现得功能
这个图是笔者刷博客时候看到的，功能类似这样的，附上代码：
<div class="con-box">
<div class="box-left">
<div class="box" @click="handleOk(plainOptions.id)">
<img :src="require('@/assets/register_img/titles1.png')" alt="" />
</div>
</div>
<div class="box-right" @mouseover="changeIndex()" @mouseout="changeIndexBack()">
<div class="box" v-show="!flag">
<img :src="require('@/assets/register_img/titles2.png')" alt="" />
</div>
<div class="box-content" v-show="flag">
<div class="box-cent-title"></div>
<div class="box-title-center">
<a-form-model :model="form">
<a-checkbox-group v-model="form.checkboxIds">
<a-checkbox v-for="(item, int) in plainOptions.ordinaryEnterprise" :key="int" :value="item.id">{{
item.accountType
}}</a-checkbox>
</a-checkbox-group>
</a-form-model>
<a-button type="primary" @click="nextStep()">下一步 </a-button>
</div>
</div>
</div>
</div>export default {
data() {
return {
flag: false,
plainOptions: {
id: 8,
ordinaryEnterprise: [
{ id: 1, accountType: '专业仓储' },
{ id: 2, accountType: '专业仓储' },
{ id: 3, accountType: '专业仓储' },
{ id: 4, accountType: '专业仓储' },
{ id: 5, accountType: '专业仓储' },
],
},
form: {},
ids: null,
checkFlag: true,
}
},
created() {
this.getRegisterAccountType()
},
methods: {
// 划入
changeIndex() {
this.flag = true
},
// 划出
changeIndexBack() {
this.flag = false
}, .con-box {
display: flex;
justify-content: space-evenly;
width: 100%;
height: 353px;
margin-top: 24px;
& > :hover {
box-shadow: 7px 11px 37px 1px #007bed66;
}
.box-left {
width: 367px;
height: 276px;
text-align: center;
line-height: 276px;
border-radius: 4%;
.box {
width: 170px;
height: 170px;
line-height: 170px;
text-align: center;
margin: 30px auto;
border-radius: 100%;
background-color: #e3eefe;
img {
width: 140px;
height: 140px;
}
}
}?这里笔者用了两种方法来实现hover功能，一个是css本身的样式hover属性，另一个是vue提供的方法 mouseover：滑入事件、mouseout：划出事件，这里笔者给你们看一下我实现的效果图：
?
?
?这里就是滑入滑出所实现的效果
