MoeNovaClient/components/ActionSheet/ActionSheet.vue

<template>
  <view class="action-sheet-container" v-if="visible" @click="handleMaskClick">
    <view class="action-sheet-mask" @touchmove.stop.prevent></view>
    <view class="action-sheet" :class="{ 'action-sheet-show': animationShow }" @click.stop>
      <view class="action-sheet-title" v-if="title">{{ title }}</view>
      <view class="action-sheet-items">
        <slot>
          <view class="action-sheet-item" v-for="(item, index) in items" :key="index"
            :class="{ 'action-sheet-item-danger': item.danger }" @click.stop="handleItemClick(index, item)">
            <image class="action-sheet-item-icon fa" v-if="item.icon" :src="item.icon"></image> 
            <text class="action-sheet-item-text">{{ item.text }}</text>
          </view>
        </slot>
      </view> 
      <view class="action-sheet-cancel" v-if="false" @click.stop="handleCancel">{{ cancelText }}</view>
      <view class="action-sheet-line"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ActionSheet',
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 选项列表，格式：[{text: '选项1', icon: 'fa-share-alt', danger: false}, ...]
    items: {
      type: Array,
      default: () => []
    },
    // 取消按钮文字
    cancelText: {
      type: String,
      default: '取消'
    },
    // 点击遮罩是否关闭
    maskClosable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false,
      animationShow: false
    }
  },
  methods: {
    // 显示ActionSheet
    show() {
      this.visible = true;
      setTimeout(() => {
        this.animationShow = true;
      }, 10);
    },

    // 隐藏ActionSheet
    hide() {
      this.animationShow = false;
      setTimeout(() => {
        this.visible = false;
      }, 300); // 动画持续时间
    },

    // 处理选项点击
    handleItemClick(index, item) {
      this.$emit('select', index, item);
      this.hide();
    },

    // 处理取消按钮点击
    handleCancel() {
      this.$emit('cancel');
      this.hide();
    },

    // 处理遮罩点击
    handleMaskClick() {
      if (this.maskClosable) {
        this.$emit('cancel');
        this.hide();
      }
    }
  }
}
</script>

<style lang="scss">
.action-sheet-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;


  .action-sheet-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .action-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    background: #F2F6F2;
    border-radius: 24rpx 24rpx 0 0;
    overflow: hidden;
    padding: 60rpx 32rpx;

    &.action-sheet-show {
      transform: translateY(0);
    }

    .action-sheet-title {
      padding: 24rpx;
      text-align: center;
      font-size: 28rpx;
      color: #999;
      background-color: #fff;
      border-bottom: 1rpx solid #eee;
    }

    .action-sheet-items {

      .action-sheet-item {
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: start;
        height: 110rpx;
        font-size: 32rpx;
        color: #333;
        border-bottom: 1rpx solid #eee;
        box-sizing: border-box;
        padding-left: 30rpx;


        &:active {
          background-color: #f2f2f2;
        }

        &.action-sheet-item-danger {
          color: #ff5151;
          margin-top: 16rpx;
          border-radius: 20rpx;
        }

        .action-sheet-item-icon {
          margin-right: 16rpx;
          width: 36rpx;
          height: 36rpx;
        }

        .action-sheet-item-text {
          font-size: 32rpx;
        }

        &:first-child {
          border-top-right-radius: 20rpx;
          border-top-left-radius: 20rpx;
        }

        &:nth-child(2) {
          border-bottom-right-radius: 20rpx;
          border-bottom-left-radius: 20rpx;
        }

        &:last-child {
          border-bottom-right-radius: 20rpx;
          border-bottom-left-radius: 20rpx;
        }
      }
    }

    .action-sheet-cancel {
      height: 110rpx;
      line-height: 110rpx;
      text-align: center;
      font-size: 32rpx;
      color: #333;
      background-color: #fff;
      margin-top: 16rpx;

      &:active {
        background-color: #f2f2f2;
      }
    }

    .action-sheet-line {
      position: absolute;
      top: 16rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 62rpx;
      height: 8rpx;
      background: #D1DED1;
      border-radius: 224rpx;
    }
  }
}
</style>