移动端组件介绍

[复制链接]
查看395 | 回复10 | 2024-3-8 16:01:23 | 显示全部楼层 |阅读模式
移动端组件介绍
一、H5组件说明
图片1.png
BaseCell:单元格组件
BaseColor:颜色面板组件
BaseEmpty:空数据组件
BaseIcon:字体图标组件
BaseImg:图片组件
BaseInput:输入框组件
BaseNavBar:导航栏组件
BaseOtaDialog:OTA升级组件
BasePermission:配网权限组件
BasePicker:选择器组件
BasePopup:弹出层组件
BaseRadio:单选框组件
FamilyPopup:家庭弹出层组件








二、H5组件加载
在项目框架src/components/index.js中配置需要全局加载的组件名称。
图片2.png
然后在src/main.js中加载index.js文件即可全局引入组件。

三、H5组件介绍
1. BaseCell:单元格组件
图片3.png
示例:
<base-cell to="area" :title="defaultArea.name"/>


2. BaseColor:颜色面板组件
图片4.png
示例:<base-color :params="tsl" :color="'#' + tsl.value" @click="changeColor"/>


3. BaseEmpty:空数据组件
图片5.png
示例:<base-empty :message="$t('mc_no_message')" icon="images/noData.png" > </base-empty>


4. BaseIcon:字体图标组件
图片6.png
示例:<base-icon :icon="rightIcon" :color="iconColor" size="21"/>


5. BaseImg:图片组件
图片7.png
示例:<base-img :src="device.pic" :width="64" :height="64" />


6. BaseInput:输入框组件
图片8.png
示例:

7. BaseNavBar:导航栏组件
图片9.png
示例:<base-nav-bar fixed title="日程"></base-nav-bar>


8. BaseOtaDialog:OTA强制升级提示组件
图片10.png
示例:<base-ota-dialog v-model="showOtaInfo" taUrlData="otaUrlData"/>


9. BasePermission:配网权限组件
图片11.png
示例:<base-permission :networkmode="networkMode" v-if="showPermission" />


10. BasePicker:选择器组件
图片12.png
示例:<base-picker :index="temerForm.hour" :visible_item_count="7" :columns="hours" @change="hourChange" ></base-picker>


11. BasePopup:弹出层组件
图片13.png
示例:<base-popup ref="area" v-model="showArea" :title="$t('mi_info_area')" :columns="areaList" valueKey="name" @onChange="areaChange"></base-popup>


12. BaseRadio:单选框组件
图片14.png
示例:<base-radio v-model="areaId" @change="changeRegion" :dictList="dictList" />


13. FamilyPopup:家庭弹出层组件
图片15.png
示例:<family-popup ref="familyPopup" :homeName="homeName" @changeHome="changeHome" ></family-popup>










小程序备案信息.jpg
组件.jpg
回复

使用道具 举报

hdydy | 2024-3-9 10:14:22 | 显示全部楼层
打卡学习
回复

使用道具 举报

lazy | 2024-3-9 16:45:04 | 显示全部楼层
回复

使用道具 举报

干簧管 | 2024-3-9 19:11:03 | 显示全部楼层
👍
回复

使用道具 举报

sansui | 2024-3-9 22:35:54 | 显示全部楼层
赞一下
回复

使用道具 举报

7788 | 2024-3-10 15:04:43 | 显示全部楼层
回复

使用道具 举报

timo | 2024-3-10 15:26:36 | 显示全部楼层
回复

使用道具 举报

知行合一 | 2024-3-10 15:51:44 | 显示全部楼层
赞一下
回复

使用道具 举报

楚华 | 2024-3-10 16:52:06 | 显示全部楼层
赞一下
回复

使用道具 举报

wurong | 2024-3-10 17:12:13 | 显示全部楼层
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则