背景
大家在使用 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
}
}
网友评论