DropDownList使用说明

项目运行

1. cnpm install 或 npm install cnpm使用教程

2. npm run dev （开发环境打包 port:8080）

3. npm run test （测试用例）

4. npm run build （生产环境打包）

DropDownList参数

const props = {
  /**
   * input框前的文字标识
   * 可为空
   */
  title: '',

  /**
   * 没有值的时候显示的内容
   */
  placeholder:'',

  /**
   * 默认值
   */
  defaultValue: '',

  errorStatus: false,
  errorMsg: '出错了~~~！',
  helpMsg: '',
  hasClosebtn: true,
  /**
   * 下拉菜单为单选或者多选，true为多选，false为单选,默认为false
   */
  multiple: true,

  /**
   * 限制选择数量
   * 当超过该数量后，其它的则禁用
   */
  limitCount:5,
  /**
   * 多选时是否显示input
   */
  hasInput: true,
  /**
   * 当为true时且有数据时不渲染input
   */
  showInput: true,

  /**
   * label位置
   * true   左边
   * false  在上边
   */
  lablePos: true,
  
  /**
   * label中文字对齐方式
   * true   左对齐
   * false  右对齐
   */
  lableTxt: false,
  
  /**
   * 每项的内容
   */
  children: [
    {
      value: 0,
      text: '查看详情',
      isActive: false,
      isChecked: false,
      tipText: "哎哎多撒多撒<br/>多撒多撒多所"  //如果有该字段，则鼠标移入文字会一直显示tip,tip内容为该字段内容

    }
  ],
  /**
   * 是否显示
   */
  hidden: false,

  /**
   * 在列表中新增一条数据 “空 (未填写)”
   * 默认为false
   */
  hasEmptyData: true,

  /**
   * 当获取异步数据会自动渲染
   */
  autoShowPanel: true,

  /**
   * 渲染下拉列表
   */
  showPanel: false,

  /**
   * 是否禁用
   */
  disabled: false,
  readonly: false,

  /**
   * 是否显示必选星号
   */
  required: true,

  /**
   * 右侧下拉按钮的样式
   */
  iconName: 'pc-sys-arrowdown-nomal-svg',

  /**
   * 点击后事件回调；
   * @param event：事件
   * @param target: 事件对象
   * @param val：抛出的值
   */
  onClick: function (event, target, val) { console.log(val) }, 

  /**
   * 失去焦点后事件回调
   * @param event：事件
   * @param val：input抛出的值
   */
  onBlur: function (event, val) { console.log(val) }, 

  /**
   * change后事件回调
   * @param event
   * @param target: 事件对象
   * @param val：input中值改变的值
   */
  onChange: function (event, target, val) { console.log(event); console.log(target); console.log(val); },

  /**
   * 获取焦点后事件回调
   * @param event：事件
   * @param val：抛出的input中的值
   */
  onFocus: function (event, val) {
    console.log('focuse')
    self.test2()
  }, 

  onClose: function (status) { console.log(status) }
}

DropDownList调用方法

1.安装npm组件包

npm install @beisen/dropdown-list --save-dev

2.引用组件

import DropDownList from "@beisen/dropdown-list"

3.传入参数

该参数为上述参数，传入方式使用: {...参数}

{
          "title":"title"  //input框前的文字标识，可为空
          // ,"placeholder":""              /**没有值的时候显示的内容(string)**/
          ,"defaultValue":"111111"  //默认值
          ,"errorStatus": false
          ,"errorMsg":"出错了~~~！"
          ,"helpMsg":"312321"
          ,"hasSearch":false //是否显示下拉框
          ,"PromptMsg":"PromptMsg" //提示问题
          ,"hasClosebtn":true //是否显示Input框上的 删除按钮
          ,"limitCount": 5 //限制选择数量，当超过该数量后，其它的则禁用
          ,"multiple": true //下拉菜单为单选或者多选，true为多选，false为单选,默认为false
          ,"hasInput": true //多选时是否显示input
          ,"showInput": true //当有数据时且为true时不渲染input
          ,"lablePos": true //label位置，true时在左边，false在上边
          ,"lableTxt": false //label中文字对齐方式，true左对齐，false右对齐
          ,"children":[
              {
                  "value":0
                  ,"text":"查看详情"
                  ,"isActive":false
                  ,"isChecked":false
              }  
              ,{
                  "value":1
                  ,"text":"性质维度"
                  ,"isActive":false
                  ,"isChecked":false
                  ,"onlyShowInput":true //该参数为true的话，该数据仅在多选的input框中显示，不在下拉中显示
              } 
              ,{
                  "value":2
                  ,"text":"地域维度"
                  ,"isActive":false
                  ,"isChecked":false
              } 
              ,{
                  "value":3
                  ,"text":"包含下aaaaaaaaaaaaaaaaaaaaa属"
                  ,"isActive":false
                  ,"isChecked":false
              } 
              ,{
                  "value":4
                  ,"text":"包含下属"
                  ,"isActive":false
                  ,"isChecked":false
              },{
                  "value":5
                  ,"text":"包含下属1"
                  ,"isActive":false
                  ,"isChecked":false
              } ,{
                  "value":6
                  ,"text":"包含下属2"
                  ,"isActive":false
                  ,"isChecked":false
              } ,{
                  "value":7
                  ,"text":"包含下属3"
                  ,"isActive":false
                  ,"isChecked":false
              } ,{
                  "value":8
                  ,"text":"包含下属4"
                  ,"isActive":false
                  ,"isChecked":false
              } ,{
                  "value":9
                  ,"text":"包含下属5"
                  ,"isActive":false
                  ,"isChecked":false
              } ,{
                  "value":10
                  ,"text":"包含下属6"
                  ,"isActive":false
                  ,"isChecked":false
              } ,{
                  "value":11
                  ,"text":"包含下属7"
                  ,"isActive":false
                  ,"isChecked":false
              }  
          ]               /** MenuItem **/
          ,"hidden":false  //是否显示\
          ,'autoShowPanel':true //当获取异步数据会自动渲染
          ,"showPanel": false  //渲染下拉列表
          ,"disabled":false //是否禁用
          ,"readonly":false
          ,"required":true  //是否显示必选星号
          ,"iconName":"pc-sys-arrowdown-nomal-svg" //右侧下拉按钮的样式
          ,"onClick":function(event, target, val){console.log(val)} /**点击后事件回调；event：事件，target: 事件对象，val：抛出的值**/
          ,"onBlur":function(event, val){console.log(val)} /**失去焦点后事件回调event：val：input抛出的值**/
          ,"onChange":function(event, target, val){console.log(event);console.log(target);console.log(val);} /**change后事件回调event：事件，target: 事件对象，val：input中值改变的值**/
          ,"onFocus":function(event, val){
              console.log('focuse')
              self.test2();
          } /**获取焦点后事件回调event：事件，val：抛出的input中的值**/
          ,"onClose":function(status){console.log(status)}
      }
render () {
    return (
      <DropDownList {...this.state.DropDownData} />
    )
  }