背景:产品提了一个需求在一个详情页,一个form表单元素太多了,需要滚动到最下面才能点击提交按钮,很不方便。他的方案是,加一个滚动条,这样可以直接拉到最下面。
优化:
1、支持滚动条,这样方便快速往下拉
2、点击提交按钮可以悬浮起来,这样随时都能修改完提交,不用拉到最底下。接下来就简单案例实现一下
直接用vue中的组件来实现这个小需求。
<!--
用来写测试案例
-->
<template>
<!-- 滚动条 -->
<div class="white">
<el-form ref="formRef" :model="data" label-width="70px" size="mini"
id="selectForm"
>
<el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item><el-form-item label="标题:">
<el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
</el-form-item>
</el-form>
<div class="formSubmit">
<el-button type="primary" >提交</el-button>
</div>
</div>
</template>
<script>
export default {
name:'videoDirUploadList',
data(){
return{
data:{
album:{
}
},
}
},
created() {
},
methods:{
}
}
</script>
<style>
.white{
background: #fff;
width: 100%;
padding: 10px;
border-radius: 5px;
height: calc(100vh - 51px);
overflow-x: hidden;
overflow-y: scroll;
}
.white::-webkit-scrollbar {
width: 10px;
/*滚动条宽度*/
height: 5px
/*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
.white::-webkit-scrollbar-track {
/*滚动条的背景区域的内阴影*/
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0) inset;
/*滚动条的背景区域的圆角*/
opacity: 0;
/*滚动条的背景颜色*/
background-color: rgba(0, 1, 0, 0);
}
/*定义滑块 内阴影+圆角*/
.white::-webkit-scrollbar-thumb {
/*滚动条的内阴影*/
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3) inset;
/*滚动条的圆角*/
border-radius: 10px;
/*滚动条的背景颜色*/
background-color: #737871;
}
.formSubmit{
width: 100%;
padding: 20px;
text-align: right;
position: absolute;
bottom: 50px;
right: 20px;
}
</style>
最终实现的效果图如下。
右侧有下拉框、右下角固定住提交按钮即可
o
k
,本期结束,关注作者不迷路~持续更新好用的组件~
ok,本期结束,关注作者不迷路~持续更新好用的组件~
ok,本期结束,关注作者不迷路~持续更新好用的组件~