@beisen/selected-list

ux-selected-list使用说明

项目运行

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

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

3. npm run test （测试用例）

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

ux-selected-list参数

  {
      totalCount: 1,//数据总数
      hasCount: 1,//选择数据总数
      openCount: true, //是否显示 选择数据总数／数据总数
      titleText: "已选择",//组件标题
      nullText: "请在左侧选择",//组件未选定数据时显示文本
      resultsData: [{
        name: '测试名称',
        pname: '测试数据'
      },{
        name: '测试名称',
        pname: '测试数据'
      }],
      clearResultsData: self.clearResultsData //清除当前已选数据，self=this在constructor中声明
  }

ux-selected-list调用方法

1.安装npm组件包

npm install @beisen/ux-selected-list --save-dev

2.引用组件

import SelectedList from "@beisen/ux-selected-list"

3.传入参数

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

class Demo extends Component {
constructor(props) {
 super(props)
  let self = this;
  this.state = {
    totalCount: 1,//数据总数
    hasCount: 1,//选择数据总数
    openCount: true, //是否显示 选择数据总数／数据总数
   titleText: "已选择",//组件标题
    nullText: "请在左侧选择",//组件未选定数据时显示文本
    resultsData: [{
      name: '测试名称',
      pname: '测试数据'
    },{
      name: '测试名称',
      pname: '测试数据'
    }],
    clearResultsData: self.clearResultsData //清除当前已选数据，self=this在constructor中声明
  }
}
clearResultsData = index => {
  if(index==undefined) {
  this.setState({resultsData: []})
  } else {
    let _resultsData = this.state.resultsData;
    let _hasCount = this.state.hasCount;
    // if(_hasCount == 0) return;
    _resultsData.splice(index, 1);
    _hasCount = _hasCount - 1;
    this.setState({resultsData: _resultsData, hasCount: _hasCount});
  }
}
render() {
 return (
 		<div >
      <Selected_List {...this.state}  />
    </div >
  )
}
}
render(<Demo />, document.getElementById('content'))