应用平台

# 组件cap4-select

# 引入

import Cap4PcUiSelect from 'cap4-pc-ui/lib/cap4-select';
import 'cap4-pc-ui/lib/cap4-select/css/cap4-select.css';

# 依赖

  • 图标依赖于 cap4字体库

# 基础用法

/**/

export default {
data() {
return {
selectValue: '',
leftSpan: '选择',
leftSpanWidth: 50,
list: [
{
value: 1,
display: '北京'
},
{
value: 2,
display: '上海'
},
{
value: 3,
display: '广州'
}
],
disable: true,
searchable: true
};
},
methods: {
selectChange(value, item) {
console.log('value', value);
console.log('item', item);
}
}
};
/**/::: demo

<template>
    <div class="demo-block">
        <cap4-select
            v-model="selectValue"
            :leftSpan="leftSpan"
            :leftSpanWidth="leftSpanWidth"
            :list="list"
            @change="selectChange"
        ></cap4-select>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectValue: '',
            leftSpan: '选择',
            leftSpanWidth: 50,
            list: [
                {
                    value: 1,
                    display: '北京'
                },
                {
                    value: 2,
                    display: '上海'
                },
                {
                    value: 3,
                    display: '广州'
                }
            ]
        };
    },
    methods: {
        selectChange(value, item) {
            console.log('value', value);
            console.log('item', item);
        }
    }
};
</script>

:::

# 禁用状态

::: demo

<template>
    <div class="demo-block">
        <cap4-select
            v-model="selectValue"
            :leftSpan="leftSpan"
            :leftSpanWidth="leftSpanWidth"
            :list="list"
            :disable="disable"
            @change="selectChange"
        ></cap4-select>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectValue: '',
            leftSpan: '选择',
            leftSpanWidth: 50,
            list: [
                {
                    value: 1,
                    display: '北京'
                },
                {
                    value: 2,
                    display: '上海'
                },
                {
                    value: 3,
                    display: '广州'
                }
            ],
            disable: true
        };
    },
    methods: {
        selectChange(value, item) {
            console.log('value', value);
            console.log('item', item);
        }
    }
};
</script>

:::

# 可搜索

::: demo

<template>
    <div class="demo-block">
        <cap4-select
            v-model="selectValue"
            :leftSpan="leftSpan"
            :leftSpanWidth="leftSpanWidth"
            :list="list"
            :searchable="searchable"
            @change="selectChange"
        ></cap4-select>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectValue: '',
            leftSpan: '选择',
            leftSpanWidth: 50,
            list: [
                {
                    value: 1,
                    display: '北京'
                },
                {
                    value: 2,
                    display: '上海'
                },
                {
                    value: 3,
                    display: '广州'
                }
            ],
            searchable: true
        };
    },
    methods: {
        selectChange(value, item) {
            console.log('value', value);
            console.log('item', item);
        }
    }
};
</script>

:::

# Attributes

参数 说明 类型 可选值 默认值
value 值 (必填)) [String, Number] — —
list 可选项 (必填)) Array — —
leftSpan 左侧文本 (选填)) String — —
leftSpanWidth 左侧文本宽度 (选填)) [String, Number] — 100
listHeight 下拉框高度 (选填)) [String, Number] — 200
disable 不可选 (选填)) Boolean — false
inputWidth 输入宽度 (选填)) [String, Number] — 200
position 位置 (选填)) String — —
normalSelect 浏览器样式 (选填)) Boolean — false
showBorder 是否显示边线 (选填)) Boolean — true
searchable 是否可搜索 (选填)) Boolean — false

# Event

事件名称 说明 回调参数
change 值改变 value, item
编撰人：yinyanting

快速跳转

← （11) 穿梭框组件 →