common-select-box
v1.0.4
Published
<!-- * @Author: chenyiqiang * @Date: 2020-05-11 14:23:30 * @LastEditTime: 2020-05-13 14:30:24 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \element-common-select\README.md --> # element-common-select 说明:
Downloads
26
Readme
element-common-select
props | 参数 | 类型 | 说明 | |------------ | :-----: |:-----------------------: | | title | string |没有值的提示标语 | | items | Array |传入的下拉数组 | | label | string |传入指定的下拉中文字段名 | | value | string |当前选中绑定的值 | | size |small,mini|输入框大小,初始默认,另有两个值可选| | width | string |选择框的宽度 | | borderColor | string |选择框的边框颜色 | | optBg | string |下拉框的背景颜色 | | optTxtColor | string |下拉值的文字颜色 | | activeTxtColor | string |当前选中文字颜色 | | clearIconColor | string |清除icon的颜色值 | | clearIconSize | string |清除icon的大小(默认16) |
emit | 方法名 | 说明 | | ------ |:-----------------------: | |getMenu |下拉选项选中的回调,value为选中的对象| |clearClick |清空的回调事件,返回空 |
Example
<template>
<div id="app">
<CommonSelectBox
:value="value"
:items="optionList"
label="name"
@getMenu="getMenu"
@clearClick="clearClick"
>
</CommonSelectBox>
</div>
</template>
<script>
import CommonSelectBox from 'common-select-box'
export default {
name: 'App',
components: {
CommonSelectBox
},
data () {
return {
value: '', // 当前选中值
optionList: [
{name: '选项1', id: 1},{name: '选项2', id: 2},{name: '选项3', id: 3}
]
}
},
methods: {
getMenu(val) {
this.value = val? val.name:''
},
clearClick() {
this.value = ''
}
},
mounted () {
}
}
</script>