uni-app扩展组件(uni-ui)-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app扩展组件(uni-ui)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

数字角标(uni-badge)

代码示例：

面包屑(uni-breadcrumb)

代码示例：

日历

代码示例

卡片(uni-card)

代码示例

倒计时(uni-countdown)

更多内容请访问官网

数字角标(uni-badge)

数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景。

使用方式是在HBuilder中创建项目，选择模板，uni-ui模板，输入名字后点击创建。

uniapp面包屑,前端,前端,uni-app,vue.js

文章来源地址https://www.toymoban.com/news/detail-617095.html

创建后，在pages/index/index.vue中，可以直接使用扩展组件，无须另外引入，下载。

代码示例：

<template>
    <view class="container">
        
        <view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
        <text class="intro">详见：</text>
        <uni-link :href="href" :text="href"></uni-link>
        <view>
            <view class="title">角标</view>
            <uni-badge class="ubg" text="99+" type="primary" absolute="rightBottom">
                <button type="default">右下方角标</button>
            </uni-badge>
            <uni-badge class="ubg" text="999+" type="success" absolute="rightTop">
                <button type="default">右上方角标</button>
            </uni-badge>
            <uni-badge class="ubg" text="9+" type="error" absolute="leftBottom">
                <button type="default">左下方角标</button>
            </uni-badge>
            <uni-badge class="ubg" text="999+" type="warning" absolute="leftTop">
                <button type="default">左上方角标</button>
            </uni-badge>
        </view>
    </view>
</template>

保存后，点击运行->运行到浏览器中后，就可以看到具体样式：

uniapp面包屑,前端,前端,uni-app,vue.js

uni-app官网uni-app,uniCloud,serverlesshttps://uniapp.dcloud.net.cn/component/uniui/uni-badge.html

面包屑(uni-breadcrumb)

显示当前页面的路径，快速返回之前的任意页面。

代码示例：

<template>
    <view class="container">
        <view>
            <uni-breadcrumb separator="/">
              <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
                {{route.name}}
              </uni-breadcrumb-item>
            </uni-breadcrumb>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                routes: [
                        {
                          to: "/A",
                          name: "A页面",
                        },
                        {
                          to: "/B",
                          name: "B页面",
                        },
                        {
                          to: "/C",
                          name: "C页面",
                        },
                      ],
            }
        },
    }
</script>

运行后效果：

当鼠标悬浮到B页面上时，会高亮显示，如果绑定了vue文件，点击后会跳转到该页面。

uniapp面包屑,前端,前端,uni-app,vue.js

uni-app官网uni-app,uniCloud,serverlesshttps://uniapp.dcloud.net.cn/component/uniui/uni-breadcrumb.html

日历

日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等。

注意：

本组件农历转换使用的js是 @1900-2100区间内的公历、农历互转

date属性传入的应该是一个 String ，如： 2019-06-27 ，而不是 new Date()

通过 insert 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件，但是为了区分模式，现使用两个事件，这里需要注意

弹窗模式下无法阻止后面的元素滚动，如有需要阻止，请在弹窗弹出后，手动设置滚动元素为不可滚动

代码示例

<uni-calendar :insert="true"  :lunar="true" :start-date="'2023-01-01'" :end-date="'2023-12-30'" @change="change" />

属性名	类型	默认值	说明
date	String	-	自定义当前时间，默认为今天
lunar	Boolean	false	显示农历
startDate	String	-	日期选择范围-开始日期
endDate	String	-	日期选择范围-结束日期
range	Boolean	false	范围选择
insert	Boolean	false	插入模式,可选值，ture：插入模式；false：弹窗模式；默认为插入模式
clearDate	Boolean	true	弹窗模式是否清空上次选择内容
selected	Array	-	打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
showMonth	Boolean	true	是否显示月份为背景

注意：

start-date和end-date的值，双引号中还有一层单引号。表示值为字符串。

uni-app官网uni-app,uniCloud,serverlesshttps://uniapp.dcloud.net.cn/component/uniui/uni-calendar.html

卡片(uni-card)

卡片组件通用来显示完整独立的一段信息，同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等，卡片通常是更复杂和更详细信息的入口点。

属性名	类型	默认值	说明
title	String	-	标题文字
sub-title	String	-	副标题文字
extra	String	-	标题额外信息
thumbnail	String	-	标题左侧缩略图,支持网络图片，本地图片，本图片需要传入一个绝对路径，如：`/static/xxx.png`
cover	String	-	封面图,支持网络图片，本地图片，本图片需要传入一个绝对路径，如：`/static/xxx.png`
is-full	Boolean	false	卡片内容是否通栏，为true时将去除padding值
is-shadow	Boolean	false	卡片内容是否开启阴影
shadow	String	0px 0px 3px 1px rgba(0, 0, 0, 0.08)	卡片阴影,需符合 css 值
border	Boolean	true	卡片边框
margin	String	10px	卡片外边距
spacing	String	10px	卡片内边距
padding	String	10px	卡片内容内边距
border	Boolean	true	卡片边框
mode[弃用]	String	basic	卡片模式，可选值， basic：基础卡片；style ：图文卡片； title ：标题卡片
note[弃用]	String	-	底部信息

代码示例

<view class="card-container">
    <uni-card>
        <view>
            基础卡片，不包含任何属性和设置，也不含任何css设置
        </view>
    </uni-card>
    <uni-card title="基础卡片" extra="额外信息" >
        <view>基础卡片，含有标题和额外信息。</view>
    </uni-card>
    <uni-card title="基础卡片" sub-title="副标题" extra="额外信息" thumbnail="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
        <view>这是一个带头像和双标题的基础卡片，分为主标题和副标题，此示例展示了一个完整的卡片缩略图。</view>
    </uni-card>
</view>

运行效果为：

uniapp面包屑,前端,前端,uni-app,vue.js

uni-app官网

倒计时(uni-countdown)

代码示例

<view class="title">一般用法</view>
<uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>

<view class="title">不显示天数</view>
<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12"></uni-countdown>

<view class="title">修改背景颜色</view>
<uni-countdown color="#FFFFFF" background-color="#00B26A" border-color="#00B26A" :day="1" :hour="2" :minute="30" :second="0"></uni-countdown>

运行效果

uniapp面包屑,前端,前端,uni-app,vue.js