crm-mobile/components/wk-action-sheet/wk-action-sheet.vue

<template>
  <view class="wk-action-sheet">
    <view class="sheet-wrapper">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="sheet-item"
        @click="handleSelect(index)">
        {{ label ? item[label] : item }}
      </view>
    </view>
		
    <view
      v-if="!hideCancel"
      class="sheet-item cancel"
      @click="handleCancel">
      {{ cancelText }}
    </view>
  </view>
</template>

<script>
	/**
	 * ActionSheet 弹出层
	 * @property {String} cancelText 取消按钮文字
	 * @property {Boolean} hideCancel 是否隐藏取消按钮
	 * @property {Array<Object|String>} list 选项数组
	 * @property {String} label 选项label字段key
	 * @event {Function} select 选择选项触发，index item nextFn
	 */
  export default {
    name: 'WkActionSheet',
    inject: ['popup'],
    props: {
      cancelText: {
        type: String,
        default: '取消'
      },
      hideCancel: {
        type: Boolean,
        default: false
      },
      list: {
        type: Array,
        default: () => []
      },
      label: {
        type: String,
        default: null
      }
    },
    data() {
      return {
				
      };
    },
    methods: {
      handleCancel() {
        this.popup.close()
      },
			
      handleSelect(index) {
        this.$emit('select', index, this.list[index], () => {
          this.popup.close()
        })
      }
    }
  }
</script>

<style scoped lang="scss">
	.wk-action-sheet {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: $main-bg;
		border-radius: 10rpx 10rpx 0 0;
		overflow: hidden;
		
		.sheet-wrapper {
			width: 100%;
			background-color: $main-bg;
			overflow: hidden;
		}
		
		.sheet-item {
			width: 100%;
			color: #333;
			font-size: $wk-font-medium;
			text-align: center;
			border-bottom: 1rpx solid $border-color;
			background-color: white;
			padding: 22rpx 18rpx;
		}

		.cancel {
			color: $error;
			border-bottom: 0 none;
			margin-top: 15rpx;
		}
	}
</style>