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

背景 大家在使用 v-if v-show 时有没有遇到过这样的情况，当我们 v-if = false 一个元素时，其余元素的布局会收到影响，举个例子： .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，如下所示 但是这样多了一层 html 嵌套，增加了复杂度，而且还可能会打乱我们一开始的布局。 我们也可以使用不影响布局的隐藏，比如 opacity、translateX(9999px)，但是官方没有给到这样的指令，所以我们只能使用动态 style 去改变，但是这样感觉不太优雅，所以这时候，我们可以自己实现一个显示隐藏的指令，原理就是改变 opacity 或 translateX(9999px)。 talk is cheap, show me the code vue-fake-hide 因为我们想让元素隐藏时仍然占有原来的空间，所以我们叫它假隐藏（手动滑稽）:D 我们期望这个指令的使用方式是 这里我们不对如何编写指令进行过多的解读，官方文档介绍的很详细。 我们的目的是根据 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) 来实现，所以我们可以把它也融合到我们的指令里去，我们期望这么使用 所以我们可以这么实现 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 } }

本文章由javascript技术分享原创和收集