The drop-down box wants to achieve the following effect:
when selecting custom, a button appears behind the drop-down box, and the total length remains unchanged
The first thing I thought of was the layout, row component or dynamic style to judge the width according to the type, but I found that these methods are either complicated or unable to adapt to different screen resolutions, which cannot be regarded as a complete solution to the problem. In the end, the simplest solution is as follows:
The easiest way to implement:
html code:
<FormItem label="选择类型" prop="codeType">
<div class="select-type">
<Select v-model="formValidate.codeType" label-in-value placeholder='请选择语言类型' @on-change='selectCodeType'>
<Option v-for="item in codeTypeList" :value="item.value" :key="item.value">{
{
item.label }}</Option>
</Select>
<span v-show="formValidate.codeType == 5"><Button style="margin: 0 5px">进入自定义</Button></span>
</div>
</FormItem>
// data：
codeTypeList: [
{
value: 1, label: 'Java' },
{
value: 2, label: 'Vue' },
{
value: 3, label: 'python' },
{
value: 4, label: 'go' },
{
value: 5, label: '自定义' }
],
Here comes the point:
.select-type {
width: 100%;
display: flex; // 重点
}
Just set it to flex, the above effect can be automatically realized, and the length can be self-adapted.
end~
I hope the recorded questions can help you~ Jiumi