1.0.0 • Published 2 years ago

my-input-echarts v1.0.0

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

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