<template>
  <div>
    <hive-transfer v-bind="state" />
    <br>
    <hive-button
      size="small"
      @click="handleDisable"
    >
      {{ state.disabled ? "启用" : "禁用" }}
    </hive-button>
  </div>
</template>

<script>
const data = [];
var state = {
  data: data,
  values: [],
  selectedKeys: [[], []],
  disabled: false,
  searchFlag: true,
  onChange: function(values) {
    state.values = values;
  },
  onSelectChange(beforeSelectedKeys, afterSelectedKeys) {
    state.selectedKeys = [[...beforeSelectedKeys], [...afterSelectedKeys]];
  }
};

for (let i = 0; i < 10; i++) {
  data.push({
    key: i.toString(),
    title: `title ${i + 1}`,
    disabled: i % 4 < 1
  });
}

export default {
  data() {
    return {
      state
    };
  },
  methods: {
    handleDisable() {
      state.disabled = !state.disabled;
    }
  }
};
</script>
