将 vue 模态掩码设置为模糊答案

【问题标题】：setting vue modal mask to blur将 vue 模态掩码设置为模糊
【发布时间】：2018-05-14 20:19:55
【问题描述】：

我正在尝试使用 vue.js 在我的模态后面添加一个模糊面板，但问题是 modal-mask 有嵌套在其中的内容添加一个filter: blur() 属性，它会模糊一切。

目前我只能在背景中添加黑色。

jsfiddle: https://jsfiddle.net/EricTalv/2eed5qjo/26/

HTML

  <div id="content-container">
    <div id="wrapper">
      <ul id="flex-container">
        <li class="flex-item">
          <div id="list-area"></div>
        </li>
        <li class="flex-item">
          <div id="img-desc-container">
            <div class="image-area">
              <img src="http://dukes-lancaster.org/wp-content/uploads/2014/11/placeholder.jpg">
            </div>
            <div class="description-area"></div>
          </div>
        </li>
      </ul>
      <button class="modal-close" @click="$emit('close')">Close</button>
    </div>
  </div>

</div>

CSS

/* 模糊面板 */

#modal-mask {
   position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    display: table;
    transition: opacity .3s ease;
}

【问题讨论】：

标签： html css vue.js

【解决方案1】：

您需要将内容移动到单独的容器中并切换模糊类

https://jsfiddle.net/2eed5qjo/27/

<div :class="{'blur-content': showModal}">
  ... your content ...
</div>
<!-- use the modal component, pass in the prop -->
<modal v-if="showModal" @close="showModal = false">
</modal>

然后像这样添加一个css类

.blur-content{
  filter: blur(5px); 
}

【讨论】：