更新记录

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

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

隐私、权限声明

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

无

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

无

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

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...