Nomenclature Predictably Misunderstood

    @beisen/dropdown-list

    0.4.25 • Public • Published

    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) },
    
      /**
       * 多语言参数
       */
      translation: {
            uxDropDownSearchText: '搜索TT',
            uxDropDownConfirmText: '确定TT'
        }
    }

    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} />
        )
      }

    Install

    npm i @beisen/dropdown-list

    DownloadsWeekly Downloads

    42

    Version

    0.4.25

    License

    ISC

    Unpacked Size

    6.54 MB

    Total Files

    266

    Last publish

    Collaborators

    • beisencorp