v-if v-show 的替代品——vue-fake-hide

背景

大家在使用 v-if v-show 时有没有遇到过这样的情况，当我们 v-if = false 一个元素时，其余元素的布局会收到影响，举个例子：

<div class="container">
  <div class="blue"></div>
  <div class="red"></div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}
.blue {
  width: 100px;
  height: 100px;
  background: blue;
}
.red {
  width: 100px;
  height: 100px;
  background: red;
}

这段代码目前是这样显示的，蓝色的在左边，红色的在右边

image.png

但是当我让蓝色的 div v-if = false 时，如下图所示

image.png

红色的 div 就跑到了左边，这显然影响到了我们的布局，我们初衷是无论蓝色块如何显示隐藏，红色块永远保持原来的位置。那如何解决这个问题呢，我们可以在蓝色 div 外部再套一个 div，隐藏时，只隐藏内部 div，如下所示

<div class="container">
  <div>
    <div class="blue" v-if="false"></div>
  </div>
  <div class="red"></div>
</div>

但是这样多了一层 html 嵌套，增加了复杂度，而且还可能会打乱我们一开始的布局。

我们也可以使用不影响布局的隐藏，比如 opacity、translateX(9999px)，但是官方没有给到这样的指令，所以我们只能使用动态 style 去改变，但是这样感觉不太优雅，所以这时候，我们可以自己实现一个显示隐藏的指令，原理就是改变 opacity 或 translateX(9999px)。

talk is cheap, show me the code

vue-fake-hide

因为我们想让元素隐藏时仍然占有原来的空间，所以我们叫它假隐藏（手动滑稽）:D

我们期望这个指令的使用方式是

<!-- 隐藏 -->
<div v-fake-hide="data"></div>

<!-- 显示 -->
<div v-fake-hide="data"></div>

这里我们不对如何编写指令进行过多的解读，官方文档介绍的很详细。

我们的目的是根据 data 的改变去动态的改变元素的 opacity。当 data 改变时，一定会触发 vue 组件的更新，这时候就会触发指令的 update 跟 componentUpdated 钩子函数。

update 是 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。可以把它理解为 beforeUpdate

componentUpdated 是 VNode 及其子 VNode 全部更新后调用。

这里我们选择用 compnentUpdated。也就是当 componentUpdated 触发时，我们判断 date 的值，从而控制元素的显示隐藏。

但是这里要注意的是当钩子第一次加载的时候并不会触发 componentUpdated，但是第一次加载的我们却需要判断元素是否隐藏，否则初始状态跟 data 无关。所以这时我们需要 bind 钩子。具体代码如下

const fakeHide = {
  bind: hide,
  componentUpdated: hide
}

function hide(el, { value }) {
  if (value) {
    el.style.opacity = 0;
  } else {
    el.style.opacity = 1;
  }
}

所以废话一堆，代码就这么简单。。。

到这就结束了吗？当然没有结束，我们还有很多可以优化的地方，没有问题我们也要创造问题，we are bug maker :)

上面我们有提到可以通过 translateX(9999px) 来实现，所以我们可以把它也融合到我们的指令里去，我们期望这么使用

<!-- 默认使用 opacity 隐藏 -->
<div v-fake-hide="true"></div>

<!-- 使用 opacity 隐藏 -->
<div v-fake-hide.opacity="true"></div>

<!-- 使用 translate 隐藏 -->
<div v-fake-hide.translate="true"></div>

所以我们可以这么实现

export const fakeHideV2 = {
  bind: hide,
  componentUpdated: hide
}

function hide(el, { value, oldValue, modifiers }) {
  if (value === oldValue) {
    return;
  }
  modifiers.opacity && opacityHide(el, value);
  modifiers.translate && translateHide(el, value);
}

function opacityHide(el, wetherHide) {
  if (wetherHide) {
    el.style.opacity = 0;
  } else {
    el.style.opacity = 1;
  }
}

function translateHide(el, wetherHide) {
  if (wetherHide) {
    el.style.transform = 'translateX(9999999px)';
  } else {
    el.style.transform = 'none';
  }
}

这里的 modifiers 就是指令的修饰符对象。我们通过使用 WeakMap 保存 dom 元素与 opacity 的映射

oh year 代码已经高达 30 行，Niiiiiice

但是 we are bug maker，这里仍然有 bug。

如果元素原始的 opacity 是 0.5，但是经过我们的操作之后变成了 1，不合适呀，transform 仍然存在这样的问题，how do you do

我们可以在元素隐藏之前记录一下原始的 opacity，元素显示的时候再拿出来，所以最终代码如下

const fakeHideV2 = {
  bind: hide,
  componentUpdated: hide
}

const opacityMap = new WeakMap();
const translateMap = new WeakMap();

function hide(el, { value, oldValue, modifiers }) {
  if (value === oldValue) {
    return;
  }
  modifiers.opacity && opacityHide(el, value);
  modifiers.translate && translateHide(el, value);
}

function opacityHide(el, wetherHide) {
  if (wetherHide) {
    const opacity = window.getComputedStyle(el).getPropertyValue('opacity');
    opacityMap.set(el, opacity)
    el.style.opacity = 0;
  } else {
    el.style.opacity = opacityMap.get(el);
  }
}

function translateHide(el, wetherHide) {
  if (wetherHide) {
    const translate = window.getComputedStyle(el).getPropertyValue('translate');
    translateMap.set(el, translate);
    el.style.transform = 'translateX(9999999px)';
  } else {
    el.style.transform = translateMap.get(el);
  }
}

YES 经过我们的又一顿操作，我们的代码已经。。。还是 30 多行 :)

这波简约又简单的假隐藏你学废了吗

虽然很简单，还是想厚着脸求个赞

代码已上传至 https://github.com/SupermanWY/vue-fake-hide

也可以直接通过 npm 在项目中使用

cnpm i vue-fake-hide -S

// 全局引入
import fakeHide from 'vue-fake-hide'
Vue.use(fakeHide)

// 组件内单独注册
import { fakeHideV2 } from 'vue-fake-hide'
export default {
  dirctives: {
    fakeHide: fakeHideV2
  }
}