uniapp 拍照和从相册选择的弹窗

1、在common创建一个vue，把下列代码复制进去

<template>
  <view>
    <view class="tui-actionsheet-class tui-actionsheet" :class="[show?'tui-actionsheet-show':'']">
      <view class="tui-tips" :style="{fontSize:size+'rpx',color:color}" v-if="tips">
        {{tips}}
      </view>
      <view :class="[isCancel?'tui-operate-box':'']">
        <block v-for="(item,index) in itemList" :key="index">
          <view class="tui-actionsheet-btn tui-actionsheet-divider"
            :class="[(!isCancel && index==itemList.length-1)?'tui-btn-last':'']"
            hover-class="tui-actionsheet-hover" :hover-stay-time="150" :data-index="index"
            :style="{color:item.color || '#1a1a1a'}" @tap="handleClickItem">{{item.text}}</view>
        </block>
      </view>
      <view class="tui-actionsheet-btn tui-actionsheet-cancel" hover-class="tui-actionsheet-hover"
        :hover-stay-time="150" v-if="isCancel" @tap="handleClickCancel">取消</view>
    </view>
    <view class="tui-actionsheet-mask" :class="[show?'tui-mask-show':'']" @tap="handleClickMask"></view>
  </view>
</template>

<script>
  export default {
    name: "tuiActionsheet",
    props: {
      //点击遮罩 是否可关闭
      maskClosable: {
        type: Boolean,
        default: true
      },
      //显示操作菜单
      show: {
        type: Boolean,
        default: false
      },
      //菜单按钮数组，自定义文本颜色，红色参考色：#e53a37
      itemList: {
        type: Array,
        default: function() {
          return [{
            text: "确定",
            color: "#1a1a1a"
          }]
        }
      },
      //提示文字
      tips: {
        type: String,
        default: ""
      },
      //提示文字颜色
      color: {
        type: String,
        default: "#9a9a9a"
      },
      //提示文字大小 rpx
      size: {
        type: Number,
        default: 26
      },
      //是否需要取消按钮
      isCancel: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      handleClickMask() {
        if (!this.maskClosable) return;
        this.handleClickCancel();
      },
      handleClickItem(e) {
        if (!this.show) return;
        const dataset = e.currentTarget.dataset;
        this.$emit('click', {
          index: dataset.index
        });
      },
      handleClickCancel() {
        this.$emit('chooseCancel');
      }
    }
  }
</script>

<style>
  .tui-actionsheet {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
    transform-origin: center;
    transition: all 0.3s ease-in-out;
    background: #eaeaec;
    min-height: 100rpx;
  }

  .tui-actionsheet-show {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  .tui-tips {
    width: 100%;
    padding: 30rpx 60rpx;
    box-sizing: border-box;
    text-align: center;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tui-operate-box {
    padding-bottom: 12rpx;
  }

  .tui-actionsheet-btn {
    width: 100%;
    height: 100rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 36rpx;
    position: relative;
  }

  .tui-btn-last {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tui-actionsheet-divider::before {
    content: '';
    width: 100%;
    border-top: 1rpx solid #d9d9d9;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .tui-actionsheet-cancel {
    color: #1a1a1a;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tui-actionsheet-hover {
    background: #f7f7f9;
  }

  .tui-actionsheet-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9996;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
  }

  .tui-mask-show {
    opacity: 1;
    visibility: visible;
  }
</style>

2、在需要用的地方引入新创建的vue

import showActionSheet from '@/common/show-action-sheet/index.vue'

components: {
            showActionSheet
        },

3、使用刚引进来的

<show-action-sheet :tips="showActionSheet.tips" :itemList="showActionSheet.itemList"
            :show="showActionSheet.show" :maskClosable="showActionSheet.maskClosable"
            :isCancel="showActionSheet.isCancel" @chooseCancel="chooseCancel" @click="click"></show-action-sheet>

在data里面：

showActionSheet: {
                    show: false,
                    maskClosable: true,
                    itemList: [{
                            text: "拍摄",
                            color: "#333"
                        },
                        {
                            text: "从相册选择",
                            color: "#333"
                        },
                    ],
                    color: "#9a9a9a",
                    size: 26,
                    isCancel: true
                },

关闭弹窗
this.showActionSheet.show = false;

打开弹窗

this.showActionSheet.show = true;

弹窗里面的取消

chooseCancel() {
                this.showActionSheet.show = false;
            },

点击的是弹窗的那个

click(e){

console.log(e);

}

本人纯属记录