日常开发经验总结（2021-11-04）

淩亂°似流年 2023-10-02 13:58 29阅读 0赞

**目录**

1.Css父div半透明子div不透明

2 去掉input输入时的边框

3.IE11兼容性问题

4.首页tab栏切换

5.重要【bug】首页tab栏下划线

6.封装的视频播放组件

坑1：

坑2：

坑3：

坑4：

坑5

坑6：

Css修改饿了么的分页按钮颜色

--------------------

## 1.Css父div半透明子div不透明 ##

--------------------

> 不要把父div的opacity设为0.3，而要把background-color属性中rgba的a（alpha透明度）设为0.3

.父div{
     /* opacity: 0.3; */
      background-color: rgba(0, 0, 0, 0.3);
      }

--------------------

## 2 去掉input输入时的边框 ##

--------------------

outline:none

--------------------

## 3.IE11兼容性问题 ##

--------------------

> 在ie11打开发现页面乱了，但是控制台没有报错，此时可以先打包然后在运行项目，在ie中打开就好了。

--------------------

## 4.首页tab栏切换 ##

--------------------

**效果：**点击字体加粗且有一个下划线

> 但是，之前是点击会有一个歪歪扭扭的情况，原因是下划线用的伪类做的，他有大小会撑开盒子。
> 
> 解决：给每一个tab选项加伪类，然后其他的颜色透明，选中的变成红色
> 
> ps：项目中使用了饿了么组件库中的el-emnu组件，要修改它自带的样式可以根据f12

--------------------

## 5.重要【bug】首页tab栏下划线 ##

--------------------

**场景：**

> 点击首页footer中的某个标签，要实现跳转过去，这个功能确实做到了，但是跳过去后一直显示的是首页的下标。尝试过利用vuex（效果可以但一刷新下划线就去首页了）+本地存储（不好使），也能做，但是页面一直停留在底部，用了 document.documentElement.scrollTop = 0 ，想过利用路由，但是现在对nuxt.js框架不熟，最后选择用组件库

**解决：**

> 用的饿了么的组件el—menu组件（原理应该是用的路由）
> 
> ps:a标签和nuxt-link to: 的区别大概是a可以打开新页面，而他不会

**然后附上此功能的核心代码：**

:default-active="defaultActive" //饿了么的，作用是页面刷新还能有下划线

// 高亮显示哪个导航标签
        defaultActive () {
          console.log('this.$route.path', this.$route.matched[0].path)
          // 是否存在多级子路由, 没有值，则是首页/
          let routePath = this.$route.matched[0].path || '/'
    
          // 如果是动态路由，则只取前面一级路由 /question/:id 
          if (routePath.indexOf('/', 1) !== -1) {
            // 截图一级路由，/question
            routePath = routePath.substring(0, routePath.indexOf('/', 1))
          }
    
          // /article 转为 / 属性博客模块
          return routePath.indexOf('/article') !== -1 ? '/' : routePath
        }
      },

然后直接用a标签跳就完事了。

--------------------

## 6.封装的视频播放组件 ##

--------------------

**需求：**

> 点击页面上的一个标签，然后在具体的位置弹出一个固定的大小，要求可以随意拖动，改变大小，另外还要给视频设置样式比如加边框加上小X点击关闭功能

**实现：**利用原生js，将其加入到vue中（nuxt.js框架中）使用

--------------------

#### 坑1： ####

在nuxt框架中运行代码会报document或者window为定义的错误，可以使用全局注册：在插件文件夹下

import Vue from 'vue'
    import vidio from '~/components/common/vidio.vue'
    Vue.component('vidio', vidio)

然后在nuxt.config.js