手把手教你vue3-js-uniapp-vite创建多端小程序-3 统一ui，uview-plus

1.安装uview

npm install uview-plus

2.详细安装步骤看官网：https://uiadmin.net/uview-plus/components/setting.html

3.在页面中直接index.vue使用，不需要import 进来

<template>
<view>
<u-form labelPosition="left" :model="model1" :rules="rules" ref="formRef">
<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
<u-input v-model="model1.userInfo.name" border="none"></u-input>
</u-form-item>
<u-form-item
label="性别"
prop="userInfo.sexName"
borderBottom
@click="
showSex = true;
hideKeyboard();
"
ref="item1"
>
<u-input
v-model="model1.userInfo.sexName"
disabled
disabledColor="#ffffff"
placeholder="请选择性别"
border="none"
></u-input>
<template #right>
<u-icon name="arrow-right"></u-icon>
</template>
</u-form-item>
<up-button type="primary" text="确定" @click="save"></up-button>
</u-form>

<u-action-sheet
:actions="list"
@select="selectClick"
:title="title"
:show="showSex"
></u-action-sheet>
</view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const showSex = ref(false);
const model1 = ref({
userInfo: {
name: "",
sex: "",
sexName: ""
}
});
const rules = ref({
"userInfo.name": {
type: "string",
required: true,
message: "请填写姓名",
trigger: ["blur", "change"]
},
"userInfo.sexName": {
type: "string",
required: true,
message: "请选择男或女",
trigger: ["blur", "change"]
}
});
const list = [
{
name: "男",
id: 1
},
{
name: "女",
id: 2
}
];
const title = ref("请选择性别");
const hideKeyboard = () => {};
const selectClick = (e) => {
model1.value.userInfo.sex = e.id;
model1.value.userInfo.sexName = e.name;
showSex.value = false;
formRef.value.validateField("userInfo.sexName");
console.info(e, "e");
};

const formRef = ref(null);
//提交
const save = () => {
formRef.value
.validate()
.then(() => {
console.info("提交");
})
.catch((errors) => {
console.info("失败", errors);
});
};
</script>

<style></style>