uni-app 雅蓝主题下 选择的匹配的tag标签 选中框看不清楚
uni-app 雅蓝主题下 选择的匹配的tag标签 选中框看不清楚
| 项目信息 | 详细信息 |
|---|---|
| 产品分类 | HbuilderX |
| 操作系统 | Windows |
| 操作系统版本 | 10 |
| HBuilderX版本 | 3.4.7 |
操作步骤：
- 选择对用的标签
预期结果：
- 颜色明显
实际结果：
- 颜色不明显
bug描述：
这不算bug,是个小建议;雅蓝主题下 选择的匹配的tag标签 选中框看不清楚,每次想找匹配的另一个标签都要花费很长时间,希望颜色明显一些
17 回复
在 uni-app 中使用雅蓝主题时，如果发现选择的 tag 标签选中框看不清楚，可能是由于主题颜色与选中框颜色对比度不足导致的。你可以通过以下几种方式来解决这个问题：
1. 自定义 tag 标签样式
你可以通过自定义 tag 标签的样式来调整选中框的颜色，使其更加明显。
<template>
<view>
<tag :selected="isSelected" :style="tagStyle">标签</tag>
</view>
</template>
<script>
export default {
data() {
return {
isSelected: true,
tagStyle: {
backgroundColor: '#409EFF', // 背景颜色
color: '#FFFFFF', // 文字颜色
borderColor: '#409EFF', // 边框颜色
borderWidth: '1px',
borderRadius: '4px',
padding: '4px 8px',
}
};
}
};
</script>2. 使用 class 动态切换样式
你可以通过 class 动态切换 tag 标签的样式，根据选中状态应用不同的样式。
<template>
<view>
<tag :class="['tag', { 'tag-selected': isSelected }]">标签</tag>
</view>
</template>
<script>
export default {
data() {
return {
isSelected: true
};
}
};
</script>
<style>
.tag {
background-color: #FFFFFF;
color: #333333;
border: 1px solid #CCCCCC;
border-radius: 4px;
padding: 4px 8px;
}
.tag-selected {
background-color: #409EFF;
color: #FFFFFF;
border-color: #409EFF;
}
</style>3. 修改主题颜色
如果你希望全局调整选中框的颜色，可以修改雅蓝主题的颜色配置。你可以在 uni.scss 或 app.vue 中覆盖默认的主题颜色。
// uni.scss
$uni-color-primary: #409EFF; // 修改主题主色
$uni-color-success: #67C23A; // 修改成功色
$uni-color-warning: #E6A23C; // 修改警告色
$uni-color-error: #F56C6C; // 修改错误色4. 使用 uni-ui 的 tag 组件
如果你使用的是 uni-ui 的 tag 组件，可以通过 type 属性来设置不同的颜色类型。
<template>
<view>
<uni-tag type="primary" :inverted="isSelected">标签</uni-tag>
</view>
</template>
<script>
export default {
data() {
return {
isSelected: true
};
}
};
</script>5. 使用 scoped 样式
如果你希望样式只作用于当前组件，可以使用 scoped 样式。
<template>
<view>
<tag :selected="isSelected" class="custom-tag">标签</tag>
</view>
</template>
<script>
export default {
data() {
return {
isSelected: true
};
}
};
</script>
<style scoped>
.custom-tag {
background-color: #409EFF;
color: #FFFFFF;
border-color: #409EFF;
}
</style>