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: 
   - value: - {selectedVal.join(', ')} 
   - index: - {selectedIndex.join(', ')} 
   - 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: 
 - value: - {selectedVal.join(', ')} 
 - index: - {selectedIndex.join(', ')} 
 - 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

事件

实例方法

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/drawer