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

    • 默认配置使用
      1.  
      2. import { provinceList, cityList, areaList } from '../../data/area'
      3. export default {
      4. data() {
      5.   return {
      6.     selectedIndex: [],
      7.     data: [
      8.       provinceList,
      9.       [],
      10.       []
      11.     ]
      12.   }
      13. },
      14. methods: {
      15.   showDrawer() {
      16.     this.- refs.drawer.show()
      17.   },
      18.   changeHandler(index, item, selectedVal, selectedIndex, selectedText) {
      19.     // fake request
      20.     setTimeout(() => {
      21.       let data
      22.       if (index === 0) {
      23.         data = cityList[item.value]
      24.       } else {
      25.         // city change, get area data
      26.         data = areaList[item.value]
      27.       }
      28.       // refill panel(index + 1) data
      29.       this.- refs.drawer.refill(index + 1, data)
      30.     }, 200)
      31.   },
      32.   selectHandler(selectedVal, selectedIndex, selectedText) {
      33.     this.- createDialog({
      34.       type: 'warn',
      35.       content: `Selected Item: 
         - value: - {selectedVal.join(', ')} 
         - index: - {selectedIndex.join(', ')} 
         - text: - {selectedText.join(' ')}`,
      36.       icon: 'cubeic-alert'
      37.     }).show()
      38.   },
      39.   cancelHandler() {
      40.     console.log('cancel')
      41.   }
      42. }
      43. }

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

    • 自定义使用
    1. import { provinceList, cityList, areaList } from '../../data/area'
    2. export default {
    3.   data() {
    4.     return {
    5.       province: {},
    6.       selectedIndex: [],
    7.       data: [
    8.         [],
    9.       ]
    10.     }
    11.   },
    12.   methods: {
    13.     showDrawer() {
    14.       // get radom province
    15.       const randomIndex = Math.round(Math.random() * provinceList.length)
    16.       const randomProvince = provinceList[randomIndex]
    17.       this.province = randomProvince
    18.       this.- refs.drawer.refill(0, cityList[randomProvince.value])
    19.       this.- refs.drawer.show()
    20.     },
    21.     changeHandler(index, item, selectedVal, selectedIndex, selectedText) {
    22.       setTimeout(() => {
    23.         // city change, get area data
    24.         const data = areaList[item.value]
    25.         this.- refs.drawer.refill(index + 1, data)
    26.       }, 200)
    27.     },
    28.     selectHandler(selectedVal, selectedIndex, selectedText) {
    29.       this.- createDialog({
    30.         type: 'warn',
    31.         content: `Selected Item: 
       - value: - {selectedVal.join(', ')} 
       - index: - {selectedIndex.join(', ')} 
       - text: - {selectedText.join(' ')}`,
    32.         icon: 'cubeic-alert'
    33.       }).show()
    34.     },
    35.     cancelHandler() {
    36.       console.log('cancel')
    37.     }
    38.   }

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

    CubeDrawer

    • data 子配置项
      是一个数组，数组中每一项仍然为数组，结构类似于：

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

    CubeDrawerPanel

    CubeDrawerItem

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