Vue/React/前端 常用记录

[fangmd]

Vue 样式绑定

• 多个样式，三元运算符

<div v-if="msg.type === 6" :class="[msg.type === 1 ? 'message-text' : 'message-image', 'message-body']">

• 单个判断:

:class="{ active: page === item }"

• 数组写法

:class="['content-wrapper', showContent && 'content-wrapper-show']"

Vue 动态样式

函数返回样式

:style="lineWrapperStyle(item)"

const lineWrapperStyle = (item) => {
    const projectCnt = getProjectCnt(item)
    return {
        height: projectCnt === 0 ? '50px' : `${projectCnt * (lineHeight + 4) + 40}px`
    }
}

变量

:style="{ color: activeColor, fontSize: fontSize + 'px' }"

绑定对象

:style="styleObject"

[fangmd]

Vue v-for 就地复用

官方文档解释：当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。 这种方式只适用于列表渲染不依赖子组件状态，或临时 DOM 状态变化。

如何避免: 添加 key

[fangmd]

Vue 强制刷新

this.$forceUpdate()

使用场景：

1. 给数组数据内部元素添加新属性的时候

通过 key 强制刷新

<div :key="mKey">

mKey++

[fangmd]

点击其他地方关闭弹层

    //遮罩层，绑定关闭方法
    <div class="shade" v-show="submenu.show" @touchstart="closeSubmenu($event)"></div>
    //绿色块，zindex:1
   <div class="submenu" :style="submenu.style" v-show="submenu.show" ref="submenu" >
      <span v-for="item in submenu.list" >{{item}}</span>
    </div>

用一个遮罩层完美的解决了这个问题，并且不需要判断是否点击自身。遮罩层和绿色块不需要嵌套。 遮罩层，fixed定位，宽高100%。绿色块根据父元素position定位,设置一个z-index为1就好。

层级关系：绿色块>遮罩层>列表页面.

[fangmd]

Vue 位置问题

相对视图窗口：this.$refs.goodItem.$el.getBoundingClientRect().top

获取视窗大小

window.innerHeight

[fangmd]

Vue hooks 页面退出/刷新拦截

import { ref, onMounted, onUnmounted } from '@vue/composition-api'

/**
 * 页面刷新/退出拦截
 */
export const quitBlock = () => {
  const block = ref(false)

  const setBlock = value => {
    block.value = value
  }

  const beforeunload = e => {
    if (!block.value) {
      return
    }
    const confirmationMessage = '你确定离开此页面吗?'
    ;(e || window.event).returnValue = confirmationMessage
    return confirmationMessage
  }

  // lifecycle hooks
  onMounted(() => {
    window.addEventListener('beforeunload', beforeunload)
  })

  onUnmounted(() => {
    window.removeEventListener('beforeunload', beforeunload)
  })

  return {
    setBlock
  }
}

[fangmd]

Vue element ui showLoading hideLoading

import { Loading } from 'element-ui'

let loading = null

/**
 * 显示 loading
 */
export const showLoading = () => {
  if (loading) {
    loading.close()
  }
  loading = Loading.service({
    lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.2)'
  })
}

/**
 * 隐藏loading
 */
export const hideLoading = () => {
  loading.close()
}

[fangmd]

前端全局黑白

/* 全局黑白 */
html {
  filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -webkit-filter: grayscale(1);
}

[fangmd]

node-sass

[fangmd]

element table 隐藏垂直滚动条并且去掉 gutter 占位

    // 隐藏 gutter 占位 start
    ::v-deep .el-table__body-wrapper {
      &::-webkit-scrollbar {
        // 整个滚动条
        width: 0; // 纵向滚动条的宽度
        background: rgba(213, 215, 220, 0.3);
        border: none;
      }
      &::-webkit-scrollbar-track {
        // 滚动条轨道
        border: none;
      }
    }
    ::v-deep .el-table th.gutter {
      display: none;
      width: 0;
    }
    ::v-deep .el-table colgroup col[name='gutter'] {
      display: none;
      width: 0;
    }
    ::v-deep .el-table__body {
      width: 100% !important;
    }
    // 隐藏 gutter 占位 end

[fangmd]

ref 获取子元素高度，获取 solt 元素高度

获取子元素高度

contentWrapper.value.firstChild.clientHeight

修改 style:

contentWrapper.value.style.height