成都网站制作维护,网站图片的像素,河北做网站电话,百度登录页面背景#xff1a;产品提了一个需求在一个详情页#xff0c;一个form表单元素太多了#xff0c;需要滚动到最下面才能点击提交按钮#xff0c;很不方便。他的方案是#xff0c;加一个滚动条#xff0c;这样可以直接拉到最下面。 优化#xff1a;1、支持滚动条#xff0c;… 背景产品提了一个需求在一个详情页一个form表单元素太多了需要滚动到最下面才能点击提交按钮很不方便。他的方案是加一个滚动条这样可以直接拉到最下面。 优化1、支持滚动条这样方便快速往下拉2、点击提交按钮可以悬浮起来这样随时都能修改完提交不用拉到最底下。接下来就简单案例实现一下 直接用vue中的组件来实现这个小需求。
!--
用来写测试案例
--
template
!-- 滚动条 --div classwhiteel-form refformRef :modeldata label-width70px sizeminiidselectFormel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-itemel-form-item label标题:el-input v-modeldata.album.title placeholder请输入标题 /el-input/el-form-item/el-formdiv classformSubmitel-button typeprimary 提交/el-button/div/div/templatescript
export default {name:videoDirUploadList,data(){return{data:{album:{}},}},created() {},methods:{}}
/scriptstyle
.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本期结束关注作者不迷路持续更新好用的组件
