企业网站建设实训心得,建站中心,外贸公司的网站,工业设计大赛官网问题描述#xff1a;
今天使用开源组件库TDesign的自动补全组件时#xff0c;遇到了一个样式失效问题#xff0c;一开始怎么也找不到问题出在哪#xff0c;后面一个偶然去掉了scoped#xff0c;竟然发现样式竟然正常了#xff0c;具体原因不知道在哪#xff0c;有大佬知…问题描述
今天使用开源组件库TDesign的自动补全组件时遇到了一个样式失效问题一开始怎么也找不到问题出在哪后面一个偶然去掉了scoped竟然发现样式竟然正常了具体原因不知道在哪有大佬知道请留言不甚感激
代码是这样的
templatet-space directionvertical classt-demo-autocomplete-option!-- 使用 options 自定义下拉选项 --t-auto-completev-modelvalue1:optionsoptions1:popupProps{ overlayClassName: t-demo-autocomplete-option-list }placeholder使用属性自定义联想词选项内容/!-- 使用插槽自定义下拉选项 --t-auto-completev-modelvalue2:optionsoptions2:popupProps{ overlayClassName: t-demo-autocomplete-option-list }placeholder使用插槽自定义联想词选项内容template #option{ option }div classcustom-optionimg :srcoption.avatar /div classcustom-option__main!-- highlightKeyword --t-highlight-option :contentoption.text :keywordvalue2 /small classdescription{{ option.description }}/small/div/div/template/t-auto-complete/t-space
/template!-- langjsx 重要 --
script langjsx
import { HighlightOption } from tdesign-vue;const TEXTS [第一个默认联想词, 第二个默认联想词, 第三个默认联想词];export default {name: AutoCompleteOption,components: {THighlightOption: HighlightOption,},data() {return {value1: ,value2: ,options2: [{label: 第一个默认联想词,description: 这是关于联想词的描述。使用插槽渲染,avatar: https://tdesign.gtimg.com/site/avatar.jpg,},{label: 第二个默认联想词,description: 这是关于联想词的描述。使用插槽渲染,avatar: https://tdesign.gtimg.com/site/avatar.jpg,},{label: 第三个默认联想词,description: 这是关于联想词的描述。使用插槽渲染,avatar: https://tdesign.gtimg.com/site/avatar.jpg,},],timer: null,};},computed: {options1() {return TEXTS.map((text) ({text,label: () (div classcustom-optionimg srchttps://tdesign.gtimg.com/site/avatar.jpg /div classcustom-option__maint-highlight-option content{text} keyword{this.value1} /small classdescription这是关于联想词的描述使用 Props 属性渲染/small/div/div),}));},},
};
/scriptstyle
.t-demo-autocomplete-option-list .t-select-option {height: 50px;
}.t-demo-autocomplete-option-list .custom-option {display: flex;align-items: center;
}.t-demo-autocomplete-option-list .custom-option img {max-height: 40px;border-radius: 50%;
}.t-demo-autocomplete-option-list .custom-option__main {margin-left: 8px;
}.t-demo-autocomplete-option-list .custom-option .description {color: var(--td-gray-color-9);
}
/style正常展示是这样 但是加了scoped就成这样 检擦样式发现加了scoped后 .t-demo-autocomplete-option-list .t-select-option { height: 50px; } 这段样式就失效了这是为啥求大佬解答。。。
