WARNING

请在手机模拟器模式查看该功能

actionSheet props

属性	描述	类型	默认值
visible	开启actionSheet，可用v-model关联	boolean	false
data	选项列表，可以通过labelkey和valuekey设置每个选项的value值和label值	array	[]
labelKey	选项列表的labelKey	string	label
valueKey	选项列表的valueKey	string	value
zIndex	层级样式	number	1000
btnText	按钮的文案	string	-

actionSheet events

名称	描述	参数
close	当actionSheet关闭动画结束后的回调	-
click-item	点击某个选项的回调	data（包含该选项的数据和下标）

actionSheet slot

名称	说明	返回的参数
default	选项列表区域的替换	-

例子代码

<template>
  <div>
    <div class="items">
      <p class="item_title">基础用法</p>
      <vill-button @click="visible1=true">基础用法</vill-button>
      <vill-action-sheet
        v-model="visible1"
        :data="list"
        btnText="取消"
        @click-item="handleItem"
        @close="handleClose"
      />
    </div>
    <div class="items">
      <p class="item_title">自定义</p>
      <vill-button @click="visible2=true">自定义</vill-button>
      <vill-action-sheet
        v-model="visible2"
      >
        <div class="box1">
          <vill-scroll ref="scroll">
            <div class="items" v-for="(item, index) in 20" :key="index">{{index}}</div>
          </vill-scroll>
        </div>
      </vill-action-sheet>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible1: false,
      visible2: false,
      list: [1,2,3,4]
    }
  },
  watch: {
    visible2(v) {
      if (v) {
        this.$nextTick(() => {
          this.$refs.scroll.refresh()
        })
      }
    }
  },
  methods: {
    handleItem(data) {
      console.log('click-item', data)
    },

    handleClose() {
      console.log('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.box1{
  width: 100%;
  height: 400px;
  background: #ffffff;
  border-radius: 10px 10px 0 0;
  .items{
    border-bottom: 1px solid #eeeeee;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #333333;
  }
}
</style>