1.0.0 • Published 2 years ago
my-input-echarts v1.0.0
my-input-echarts
npm install my-input-echarts
#or
yarn add my-input-echarts
在main.js中导入
import Vue from 'vue'
import myInput from 'my-input-echarts'
Vue.use(myInput)
页面中应用
<template>
<myInput
:options="options"
label="label"
value="value"
placeholder="请选择"
:disabled="false"
:width="160"
:height="36"
:num="6"
v-model="selectedValue"
@change="onChange"
/>
</template>
<script>
export default {
name: 'App',
data() {
return {
options: [
{
label: '西湖区',
value: 1
},
{
label: '余杭区',
value: 2,
disabled: true
},
{
label: '拱墅区',
value: 3
},
{
label: '余杭区',
value: 4
},
{
label: '滨江区',
value: 5
},
{
label: '萧山区',
value: 6
},
],
selectedValue: 1
}
},
watch: {
selectedValue(to) {
console.log('selectedValue:', to)
}
},
mounted() {
setTimeout(() => {
// 模拟接口调用
this.selectedValue = 3
}, 1000)
},
methods: {
onChange(value, label, index) {
console.log('item:', value, label, index)
}
}
}
</script>
## Props
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
options | 选项数据 | Array | []
label | 选择器字典项的文本字段名 | String | label
value | 选择器字典项的值字段名 | String | value
placeholder | 选择框默认文字 | String | 请选择
disabled | 是否禁用下拉 | Boolean | false
allowClear | 是否支持清除 | Boolean | false
width | 选择框宽度 | Number | 200
height | 选择框高度 | Number | 36
num | 下拉面板最多能展示的下拉项数,超过后滚动显示 | Number | 6
selectedValue | (v-model)当前选中的option条目 | /Number/String | null
## Events
事件名 | 说明 | 返回值
:--- | :--- | :---
change | 选择某项下拉后的回调函数 | value, label, index(value值,label文本值,index索引值)
1.0.0
2 years ago