三、核心组件详解
3.1 按钮组件 Button
按钮是用户交互中最基础的组件，NutUI提供了丰富的按钮样式和状态。
<template>
<!-- 按钮类型 -->
<nut-button type="primary">主要按钮</nut-button>
<nut-button type="success">成功按钮</nut-button>
<nut-button type="danger">危险按钮</nut-button>
<nut-button type="warning">警告按钮</nut-button>
<nut-button type="default">默认按钮</nut-button>
<!-- 按钮尺寸 -->
<nut-button type="primary" size="large">大号按钮</nut-button>
<nut-button type="primary" size="normal">普通按钮</nut-button>
<nut-button type="primary" size="small">小型按钮</nut-button>
<nut-button type="primary" size="mini">迷你按钮</nut-button>
<!-- 块级按钮 -->
<nut-button type="primary" block>块级按钮</nut-button>
<!-- 镂空按钮 -->
<nut-button type="primary" plain>镂空按钮</nut-button>
<!-- 禁用状态 -->
<nut-button type="primary" disabled>禁用按钮</nut-button>
<!-- 加载状态 -->
<nut-button type="primary" loading>加载中</nut-button>
<!-- 图标按钮 -->
<nut-button type="primary" icon="star">收藏</nut-button>
</template>
Button组件属性说明：
3.2 单元格组件 Cell
单元格是移动端列表布局的核心组件，常用于信息展示和导航。
<template>
<!-- 基础单元格 -->
<nut-cell title="单元格标题" value="内容" />
<nut-cell title="单元格标题" sub-title="描述信息" value="内容" />
<!-- 带图标的单元格 -->
<nut-cell title="单元格" icon="location" />
<!-- 带右侧箭头的单元格 -->
<nut-cell title="单元格" is-link />
<!-- 自定义内容 -->
<nut-cell title="单元格">
<template #value>
<nut-tag type="primary">标签</nut-tag>
</template>
</nut-cell>
<!-- 单元格组 -->
<nut-cell-group title="分组标题">
<nut-cell title="单元格1" value="内容1" />
<nut-cell title="单元格2" value="内容2" />
<nut-cell title="单元格3" value="内容3" />
</nut-cell-group>
</template>
3.3 表单输入组件 Input
NutUI提供了功能完善的表单输入组件。
<template>
<nut-cell-group title="基础用法">
<!-- 基础输入框 -->
<nut-cell>
<nut-input
v-model="state.text"
placeholder="请输入文本"
/>
</nut-cell>
<!-- 密码输入框 -->
<nut-cell>
<nut-input
v-model="state.password"
type="password"
placeholder="请输入密码"
/>
</nut-cell>
<!-- 禁用状态 -->
<nut-cell>
<nut-input
v-model="state.disabled"
disabled
placeholder="禁用状态"
/>
</nut-cell>
<!-- 只读状态 -->
<nut-cell>
<nut-input
v-model="state.readonly"
readonly
placeholder="只读状态"
/>
</nut-cell>
</nut-cell-group>
</template>
<script setup>
import { reactive } from 'vue';
const state = reactive({
text: '',
password: '',
disabled: '禁用',
readonly: '只读'
});
</script>
Input组件属性说明：
3.4 选择器组件 Picker
Picker选择器是移动端常用的数据选择组件。
<template>
<nut-cell
title="请选择城市"
:desc="cityValue || '请选择'"
@click="showPicker = true"
/>
<nut-picker
v-model:visible="showPicker"
title="请选择城市"
:columns="cityColumns"
@confirm="handleConfirm"
/>
</template>
<script setup>
import { ref } from 'vue';
const showPicker = ref(false);
const cityValue = ref('');
const cityColumns = [
{ text: '北京', value: 'beijing' },
{ text: '上海', value: 'shanghai' },
{ text: '广州', value: 'guangzhou' },
{ text: '深圳', value: 'shenzhen' }
];
const handleConfirm = ({ selectedValue }) => {
cityValue.value = selectedValue[0].text;
};
</script>
3.5 反馈组件
3.5.1 轻提示 Toast
Toast用于显示轻量级提示信息。
<template>
<nut-button type="primary" @click="showToast">显示Toast</nut-button>
</template>
<script setup>
import { showToast } from '@nutui/nutui';
const showToast = () => {
showToast.text('操作成功', {
duration: 2000
});
};
</script>
Toast属性说明：
3.5.2 对话框 Dialog
Dialog用于显示重要信息或需要用户确认的操作。
<template>
<nut-button type="primary" @click="showDialog">显示对话框</nut-button>
<nut-dialog
v-model:visible="dialogVisible"
title="温馨提示"
content="确定要删除这条数据吗？"
@confirm="handleConfirm"
@cancel="handleCancel"
/>
</template>
<script setup>
import { ref } from 'vue';
import { showToast } from '@nutui/nutui';
const dialogVisible = ref(false);
const showDialog = () => {
dialogVisible.value = true;
};
const handleConfirm = () => {
showToast.text('点击了确认');
dialogVisible.value = false;
};
const handleCancel = () => {
showToast.text('点击了取消');
};
</script>
四、跨端适配与多端开发
4.1 一码五端能力
NutUI最核心的竞争力之一是其强大的跨端能力。基于Taro框架，NutUI实现了真正意义上的"一套代码，多端运行"，支持H5、微信小程序、京东小程序、支付宝小程序、百度小程序等多个平台。
组件库间的关系：
Taro作为跨端框架，提供了基础组件库@tarojs/components（包含View、ScrollView、Text等容器组件）。NutUI基于Taro框架实现跨端能力，@tarojs/components是整个NutUI组件库实现跨端的基座。
4.2 Taro版本配置
安装NutUI Taro版本
npm install @nutui/nutui-taro --save
配置Taro项目
// config/index.js
export default {
// ...其他配置
mini: {
webpackChain(chain) {
// 配置NutUI按需加载
chain.resolve.alias.set('@nutui/nutui', '@nutui/nutui-taro');
}
},
h5: {
webpackChain(chain) {
chain.resolve.alias.set('@nutui/nutui', '@nutui/nutui-taro');
}
}
};
4.3 多端适配注意事项
在实际跨端开发中，需要注意以下几点：
标签替换
在鸿蒙和回跨到iOS/安卓的项目中，需要将原来的div、span等Web端标签改为Taro标签。条件编译
通过判断端来做不同的处理：
/* #ifdef harmony dynamic */
width: 80px;
/* #endif */
/* #ifndef harmony dynamic */
width: auto;
/* #endif */
3.API兼容
避免使用不支持的属性或API，如需要做兼容处理：
// 不建议
left: -var(--nut-spacing);
align-items: start;
// 建议
left: calc(-1 * var(--nut-spacing));
align-items: flex-start;
4.4 小程序分包加载
对于小程序项目，可以使用分包加载优化性能：
// app.json
{
"subPackages": [
{
"root": "pages/sub",
"pages": ["index"]
}
]
}
