<script>
  export default {
    data() {
      return {
      data2:[] ,
      targetKeys2: [],
      modalTitle:'title text'
      };
    },
    methods:{
    getMockData () {
      const mockData = []
      for (let i = 1; i <= 20; i++) {
        mockData.push({
          key: i.toString(),
          label: 'Content ' + i,
          description: 'The desc of content  ' + i
        })
      }
      return mockData
    },
    getTargetKeys () {
      return this.getMockData()
        .filter(() => Math.random() * 2 > 1)
        .map(item => item.key)
    },
    modalVisibleChange(val){
    if(val){
      this.data2=this.getMockData()
      this.targetKeys2=this.getTargetKeys()
    }
    },
    targetChange(val){
      this.targetKeys2=val
    }
    }
  }
</script>
<style lang="less" scoped>
  .demo-block {
    >div {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
</style>

# HModalTransfer 组件

----

### 基础用法


<div class="demo-block">
  <div>
<h-modalTransfer
:data='data2'
:targetKeys='targetKeys2'
@modalVisibleChange='modalVisibleChange'
@targetChange='targetChange'
            >
</h-modalTransfer>
  </div>
</div>

:::demo



```html
  <div>
<h-modalTransfer
:data='data2'
:targetKeys='targetKeys2'
@modalVisibleChange='modalVisibleChange'
            >
</h-modalTransfer>
  </div>
 <script>
  export default {
    data() {
      return {
      data2: this.getMockData(),
      targetKeys2: this.getTargetKeys(),
      modalTitle:'title text'
      };
    },
    methods:{
    getMockData () {
      const mockData = []
      for (let i = 1; i <= 20; i++) {
        mockData.push({
          key: i.toString(),
          label: 'Content ' + i,
          description: 'The desc of content  ' + i,
          disabled: Math.random() * 3 < 1
        })
      }
      return mockData
    },
    getTargetKeys () {
      return this.getMockData()
        .filter(() => Math.random() * 2 > 1)
        .map(item => item.key)
    },
    modalVisibleChange(val){
    console.log(val)
    }
    }
  }
</script>

```
:::
### Attributes
| 参数         | 说明                 | 类型   | 可选值 | 默认值 |
| ------------ | --------------------| ------ | ------ | ------ |
| data         | 数据                | array  | —     | —      |
| targetKeys   | 已选                | array  | —      | —      |
| title        | 弹框title           | string | —      |Display TransferDialog |
| btnText      | 打开弹框的btn        | string | —      |click me|
| tranfertitles| 左右穿梭框的title    | array | —      |['未选', '已选']|

### Events
| 事件名         | 说明             | 返回值                       |
| -------------- | ---------------- | ---------------------------- |
| @modalVisibleChange | 弹框状态发生改变 | 弹框状态(true,false) |
| @targetChange | 已选数值发生改变 | 已选值 |
