Drawer

1.7.0 新增

抽屉，主要用来需要大范围层级进行选择的场景，一般情况下应该是满屏状态。

注： 组件依赖父容器相对定位或者绝对定位，因为 Drawer 是绝对定位的。

示例

• 默认配置使用

  <cube-button @click="showDrawer">Show Drawer</cube-button>
  <cube-drawer
    ref="drawer"
    title="请选择"
    :data="data"
    :selected-index="selectedIndex"
    @change="changeHandler"
    @select="selectHandler"
    @cancel="cancelHandler"></cube-drawer>
  

  import { provinceList, cityList, areaList } from '../../data/area'
  export default {
    data() {
      return {
        selectedIndex: [],
        data: [
          provinceList,
          [],
          []
        ]
      }
    },
    methods: {
      showDrawer() {
        this.$refs.drawer.show()
      },
      changeHandler(index, item, selectedVal, selectedIndex, selectedText) {
        // fake request
        setTimeout(() => {
          let data
          if (index === 0) {
            // procince change, get city data
            data = cityList[item.value]
          } else {
            // city change, get area data
            data = areaList[item.value]
          }
          // refill panel(index + 1) data
          this.$refs.drawer.refill(index + 1, data)
        }, 200)
      },
      selectHandler(selectedVal, selectedIndex, selectedText) {
        this.$createDialog({
          type: 'warn',
          content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
          icon: 'cubeic-alert'
        }).show()
      },
      cancelHandler() {
        console.log('cancel')
      }
    }
  }
  

  title 就是标题，可选；data 数据源，二维数组，长度决定了抽屉的 Panel 数，初始长度一定要确定；selected-index 则是初始选择的索引值；change、select、cancel 则是对应的三个事件：选择发生改变（选中是非最后一个 Panel 中的项的时候触发）、选中了某个值（选择了最后一个 Panel 中的项触发）、取消（点击左侧空白蒙层触发）。

  你可以在 change 中通过 Drawer 的 fill 方法更新下一个 Panel 的数据，可以是同步更新也可以是异步更新。

• 自定义使用

  你可以通过插槽来自定义结构。

  <cube-drawer
    ref="drawer"
    :data="data"
    :selected-index="selectedIndex"
    @change="changeHandler"
    @select="selectHandler"
    @cancel="cancelHandler">
    <span slot="title">{{province.text}}</span>
    <cube-drawer-panel
      v-for="(panel, index) in data"
      :key="index"
      :index="index"
      :data="panel"
    >
      <cube-drawer-item v-for="(item, i) in panel" :item="item" :key="i" :index="i">
        <i class="cubeic-round-border"></i>
        <span>{{item.text}}</span>
      </cube-drawer-item>
    </cube-drawer-panel>
  </cube-drawer>
  

  import { provinceList, cityList, areaList } from '../../data/area'
  export default {
    data() {
      return {
        province: {},
        selectedIndex: [],
        data: [
          [],
          []
        ]
      }
    },
    methods: {
      showDrawer() {
        // get radom province
        const randomIndex = Math.round(Math.random() * provinceList.length)
        const randomProvince = provinceList[randomIndex]
        this.province = randomProvince
        this.$refs.drawer.refill(0, cityList[randomProvince.value])
        this.$refs.drawer.show()
      },
      changeHandler(index, item, selectedVal, selectedIndex, selectedText) {
        setTimeout(() => {
          // city change, get area data
          const data = areaList[item.value]
          this.$refs.drawer.refill(index + 1, data)
        }, 200)
      },
      selectHandler(selectedVal, selectedIndex, selectedText) {
        this.$createDialog({
          type: 'warn',
          content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
          icon: 'cubeic-alert'
        }).show()
      },
      cancelHandler() {
        console.log('cancel')
      }
    }
  }
  

  可以在 cube-drawer 组件中使用 cube-drawer-panel 以及 cube-drawer-item 组件来达到某些情况下的自定义目的。

Props 配置

CubeDrawer

• data 子配置项

  是一个数组，数组中每一项仍然为数组，结构类似于：

  [
    [
      {
        text: 'text',
        value: 'value'
      },
      ...
    ],
    [
      'text',
      'text2',
      ...
    ]
  ]
  

  里层数组的每一项可以是对象（包含 text 和 value），也可以是纯字符串。

CubeDrawerPanel

CubeDrawerItem

事件

实例方法