<script>
export default {
    components: {},
    data() {
        return{
            label: '主机编号',
            list: ['主机编号','主机别名', '计费类型'],
            billing: ['全部','包年包月', '弹性计费'],
            labelChange: function($event) {
               this.label = $event
            }
        }
    }
}
</script>
# Screen 筛选

## 基本用法
:::demo 使用`f-icon`嵌入图标
````html
 <efly-screen>
    <div slot="label">
        <efly-select align="center" width="126px" :value="label"></efly-select>
    </div>
    <slot>
        <efly-input placeholder="请输入主机编号"></efly-input>
    </slot>
</efly-screen>
````
:::

## 分段输入组
:::demo 使用`f-icon`嵌入图标
````html
 <efly-screen>
    <div slot="label">
        <efly-select width="126px" type="screen" value="姓名"></efly-select>
    </div>
    <slot>
        <efly-input placeholder="请输入姓氏"></efly-input>
        <efly-input placeholder="请输入名字"></efly-input>
    </slot>
</efly-screen>
````
:::

## 下拉组
:::demo 使用`f-icon`嵌入图标
````html

 <efly-screen>
    <div slot="label">
        <efly-select width="126px" type="screen" value="计费类型"></efly-select>
    </div>
    <slot>
        <efly-select :data="billing"></efly-select>
    </slot>
</efly-screen>
<script>
export default {
    components: {},
    data() {
        return{
            billing: ['全部','包年包月', '弹性计费'],
        }
    }
}
</script>
````
:::

## 带下拉的输入组
:::demo 使用`f-icon`嵌入图标
````html

 <efly-screen>
    <div slot="label">
        <efly-select width="126px" :data="list" type="screen" :value="label" @change="labelChange($event)"></efly-select>
    </div>
    <slot>
        <efly-input placeholder="请输入主机编号" v-if="label === '主机编号'"></efly-input>
        <efly-input placeholder="请输入主机别名" v-if="label === '主机别名'"></efly-input>
        <efly-select :data="billing" placeholder="请选择计费类型" v-if="label === '计费类型'"></efly-select>
    </slot>
</efly-screen>
<script>
export default {
    components: {},
    data() {
        return{
            label: '主机编号',
            list: ['主机编号','主机别名', '计费类型'],
            billing: ['全部','包年包月', '弹性计费'],
            labelChange: function($event) {
               this.label = $event
            }
        }
    }
}
</script>
````
:::


