更新记录

1.0.9（2023-04-20） 下载此版本

1、修复文档错误 2、修复组件命名错误

1.0.8（2022-07-29） 下载此版本

1.0.8（2022-07-29）

1、修复微信小程序中w-radio-picker默认值为undefind或null时，无法选中对应空选项问题 2、修复微信小程序中w-datetime-picker点击弹出picker报错问题 3、w-radio-picker添加value和options变化监听 4、w-checkbox-picker添加value和options变化监听 5、w-datetime-picker添加value变化监听 6、w-select-ro-input添加value和options变化监听 7、w-address-picker添加value和label变化监听

1.0.7（2022-06-01） 下载此版本

删除@update自定义事件，添加v-model语法糖

平台兼容性

uview-ui-plus

基于uView2.0封装的组件库

说明

uview-ui-plus是基于uView2.0封装的组件库，在uView2.0的基础上，提供更加方便的模板组件，支持H5，APP，APP-NVUE，微信小程序等应用。

组件列表

• w-radio-picker：单项选择器
• w-checkbox-picker：多项选择器
• w-datetime-picker：日期时间选择器
• w-select-or-input：输入或选择组件
• w-address-picker：省市区三级联动选择组件

注意

使用uview-ui-plus前，你必须先安装uView2.0框架，具体安装步骤请参考uView2.0文档

快速上手

1、从插件市场导入uview-ui-plus插件

2、pages.json配置easycom规则(按需引入)

// pages.json
{
    "easycom": {
        "^w-(.*)": "@/uni_modules/uview-ui-plus/components/w-$1/w-$1.vue"
    },
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}

使用方法

配置easycom规则后，自动按需引入，无需import组件，直接引用即可。

w-radio-picker

<template>
    <!-- u-radio-picker为表单组件，结合u--form表单使用 -->
    <u--form labelWidth="100" labelPosition="left" :model="form" :rules="rules" ref="form">
        <u-form-item required label="用户名" prop="userId" borderBottom>
            <w-radio-picker v-model="form.userId" placeholder="请选择用户名" :options="optionsList" inputAlign="right" />
        </u-form-item>
    </u--form>
</template>

w-checkbox-picker

<template>
    <!-- u-checkbox-picker为表单组件，结合u--form表单使用 -->
    <u--form labelWidth="100" labelPosition="left" :model="form" :rules="rules" ref="form">
        <u-form-item required label="用户名" prop="userId" borderBottom>
            <w-checkbox-picker v-model="form.userId" placeholder="请选择用户名" :options="optionsList" inputAlign="right" />
        </u-form-item>
    </u--form>
</template>

w-datetime-picker

<template>
    <!-- w-datetime-picker为表单组件，结合u--form表单使用 -->
    <u--form labelWidth="100" labelPosition="left" :model="form" :rules="rules" ref="form">
        <u-form-item required label="开始时间" prop="beginDate" borderBottom>
            <w-datetime-picker v-model="form.beginDate" placeholder="请选择开始时间" mode="date" inputAlign="right" />
        </u-form-item>
    </u--form>
</template>

w-select-or-input

<template>
    <!-- w-select-or-input为表单组件，结合u--form表单使用 -->
    <u--form labelWidth="100" labelPosition="left" :model="form" :rules="rules" ref="form">
        <u-form-item required label="所属公司" prop="orgName" borderBottom>
            <w-select-or-input v-model="form.orgName" placeholder="请选择所属公司" :options="orgList" inputAlign="right" />
        </u-form-item>
    </u--form>
</template>

w-address-picker

<template>
    <!-- w-address-picker为表单组件，结合u--form表单使用 -->
    <u--form labelWidth="100" labelPosition="left" :model="form" :rules="rules" ref="form">
        <u-form-item required label="省市区" prop="address" borderBottom>
            <!-- 注意，v-model默认是value的双向绑定，此处也可使用:value和@update:value实现双向绑定 -->
            <w-address-picker :value="form.addressCode" @update:value="form.addressCode=$event" :value="form.addressLabel" @update:value="form.addressLabel=$event" placeholder="请选择所属省市区" inputAlign="right" />
        </u-form-item>
    </u--form>
</template>