更新记录

0.1（2025-05-03） 下载此版本

开发了 u-badge u-button u-cell-group u-cell-item u-col u-form-item u-form u-icon u-image u-input u-row u-tag

平台兼容性

vue3组合式Api化了这几个组件标签，剩下的不搞了， 特别佩服那些能整个搞完的，还能坚持到底。

u-badge

u-button

u-cell-group

u-cell-item

u-col

u-form-item

u-form

u-icon

u-image

u-input

u-row

u-tag

安装方式

和uView1.x的安装方式一摸一样，使用方式也是差不多的。

下载uView1.x的UI包，把components包换成我这个components包，其他什么都不变

然后设置easycome

"easycom": {
        "autoscan": true,
        "custom": {
            "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
        }
    }

演示

<template>
    <view style="padding:10px;">
        <u-form :model="formData" :rules="rules" ref="formRef" border>
            <u-form-item name="username" label="用户名">
                <u-input type="text" v-model="formData.username" />
            </u-form-item>
            <u-form-item name="password" label="密码" prop="password">
                <u-input type="password" v-model="formData.password" />
            </u-form-item>
            <u-button type="primary" @click="submitForm">提交</u-button>
        </u-form>
    </view>
</template>

<script lang="ts" setup>
    import {
        ref,
        reactive,
        onMounted,
        onBeforeMount,
        getCurrentInstance
    } from 'vue'

    const formData = ref({
        username: '',
        password: ''
    });
    const rules = {
        username: {
            rules: [{ required: true, errorMessage: '请输入用户名' }]
        },
        password: {
            rules: [
                { required: true, errorMessage: '请输入密码' },
                { minLength: 6, errorMessage: '密码长度不能少于6位' }
            ]
        }
    };
    const formRef = ref(null);
    const submitForm = () => {
        formRef.value.validate().then(res => {
            console.log('验证通过', res);
        }).catch(err => {
            console.log('验证失败', err);
        });
    }
</script>

<style lang="scss" scoped>

</style>

开发注意点

vue3中具名插件写法是这样的
<u-image src="https://cdn.uviewui.com/uview/example/fade.jpg">
    <template #error>
        <view style="font-size: 24rpx;">加载失败</view>
    </template>
</u-image>