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

<template>
  <modal v-model="vValue">
    <view class="screen_all center" @click="closeModal">
      <view class="select-modal" @click.stop>
        <view class="select-modal-item row aCenter"
          v-for="(item,index) in data"
          :key="index"
              @click="triggerSelect(index)"
        >
          <view class="flex-all-1">
            <view class="line-1">{{item.label}}</view>
          </view>
          <v-radio disabled :value="select===index" color="#fff" borderColor="#7A7A7A" activeBorderColor="#41AE3C" activeColor="#41AE3C"></v-radio>
        </view>
      </view>
    </view>
  </modal>
</template>

<script>
import modal from '@/components/modal/main';
import vRadio from '@/components/v-radio/main';
import props from './props';
export default {

  data(){
    return {
      vValue:false
    }
  },

  watch:{
    value(){
      this.changeValue(this.value);
    }
  },

  methods:{
    changeValue(value){
      if (this.vValue !== value) {
        this.vValue = value;
        if (this.value !== value) {
          return this.$emit('input',value);
        }
      }
    },
    closeModal(){
      if (this.vValue) {
        return this.changeValue(false);
      }
    },
    triggerSelect(index){
      this.closeModal();
      if (this.select !== index) {
        return this.$emit('change',{
          index,
          item: this.data[index]
        })
      }

    }
  },

  props,
  components:{
    modal,
    vRadio
  }
}
</script>

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

</style>