微信小程序基于mpvue的ui组件之选择器

第一次自己开发组件，希望大家能够指出错误的地方或者改进的思路~

先上图片

主页面

选中状态

返回结果

 

说明，该UI组件是为小程序而开发的，能够对传入的参数进行处理，最多加载四个选择器，最少一个

创建文件Vselect.vue并复制代码进去

<template lang="html">
  <section>
    <section class="select_area" :style="areaStyle" v-if="isshow">
      <section class="select" v-for="(select,index) in data" :key="index">
        <section class="label" :class="index==active?'active':''" :style="labelStyle" @click="showOption(index)">
          <span class="label-text">{
  {select.label}}</span>
          <img class="labelImg" v-show="index!=active" src="../../static/images/choose.png" mode="aspectFit">
          <img class="labelImg" v-show="index==active" src="../../static/images/choose-active.png" mode="aspectFit">
        </section>
      </section>
      <section class="options">
        <section class="option-area" v-for="(select,index) in data" :key="index">
          <section class="option" :data-value="option.value" ref="dataValue" v-for="(option,key) in select.option" :key="key" v-show="showOptions[index].show" @click="getCh