iot-ui/docs/ActionSheet.md

基于快应用的IoT组件库

### ActionSheet对话框

属性:

| 属性  | 说明   |  类型 | 默认值  |
| -----| ---- | ---- | ---- |
|  datasource | 选项数组 ,选项需要有name属性| array | [] |
| height | ActionSheet对话框高度 | number | 600 |
| visible | ActionSheet对话框是否显示 | boolean | false |
| onselect | 选择事件 | | |
| oncancel | 取消事件 | | |


### 注意 ⚠️

```
 1.0.0 版本选择事件使用 onevt-choose 而非 onselect
 1.0.0 版本取消事件使用 onevt-cancel 而非 oncancel

```

### 示例

``` html

<import name="ActionSheet" src="iot-ui/ActionSheet/index.ux"></import>
<template>
  <div>
    <div class="box">
      <text @click="handleClick" class="btn-text"> 点击显示ActionSheet </text>
      <text class="choosed-value"> 选择的值:{{ choosedValue }} </text>
    </div>
    <ActionSheet visible="{{visible}}" datasource="{{datasource}}" height="{{height}}" onselect="handleSelect" oncancel="handleCancel"></ActionSheet>
  </div>
</template>

<style>
  .box {
    flex-direction: column;
    justify-content: center;
    padding: 40px;
  }

  text {
    font-size: 40px;
  }

  .btn-text {
    border-radius: 10px;
    background-color: #409EFF;
    padding: 40px;
    color: #fff;
  }

  .choosed-value {
    margin-top: 40px;
  }
</style>

<script>
  let arr = [];
  for (let i = 0; i < 200; i++) {
    arr.push({
      name: "" + i
    });
  }

  export default {
    private: {
      visible: false,
      //height可以不传,默认值900
      height: 900,
      datasource: arr,
      choosedValue: ""
    },
    onInit() { },
    handleSelect(evt) {
      console.log(evt.detail);
      this.visible = false; //选中之后 this.visible 需要设置为false
      this.choosedValue = evt.detail.item.name;
    },
    handleCancel(evt) {
      this.visible = false; //取消选择
      console.log("取消选择 ");
    },
    handleClick() {
      this.visible = true;
    }
  };
</script>

```