博客前端笔记

• 手风琴效果
  在实现手风琴效果(也就是固定高度容器的动画显示和以隐藏的效果)时,有一个bug,我使用transition来控制高度,开始时,height:0,结束时height:auto transition: all 0.3s ease,发现过渡效果无法实现,因为transition只能监听到有固定的中间值的属性,而auto没有具体的值,所以不能实现过渡效果.
  解决方法: 使用max-height属性,因为max-height是根据内容来撑开高度的，只要max-height 大于正常高度就好了。

• button margin: 0 auto失效问题
  在给一个button设置margin: 0 auto时发现不起效果,查资料后发现,行内元素和行内块元素的margin: 0 auto是不生效的

• Vue全局Css的问题
  如果组件的css加了scoped标签那么写的css样式只能作用于当前组件内部.而不加 scoped或者在main.js引入的css,在webpack打包下最后都会整合成为index.html.而css也会打包到index.html中.未加scoped的css就会作用于整个index.html页面,达到所有组件都能引用的效果,形成全局css文件.

• 媒体查询的一个技巧
  如果一个元素在大屏和小屏样式不一样时,比如width: 大屏200px 小屏100px,可以为这个元素不一样的样式设置一个class,并在@media 大屏和小屏分别选中这个样式,进行更改.

• 有关事件冒泡

	<div class="mobile-box" @click="mobileContentShow">
      <i class="iconfont icon-leimupinleifenleileibie2"></i>
      <ul v-if="mobileContentShowFlag" @click.stop>
        <li class="mobile-box-item" @click="switchPage(0, 1)">首页</li>
        <li class="mobile-box-item" @click="switchPage(1, 1)">分类</li>
        <li class="mobile-box-item" @click="switchPage(2, 1)">标签</li>
        <li class="mobile-box-item" @click="switchPage(3, 1)">赞赏</li>
        <li class="mobile-box-item" @click="switchPage(4, 1)">About me</li>
      </ul>
    </div>

在写这段代码时触发了事件冒泡机制,在mobileContentShow方法中,是对flag取反,进行dom的显示和隐藏,switchPage这个函数是要进行dom的隐藏,而由于事件冒泡,调用switchPage隐藏dom后,又进行了mobileContentShow的调用,给flag取反,导致显示.
在vue中使用@click.stop取消冒泡,@click.prevent取消默认事件

• 记录 封装 图片查看组件的 思路

1. 在我的vue博客中,我想要实现一个图片放大查看的组件,因为需要在每一个页面中,点击图片时,都要打开此组件进行图片的展示,所以我需要在每一个页面中都加入此组件.
2. 由于上述所说,每一个页面都需要用此组件,所以这个组件加入到app.vue组件中,这样就保证了这个组件在每个页面中都能显示.
3. 但是因为组件被抽取到了app.vue之中,组件需要知道显示状态,所以数据要从页面或者子组件中传递到app.vue中告诉组件,这样就需要引入vuex.通过vuex传递组件的状态.
4. 现在数据需要通过vuex传递给app.vue然后在从app.vue传递给图片显示组件,所以图片显示组件可以直接从vuex获取需要的数据,不需要app.vue.
5. 同理,还有模态框提示组件/背景音乐<audio>这种所有页面都要用的组件都可以放到app.vue中,并且通过vuex传递数据.

• 抽取图片查看组件逻辑到mixin中
  因为点击图片时要打开图片查看组件,将点击的图片在图片查看组件中观看,逻辑相同,所有的图片点击都是这个方法,所以抽取到mixin中.

// html
<img
   src="../../../assets/img/avator.jpg"
   alt=""
   @click="showImgViewer($event)"/>
//逻辑  同一套逻辑,所以抽取到mixin中
methods: {
    showImgViewer(e) {
      this.$store.commit("showImageViewer", e.target.src);
    },
  }
  

• 浏览器的各种高度问题

	  document.body.clientHeight    网页可见区域高度（仅针对body，与$("body").height()的值相同）
      document.body.offsetHeight    网页可见区域高度（仅针对body，包括滚动条和边框，若滚动条和边框为0，则和clientHeight相等）
      window.innerHeight 可视窗口的高度（与$(window).height()的值相同） //IE9+、Chrome、Firefox、Opera 以及 Safari
      document.body.scrollHeight    网页正文全高（与$(document).height()的值相同）
      document.body.scrollTop       网页中被卷去的高度（当前页面顶部与整个网页定的距离）
      window.screen.heitgh          整个屏幕的高度
      window.screen.availHeight     屏幕可用工作区域的高度
      window.outerHeight            整个浏览器的高度

• 图片路径加载问题
  在vue中,需要加载本地图片的时候,如果图片的路径@/assets/xxx/xxx会导致无法识别@使得图片路径失效,导致图片无法加载出来. 而如果直接使用C:/xxx/xxx会导致项目在部署或者更换文件路径时导致图片路径错误找不到图片. 所以可以使用require('@/assets/xxx/xxx')进行加载

• 富文本编辑器中的图片预览实现

1. 在detail页面之中,需要对封面和文章中的图片实现点击放大预览效果,封面比较好实现,跟原来的方法是一样的,点击封面,将vuex中的flag设为true,把url设成封面的url就实现了.
2. 但是问题在于,文章的内容是动态从数据库获取的,文章之中有<img>标签,并把文章内容通过v-html插入到容器中,所以文章是动态的,无法直接通过监听click事件来预览图片.
3. 所以我们通过事件委托的方法来实现图片的预览功能,我们给文章的容器添加点击事件,由于事件冒泡机制,点击容器里面的dom相当于点击容器,所以容器内部的dom被点击,所以容器被点击时,如果e.target.nodeName === 'IMG说明点击的是图片,e.target就是点击的图片.点击图片就可以进行图片预览,

<div
  class="editor"
  v-html="artical.articalContent"
  @click="articalClick($event)"
></div>
articalClick(e) {
      console.log(e.target.nodeName);
      if (e.target.nodeName === "IMG") {
        this.showImageViewer(e.target.src);
      }
    },