更新记录

1.0.0（2023-08-18） 下载此版本

上线

平台兼容性

阿里矢量图-图标组件

组件名：jp-zoosemy-option

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

本组件为单选选择器、多选选择器

拥有单选、多选、自定义颜色、自定义选择样式等，具体如图所示。采用v-model双向绑定操作，用户使用更加方便

用法

<template>
<view class="kik">
    <view class="hader">单选{{va1}}</view>
    <jp-zoosemy-option :list="list" code="img" v-model="va1"></jp-zoosemy-option>
    <view class="hader">多选{{va2}}</view>
    <jp-zoosemy-option type="checkbox" :list="list" code="img" v-model="va2"></jp-zoosemy-option>
    <view class="hader">单选 - 自定义颜色</view>
    <jp-zoosemy-option :list="list" code="img" color="#f00" backgroundColor="#fff" v-model="va9"></jp-zoosemy-option>
    <view class="hader">单选 -  设置成打钩</view>
    <jp-zoosemy-option :list="list" code="img"  radioType="duihao"  backgroundColor="#fff" v-model="va96"></jp-zoosemy-option>
    <view class="hader">单选 - 自定义颜色 - 自定义选择文字（燃字可以自定义）</view>
    <jp-zoosemy-option :list="list" code="img"  radioType="燃" color="#f00" backgroundColor="#fff" v-model="va95"></jp-zoosemy-option>
    <view class="hader">单选 - 靠拢</view>
    <jp-zoosemy-option :list="list" flex code="img" v-model="va3"></jp-zoosemy-option>
    <view class="hader">单选 - 靠拢 - 文字显示在右边</view>
    <jp-zoosemy-option :list="list"  site="right" flex code="img" v-model="va7"></jp-zoosemy-option>
    <view class="hader">单选 - 文字靠拢 </view>
    <jp-zoosemy-option :list="list"  distance code="img" v-model="va71"></jp-zoosemy-option>
    <view class="hader">单选 - 文字靠拢 - 文字显示在右边</view>
    <jp-zoosemy-option :list="list"  site="right" distance code="img" v-model="va72"></jp-zoosemy-option>
    <view class="hader">单选 - 全拟物按钮</view>
    <jp-zoosemy-option :list="list"  code="img" button v-model="va4"></jp-zoosemy-option>
    <view class="hader">多选 - 全拟物按钮</view>
    <jp-zoosemy-option type="checkbox" :list="list" button code="img" v-model="va2"></jp-zoosemy-option>
    <view class="hader">单选 - 全拟物按钮 - 不要选框 - 靠拢</view>
    <jp-zoosemy-option :list="list" :isRadio="false" flex code="img" button v-model="va8"></jp-zoosemy-option>
    <view class="hader">单选 - 全拟物按钮 - 靠拢</view>
    <jp-zoosemy-option :list="list" flex code="img" button v-model="va5"></jp-zoosemy-option>
    <view class="hader">单选 - 全拟物按钮 - 靠拢 - 自定义颜色</view>
    <jp-zoosemy-option :list="list" flex code="img" backgroundColor="#fff" color="#f00"  button v-model="va6"></jp-zoosemy-option>
    <view class="hader">单选 - 全拟物按钮 - 靠拢 - 自定义颜色 - 文字显示在右边</view>
    <jp-zoosemy-option :list="list" flex code="img" site="right"  backgroundColor="#fff" color="#f00"  button v-model="va61"></jp-zoosemy-option>
    <view class="hader">单选 - 不要name - 那么显示在按钮上 - 靠拢</view>
    <jp-zoosemy-option :list="list" code="img"  :isName="false"  radioType="name"  v-model="va92"></jp-zoosemy-option>
    <view class="hader">多选 -  name显示在按钮上 - 靠拢</view>
    <jp-zoosemy-option  type="checkbox"  :list="list" code="img"   radioType="name"  v-model="va91"></jp-zoosemy-option>

</view>
</template>
<script>
export default {
        data() {
            return {
                va2:[],
                va3:'',
                va4:'',
                va5:'',
                va6:'',
                va1:'',
                va7:'',
                va71:'',
                va61:'',
                va72:'',
                va8:'',
                va9:'',
                va92:'',
                va95:'',
                va96:'',
                va91: [],
                list: [
                    {
                        name:'加载失败',
                        img:'failed'
                    },{
                        name:'加载成功',
                        img:'succeed'
                    }   
                ]
            }
        },
    }
</script>

<style lang="scss" scoped>
    .kik{
        padding:  0 12rpx;
        background-color: #f5f5f5;
        .hader{
            line-height: 80rpx;
            font-weight: 800;
        }
    }
</style>

API

参数

事件