点击搜索框，如何使整个屏幕变暗，而搜索框的亮度保持不变

你可以使用Vue的样式绑定来实现这个效果，具体方法如下：

1. 在Vue组件中，设置一个data属性，用于判断是否需要显示遮罩层：

data() {
  return {
    showMask: false
  }
}

2. 在模板中，使用样式绑定来控制遮罩层的显示与隐藏：

<div 
  class="mask" 
  :style="{ display: showMask ? 'block' : 'none' }"
></div>
<div class="search-box">
  <input type="text" @focus="showMask = true" @blur="showMask = false">
</div>

3. 在样式表中，设置遮罩层和搜索框的样式：

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.search-box {
  position: relative;
  z-index: 1000;
}

.search-box input {
  width: 200px;
  height: 30px;
  padding: 5px;
  font-size: 16px;
  background-color: #fff;
  border: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

4. 当搜索框获得焦点时，将showMask属性设置为true，失去焦点时设置为false即可。

这样就可以实现点击搜索框时，整个屏幕变暗，而搜索框的亮度保持不变的效果。