php网站开发技术环境要求,视频网站怎么建设,义乌seo快速排名,wordpress 内容管理 模版项目场景#xff1a;
element-plus element-plus 完成下拉切换功能#xff0c;选用了popover 组件去进行样式修改#xff0c;本来大概是要实现下面这样的样式效果#xff0c;没想到调整的时候#xff0c;这个选择的高亮模块总是超出。
实现效果#xff1a; 解决方案
element-plus element-plus 完成下拉切换功能选用了popover 组件去进行样式修改本来大概是要实现下面这样的样式效果没想到调整的时候这个选择的高亮模块总是超出。
实现效果 解决方案 其实是选用了错误的组件去实现这个功能对于这种需求我们应该用DropDown下拉菜单去实现在这里特此记录希望以后实现功能的时候不要再犯错 错误代码用于引以为戒
templateel-popoverplacementbottom:width160triggerhoverpopper-classselect-downtemplate #referenceimg src/assets/icon/i18n.svg classicon //templatetemplate #defaultdiv styledisplay: flex; flex-direction: column; padding: 0 0div classlang中文/divdiv classlang英文/div/div/template/el-popover!-- I18n / --
/templatestyle langscss
.select-down {padding: 10px 0 !important;
}.icon {width: 30px;height: 30px;
}.lang {width: 100%;height: 26px;line-height: 26px;padding-left: 20px;
}
.lang:hover {background-color: #ecf5ff;color: #409eff;
}
/style
正确的实现
templateel-dropdown :hide-on-clickfalseimg src/assets/icon/i18n.svg classicon /template #dropdownel-dropdown-menutemplate v-for(item, index) in localeList :keyindexel-dropdown-item clicktoggleLocal(item.event){{item.text}}/el-dropdown-item/template/el-dropdown-menu/template/el-dropdown
/template
script setup langts
import { localeList } from /settings/localeSetting;async function toggleLocal(lang: LocaleType) {}
/script
style langscss
.icon {width: 30px;height: 30px;
}.el-tooltip__trigger:focus {outline: none !important;
}
/style效果如下 本来早就应该发的可是上班真的好累屯了四五篇这次统一发了吧代码有问题记得下方留言。
