第一次自己开发组件,希望大家能够指出错误的地方或者改进的思路~
先上图片
主页面
选中状态
返回结果
说明,该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