更新记录

1.0.7（2022-07-05）下载此版本

E-selectbox 数据传输 disable 是否禁用 select 是否选中

1.0.6（2022-07-05）下载此版本

E-selectbox 插槽绑定各项index

1.0.5（2022-06-28）下载此版本

修复全局引入异常问题

平台兼容性

Vue2	Vue3
√	×

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.1.0 app-vue app-nvue	√	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序
√	√	√	√

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

E-UI 开发文档

原声微信小程序易得组件库玩命建设中

使用方法：UNI-APP项目

全局引入

    <!-- pages.json 文件内-->
    "easycom": {
        "^E-(.*)": "@/uni_modules/E-UI/components/E-$1/index.vue"
    },

按需引入

    <!-- dome.vue 文件内-->
    <template>
        <view class="box">
            <E-name></E-name>
        </view>
    </template>
    <script>
        import EName from '@/uni_modules/E-UI/components/E-UI/E-name/index.vue'   //这里引入 
        export default { 
            components:{
                EName,
            },
            data() {
                return {

                }
            },
            onLoad() {

            },
            methods: {

            }
        }
    </script>

selectbox 多选&单选

参数名	属性	说明
content	Array	内容数据	[{name:'AA',select:false,disable:false}] select 是否选择 disable 是否禁用
content_location	String	内容位置	默认 right left:左边 right:右边
count_on	Boolean	是否依靠内容选择	默认 true 注意需在data中声明后绑定 :count_on='count_on'
select_type	String	选择属性	默认 checkbox checkbox:复选 radio:单选
shape_type	number	选择框的形状	默认 shape_type:0 0:方行 1:圆形
max_style	Object	最外层元素的style	例:max_style:{'border:1px solid red'}
list_style	Object	列表的style
li_style	Object	每一项的style
interior_graph_id	number	内部图形id	默认 interior_graph_id:1 1:√ 2:× 3:☻ 4:♙ 注意部分机型字符显示有差异
interior_graph_value	String	自定义内部图形
interior_graph_src	String	内部图形链接	默认 mode="aspectFit"
center_font_size	number	内部图形大小	默认 40 单位 rpx
center_style	String	内部绘制形状style
selectbox_style	Object	选择框的style
selectbox_color	String	选择框未选中的颜色
selectbox_active_color	String	选择框选中时的颜色
graph_show	Boolean	未选中时中心图形是否显示	默认 false 注意需在data中声明后绑定 :graph_show='graph_show'
graph_style	Object	中心自定义style
graph_color	String	中心图形未选中的颜色	默认 #cccccc
graph_active_color	String	中心图形选中时的颜色	默认 #5555ff

使用案例

