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
plugins: [ { src: '@/plugins/vidio', ssr: false } ],
然后就可以在任意页面去使用<vidio>组件了。解决了报错的问题
坑2：
会报错getelementbyID报错 说是为null，这个的原因是获取元素的时机太快，需要等页面加载完毕后才行，实际中可以用$nextTick
坑3：
vue文件中,是vue+js构成的话，vue想操作dom用ref，写在组件上拿的是组件，写在标签上是拿到的是标签
坑4：
js中有一个监听点击事件，然后把一个div设置成display：none，我是采用的v-show+data定义变量+methods里定义方法
坑5
v-show和v-if不能乱用，用if就是怎么都操作不了show可以
坑6：
window.onload和$nextTick连用后果是视频在打开的时候不执行，必须刷新页面才正常，删除掉onload就好了
7.Css修改饿了么的分页按钮颜色
选中的按钮颜色改变，一直不生效，控制台可以改，但是文件里改不了。把scoped删掉就好了。
