解决页面跳转后滚动条保持在底部解决单选框弹窗位置错位解决时间选择器弹窗错位

bliss小宝

已于 2022-10-11 09:14:20 修改

阅读量489

点赞数 1

分类专栏：笔记 vue vscode 文章标签： javascript 前端 html

于 2022-10-10 17:15:09 首次发布

本文链接：https://blog.csdn.net/weixin_50001396/article/details/127248479

版权

笔记同时被 3 个专栏收录

133 篇文章 7 订阅

订阅专栏

vue

35 篇文章 1 订阅

订阅专栏

vscode

11 篇文章 0 订阅

订阅专栏

解决页面跳转后滚动条保持在底部

在这里插入图片描述

解决单选框弹窗位置错位

解决时间选择器弹窗错位

document.body.scrollTop = document.documentElement.scrollTop = 0

在这里插入图片描述

一共三种情况

为空

用户上传的svg 也就是以http开头的图标

本身存在的svg 也就是像el-icon-plus一样的样式

<el-upload
  class="upload"
  :action="fileurl"
  :show-file-list="false"
  :on-success="handleAvatarSucceis"
  :before-upload="beforeAvatarUpload"
  accept=".svg"
  :on-error="fileerror"
>
  <img
  v-if="ishttpsvg"
    :src="menu2.icon"
    class="upimg"
    alt=""
  />
  <i
    v-else-if="menu2.icon !== ''"
    slot="default"
    class="icon iconfont"
    :class="menu2.icon"
  ></i>
  <i
    v-else
    slot="default"
    class="el-icon-plus avatar-uploader-icon"
  ></i>
  
</el-upload>

ishttpsvg 是用来判断他是用户上传的还是本身就有的icon图标

if(item.icon.substring(0,4)=='http'){
        this.ishttpsvg = true
      }

我判断了前四位是否是http开头也就是区分了用户上传和本身的icon图

当 menu2.icon 为空时显示默认的加号图标

如果不为空则显示icon图

css 样式

.Icon{
            width: 100%
            display: flex  
            .Iconname{
              width: 90px;
              margin: 17px 0;
              text-align: end;
              padding-right: 13px
            }
            >>>.el-upload{
              width: 40px;
              border: 1px dashed #666;
              height: 40px;
              margin-top: 15px;
              
              .upimg{
                width: 30px
                margin-top: 5px;
              }
            }
            >>>.avatar-uploader-icon{
              margin: 12px auto
              &:before{
                color: #999  
              }
            }
            
          }