<think>根据用户需求，我们需要实现一个多选
下拉框，其中包含复选
框选中状态的高亮显示。同时，查询功能需要精准匹配（国家代码或国家名称的完全匹配）。在之前的实现中，我们已经通过
自定义样式和状态管理实现了选中项的高亮显示。现在，用户特别关注查询结果中复选
框的选中状态，我们需要确保：
1. 在查询结果中，已选中的项要显示为选中状态（复选
框被勾选）。
2. 同时，通过样式（背景色、边
框等）高亮显示已选中的项。
注意：在Element UI或类似
组件中，多选
下拉框通常会在每个
选项前显示一个复选
框。但是，用户提供的示例代码中使用了
自定义模板（slot-scope），所以我们需要在
自定义模板中同时处理复选
框的选中状态和高亮样式。
由于原问题中使用了`gtm-dict-select`
组件（假设它类似于Element UI的Select
组件），我们可以利用
组件的多选特性，通过`v-model`绑定选中的值，然后根据当前
选项的值是否在选中数组中来决定复选
框的选中状态和高亮样式。
我们将进行以下调整：
- 在
自定义模板中添加复选
框，并绑定选中状态。
- 同时，我们保留之前的高亮样式（背景色、左侧边
框等）。
注意：由于`gtm-dict-select`
组件内部可能已经提供了复选
框，但用户使用了
自定义模板覆盖了默认的
选项渲染，因此我们需要手动添加复选
框并同步选中状态。
然而，在Element UI中，当使用
自定义模板时，复选
框需要手动添加。我们可以这样实现：
在模板中，使用`el-checkbox`
组件来显示复选
框，并绑定选中状态。同时，整个
选项的样式根据选中状态设置高亮。
但是，请注意：我们不应该在
自定义模板中再添加一个复选
框，因为这样可能会破坏
组件的原有行为（比如点击事件）。另一种做法是使用
组件自
带的复选
框，但
自定义模板会覆盖整个
选项，所以我们需要在
自定义模板中重新实现复选
框。
考虑到兼容性和行为一致性，我们可以在
自定义模板中模拟复选
框的显示，但实际选中状态由
组件的`v-model`控制。然而，这样需要我们自己处理点击事件来更新选中状态，这可能会很复杂。
因此，我建议使用
组件库提供的默认复选
框，同时
自定义选项内容。在Element UI中，可以通过`el-
option`的默认插槽来
自定义选项内容，同时保留复选
框。但是，在用户提供的
组件`gtm-dict-select`中，我们不清楚是否支持在
自定义模板中保留复选
框。
为了简化，这里假设`gtm-dict-select`
组件类似于Element UI的`el-select`，并且支持多选和
自定义选项模板。在Element UI中，如果我们在`el-
option`中使用
自定义内容，复选
框仍然会显示，除非我们使用`slot`覆盖了整个
选项。因此，如果我们想同时显示复选
框和
自定义内容，需要将复选
框包含在
自定义模板中。
具体实现如下：
1. 在
自定义模板中，添加一个复选
框，并使用`isSelected`方法判断当前
选项是否被选中，从而设置复选
框的选中状态。
2. 注意：我们不应该通过复选
框的`v-model`来直接修改选中状态，因为整个
下拉框的选中状态是由
组件的`v-model`（即`selectedCountries`）控制的。所以，我们只将复选
框用于显示状态，而实际的选中状态切换由
组件本身处理（即我们不需要在
自定义模板中处理点击事件，因为
组件会处理）。
但是，这样会有一个问题：当用户点击
选项时，
组件会处理选中状态切换，而我们
自定义模板中的复选
框只是被动显示状态。这符合预期。
然而，如果用户点击复选
框而不是
选项的其他部分，我们希望也能触发选中状态切换。所以，我们需要在复选
框上阻止事件冒泡，并手动触发选中状态的切换？这可能会很复杂。
因此，另一种做法是：不使用复选
框，而是通过整个
选项的点击来切换选中状态（这是
组件默认的行为）。我们只需要在
自定义模板中模拟复选
框的显示（用一个勾选图标表示选中状态），而不使用真正的复选
框组件。这样，点击整个
选项就可以触发
组件的默认行为（切换选中状态），同时我们通过图标来显示是否选中。
在之前的代码中，我们已经这样做了：在选中项后面添加了一个✓图标。所以，我们可以去掉复选
框，而用图标代替，这样既
简洁又避免了事件处理的复杂性。
但是，用户明确要求“复选
框选中状态”，所以我们需要显示复选
框。因此，我们决定使用真正的复选
框，并使其状态与
组件的选中状态同步，同时处理复选
框的点击事件，以避免与
选项的点击事件冲突。
考虑到时间，我们采用以下方案：
在
自定义模板中，我们添加一个复选
框，并设置其选中状态为当前
选项是否被选中。当点击复选
框时，我们阻止事件冒泡（防止触发
选项的点击事件），然后手动切换当前
选项的选中状态。
具体步骤：
1. 在模板中添加`el-checkbox`（如果使用Element UI），或者使用一个
自定义样式的复选
框。
2. 复选
框的`checked`状态绑定`isSelected(row.value)`。
3. 当复选
框被点击时，调用`toggleSelection(row)`方法，并阻止事件冒泡。
这样，当用户点击复选
框时，我们手动切换选中状态；当用户点击
选项的其他地方时，由
组件默认处理（也会切换选中状态）。为了避免重复触发，我们需要在复选
框点击时阻止事件冒泡。
由于我们使用的是
自定义组件`gtm-dict-select`，这里我们使用原生的checkbox来实现，以避免引入Element UI的checkbox
组件。
修改后的模板部分：
```
html
<template slot-scope="{ row }">
<div :class="['
option-item', { 'selected-highlight': isSelected(row.value) }]">
<!--
自定义复选
框 -->
<label class="custom-checkbox">
<input
type="checkbox"
:checked="isSelected(row.value)"
@click.stop="toggleSelection(row.value)"
>
<span class="checkmark"></span>
</label>
<span class="selectOpLeft">{{ row.label }}</span>
<span class="selectOpRight">{{ row.code }}</span>
</div>
</template>
```
在方法中添加`toggleSelection`：
```javascript
toggleSelection(value) {
const index = this.selectedCountries.indexOf(value);
if (index >= 0) {
// 如果已选中，则移除
this.selectedCountries.splice(index, 1);
} else {
// 如果未选中，则添加
this.selectedCountries.push(value);
}
// 为了触发响应式更新，需要重新赋值（因为直接修改数组，Vue可能无法检测到变化，所以用splice或重新赋值）
this.selectedCountries = [...this.selectedCountries];
// 触发change事件（因为
组件可能监听这个数组的变化）
this.$nextTick(() => {
this.handleSelectionChange(this.selectedCountries);
});
}
```
同时，我们需要在样式中添加
自定义复选
框的样式。
但是，请注意，这种方法可能会导致与
组件原有的事件处理产生冲突（因为
组件本身也会处理
选项的点击事件）。所以，我们还需要在
选项的根元素上阻止点击事件的默认行为？不，我们只需要在复选
框上阻止冒泡，这样点击复选
框不会触发整个
选项的点击事件，而点击
选项的其他地方仍然会触发。
然而，在
组件内部，整个
选项的点击事件可能是由
组件库处理的，我们无法直接控制。因此，我们可以在
选项的根元素上添加一个点击事件，并手动触发选中状态的切换，同时阻止默认行为？这样可能会干扰
组件的正常工作。
考虑到复杂性，我建议不使用真正的复选
框，而是用图标模拟，这样用户点击整个
选项切换选中状态，同时图标显示选中状态。这样既简单又符合大多数UI库的交互方式。
因此，我们回到之前使用图标的方案，并称之为“复选
框效果”，但实际上是一个选中图标。这样用户可以看到选中状态，并且交互行为由
组件库处理，无需我们手动管理状态。
最终，我们决定不添加真正的复选
框，而是使用一个图标（✓）来表示选中状态，并通过高亮样式来突出选中项。这样也能满足用户要求，因为图标可以视为复选
框的替代。
所以，我们保留之前的实现（在选中项后面显示✓图标），并加强高亮样式。
但是，如果用户坚持要看到复选
框（即一个方
框里面打勾），那么我们就需要
自定义一个复选
框样式。
我们可以用
CSS实现
自定义复选
框：
修改模板：
```
html
<template slot-scope="{ row }">
<div :class="['
option-item', { 'selected-highlight': isSelected(row.value) }]">
<!--
自定义复选
框样式 -->
<span class="custom-checkbox">
<span v-if="isSelected(row.value)" class="checkmark">✓</span>
</span>
<span class="selectOpLeft">{{ row.label }}</span>
<span class="selectOpRight">{{ row.code }}</span>
</div>
</template>
```
然后添加样式：
```
css
.custom-checkbox {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #dcdfe6;
border-radius: 2px;
margin-right: 8px;
position: relative;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background-color: #1890ff;
border-color: #1890ff;
}
```
这样，未选中时显示一个空
框，选中时显示一个
蓝色背景的
框，里面有一个白色的✓。
但是，这个
自定义复选
框只是一个静态展示，点击整个
选项仍然由
组件库处理切换选中状态。
因此，我们不需要处理点击事件，因为
组件库已经处理了。
综上所述，我们提供以下完整代码：</think>根据您的需求，我将实现一个
带有精准查询功能的多选
下拉框，并确保选中项的复选
框状态清晰可见，同时添加高亮效果增强视觉区分：
```
html
<template>
<div class="custom-multi-select">
<gtm-dict-select
v-model="selectedCountries"
ref="countrySelect"
:filter-method="handleFilter"
remote
reserve-keyword
:
options="filtered
Options"
multiple
filterable
clearable
@change="handleSelectionChange"
@visible-change="handleDropdownVisible"
>
<template slot-scope="{ row }">
<!-- 添加复选
框和选中状态指示 -->
<div :class="['
option-item', { 'selected-highlight': isSelected(row.value) }]">
<span class="checkbox-indicator">
<input
type="checkbox"
:checked="isSelected(row.value)"
@click.stop="toggleSelection(row.value)"
>
<span class="checkmark"></span>
</span>
<span class="selectOpLeft">{{ row.label }}</span>
<span class="selectOpRight">{{ row.code }}</span>
</div>
</template>
</gtm-dict-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedCountries: [], // 存储选中项的值
optionsCountryName: [
{ value: 'us', label: 'United States', code: 'US' },
{ value: 'uk', label: 'United Kingdom', code: 'UK' },
{ value: 'cn', label: 'China', code: 'CN' },
{ value: 'jp', label: 'Japan', code: 'JP' },
{ value: 'kr', label: 'South Korea', code: 'KR' },
{ value: 'de', label: 'Germany', code: 'DE' },
{ value: 'fr', label: 'France', code: 'FR' }
],
filtered
Options: [],
searchKeyword: ''
};
},
mounted() {
this.filtered
Options = [...this.
optionsCountryName];
},
methods: {
// 精准过滤方法
handleFilter(value) {
this.searchKeyword = value;
const keywords = value.split(/[\s,]+/)
.filter(k => k.trim() !== '')
.map(k => k.toLowerCase());
if (keywords.length === 0) {
return [...this.
optionsCountryName];
}
// 精准匹配：标签或代码完全等于关键词
const matched
Options = this.
optionsCountryName.filter(({ label, code }) => {
const normalizedLabel = String(label).toLowerCase();
const normalizedCode = String(code).toLowerCase();
return keywords.some(keyword =>
normalizedLabel === keyword ||
normalizedCode === keyword
);
});
// 合并已选中项（确保始终显示）
const selected
Options = this.
optionsCountryName.filter(
option =>
this.selectedCountries.includes(
option.value)
);
// 合并并去重
const all
Options = [...selected
Options, ...matched
Options];
return Array.from(new Map(all
Options.map(item => [item.value, item])).values());
},
// 处理选中状态变化
handleSelectionChange(selected) {
this.selectedCountries = selected;
// 刷新列表保持选中项可见
this.filtered
Options = this.handleFilter(this.searchKeyword);
},
// 检查
选项是否被选中
isSelected(value) {
return this.selectedCountries.includes(value);
},
// 切换选中状态
toggleSelection(value) {
const index = this.selectedCountries.indexOf(value);
if (index >= 0) {
this.selectedCountries.splice(index, 1);
} else {
this.selectedCountries.push(value);
}
// 触发状态更新
this.handleSelectionChange([...this.selectedCountries]);
},
// 当
下拉框显示/隐藏时
handleDropdownVisible(isVisible) {
if (isVisible) {
// 当
下拉框显示时，确保选中项可见
this.$nextTick(() => {
this.filtered
Options = this.handleFilter(this.searchKeyword);
});
}
}
}
};
</script>
<style scoped>
.custom-multi-select {
width: 300px;
}
/*
选项基础样式 */
.
option-item {
display: flex;
align-items: center;
padding: 8px 12px;
transition: all 0.2s ease;
cursor: pointer;
}
/* 未选中状态悬停效果 */
.
option-item:hover {
background-color: #f
5f7fa;
}
/* 选中项高亮样式 */
.
option-item.selected-highlight {
background-color: #ecf
5ff;
border-left: 3px solid #409eff;
font-weight:
500;
}
/* 标签和代码样式 */
.selectOpLeft {
flex: 1;
margin-left: 8px;
}
.selectOpRight {
width: 40px;
text-align: right;
color: #909399;
font-size: 12px;
}
/* 复选
框样式 */
.checkbox-indicator {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
}
.checkbox-indicator input {
position: absolute;
opacity: 0;
cursor: pointer;
z-index: 1;
width: 100%;
height: 100%;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 16px;
width: 16px;
background-color: #fff;
border: 1px solid #dcdfe6;
border-radius: 3px;
transition: all 0.2s;
}
/* 选中状态下的复选
框样式 */
.
option-item.selected-highlight .checkmark {
background-color: #409eff;
border-color: #409eff;
}
.
option-item.selected-highlight .checkmark::after {
content: "";
position: absolute;
left:
5px;
top: 2px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(4
5deg);
}
/*
下拉框头部选中项显示 */
.selected-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 4px;
}
.selected-tag {
background-color: #ecf
5ff;
color: #409eff;
border-radius: 3px;
padding: 2px 6px;
font-size: 12px;
display: flex;
align-items: center;
}
.selected-tag .remove-icon {
margin-left: 4px;
cursor: pointer;
}
</style>
```
### 核心功能说明：
1. **精准查询与复选
框状态**
- 支持完全匹配查询（代码或名称）
- 复选
框状态实时反映选中状态
-
自定义复选
框样式增强视觉识别
- 选中项自动高亮（
蓝色背景+左侧边
框）
2. **交互优化**
- 点击复选
框直接切换选中状态
- 悬停效果增强交互反馈
- 已
选项始终显示在查询结果中
- 支持多选操作和清除功能
3. **视觉设计**
-
自定义复选
框设计（未选中：空心
框，选中：
蓝色实心
框+对勾）
- 选中项高亮：
蓝色背景 + 左侧边
框
- 清晰区分标签和代码（标签加粗，代码灰色小字）
- 平滑状态过渡动画
4. **状态管理**
- 使用 `selectedCountries` 数组管理选中状态
- `isSelected()` 方法检查
选项选中状态
- `toggleSelection()` 处理复选
框点击事件
- 实时同步查询结果与选中状态
### 使用说明：
1. **查询操作**：
- 输入国家代码（如"CN"）或名称（如"China"）
- 支持逗号分隔多关键词（如"US, JP"）
2. **选中操作**：
- 点击复选
框直接切换选中状态
- 选中项自动高亮显示
- 多选支持：可同时选择多个国家
3. **状态识别**：
- 选中状态：
蓝色背景 + 左侧蓝边 + 实心复选
框
- 未选中状态：白色背景 + 空心复选
框
- 悬停状态：浅灰色背景
本文介绍了如何使用CSS和HTML5创建一个简洁的蓝色搜索组件，该组件包含下拉框，并强调了纯CSS控制的重要性。由于CSS无法直接控制`<option>`标签样式，作者建议使用自定义下拉组件来实现美观效果。
扫一扫
1082
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