<template>
    <view class="box">
        <view class="li">
            <view class="top">
                <view class="t-li">
                    多选&单选
                </view>
                <view class="t-li">
                    自定义形状 
                </view>
                <view class="t-li">
                    自定义内部图形（符号，图片，背景）
                </view>
                <view class="t-li">
                    自定义框中背景 选中&未选中
                </view>
            </view>
        </view>
        <view class="li"> 
            <view class="title">
                基础案例
            </view>
            <view class="msg">
                外：方形 内：✓
            </view>
            <E-selectbox></E-selectbox>
        </view>
        <view class="li">
            <view class="msg">
                外：圆形 内：✓
            </view>
            <E-selectbox
            :shape_type="1"
            ></E-selectbox>
        </view>
        <view class="li">
            <view class="msg">
                外：自定义 内：自定义
            </view>
            <E-selectbox
            :content="top_content"
            :selectbox_style="top_selectbox_style"
            interior_graph_id="4"
            :graph_style="top_graph_style"
            ></E-selectbox>
        </view>
        <view class="li">
            <view class="msg">
                请选择主武器 竖向排列（单选）
            </view>
            <E-selectbox
            :content="one"
            :select_type="select_type_two"
            >
            <template v-slot="{item}">
                <view>{{item.name}}</view>
            </template>
            </E-selectbox>
        </view>
        <view class="li">
            <view class="msg">
                请选择副武器 横向排列（单选）内容在右侧
            </view>
            <E-selectbox
            :content="two"
            :list_style="two_list_style"
            :select_type="select_type_two"
            >
            <template v-slot="{item}">
                <view>{{item.name}}</view>
            </template>
            </E-selectbox>
        </view>
        <view class="li">
            <view class="msg">
                请选择投掷武器 横向排列（多选）内容在左侧
            </view>
            <E-selectbox
            :content="three"
            :list_style="two_list_style"
            :select_type="select_type_one"
            content_location='left'
            >
            <template v-slot="{item}">
                <view>{{item.name}}</view>
            </template>
            </E-selectbox>
        </view>
        <view class="li">
            <view class="msg">
                请选择游戏画质 禁止点击内容选中
            </view>
            <E-selectbox
            :content="four"
            :list_style="two_list_style"
            :select_type="select_type_two"
            :count_on='count_on'
            >
            <template v-slot="{item}">
                <view>{{item.name}}</view>
            </template>
            </E-selectbox>
        </view>
        <view class="li">
            <view class="title">
                使用案例
            </view>
            <view class="msg">
                购物车
            </view>
            <E-selectbox
            :content="five"
            :list_style='five_list_style'
            :shape_type="2"
            :selectbox_active_color="five_select_active_color"
            :graph_active_color="five_graph_active_color"
            :li_style='five_li_style'
            interior_graph_id="3"
            :graph_style="graph_style"
            >
                <template v-slot="{item}">
                    <view class="li-c">
                        <image class="lc-l" src="/static/logo.png" mode=""></image>
                        <view class="lc-r">
                            <view class="lcr-t">
                                {{item.name}}
                            </view>
                            <view class="lcr-c">
                                <view class="gg">
                                    产品规格规格
                                </view>
                            </view>
                            <view class="lcr-f">
                                <view class="lcrf-l">
                                    <view class="lcf-l" >
                                        ￥
                                    </view>
                                    <view class="lcf-r" >
                                        {{item.price}}
                                    </view>
                                </view>
                                <view class="li-r">
                                    <view class="cfr-l">
                                        -
                                    </view>
                                    <view class="cfr-c">
                                        1
                                    </view>
                                    <view class="cfr-r">
                                        +
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>

                </template>
            </E-selectbox>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                top_content:[{select:true}],
                one:[
                    {
                        name:'AK-47',
                        select:true
                    },
                    {
                        name:'火麒麟',
                        select:false
                    },
                    {
                        name:'雷神',
                        select:false
                    },

                ],
                two:[
                    {
                        name:'公牛',
                        select:true
                    },
                    {
                        name:'毛瑟',
                        select:false
                    },
                    {
                        name:'左轮',
                        select:false
                    },

                ],
                three:[
                    {
                        name:'手雷',
                        select:true
                    },
                    {
                        name:'闪光弹',
                        select:false
                    },
                    {
                        name:'烟雾弹',
                        select:false
                    },

                ],
                four:[
                    {
                        name:'流畅',
                        select:false
                    },
                    {
                        name:'高清',
                        select:false
                    },
                    {
                        name:'蓝光',
                        select:true
                    },

                ],
                five:[
                    {
                        name:"飞机",
                        price:'100',
                        select:true,
                    },
                    {
                        name:"火箭",
                        price:'200',
                        select:true,
                    },
                    {
                        name:"坦克",
                        price:'460',
                        select:false,
                    }
                ],
                count_on:false,
                select_type_one:'checkbox',
                select_type_two:'radio',
                top_selectbox_style:{
                    'height':'20rpx',
                    'width':'40rpx',
                    'margin':'10rpx 20rpx',
                    'border':'1px solid #ccc',
                    'display':'flex',
                    'align-items':'center',
                    'justify-content':'center',
                    'border-radius':'0 0 20rpx 20rpx' 
                },
                top_graph_style:{
                    'margin-top':'-20rpx'
                },
                graph_style:{
                    'border':'1px solid red',
                    'border-radius':'50%',
                    'background-color':'red',
                    'height':"30rpx",
                    'width':'30rpx',
                    'margin-top':'rpx'
                },
                two_list_style:{
                    'display':'flex'
                },
                content_location:'right',
                five_list_style:{
                    'width':"100%",
                    'display':'flex',
                    'flex-direction': 'column',
                    'align-items': 'center',
                    'margin-top':'20rpx'
                },
                five_select_active_color:'#45C7AC',
                five_graph_active_color:'#ffffff',
                five_li_style:{
                    'margin-top':'20rpx',
                    'width':'100%',
                    'display':'flex',
                    'align-items': 'center',
                    'border-radius':"16rpx",
                    'background-color':'#ffffff'
                },
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .box {
        width: 100%;
        height: 100%;

    }
    .li{
        width: 90%;
        margin:10rpx auto;
    }
    .t-li{
        font-size: 28rpx;
    }
    .title{
        font-size: 32rpx;
        color: #333333;
    }
    .msg{
        font-size: 24rpx;
        color: #333333;

    }
    .li-c{
        display: flex;
        height: 80%;
        align-items: center;
        flex: 1;
    }
    .li-r{
        display: flex;
        margin-right: 20rpx;
        align-items: flex-end;
        margin-top: 60rpx;

    }
    .check{
        width: 40rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        border-radius: 50%;
        border: 1px solid #ccc;
    }
    .cfr-l{
        width: 40rpx;
        height: 40rpx;
        line-height: 40rpx;
        color:#999999 ;
        font-size: 30rpx;
        text-align: center;
        background-color: #EEEEEE;
    }
    .cfr-c{
        padding: 0 20rpx;
        height: 40rpx;
        line-height: 40rpx;
        color: #333333;
        margin: 0 20rpx;
        font-size: 24rpx;
        background-color: #DFDFDF;
    }
    .cfr-r{
        width: 40rpx;
        height: 40rpx;
        line-height: 40rpx;
        color:#999999 ;
        font-size:30rpx;
        text-align: center;
        background-color: #EEEEEE;
    }
    .lc-l{
        width:144rpx;
        height: 144rpx;
    }
    .lc-r{
        display: flex;
        margin-left: 10rpx;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }
    .lcr-t{
        color:#333333 ;
        font-size:28rpx ;
    }
    .lcr-c{
        display: flex;
        background-color: #F2F2F2;
        align-items: center;
        color: #999999;
        font-size: 16rpx;
        padding: 0 10rpx;

    }
    .lcr-f{
        width: 100%;
        display: flex;
        height: 60rpx;
        align-items: flex-end;
        justify-content: space-between;
    }
    .lcf-l{
        color:#45C7AC ;
        font-size:20rpx ;
    }
    .lcf-r{
        color:#45C7AC ;
        font-size: 28rpx;
    }
    .lcrf-l{
        display: flex;
        align-items: center;
    }
