我做了工作,也许我的例子可以帮助你。
查看
<div class="field">
<label class="label">Hair</label>
<div class="control">
<select2 class="is-medium" v-model="post.custom_data.hair" :options="{}">
@foreach (config('post.cat.hair') as $id => $value)
<option value="{{ $id }}">{{ __($value) }}</option>
@endforeach
</select2>
</div>
</div>
SASS
.select2-wrapper {
.select2-container {
.select2-selection {
transition: border-color $speed;
font-family: $family-sans-serif;
height: 2.285em;
line-height: 1.5;
font-size: 1rem;
outline: none !important;
display: inline-flex;
align-items: center;
width: 100%;
border-color: $border;
border-radius: $radius;
&:hover {
border-color: $border-hover;
}
.select2-selection__rendered {
padding-left: 0.75em;
padding-right: 0.75em;
}
.select2-selection__arrow {
height: 100%;
top: 0px;
}
}
&.select2-container--open {
.select2-selection {
border-color: $primary;
&:hover {
border-color: $primary;
}
}
}
}
&.is-medium {
.select2-container {
.select2-selection {
font-size: $size-5;
}
}
}
&.is-large {
.select2-container {
.select2-selection {
font-size: $size-4;
}
}
}
}
.select2-container {
.select2-dropdown {
border-color: $primary;
.select2-search {
margin: 10px;
.select2-search__field {
@extend .input;
border-radius: $radius !important;
}
}
.select2-results__options {
max-height: 210px;
.select2-results__option {
padding: 0.75em;
font-family: $family-sans-serif;
font-size: 1rem;
&.select2-results__option--highlighted {
background: $primary;
}
}
}
}
}
结果
希望它可以帮助这个^^
thanks @ josec89,我可以问你,你把这个sass文件放在哪里? – YouneL
嗨@younel我把这个sass放在我的项目结构中(我想我称之为'components/select2.scss'.但这应该不重要。顺便说一下,我已经使用了一些变量,这些变量是在bulma的sass文件中定义的例如$ primary),并且可能有其他变量仅在我的代码中有效,如果您的样式未编译,请将其删除 – josec89
Thanks @ josec89 – YouneL