MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架、各种小程序组件主流框架等,并且提供了高效的命令行工具。MinUI 组件库包含了很多基础的组件,其中 label 标签组件是一个很常用的基础元件, MinUI 中 label 组件的效果图如下:
各式各样的类型都有哦,是不是看起来很方便很快捷的样子(^_^)。可以打开微信扫一扫下面的小程序二维码先一睹为快:
下面介绍 label 组件的使用方式。
1、使用下列命令安装 Min-Cli,如已安装,请进入到下一步。Min-Cli 的文档请猛戳这里:Min-Cli使用手册
npm install -g @mindev/min-cli复制代码
2、初始化一个小程序项目。
min init my-project复制代码
选择新建小程序选项,即可初始化一个小程序项目。创建项目后,在编辑器中打开项目,src 目录为源码目录,dist 目录为编译后用于在微信开发者工具中指定的目录。新建的项目中已有一个home
页面。详细文档:Min 初始化小程序项目
3、安装 label 组件。
进入刚才新建的小程序项目的目录中:
cd my-project复制代码
安装组件:
min install @minui/wxc-label复制代码
4、开启dev。
min dev复制代码
开启之后,修改源码后都会重新编译。
5、在页面中引入组件。
在编辑器中打开src/pages
目录下的home/index.wxp
文件,在script
中添加config
字段,配置小程序自定义组件字段,代码如下:
export default {config: {"usingComponents": {'wxc-label': "@minui/wxc-label"}}}复制代码
wxc-label
即为头像组件的标签名,可以在 wxml 中使用。
6、在 wxml 中使用wxc-label
标签。
在home/index.wxp
文件的template
中添加wxc-label
标签,代码如下:
<wxc-label text="双11价"></wxc-label>复制代码
7、打开微信开发者工具,指定dist
目录,预览项目。
home/index.wxp
文件的代码如下所示:
<!-- home/index.wxp --><template><wxc-label class="label" text="双11价"></wxc-label><wxc-label class="label" text="限时折扣"></wxc-label></template><script>export default {config: {usingComponents: {'wxc-label': '@minui/wxc-label','wxc-icon': '@minui/wxc-icon'}},data: {}}</script><style>.label {margin-right: 20rpx;}</style>复制代码
图示:
至此,minui 组件库的 label 标签组件在 Min 工具生成的小程序项目中的方法已介绍完毕,其他场景,在原生小程序或其他小程序框架项目中的使用方式请移步至如下链接:
在已有小程序项目中使用 MinUI 组件介绍
了解组件的使用方式后,下面开始介绍 label 组件的 API 。
Label【props】
更多demo
1、子元素传值
<template><wxc-label class="label">双11价</wxc-label><wxc-label class="label">限时折扣</wxc-label><wxc-label class="label"><wxc-icon type="pintuan" size="20"></wxc-icon> 拼团秒杀</wxc-label></template><script>export default {config: {usingComponents: {'wxc-label': '@minui/wxc-label','wxc-icon': '@minui/wxc-icon'}},data: {}}</script><style>.label {margin-right: 20rpx;}</style>复制代码
图示:
2、非镂空状态的 label
<template><wxc-label class="label" type="fill">双11价</wxc-label><wxc-label class="label" type="fill">限时折扣</wxc-label></template><script>export default {config: {usingComponents: {'wxc-label': '@minui/wxc-label','wxc-icon': '@minui/wxc-icon'}},data: {}}</script><style>.label {margin-right: 20rpx;}</style>复制代码
图示:
3、自定义颜色
<template><wxc-label class="label" type="fill" type-color="#747bb1">直播中</wxc-label><wxc-label class="label" type="fill" type-color="#ffe8ee" text-color="#ff5577">已团8.7万件</wxc-label></template><script>export default {config: {usingComponents: {'wxc-label': '@minui/wxc-label','wxc-icon': '@minui/wxc-icon'}},data: {}}</script><style>.label {margin-right: 20rpx;}</style>复制代码
图示:
更多组件更新同步请关注MinUI
小程序组件库示例查看,或请移步到实时同步更新的 微信小程序 label 标签组件使用文档。
沟通反馈
请添加群助手 wUf18018252882 好友或者扫码加好友,并与群助手对话发送验证码10088
按照指引进群。
相关链接
Min-Cli 官方仓库 MinUI 官方仓库 Min 官方文档
开源组件
布局元素
flex 布局 cc 水平垂直居中
基础元件
avatar 头像 badge 徽章 elip 文本截断 icon 图标 label 标签 loadmore 页底提示 price 价格 progress 进度条
功能组件
abnor 异常流展示 countdown 倒计时 counter 数字框 loading 加载提示 mask 遮罩层 steps 步骤条 tab 选项卡
提示反馈
dialog 对话框 popup 弹出层 toast 提示框
表单组件
Coming soon ...
蘑菇街前端团队,.01.19 于杭州