</style>

popup 弹出窗口

参数名	属性	说明
width	Number	宽度单位%	默认 100
height	Number	高度单位 px	默认 400
mask_color	String	遮罩层背景色	默认 #000000
body_color	String	内容背景色	默认 #ffffff
timing	String	执行的动画属性	默认 cubic-bezier(0.1, 0.23, 0.09, 0.93)
time	Number	动画执行时间单位 ms	默认 400
direction	String	窗口弹出位置	默认 bottom 可选：left,right,top,bottom,center
radius	String	边框圆角	默认 '50rpx 50rpx 0 0'
mask_click	Boolean	是否可以点击遮罩层关闭	默认 true

slider 弧形滑块调节器

参数名	属性	说明
width	Number	宽度单位rpx	默认 450
num	Number	1-100	默认 20
btn_size	Number	滑块大小	默认 40
line_width	Number	线条宽度	默认 20
color	String	变化后的颜色	默认 #5176cc
back_color	String	未滑过的颜色	默认 #ccc
btn_color	String	滑块颜色	默认 #816acc

E-UI 多选&复选 弧形滑块 弹出层 自定义

更新记录

1.0.7（2022-07-05）下载此版本

1.0.6（2022-07-05）下载此版本

1.0.5（2022-06-28）下载此版本

平台兼容性

E-UI 开发文档

原声微信小程序易得组件库玩命建设中

使用方法：UNI-APP项目

全局引入

按需引入

selectbox 多选&单选

使用案例

popup 弹出窗口

slider 弧形滑块调节器

易得UI 将不断新增，完善，优化各组件欢迎留言

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

E-Bluetooth

log-js

E-UI

E-request

E-UI 多选&复选 弧形滑块 弹出层 自定义

更新记录

1.0.7（2022-07-05） 下载此版本

1.0.6（2022-07-05） 下载此版本

1.0.5（2022-06-28） 下载此版本

平台兼容性

E-UI 开发文档

原声微信小程序易得组件库玩命建设中

使用方法：UNI-APP项目

全局引入

按需引入

selectbox 多选&单选

使用案例

popup 弹出窗口

slider 弧形滑块调节器

易得UI 将不断新增，完善，优化各组件 欢迎留言

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

E-Bluetooth

log-js

E-UI

E-request

Modal title

E-UI 多选&复选弧形滑块弹出层自定义

1.0.7（2022-07-05）下载此版本

1.0.6（2022-07-05）下载此版本

1.0.5（2022-06-28）下载此版本

易得UI 将不断新增，完善，优化各组件欢迎留言