products/uni-shop/components/modal-select/main.vue

<template>
  <modal
    v-model="actualValue"
    animateContent="translateYR"
  >
    <view class="flex modal-select-container">
      <view  @click="cancel" class="flex-all-1"></view>
      <view class="modal-select-footer overflow">
        <template
            v-for="(item,index) in data"
        >
          <button :key="index" class="clear-button modal-select-item modal-select-for-item center"
                @click.stop="trigger(item)"
                :open-type="item.openType"
                  v-if="item.type === 'button'"
          >
            {{item.label}}
          </button>
          <view v-else class="modal-select-item modal-select-for-item center"

                :key="index"
                @click.stop="trigger(item)"
          >{{item.label}}</view>
        </template>

        <view class="modal-select-margin"></view>
        <view @click="cancel" class="modal-select-item center">取消</view>
      </view>
    </view>
  </modal>
</template>

<script>
import modal from '@/components/modal/main.vue';
import props from './props';
export default {
  name: "modal-select",
  components:{
    modal
  },
  data(){
    return {
      actualValue:false
    }
  },

  watch:{
    value:function () {
      this.setValue(this.value);
    }
  },

  methods:{
    setValue(value){
      if (this.actualValue !== value) {
        this.actualValue = value;
        if (this.value !== value) {
          this.$emit('input',value);
        }
      }
    },
    cancel(){
      return this.setValue(false);
    },
    trigger(item){
      this.$emit('trigger',item);
    }
  },

  props
}
</script>

<style scoped lang="scss" src="./style.scss"></style>