mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -0,0 +1,98 @@
|
||||
# uni-ui 组件示例文件
|
||||
|
||||
本目录包含所有 uni-ui 组件的完整示例代码，每个组件都有独立的示例文件。
|
||||
|
||||
## 文件命名规范
|
||||
|
||||
示例文件命名格式：`{组件名}.vue`
|
||||
|
||||
例如：
|
||||
- `uni-badge.vue` - uni-badge 数字角标组件示例
|
||||
- `uni-icons.vue` - uni-icons 图标组件示例
|
||||
- `uni-card.vue` - uni-card 卡片组件示例
|
||||
|
||||
## 示例文件结构
|
||||
|
||||
每个示例文件包含：
|
||||
|
||||
1. **文件头部注释**：包含组件名称、官方文档地址、插件市场地址
|
||||
2. **完整示例代码**：包含官网展示的所有示例场景
|
||||
3. **模板代码**：完整的 template 部分
|
||||
4. **脚本代码**：完整的 script 部分，包含数据和方法
|
||||
5. **样式代码**：完整的 style 部分
|
||||
|
||||
## 组件列表
|
||||
|
||||
### 基础组件
|
||||
- [uni-badge.vue](./uni-badge.vue) - 数字角标
|
||||
- [uni-icons.vue](./uni-icons.vue) - 图标
|
||||
- [uni-tag.vue](./uni-tag.vue) - 标签
|
||||
- [uni-link.vue](./uni-link.vue) - 超链接
|
||||
|
||||
### 布局组件
|
||||
- [uni-row.vue](./uni-row.vue) - 布局-行
|
||||
- [uni-grid.vue](./uni-grid.vue) - 宫格
|
||||
- [uni-group.vue](./uni-group.vue) - 分组
|
||||
- [uni-section.vue](./uni-section.vue) - 标题栏
|
||||
- [uni-title.vue](./uni-title.vue) - 章节标题
|
||||
|
||||
### 导航组件
|
||||
- [uni-nav-bar.vue](./uni-nav-bar.vue) - 自定义导航栏
|
||||
- [uni-breadcrumb.vue](./uni-breadcrumb.vue) - 面包屑
|
||||
|
||||
### 数据展示组件
|
||||
- [uni-card.vue](./uni-card.vue) - 卡片
|
||||
- [uni-list.vue](./uni-list.vue) - 列表
|
||||
- [uni-indexed-list.vue](./uni-indexed-list.vue) - 索引列表
|
||||
- [uni-table.vue](./uni-table.vue) - 表格
|
||||
- [uni-load-more.vue](./uni-load-more.vue) - 加载更多
|
||||
- [uni-pagination.vue](./uni-pagination.vue) - 分页器
|
||||
|
||||
### 数据录入组件
|
||||
- [uni-easyinput.vue](./uni-easyinput.vue) - 增强输入框
|
||||
- [uni-number-box.vue](./uni-number-box.vue) - 数字输入框
|
||||
- [uni-forms.vue](./uni-forms.vue) - 表单
|
||||
- [uni-data-checkbox.vue](./uni-data-checkbox.vue) - 数据选择器
|
||||
- [uni-data-picker.vue](./uni-data-picker.vue) - 级联选择器
|
||||
- [uni-data-select.vue](./uni-data-select.vue) - 下拉框
|
||||
- [uni-combox.vue](./uni-combox.vue) - 组合框
|
||||
|
||||
### 日期时间组件
|
||||
- [uni-calendar.vue](./uni-calendar.vue) - 日历
|
||||
- [uni-datetime-picker.vue](./uni-datetime-picker.vue) - 日期选择器
|
||||
- [uni-dateformat.vue](./uni-dateformat.vue) - 日期格式化
|
||||
|
||||
### 反馈组件
|
||||
- [uni-popup.vue](./uni-popup.vue) - 弹出层
|
||||
- [uni-drawer.vue](./uni-drawer.vue) - 抽屉
|
||||
- [uni-notice-bar.vue](./uni-notice-bar.vue) - 通告栏
|
||||
- [uni-tooltip.vue](./uni-tooltip.vue) - 文字提示
|
||||
|
||||
### 操作反馈组件
|
||||
- [uni-rate.vue](./uni-rate.vue) - 评分
|
||||
- [uni-fav.vue](./uni-fav.vue) - 收藏按钮
|
||||
- [uni-fab.vue](./uni-fab.vue) - 悬浮按钮
|
||||
- [uni-swipe-action.vue](./uni-swipe-action.vue) - 滑动操作
|
||||
|
||||
### 其他组件
|
||||
- [uni-collapse.vue](./uni-collapse.vue) - 折叠面板
|
||||
- [uni-countdown.vue](./uni-countdown.vue) - 倒计时
|
||||
- [uni-search-bar.vue](./uni-search-bar.vue) - 搜索栏
|
||||
- [uni-segmented-control.vue](./uni-segmented-control.vue) - 分段器
|
||||
- [uni-steps.vue](./uni-steps.vue) - 步骤条
|
||||
- [uni-swiper-dot.vue](./uni-swiper-dot.vue) - 轮播图指示点
|
||||
- [uni-transition.vue](./uni-transition.vue) - 过渡动画
|
||||
- [uni-file-picker.vue](./uni-file-picker.vue) - 文件选择上传
|
||||
- [uni-goods-nav.vue](./uni-goods-nav.vue) - 商品导航
|
||||
|
||||
## 使用说明
|
||||
|
||||
1. 每个示例文件都是完整的、可运行的 Vue 组件
|
||||
2. 示例代码来自 uni-ui 官方文档
|
||||
3. 所有示例都包含完整的 template、script 和 style
|
||||
4. 示例文件可以直接复制到项目中使用
|
||||
|
||||
## 参考资源
|
||||
|
||||
- [uni-ui 官方文档](https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html)
|
||||
- [uni-ui 插件市场](https://ext.dcloud.net.cn/plugin?id=55)
|
||||
@@ -0,0 +1,160 @@
|
||||
<!--
|
||||
uni-badge 数字角标组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-badge.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-badge
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">数字角标通用来标记重点信息使用，如接受到新消息、有未读消息等</text>
|
||||
</uni-card>
|
||||
|
||||
<!-- 基础用法 -->
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-badge class="uni-badge-left-margin" text="1" />
|
||||
<uni-badge class="uni-badge-left-margin" text="2" type="primary" />
|
||||
<uni-badge class="uni-badge-left-margin" text="34" type="success" />
|
||||
<uni-badge class="uni-badge-left-margin" text="45" type="warning" />
|
||||
<uni-badge class="uni-badge-left-margin" text="123" type="info" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<!-- 无底色 -->
|
||||
<uni-section title="无底色" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="1" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="2" type="primary" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="34" type="success" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="45" type="warning" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="123" type="info" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<!-- 自定义样式 -->
|
||||
<uni-section title="自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-badge
|
||||
class="uni-badge-left-margin"
|
||||
text="2"
|
||||
type="primary"
|
||||
:custom-style="{background: '#4335d6'}"
|
||||
/>
|
||||
<uni-badge
|
||||
class="uni-badge-left-margin"
|
||||
text="2"
|
||||
type="primary"
|
||||
:custom-style="customStyle"
|
||||
/>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<!-- 定位: absolute 属性 -->
|
||||
<uni-section title="定位: aboslute 属性" sub-title="注：在安卓端不支持 nvue" type="line" padding>
|
||||
<uni-badge
|
||||
class="uni-badge-left-margin"
|
||||
:text="value"
|
||||
absolute="rightTop"
|
||||
size="small"
|
||||
>
|
||||
<view class="box">
|
||||
<text class="box-text">右上</text>
|
||||
</view>
|
||||
</uni-badge>
|
||||
</uni-section>
|
||||
|
||||
<!-- 偏移: offset 属性(存在 aboslute) -->
|
||||
<uni-section title="偏移: offset 属性(存在 aboslute)" type="line" padding>
|
||||
<uni-badge
|
||||
class="uni-badge-left-margin"
|
||||
:text="8"
|
||||
absolute="rightTop"
|
||||
:offset="[-3, -3]"
|
||||
size="small"
|
||||
>
|
||||
<view class="box">
|
||||
<text class="box-text">右上</text>
|
||||
</view>
|
||||
</uni-badge>
|
||||
</uni-section>
|
||||
|
||||
<!-- 仅显示点: is-dot 属性 -->
|
||||
<uni-section title="仅显示点: is-dot 属性" type="line" padding>
|
||||
<uni-badge
|
||||
class="uni-badge-left-margin"
|
||||
:is-dot="true"
|
||||
:text="value"
|
||||
absolute="rightTop"
|
||||
size="small"
|
||||
>
|
||||
<view class="box">
|
||||
<text class="box-text">圆点</text>
|
||||
</view>
|
||||
</uni-badge>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
customStyle: {
|
||||
backgroundColor: '#62ed0d',
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const timer = setInterval(() => {
|
||||
if (this.value >= 199) {
|
||||
clearInterval(timer)
|
||||
return
|
||||
}
|
||||
this.value++
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifdef MP-ALIPAY */
|
||||
.uni-badge {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.example-body {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.uni-badge-left-margin {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.uni-badge-absolute {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #DCDFE6;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.box-text {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,96 @@
|
||||
<!--
|
||||
面包屑 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-breadcrumb.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-breadcrumb
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">面包屑组件，用于显示当前页面的路径，帮助用户了解当前位置。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-breadcrumb :separator="separator">
|
||||
<uni-breadcrumb-item v-for="(item, index) in breadcrumbList1" :key="index">
|
||||
{{ item }}
|
||||
</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义分隔符" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-breadcrumb separator="/">
|
||||
<uni-breadcrumb-item>首页</uni-breadcrumb-item>
|
||||
<uni-breadcrumb-item>分类</uni-breadcrumb-item>
|
||||
<uni-breadcrumb-item>详情</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
<uni-breadcrumb separator=">">
|
||||
<uni-breadcrumb-item>首页</uni-breadcrumb-item>
|
||||
<uni-breadcrumb-item>分类</uni-breadcrumb-item>
|
||||
<uni-breadcrumb-item>详情</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="可点击" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-breadcrumb>
|
||||
<uni-breadcrumb-item v-for="(item, index) in breadcrumbList2" :key="index" @click="onBreadcrumbClick(item, index)">
|
||||
{{ item.text }}
|
||||
</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-breadcrumb separator="/" color="#ff6b6b">
|
||||
<uni-breadcrumb-item>首页</uni-breadcrumb-item>
|
||||
<uni-breadcrumb-item>分类</uni-breadcrumb-item>
|
||||
<uni-breadcrumb-item>详情</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
separator: '/',
|
||||
breadcrumbList1: ['首页', '分类', '详情'],
|
||||
breadcrumbList2: [
|
||||
{ text: '首页', path: '/' },
|
||||
{ text: '分类', path: '/category' },
|
||||
{ text: '详情', path: '/detail' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onBreadcrumbClick(item, index) {
|
||||
console.log('点击面包屑：', item, index)
|
||||
uni.showToast({
|
||||
title: `点击了${item.text}`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<!--
|
||||
日历 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-calendar.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-calendar
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">日历组件，用于日期选择，支持单选、多选、范围选择。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="openCalendar('single')">单选日期</button>
|
||||
<uni-calendar ref="singleCalendar" :insert="false" :lunar="false" :start-date="startDate" :end-date="endDate" @confirm="onConfirm" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="多选日期" type="line" padding>
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="openCalendar('multiple')">多选日期</button>
|
||||
<text class="result-text">已选日期：{{ multipleDates.join(', ') || '无' }}</text>
|
||||
<uni-calendar ref="multipleCalendar" :insert="false" :multiple="true" @confirm="onMultipleConfirm" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="范围选择" type="line" padding>
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="openCalendar('range')">范围选择</button>
|
||||
<text class="result-text">选择范围：{{ rangeDates.start || '' }} 至 {{ rangeDates.end || '' }}</text>
|
||||
<uni-calendar ref="rangeCalendar" :insert="false" :range="true" @confirm="onRangeConfirm" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="显示农历" type="line" padding>
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="openCalendar('lunar')">显示农历</button>
|
||||
<uni-calendar ref="lunarCalendar" :insert="false" :lunar="true" @confirm="onConfirm" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义日期范围" type="line" padding>
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="openCalendar('custom')">自定义范围</button>
|
||||
<uni-calendar ref="customCalendar" :insert="false" :start-date="'2024-01-01'" :end-date="'2024-12-31'" @confirm="onConfirm" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
startDate: '2024-01-01',
|
||||
endDate: '2024-12-31',
|
||||
multipleDates: [],
|
||||
rangeDates: {
|
||||
start: '',
|
||||
end: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openCalendar(type) {
|
||||
if (type === 'single') {
|
||||
this.$refs.singleCalendar.open()
|
||||
} else if (type === 'multiple') {
|
||||
this.$refs.multipleCalendar.open()
|
||||
} else if (type === 'range') {
|
||||
this.$refs.rangeCalendar.open()
|
||||
} else if (type === 'lunar') {
|
||||
this.$refs.lunarCalendar.open()
|
||||
} else if (type === 'custom') {
|
||||
this.$refs.customCalendar.open()
|
||||
}
|
||||
},
|
||||
onConfirm(e) {
|
||||
console.log('选择日期：', e)
|
||||
uni.showToast({
|
||||
title: `选择了：${e.fulldate}`,
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
onMultipleConfirm(e) {
|
||||
console.log('多选日期：', e)
|
||||
this.multipleDates = e.fulldate || []
|
||||
uni.showToast({
|
||||
title: `选择了${this.multipleDates.length}个日期`,
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
onRangeConfirm(e) {
|
||||
console.log('范围选择：', e)
|
||||
this.rangeDates = {
|
||||
start: e.fulldate[0] || '',
|
||||
end: e.fulldate[1] || ''
|
||||
}
|
||||
uni.showToast({
|
||||
title: `选择了范围`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,216 @@
|
||||
<!--
|
||||
uni-card 卡片组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-card.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-card
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">卡片组件通用来显示完整独立的一段信息，同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等，卡片通常是更复杂和更详细信息的入口点。</text>
|
||||
</uni-card>
|
||||
|
||||
<!-- 基础卡片 -->
|
||||
<uni-section title="基础卡片" type="line">
|
||||
<uni-card :is-shadow="false">
|
||||
<text class="uni-body">这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
|
||||
<!-- 卡片标题+额外信息 -->
|
||||
<uni-section title="卡片标题+额外信息" type="line">
|
||||
<uni-card title="基础卡片" extra="额外信息">
|
||||
<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
|
||||
<!-- 双标题卡片 -->
|
||||
<uni-section title="双标题卡片" type="line">
|
||||
<uni-card
|
||||
title="基础卡片"
|
||||
sub-title="副标题"
|
||||
extra="额外信息"
|
||||
:thumbnail="avatar"
|
||||
@click="onClick"
|
||||
>
|
||||
<text class="uni-body">这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
|
||||
<!-- 通栏卡片 -->
|
||||
<uni-section title="通栏卡片" type="line">
|
||||
<uni-card
|
||||
title="基础卡片"
|
||||
:isFull="true"
|
||||
sub-title="副标题"
|
||||
extra="额外信息"
|
||||
:thumbnail="avatar"
|
||||
>
|
||||
<text class="uni-body">这是一个通栏卡片 ，通栏没有外边距，左右会贴合父元素。</text>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
|
||||
<!-- 卡片封面图+操作栏 -->
|
||||
<uni-section title="卡片封面图+操作栏" type="line">
|
||||
<uni-card :cover="cover" @click="onClick">
|
||||
<text class="uni-body">这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text>
|
||||
<template v-slot:actions>
|
||||
<view class="card-actions">
|
||||
<view class="card-actions-item" @click.stop="actionsClick('分享')">
|
||||
<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">分享</text>
|
||||
</view>
|
||||
<view class="card-actions-item" @click.stop="actionsClick('点赞')">
|
||||
<uni-icons type="heart" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">点赞</text>
|
||||
</view>
|
||||
<view class="card-actions-item" @click.stop="actionsClick('评论')">
|
||||
<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">评论</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
|
||||
<!-- 自定义卡片内容 -->
|
||||
<uni-section title="自定义卡片内容" type="line">
|
||||
<uni-card
|
||||
title="基础卡片"
|
||||
sub-title="副标题"
|
||||
extra="额外信息"
|
||||
padding="10px 0"
|
||||
:thumbnail="avatar"
|
||||
>
|
||||
<template v-slot:title>
|
||||
<uni-list>
|
||||
<uni-list-item :show-switch="true" title="自定义标题" />
|
||||
</uni-list>
|
||||
</template>
|
||||
<image style="width: 100%;" :src="cover"></image>
|
||||
<text class="uni-body uni-mt-5">卡片组件通用来显示完整独立的一段信息，同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等，卡片通常是更复杂和更详细信息的入口点。</text>
|
||||
<view slot="actions" class="card-actions">
|
||||
<view class="card-actions-item" @click.stop="actionsClick('分享')">
|
||||
<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">分享</text>
|
||||
</view>
|
||||
<view class="card-actions-item" @click.stop="actionsClick('点赞')">
|
||||
<uni-icons type="heart" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">点赞</text>
|
||||
</view>
|
||||
<view class="card-actions-item" @click.stop="actionsClick('评论')">
|
||||
<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">评论</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
|
||||
<!-- 卡片+列表 -->
|
||||
<uni-section title="卡片+列表" type="line">
|
||||
<uni-card padding="0" spacing="0">
|
||||
<template v-slot:cover>
|
||||
<view class="custom-cover">
|
||||
<image class="cover-image" mode="aspectFill" :src="cover"></image>
|
||||
<view class="cover-content">
|
||||
<text class="uni-subtitle uni-white">今日新闻热点</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<uni-list>
|
||||
<uni-list-item title="今日新闻" showArrow></uni-list-item>
|
||||
<uni-list-item title="今日新闻" showArrow></uni-list-item>
|
||||
</uni-list>
|
||||
<view slot="actions" class="card-actions no-border">
|
||||
<view class="card-actions-item" @click.stop="actionsClick('分享')">
|
||||
<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">分享</text>
|
||||
</view>
|
||||
<view class="card-actions-item" @click.stop="actionsClick('点赞')">
|
||||
<uni-icons type="heart" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">点赞</text>
|
||||
</view>
|
||||
<view class="card-actions-item" @click.stop="actionsClick('评论')">
|
||||
<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">评论</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
|
||||
cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
uni.showToast({
|
||||
title: '点击了卡片',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
actionsClick(type) {
|
||||
uni.showToast({
|
||||
title: `点击了${type}`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.card-actions {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
padding: 0 10px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.card-actions.no-border {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.card-actions-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-actions-item-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.custom-cover {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cover-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<!--
|
||||
折叠面板 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-collapse.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-collapse
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">折叠面板组件，用于可折叠的内容展示。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-collapse>
|
||||
<uni-collapse-item title="标题1" name="item1">
|
||||
<text>这是折叠面板的内容1</text>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="标题2" name="item2">
|
||||
<text>这是折叠面板的内容2</text>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="标题3" name="item3">
|
||||
<text>这是折叠面板的内容3</text>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="手风琴模式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-collapse :accordion="true">
|
||||
<uni-collapse-item title="标题1" name="item1">
|
||||
<text>手风琴模式，同时只能展开一个</text>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="标题2" name="item2">
|
||||
<text>手风琴模式，同时只能展开一个</text>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="标题3" name="item3">
|
||||
<text>手风琴模式，同时只能展开一个</text>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="默认展开" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-collapse>
|
||||
<uni-collapse-item title="默认展开" name="item1" :open="true">
|
||||
<text>这个面板默认展开</text>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="默认收起" name="item2">
|
||||
<text>这个面板默认收起</text>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="禁用状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-collapse>
|
||||
<uni-collapse-item title="正常状态" name="item1">
|
||||
<text>可以展开</text>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="禁用状态" name="item2" :disabled="true">
|
||||
<text>无法展开</text>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="事件监听" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-collapse @change="onChange">
|
||||
<uni-collapse-item title="标题1" name="item1">
|
||||
<text>点击展开/收起会触发事件</text>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="标题2" name="item2">
|
||||
<text>点击展开/收起会触发事件</text>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
<text class="result-text">当前展开项：{{ activeNames.join(', ') || '无' }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeNames: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
console.log('折叠面板状态改变：', e)
|
||||
this.activeNames = e
|
||||
uni.showToast({
|
||||
title: `展开项：${e.join(', ')}`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!--
|
||||
组合框 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-combox.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-combox
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">组合框组件，用于输入和选择的组合。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-combox :candidates="candidates1" v-model="value1" placeholder="请输入或选择" />
|
||||
<text class="result-text">当前值：{{ value1 }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义候选列表" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-combox :candidates="candidates2" v-model="value2" placeholder="请输入或选择" />
|
||||
<text class="result-text">当前值：{{ value2 }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="禁用状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-combox :candidates="candidates1" v-model="value3" placeholder="禁用状态" :disabled="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="只读状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-combox :candidates="candidates1" v-model="value4" placeholder="只读状态" :readonly="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="事件监听" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-combox :candidates="candidates1" v-model="value5" placeholder="请输入或选择" @input="onInput" @select="onSelect" />
|
||||
<text class="result-text">当前值：{{ value5 }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '禁用内容',
|
||||
value4: '只读内容',
|
||||
value5: '',
|
||||
candidates1: ['选项1', '选项2', '选项3', '选项4', '选项5'],
|
||||
candidates2: ['北京', '上海', '广州', '深圳', '杭州', '成都']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInput(e) {
|
||||
console.log('输入：', e)
|
||||
},
|
||||
onSelect(e) {
|
||||
console.log('选择：', e)
|
||||
uni.showToast({
|
||||
title: `选择了：${e}`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!--
|
||||
倒计时 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-countdown.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-countdown
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">倒计时组件，用于倒计时显示。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-countdown :second="60" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义格式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-countdown :second="3600" format="HH:mm:ss" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="显示天" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-countdown :second="86400" format="DD天HH:mm:ss" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-countdown :second="120" color="#ff6b6b" splitor-color="#ff6b6b" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="事件监听" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-countdown :second="10" @timeup="onTimeup" />
|
||||
<text class="result-text">{{ timeupText }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="暂停/继续" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-countdown ref="countdown" :second="60" />
|
||||
<view class="button-group">
|
||||
<button size="mini" @click="pause">暂停</button>
|
||||
<button size="mini" @click="resume">继续</button>
|
||||
<button size="mini" @click="reset">重置</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timeupText: '倒计时进行中...'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onTimeup() {
|
||||
this.timeupText = '倒计时结束！'
|
||||
uni.showToast({
|
||||
title: '倒计时结束',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
pause() {
|
||||
this.$refs.countdown.pause()
|
||||
},
|
||||
resume() {
|
||||
this.$refs.countdown.resume()
|
||||
},
|
||||
reset() {
|
||||
this.$refs.countdown.reset()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,100 @@
|
||||
<!--
|
||||
数据选择器 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-data-checkbox.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-data-checkbox
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">数据选择器组件，用于多选，支持与 uniCloud 数据源绑定。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-data-checkbox v-model="value1" :localdata="localdata1" />
|
||||
<text class="result-text">当前值：{{ value1 }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="多选" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-data-checkbox v-model="value2" :localdata="localdata2" :multiple="true" />
|
||||
<text class="result-text">当前值：{{ value2.join(', ') || '无' }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="禁用状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-data-checkbox v-model="value3" :localdata="localdata1" :disabled="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-data-checkbox v-model="value4" :localdata="localdata2" :multiple="true" />
|
||||
<text class="result-text">当前值：{{ value4.join(', ') || '无' }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="事件监听" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-data-checkbox v-model="value5" :localdata="localdata2" :multiple="true" @change="onChange" />
|
||||
<text class="result-text">当前值：{{ value5.join(', ') || '无' }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 0,
|
||||
value2: [],
|
||||
value3: 1,
|
||||
value4: [],
|
||||
value5: [],
|
||||
localdata1: [
|
||||
{ text: '选项1', value: 0 },
|
||||
{ text: '选项2', value: 1 },
|
||||
{ text: '选项3', value: 2 }
|
||||
],
|
||||
localdata2: [
|
||||
{ text: '游泳', value: 0 },
|
||||
{ text: '跑步', value: 1 },
|
||||
{ text: '健身', value: 2 },
|
||||
{ text: '阅读', value: 3 }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
console.log('选择改变：', e)
|
||||
uni.showToast({
|
||||
title: `选择了${e.length}项`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<!--
|
||||
级联选择器 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-data-picker.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-data-picker
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">级联选择器组件，用于级联数据选择，支持与 uniCloud 数据源绑定。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-data-picker v-model="value1" :localdata="localdata1" @change="onChange" />
|
||||
<text class="result-text">当前值：{{ JSON.stringify(value1) }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="多级联动" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-data-picker v-model="value2" :localdata="localdata2" @change="onChange" />
|
||||
<text class="result-text">当前值：{{ JSON.stringify(value2) }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="禁用状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-data-picker v-model="value3" :localdata="localdata1" :disabled="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义占位符" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-data-picker v-model="value4" :localdata="localdata1" placeholder="请选择" @change="onChange" />
|
||||
<text class="result-text">当前值：{{ JSON.stringify(value4) }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: [],
|
||||
value2: [],
|
||||
value3: [0],
|
||||
value4: [],
|
||||
localdata1: [
|
||||
{ text: '选项1', value: 0 },
|
||||
{ text: '选项2', value: 1 },
|
||||
{ text: '选项3', value: 2 }
|
||||
],
|
||||
localdata2: [
|
||||
{
|
||||
text: '一级1',
|
||||
value: 0,
|
||||
children: [
|
||||
{ text: '二级1-1', value: 0 },
|
||||
{ text: '二级1-2', value: 1 }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '一级2',
|
||||
value: 1,
|
||||
children: [
|
||||
{ text: '二级2-1', value: 0 },
|
||||
{ text: '二级2-2', value: 1 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
console.log('选择改变：', e)
|
||||
uni.showToast({
|
||||
title: '选择已改变',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<!--
|
||||
下拉框 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-data-select.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-data-select
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">下拉框组件，用于下拉选择，支持与 uniCloud 数据源绑定。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-data-select v-model="value1" :localdata="localdata1" @change="onChange" />
|
||||
<text class="result-text">当前值：{{ value1 }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义占位符" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-data-select v-model="value2" :localdata="localdata1" placeholder="请选择" @change="onChange" />
|
||||
<text class="result-text">当前值：{{ value2 }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="禁用状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-data-select v-model="value3" :localdata="localdata1" :disabled="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="事件监听" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-data-select v-model="value4" :localdata="localdata2" @change="onChange" />
|
||||
<text class="result-text">当前值：{{ value4 }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: 0,
|
||||
value4: '',
|
||||
localdata1: [
|
||||
{ text: '选项1', value: 0 },
|
||||
{ text: '选项2', value: 1 },
|
||||
{ text: '选项3', value: 2 }
|
||||
],
|
||||
localdata2: [
|
||||
{ text: '北京', value: 'beijing' },
|
||||
{ text: '上海', value: 'shanghai' },
|
||||
{ text: '广州', value: 'guangzhou' },
|
||||
{ text: '深圳', value: 'shenzhen' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
console.log('选择改变：', e)
|
||||
uni.showToast({
|
||||
title: '选择已改变',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!--
|
||||
日期格式化 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-dateformat.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-dateformat
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">日期格式化组件，用于日期格式化显示。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="currentDate" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义格式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="currentDate" format="YYYY-MM-DD" />
|
||||
<uni-dateformat :date="currentDate" format="YYYY/MM/DD HH:mm:ss" />
|
||||
<uni-dateformat :date="currentDate" format="MM月DD日" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="相对时间" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="pastDate" :threshold="[0, 0]" />
|
||||
<uni-dateformat :date="recentDate" :threshold="[0, 0]" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="时间戳" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="timestamp" />
|
||||
<uni-dateformat :date="timestamp" format="YYYY-MM-DD HH:mm:ss" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date(),
|
||||
pastDate: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
|
||||
recentDate: new Date(Date.now() - 2 * 60 * 60 * 1000),
|
||||
timestamp: Date.now()
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<!--
|
||||
日期选择器 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-datetime-picker.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-datetime-picker
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">日期选择器组件，用于日期时间选择。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="value1" type="date" @change="onChange" />
|
||||
<text class="result-text">当前值：{{ value1 || '未选择' }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="日期时间选择" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="value2" type="datetime" @change="onChange" />
|
||||
<text class="result-text">当前值：{{ value2 || '未选择' }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="时间选择" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="value3" type="time" @change="onChange" />
|
||||
<text class="result-text">当前值：{{ value3 || '未选择' }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="日期范围" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="value4" type="date" :start="startDate" :end="endDate" @change="onChange" />
|
||||
<text class="result-text">当前值：{{ value4 || '未选择' }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="禁用状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="value5" type="date" :disabled="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: '2024-01-01',
|
||||
startDate: '2024-01-01',
|
||||
endDate: '2024-12-31'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
console.log('选择改变：', e)
|
||||
uni.showToast({
|
||||
title: '选择已改变',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,153 @@
|
||||
<!--
|
||||
抽屉 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-drawer.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-drawer
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">抽屉组件，用于侧边栏抽屉。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="openDrawer('left')">左侧抽屉</button>
|
||||
<button type="primary" @click="openDrawer('right')">右侧抽屉</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同模式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="openDrawer('left')">左侧模式</button>
|
||||
<button type="primary" @click="openDrawer('right')">右侧模式</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义宽度" type="line" padding>
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="openCustomDrawer">自定义宽度抽屉</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="遮罩层" type="line" padding>
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="openMaskDrawer">带遮罩层抽屉</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<!-- 左侧抽屉 -->
|
||||
<uni-drawer ref="leftDrawer" mode="left" :width="300" @change="onChange">
|
||||
<view class="drawer-content">
|
||||
<text class="drawer-title">左侧抽屉</text>
|
||||
<view class="drawer-item" v-for="(item, index) in menuList" :key="index" @click="onMenuClick(item)">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
|
||||
<!-- 右侧抽屉 -->
|
||||
<uni-drawer ref="rightDrawer" mode="right" :width="300" @change="onChange">
|
||||
<view class="drawer-content">
|
||||
<text class="drawer-title">右侧抽屉</text>
|
||||
<view class="drawer-item" v-for="(item, index) in menuList" :key="index" @click="onMenuClick(item)">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
|
||||
<!-- 自定义宽度抽屉 -->
|
||||
<uni-drawer ref="customDrawer" mode="left" :width="400" @change="onChange">
|
||||
<view class="drawer-content">
|
||||
<text class="drawer-title">自定义宽度抽屉</text>
|
||||
<text class="drawer-text">宽度设置为400px</text>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
|
||||
<!-- 带遮罩层抽屉 -->
|
||||
<uni-drawer ref="maskDrawer" mode="left" :width="300" :mask="true" @change="onChange">
|
||||
<view class="drawer-content">
|
||||
<text class="drawer-title">带遮罩层抽屉</text>
|
||||
<text class="drawer-text">点击遮罩层可关闭</text>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
menuList: [
|
||||
{ name: '首页', path: '/' },
|
||||
{ name: '关于', path: '/about' },
|
||||
{ name: '设置', path: '/settings' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openDrawer(mode) {
|
||||
if (mode === 'left') {
|
||||
this.$refs.leftDrawer.open()
|
||||
} else {
|
||||
this.$refs.rightDrawer.open()
|
||||
}
|
||||
},
|
||||
openCustomDrawer() {
|
||||
this.$refs.customDrawer.open()
|
||||
},
|
||||
openMaskDrawer() {
|
||||
this.$refs.maskDrawer.open()
|
||||
},
|
||||
onChange(e) {
|
||||
console.log('抽屉状态改变：', e)
|
||||
},
|
||||
onMenuClick(item) {
|
||||
console.log('点击菜单：', item)
|
||||
uni.showToast({
|
||||
title: `点击了${item.name}`,
|
||||
icon: 'none'
|
||||
})
|
||||
// 关闭抽屉
|
||||
this.$refs.leftDrawer.close()
|
||||
this.$refs.rightDrawer.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.drawer-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.drawer-item {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.drawer-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!--
|
||||
增强输入框 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-easyinput.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-easyinput
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">增强输入框组件，提供更丰富的输入功能，支持清除按钮、密码显示等。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-easyinput v-model="value1" placeholder="请输入内容" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同输入类型" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-easyinput v-model="value2" type="text" placeholder="文本输入" />
|
||||
<uni-easyinput v-model="value3" type="number" placeholder="数字输入" />
|
||||
<uni-easyinput v-model="value4" type="password" placeholder="密码输入" />
|
||||
<uni-easyinput v-model="value5" type="textarea" placeholder="多行文本" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="清除按钮" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-easyinput v-model="value6" placeholder="带清除按钮" :clearable="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="前缀图标" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-easyinput v-model="value7" placeholder="请输入用户名" :prefixIcon="prefixIcon" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="后缀图标" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-easyinput v-model="value8" placeholder="请输入密码" type="password" :suffixIcon="suffixIcon" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="禁用状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-easyinput v-model="value9" placeholder="禁用状态" :disabled="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="只读状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-easyinput v-model="value10" placeholder="只读状态" :readonly="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: '',
|
||||
value6: '',
|
||||
value7: '',
|
||||
value8: '',
|
||||
value9: '禁用内容',
|
||||
value10: '只读内容',
|
||||
prefixIcon: 'person',
|
||||
suffixIcon: 'eye'
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<!--
|
||||
悬浮按钮 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-fab.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-fab
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">悬浮按钮组件，用于悬浮操作按钮。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-fab :pattern="pattern1" :content="content1" horizontal="right" vertical="bottom" direction="vertical" @trigger="onTrigger" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="水平方向" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-fab :pattern="pattern2" :content="content2" horizontal="right" vertical="bottom" direction="horizontal" @trigger="onTrigger" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义位置" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-fab :pattern="pattern3" :content="content3" horizontal="left" vertical="top" direction="vertical" @trigger="onTrigger" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-fab :pattern="pattern4" :content="content4" horizontal="right" vertical="bottom" direction="vertical" @trigger="onTrigger" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pattern1: {
|
||||
color: '#7A7E83',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#007AFF'
|
||||
},
|
||||
content1: [
|
||||
{ icon: 'plus', text: '添加' },
|
||||
{ icon: 'star', text: '收藏' },
|
||||
{ icon: 'settings', text: '设置' }
|
||||
],
|
||||
pattern2: {
|
||||
color: '#7A7E83',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#007AFF'
|
||||
},
|
||||
content2: [
|
||||
{ icon: 'plus', text: '添加' },
|
||||
{ icon: 'star', text: '收藏' }
|
||||
],
|
||||
pattern3: {
|
||||
color: '#7A7E83',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#4ecdc4'
|
||||
},
|
||||
content3: [
|
||||
{ icon: 'plus', text: '添加' },
|
||||
{ icon: 'star', text: '收藏' }
|
||||
],
|
||||
pattern4: {
|
||||
color: '#7A7E83',
|
||||
selectedColor: '#ff6b6b',
|
||||
buttonColor: '#ff6b6b'
|
||||
},
|
||||
content4: [
|
||||
{ icon: 'plus', text: '添加' },
|
||||
{ icon: 'star', text: '收藏' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onTrigger(e) {
|
||||
console.log('触发操作：', e)
|
||||
uni.showToast({
|
||||
title: `点击了${e.item.text}`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
position: relative;
|
||||
min-height: 400px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<!--
|
||||
收藏按钮 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-fav.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-fav
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">收藏按钮组件，用于收藏功能。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-fav :checked="checked1" @click="onFavClick" />
|
||||
<text class="result-text">收藏状态：{{ checked1 ? '已收藏' : '未收藏' }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义颜色" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-fav :checked="checked2" :star="false" circle="fill" bg-color="#ff6b6b" bg-color-checked="#ff6b6b" @click="onFavClick2" />
|
||||
<text class="result-text">收藏状态：{{ checked2 ? '已收藏' : '未收藏' }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-fav :checked="checked3" :star="true" @click="onFavClick3" />
|
||||
<uni-fav :checked="checked4" :star="false" circle="fill" @click="onFavClick4" />
|
||||
<uni-fav :checked="checked5" :star="false" circle="outline" @click="onFavClick5" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="事件监听" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-fav :checked="checked6" @click="onFavClick6" />
|
||||
<text class="result-text">收藏状态：{{ checked6 ? '已收藏' : '未收藏' }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked1: false,
|
||||
checked2: false,
|
||||
checked3: false,
|
||||
checked4: false,
|
||||
checked5: false,
|
||||
checked6: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onFavClick() {
|
||||
this.checked1 = !this.checked1
|
||||
uni.showToast({
|
||||
title: this.checked1 ? '已收藏' : '取消收藏',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
onFavClick2() {
|
||||
this.checked2 = !this.checked2
|
||||
},
|
||||
onFavClick3() {
|
||||
this.checked3 = !this.checked3
|
||||
},
|
||||
onFavClick4() {
|
||||
this.checked4 = !this.checked4
|
||||
},
|
||||
onFavClick5() {
|
||||
this.checked5 = !this.checked5
|
||||
},
|
||||
onFavClick6() {
|
||||
this.checked6 = !this.checked6
|
||||
uni.showToast({
|
||||
title: this.checked6 ? '已收藏' : '取消收藏',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<!--
|
||||
文件选择上传 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-file-picker.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-file-picker
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">文件选择上传组件，用于文件选择和上传，支持与 uniCloud 集成。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="fileList1" file-mediatype="image" mode="grid" @select="onSelect" @progress="onProgress" @success="onSuccess" @fail="onFail" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="多文件选择" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="fileList2" file-mediatype="image" mode="grid" :limit="9" @select="onSelect" />
|
||||
<text class="result-text">已选择：{{ fileList2.length }} 个文件</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="单文件选择" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="fileList3" file-mediatype="image" mode="grid" :limit="1" @select="onSelect" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="文件类型限制" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="fileList4" file-mediatype="all" mode="list" @select="onSelect" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="上传进度" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="fileList5" file-mediatype="image" mode="grid" @progress="onProgress" />
|
||||
<text class="result-text">上传进度：{{ uploadProgress }}%</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList1: [],
|
||||
fileList2: [],
|
||||
fileList3: [],
|
||||
fileList4: [],
|
||||
fileList5: [],
|
||||
uploadProgress: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSelect(e) {
|
||||
console.log('选择文件：', e)
|
||||
uni.showToast({
|
||||
title: `选择了${e.tempFilePaths.length}个文件`,
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
onProgress(e) {
|
||||
console.log('上传进度：', e)
|
||||
this.uploadProgress = e.progress
|
||||
},
|
||||
onSuccess(e) {
|
||||
console.log('上传成功：', e)
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
onFail(e) {
|
||||
console.log('上传失败：', e)
|
||||
uni.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,342 @@
|
||||
<!--
|
||||
表单 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-forms
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">uni-forms 组件一般由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基本用法" type="line">
|
||||
<view class="example">
|
||||
<!-- 基础用法，不包含校验规则 -->
|
||||
<uni-forms ref="baseForm" :modelValue="baseFormData">
|
||||
<uni-forms-item label="姓名" required>
|
||||
<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="年龄" required>
|
||||
<uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="性别" required>
|
||||
<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="兴趣爱好" required>
|
||||
<uni-data-checkbox v-model="baseFormData.hobby" multiple :localdata="hobbys" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="自我介绍">
|
||||
<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入自我介绍" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="日期时间">
|
||||
<uni-datetime-picker type="datetime" return-type="timestamp" v-model="baseFormData.datetimesingle" />
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="对齐方式" type="line">
|
||||
<view class="example">
|
||||
<view class="segmented-control">
|
||||
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" />
|
||||
</view>
|
||||
<!-- 展示不同的排列方式 -->
|
||||
<uni-forms ref="baseForm" :modelValue="alignmentFormData" :label-position="alignment">
|
||||
<uni-forms-item label="姓名" required>
|
||||
<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="年龄" required>
|
||||
<uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="表单校验" type="line">
|
||||
<view class="example">
|
||||
<!-- 基础表单校验 -->
|
||||
<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
|
||||
<uni-forms-item label="姓名" required name="name">
|
||||
<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="年龄" required name="age">
|
||||
<uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="自我介绍" name="introduction">
|
||||
<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<button type="primary" @click="submit('valiForm')">提交</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义校验规则" type="line">
|
||||
<view class="example">
|
||||
<!-- 自定义表单校验 -->
|
||||
<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">
|
||||
<uni-forms-item label="姓名" required name="name">
|
||||
<uni-easyinput v-model="customFormData.name" placeholder="请输入姓名" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="年龄" required name="age">
|
||||
<uni-easyinput v-model="customFormData.age" placeholder="请输入年龄" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="兴趣爱好" required name="hobby">
|
||||
<uni-data-checkbox v-model="customFormData.hobby" multiple :localdata="hobbys" />
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<button type="primary" @click="submit('customForm')">提交</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="动态表单" type="line">
|
||||
<view class="example">
|
||||
<!-- 动态表单校验 -->
|
||||
<uni-forms ref="dynamicForm" :rules="dynamicRules" :modelValue="dynamicFormData">
|
||||
<uni-forms-item label="邮箱" required name="email">
|
||||
<uni-easyinput v-model="dynamicFormData.email" placeholder="请输入姓名" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item v-for="(item,index) in dynamicLists" :key="item.id" :label="item.label+' '+index" required :rules="item.rules" :name="'domains[' + item.id + ']'">
|
||||
<view class="form-item">
|
||||
<uni-easyinput v-model="dynamicFormData.domains[item.id]" placeholder="请输入域名" />
|
||||
<button class="button" size="mini" type="default" @click="del(item.id)">删除</button>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<view class="button-group">
|
||||
<button type="primary" size="mini" @click="add">新增域名</button>
|
||||
<button type="primary" size="mini" @click="submit('dynamicForm')">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 基础表单数据
|
||||
baseFormData: {
|
||||
name: '',
|
||||
age: '',
|
||||
sex: '',
|
||||
hobby: [],
|
||||
introduction: '',
|
||||
datetimesingle: null
|
||||
},
|
||||
// 对齐方式表单数据
|
||||
alignmentFormData: {
|
||||
name: '',
|
||||
age: ''
|
||||
},
|
||||
// 对齐方式控制
|
||||
current: 0,
|
||||
items: ['左对齐', '顶部对齐'],
|
||||
alignment: 'left',
|
||||
// 校验表单数据
|
||||
valiFormData: {
|
||||
name: '',
|
||||
age: '',
|
||||
introduction: ''
|
||||
},
|
||||
// 校验规则
|
||||
rules: {
|
||||
name: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请填写姓名'
|
||||
},
|
||||
{
|
||||
minLength: 3,
|
||||
maxLength: 5,
|
||||
errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
|
||||
}
|
||||
],
|
||||
label: '姓名',
|
||||
validateTrigger: 'submit'
|
||||
},
|
||||
age: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请填写年龄'
|
||||
},
|
||||
{
|
||||
format: 'number',
|
||||
errorMessage: '年龄格式不正确'
|
||||
}
|
||||
],
|
||||
label: '年龄',
|
||||
validateTrigger: 'submit'
|
||||
},
|
||||
introduction: {
|
||||
rules: [
|
||||
{
|
||||
minLength: 5,
|
||||
errorMessage: '自我介绍至少5个字符'
|
||||
}
|
||||
],
|
||||
label: '自我介绍',
|
||||
validateTrigger: 'submit'
|
||||
}
|
||||
},
|
||||
// 自定义校验表单数据
|
||||
customFormData: {
|
||||
name: '',
|
||||
age: '',
|
||||
hobby: []
|
||||
},
|
||||
// 自定义校验规则
|
||||
customRules: {
|
||||
name: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请填写姓名'
|
||||
}
|
||||
],
|
||||
label: '姓名'
|
||||
},
|
||||
age: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请填写年龄'
|
||||
}
|
||||
],
|
||||
label: '年龄'
|
||||
},
|
||||
hobby: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择兴趣'
|
||||
},
|
||||
{
|
||||
validateFunction: (rule, value, data, callback) => {
|
||||
if (value.length < 2) {
|
||||
callback('请至少勾选两个兴趣爱好')
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
],
|
||||
label: '兴趣爱好'
|
||||
}
|
||||
},
|
||||
// 动态表单数据
|
||||
dynamicFormData: {
|
||||
email: '',
|
||||
domains: {}
|
||||
},
|
||||
// 动态表单列表
|
||||
dynamicLists: [],
|
||||
// 动态表单规则
|
||||
dynamicRules: {
|
||||
email: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请填写邮箱'
|
||||
},
|
||||
{
|
||||
format: 'email',
|
||||
errorMessage: '邮箱格式不正确'
|
||||
}
|
||||
],
|
||||
label: '邮箱'
|
||||
}
|
||||
},
|
||||
// 性别选项
|
||||
sexs: [
|
||||
{ value: '0', text: '男' },
|
||||
{ value: '1', text: '女' }
|
||||
],
|
||||
// 兴趣爱好选项
|
||||
hobbys: [
|
||||
{ value: '0', text: '篮球' },
|
||||
{ value: '1', text: '足球' },
|
||||
{ value: '2', text: '游泳' }
|
||||
]
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// 需要在onReady中设置自定义校验规则
|
||||
this.$refs.customForm.setRules(this.customRules)
|
||||
},
|
||||
methods: {
|
||||
onClickItem(e) {
|
||||
this.current = e.currentIndex
|
||||
this.alignment = e.currentIndex === 0 ? 'left' : 'top'
|
||||
},
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate().then(res => {
|
||||
console.log('表单数据信息：', res)
|
||||
uni.showToast({
|
||||
title: '校验通过',
|
||||
icon: 'success'
|
||||
})
|
||||
}).catch(err => {
|
||||
console.log('表单错误信息：', err)
|
||||
uni.showToast({
|
||||
title: '校验失败',
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
add() {
|
||||
const id = Date.now()
|
||||
this.dynamicLists.push({
|
||||
id: id,
|
||||
label: '域名',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '域名项必填'
|
||||
}
|
||||
]
|
||||
})
|
||||
this.$set(this.dynamicFormData.domains, id, '')
|
||||
},
|
||||
del(id) {
|
||||
const index = this.dynamicLists.findIndex(item => item.id === id)
|
||||
if (index > -1) {
|
||||
this.dynamicLists.splice(index, 1)
|
||||
this.$delete(this.dynamicFormData.domains, id)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.segmented-control {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,136 @@
|
||||
<!--
|
||||
商品导航 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-goods-nav.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-goods-nav
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">商品导航组件，用于商品详情页的底部导航，包含购物车和购买按钮。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-goods-nav :options="options1" :buttonGroup="buttonGroup1" @click="onClick" @buttonClick="onButtonClick" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义按钮" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-goods-nav :options="options2" :buttonGroup="buttonGroup2" @click="onClick" @buttonClick="onButtonClick" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="购物车数量" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-goods-nav :options="options3" :buttonGroup="buttonGroup3" @click="onClick" @buttonClick="onButtonClick" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options1: [
|
||||
{
|
||||
icon: 'shop',
|
||||
text: '店铺'
|
||||
},
|
||||
{
|
||||
icon: 'cart',
|
||||
text: '购物车',
|
||||
info: 0
|
||||
}
|
||||
],
|
||||
buttonGroup1: [
|
||||
{
|
||||
text: '加入购物车',
|
||||
backgroundColor: '#ff0000',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
text: '立即购买',
|
||||
backgroundColor: '#ffa200',
|
||||
color: '#fff'
|
||||
}
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
icon: 'shop',
|
||||
text: '店铺'
|
||||
},
|
||||
{
|
||||
icon: 'cart',
|
||||
text: '购物车',
|
||||
info: 2
|
||||
}
|
||||
],
|
||||
buttonGroup2: [
|
||||
{
|
||||
text: '加入购物车',
|
||||
backgroundColor: '#4ecdc4',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
text: '立即购买',
|
||||
backgroundColor: '#ff6b6b',
|
||||
color: '#fff'
|
||||
}
|
||||
],
|
||||
options3: [
|
||||
{
|
||||
icon: 'shop',
|
||||
text: '店铺'
|
||||
},
|
||||
{
|
||||
icon: 'cart',
|
||||
text: '购物车',
|
||||
info: 5
|
||||
}
|
||||
],
|
||||
buttonGroup3: [
|
||||
{
|
||||
text: '加入购物车',
|
||||
backgroundColor: '#ff0000',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
text: '立即购买',
|
||||
backgroundColor: '#ffa200',
|
||||
color: '#fff'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
console.log('点击选项：', e)
|
||||
uni.showToast({
|
||||
title: `点击了${e.content.text}`,
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
onButtonClick(e) {
|
||||
console.log('点击按钮：', e)
|
||||
uni.showToast({
|
||||
title: `点击了${e.content.text}`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,123 @@
|
||||
<!--
|
||||
宫格 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-grid.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-grid
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">宫格组件，用于展示网格布局，常用于功能入口。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<uni-grid :column="3" :show-border="false" :square="false">
|
||||
<uni-grid-item v-for="(item, index) in gridList1" :key="index" @click="onClick">
|
||||
<view class="grid-item-box">
|
||||
<image class="grid-item-image" :src="item.url" mode="aspectFill" />
|
||||
<text class="grid-item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同列数" type="line" padding>
|
||||
<uni-grid :column="4" :show-border="false" :square="false">
|
||||
<uni-grid-item v-for="(item, index) in gridList2" :key="index" @click="onClick">
|
||||
<view class="grid-item-box">
|
||||
<text class="grid-item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="带边框" type="line" padding>
|
||||
<uni-grid :column="3" :show-border="true" :square="false">
|
||||
<uni-grid-item v-for="(item, index) in gridList3" :key="index" @click="onClick">
|
||||
<view class="grid-item-box">
|
||||
<text class="grid-item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="正方形" type="line" padding>
|
||||
<uni-grid :column="3" :show-border="false" :square="true">
|
||||
<uni-grid-item v-for="(item, index) in gridList4" :key="index" @click="onClick">
|
||||
<view class="grid-item-box">
|
||||
<text class="grid-item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gridList1: [
|
||||
{ text: '功能1', url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' },
|
||||
{ text: '功能2', url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' },
|
||||
{ text: '功能3', url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' },
|
||||
{ text: '功能4', url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' },
|
||||
{ text: '功能5', url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' },
|
||||
{ text: '功能6', url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }
|
||||
],
|
||||
gridList2: [
|
||||
{ text: '选项1' },
|
||||
{ text: '选项2' },
|
||||
{ text: '选项3' },
|
||||
{ text: '选项4' }
|
||||
],
|
||||
gridList3: [
|
||||
{ text: '选项1' },
|
||||
{ text: '选项2' },
|
||||
{ text: '选项3' }
|
||||
],
|
||||
gridList4: [
|
||||
{ text: '选项1' },
|
||||
{ text: '选项2' },
|
||||
{ text: '选项3' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
console.log('点击宫格项', e)
|
||||
uni.showToast({
|
||||
title: '点击了宫格项',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.grid-item-image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.grid-item-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!--
|
||||
分组 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-group.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-group
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">分组组件，用于内容分组，提供统一的样式和间距。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<uni-group title="基础分组" top="0">
|
||||
<view class="group-item">分组内容1</view>
|
||||
<view class="group-item">分组内容2</view>
|
||||
<view class="group-item">分组内容3</view>
|
||||
</uni-group>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="带标题" type="line" padding>
|
||||
<uni-group title="带标题的分组" top="0">
|
||||
<view class="group-item">分组内容1</view>
|
||||
<view class="group-item">分组内容2</view>
|
||||
</uni-group>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义间距" type="line" padding>
|
||||
<uni-group title="自定义间距" top="0" :card="false">
|
||||
<view class="group-item">分组内容1</view>
|
||||
<view class="group-item">分组内容2</view>
|
||||
<view class="group-item">分组内容3</view>
|
||||
</uni-group>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="卡片模式" type="line" padding>
|
||||
<uni-group title="卡片模式" top="0" :card="true">
|
||||
<view class="group-item">分组内容1</view>
|
||||
<view class="group-item">分组内容2</view>
|
||||
<view class="group-item">分组内容3</view>
|
||||
</uni-group>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="嵌套使用" type="line" padding>
|
||||
<uni-group title="外层分组" top="0">
|
||||
<uni-group title="内层分组" top="0" :card="false">
|
||||
<view class="group-item">内层内容1</view>
|
||||
<view class="group-item">内层内容2</view>
|
||||
</uni-group>
|
||||
</uni-group>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.group-item {
|
||||
padding: 15px;
|
||||
background-color: #f8f8f8;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,135 @@
|
||||
<!--
|
||||
uni-icons 图标组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-icons
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">用于展示 icon 图标。</text>
|
||||
</uni-card>
|
||||
|
||||
<!-- 基础用法 -->
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-icons type="contact" size="30"></uni-icons>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<!-- 不同大小 -->
|
||||
<uni-section title="不同大小" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-icons type="contact" size="20"></uni-icons>
|
||||
<uni-icons type="contact" size="30"></uni-icons>
|
||||
<uni-icons type="contact" size="40"></uni-icons>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<!-- 不同颜色 -->
|
||||
<uni-section title="不同颜色" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-icons type="contact" size="30" color="#007aff"></uni-icons>
|
||||
<uni-icons type="contact" size="30" color="#ff3b30"></uni-icons>
|
||||
<uni-icons type="contact" size="30" color="#ffcc00"></uni-icons>
|
||||
<uni-icons type="contact" size="30" color="#4cd964"></uni-icons>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<!-- 常用图标 -->
|
||||
<uni-section title="常用图标" type="line" padding>
|
||||
<view class="icon-grid">
|
||||
<view class="icon-item" v-for="(icon, index) in commonIcons" :key="index">
|
||||
<uni-icons :type="icon" size="30" color="#333"></uni-icons>
|
||||
<text class="icon-name">{{ icon }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<!-- 点击事件 -->
|
||||
<uni-section title="点击事件" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-icons
|
||||
type="heart"
|
||||
size="30"
|
||||
:color="isLiked ? '#ff3b30' : '#999'"
|
||||
@click="toggleLike"
|
||||
></uni-icons>
|
||||
<text class="icon-text">{{ isLiked ? '已点赞' : '未点赞' }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<!-- 自定义图标（fontFamily） -->
|
||||
<uni-section title="自定义图标（fontFamily）" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-icons
|
||||
fontFamily="CustomFont"
|
||||
:size="26"
|
||||
>{{ '\uebc6' }}</uni-icons>
|
||||
<text class="icon-text">自定义图标</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLiked: false,
|
||||
commonIcons: [
|
||||
'contact', 'heart', 'star', 'home', 'shop', 'cart',
|
||||
'person', 'settings', 'search', 'close', 'checkmarkempty',
|
||||
'arrow-down', 'arrow-up', 'arrow-left', 'arrow-right',
|
||||
'plus', 'minus', 'refresh', 'download', 'upload'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleLike() {
|
||||
this.isLiked = !this.isLiked
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.icon-grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 120rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.icon-name {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
margin-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<!--
|
||||
索引列表 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-indexed-list.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-indexed-list
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">索引列表组件，用于按字母索引的列表，常用于通讯录。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-indexed-list :options="indexedList1" @click="onClick" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义数据" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-indexed-list :options="indexedList2" @click="onClick" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
indexedList1: [
|
||||
{
|
||||
letter: 'A',
|
||||
data: [
|
||||
{ name: 'Apple' },
|
||||
{ name: 'Ant' },
|
||||
{ name: 'Air' }
|
||||
]
|
||||
},
|
||||
{
|
||||
letter: 'B',
|
||||
data: [
|
||||
{ name: 'Banana' },
|
||||
{ name: 'Book' },
|
||||
{ name: 'Ball' }
|
||||
]
|
||||
},
|
||||
{
|
||||
letter: 'C',
|
||||
data: [
|
||||
{ name: 'Cat' },
|
||||
{ name: 'Car' },
|
||||
{ name: 'Cup' }
|
||||
]
|
||||
}
|
||||
],
|
||||
indexedList2: [
|
||||
{
|
||||
letter: '热门',
|
||||
data: [
|
||||
{ name: '北京' },
|
||||
{ name: '上海' },
|
||||
{ name: '广州' }
|
||||
]
|
||||
},
|
||||
{
|
||||
letter: 'A',
|
||||
data: [
|
||||
{ name: '安徽' },
|
||||
{ name: '澳门' }
|
||||
]
|
||||
},
|
||||
{
|
||||
letter: 'B',
|
||||
data: [
|
||||
{ name: '北京' }
|
||||
]
|
||||
},
|
||||
{
|
||||
letter: 'G',
|
||||
data: [
|
||||
{ name: '广东' },
|
||||
{ name: '广西' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
console.log('点击项：', e)
|
||||
uni.showToast({
|
||||
title: `点击了${e.item.name}`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!--
|
||||
超链接 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-link.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-link
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">超链接组件，用于页面跳转，支持多种跳转方式。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-link href="https://uniapp.dcloud.net.cn" text="跳转到官网" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同颜色" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-link href="https://uniapp.dcloud.net.cn" text="默认链接" />
|
||||
<uni-link href="https://uniapp.dcloud.net.cn" text="主要链接" color="#007aff" />
|
||||
<uni-link href="https://uniapp.dcloud.net.cn" text="成功链接" color="#4cd964" />
|
||||
<uni-link href="https://uniapp.dcloud.net.cn" text="警告链接" color="#f0ad4e" />
|
||||
<uni-link href="https://uniapp.dcloud.net.cn" text="错误链接" color="#dd524d" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="下划线" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-link href="https://uniapp.dcloud.net.cn" text="显示下划线" :showUnderLine="true" />
|
||||
<uni-link href="https://uniapp.dcloud.net.cn" text="不显示下划线" :showUnderLine="false" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同尺寸" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-link href="https://uniapp.dcloud.net.cn" text="小号链接" size="small" />
|
||||
<uni-link href="https://uniapp.dcloud.net.cn" text="默认链接" />
|
||||
<uni-link href="https://uniapp.dcloud.net.cn" text="大号链接" size="large" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击事件" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-link href="https://uniapp.dcloud.net.cn" text="点击我" @click="onClick" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
console.log('链接被点击', e)
|
||||
uni.showToast({
|
||||
title: '链接被点击',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,188 @@
|
||||
<!--
|
||||
列表 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-list.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-list
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">列表组件可以在其中使用图标、略缩图或放置任何你想放的元素，使用场景如：导航菜单、列表、设置中心排版等</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line">
|
||||
<uni-list>
|
||||
<uni-list-item title="列表文字" />
|
||||
<uni-list-item title="列表文字" rightText="右侧文字" />
|
||||
<uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" />
|
||||
</uni-list>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="禁用列表" type="line">
|
||||
<uni-list>
|
||||
<uni-list-item :disabled="true" title="列表禁用状态" rightText="右侧文字" />
|
||||
<uni-list-item :disabled="true" title="列表禁用状态" rightText="右侧文字" />
|
||||
</uni-list>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="显示右侧箭头" type="line">
|
||||
<uni-list>
|
||||
<uni-list-item showArrow title="列表文字" />
|
||||
<uni-list-item showArrow title="列表文字" rightText="右侧文字" />
|
||||
</uni-list>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="开启点击反馈" type="line">
|
||||
<uni-list>
|
||||
<uni-list-item title="弹窗提示" clickable @click="onClick" />
|
||||
<uni-list-item title="页面跳转" :to="`./chat`" @click="onClick" />
|
||||
<uni-list-item title="关闭当前页面打开新页面" showArrow link="redirectTo" to="./chat" @click="onClick" />
|
||||
<uni-list-item title="打开错误页面(查看控制台)" showArrow link="redirectTo" to="./chats" @click="onClick" />
|
||||
</uni-list>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不显示分隔线" type="line">
|
||||
<uni-list :border="false">
|
||||
<uni-list-item title="列表文字" />
|
||||
<uni-list-item :border="false" title="列表文字" note="列表描述信息" rightText="右侧文字" />
|
||||
<uni-list-item :border="false" title="列表文字" note="列表描述信息" rightText="右侧文字" />
|
||||
</uni-list>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="分隔线通栏" type="line">
|
||||
<uni-list border-full>
|
||||
<uni-list-item title="列表文字" />
|
||||
<uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" />
|
||||
<uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" />
|
||||
</uni-list>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="文字溢出隐藏" type="line">
|
||||
<uni-list>
|
||||
<uni-list-item ellipsis="1" title="超长文字显示一行,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" />
|
||||
<uni-list-item ellipsis="2" title="超长文字显示二行,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" rightText="二行显示" />
|
||||
<uni-list-item ellipsis="1" title="全部显示,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" note="列表描述信息,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字" showArrow rightText="一行显示" />
|
||||
<uni-list-item title="全部显示,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" showArrow rightText="全部" />
|
||||
</uni-list>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="显示图标或图片" type="line">
|
||||
<uni-list>
|
||||
<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon" title="列表左侧带扩展图标" />
|
||||
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" showArrow thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="sm" rightText="小图" />
|
||||
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" showArrow thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="base" rightText="默认" />
|
||||
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" showArrow thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="lg" rightText="大图" />
|
||||
</uni-list>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="使用插槽" type="line">
|
||||
<uni-list>
|
||||
<uni-list-item>
|
||||
<template v-slot:body>
|
||||
<view class="slot-box">
|
||||
<text class="slot-text">使用 body 插槽</text>
|
||||
</view>
|
||||
</template>
|
||||
</uni-list-item>
|
||||
<uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
|
||||
<template v-slot:footer>
|
||||
<image class="slot-image" src="/static/logo.png" mode="widthFix" />
|
||||
</template>
|
||||
</uni-list-item>
|
||||
<uni-list-item>
|
||||
<template v-slot:header>
|
||||
<view class="slot-box">
|
||||
<image class="slot-image" src="/static/logo.png" mode="widthFix" />
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<text class="slot-box slot-text">自定义两侧插槽</text>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<image class="slot-image" src="/static/logo.png" mode="widthFix" />
|
||||
</template>
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="聊天列表示例" type="line">
|
||||
<uni-list :border="true">
|
||||
<!-- 显示圆形头像 -->
|
||||
<uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" />
|
||||
<!-- 右侧带角标 -->
|
||||
<uni-list-chat title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12" />
|
||||
<!-- 头像显示圆点 -->
|
||||
<uni-list-chat title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot" />
|
||||
<!-- 头像显示角标 -->
|
||||
<uni-list-chat title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99" />
|
||||
<!-- 显示多头像 -->
|
||||
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot" />
|
||||
<!-- 自定义右侧内容 -->
|
||||
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
|
||||
<view class="chat-custom-right">
|
||||
<text class="chat-custom-text">刚刚</text>
|
||||
<!-- 需要使用 uni-icons 请自行引入 -->
|
||||
<uni-icons type="star-filled" color="#999" size="18" />
|
||||
</view>
|
||||
</uni-list-chat>
|
||||
</uni-list>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
extraIcon: {
|
||||
color: '#4cd964',
|
||||
size: '22',
|
||||
type: 'spinner'
|
||||
},
|
||||
avatarList: [
|
||||
{ url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' },
|
||||
{ url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
console.log('点击列表', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.slot-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slot-text {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.slot-image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.chat-custom-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.chat-custom-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!--
|
||||
加载更多 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-load-more.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-load-more
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">加载更多组件，用于列表加载状态提示。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-load-more :status="status1" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-load-more :status="'more'" :content-text="contentText1" />
|
||||
<uni-load-more :status="'loading'" />
|
||||
<uni-load-more :status="'noMore'" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义文字" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-load-more :status="status2" :content-text="contentText2" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义颜色" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-load-more :status="status3" :color="'#ff6b6b'" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
status1: 'more',
|
||||
status2: 'loading',
|
||||
status3: 'noMore',
|
||||
contentText1: {
|
||||
contentdown: '上拉加载更多',
|
||||
contentrefresh: '正在加载...',
|
||||
contentnomore: '没有更多数据了'
|
||||
},
|
||||
contentText2: {
|
||||
contentdown: '下拉刷新',
|
||||
contentrefresh: '加载中...',
|
||||
contentnomore: '已全部加载'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,114 @@
|
||||
<!--
|
||||
自定义导航栏 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-nav-bar
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">自定义导航栏组件，自动处理不同端的状态栏，支持自定义左右按钮。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-nav-bar title="导航栏" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="左侧按钮" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-nav-bar title="导航栏" left-icon="left" @clickLeft="onClickLeft" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="右侧按钮" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-nav-bar title="导航栏" right-text="更多" @clickRight="onClickRight" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="左右都有按钮" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-nav-bar title="导航栏" left-icon="left" right-text="更多" @clickLeft="onClickLeft" @clickRight="onClickRight" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义颜色" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-nav-bar title="导航栏" :color="navColor" :background-color="navBgColor" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义高度" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-nav-bar title="导航栏" :height="60" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义插槽" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-nav-bar>
|
||||
<template v-slot:left>
|
||||
<view class="custom-left">自定义左侧</view>
|
||||
</template>
|
||||
<template v-slot:default>
|
||||
<text class="custom-title">自定义标题</text>
|
||||
</template>
|
||||
<template v-slot:right>
|
||||
<view class="custom-right">自定义右侧</view>
|
||||
</template>
|
||||
</uni-nav-bar>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navColor: '#333',
|
||||
navBgColor: '#fff'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickLeft() {
|
||||
uni.showToast({
|
||||
title: '点击左侧按钮',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
onClickRight() {
|
||||
uni.showToast({
|
||||
title: '点击右侧按钮',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.custom-left,
|
||||
.custom-right {
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.custom-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!--
|
||||
通告栏 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-notice-bar.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-notice-bar
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">通告栏组件，用于消息通知，支持滚动播放。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-notice-bar text="这是一条通告栏消息，用于展示重要信息" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="滚动播放" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-notice-bar text="这是一条滚动播放的通告栏消息，内容较长时会自动滚动" :scrollable="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="单行滚动" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-notice-bar text="这是一条单行滚动的通告栏消息，内容较长时会自动滚动显示完整内容" :single="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义颜色" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-notice-bar text="自定义颜色的通告栏" color="#ff6b6b" background-color="#fff5f5" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="显示图标" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-notice-bar text="带图标的通告栏" :show-icon="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="显示关闭按钮" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-notice-bar text="可关闭的通告栏" :show-close="true" @close="onClose" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击事件" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-notice-bar text="点击查看详情" @click="onClick" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
uni.showToast({
|
||||
title: '关闭通告栏',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
onClick() {
|
||||
uni.showToast({
|
||||
title: '点击了通告栏',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<!--
|
||||
数字输入框 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-number-box.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-number-box
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">数字输入框组件，用于数字输入，支持增减按钮。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-number-box v-model="value1" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="设置最小值最大值" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-number-box v-model="value2" :min="0" :max="100" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="设置步长" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-number-box v-model="value3" :step="5" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="禁用状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-number-box v-model="value4" :disabled="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="只读状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-number-box v-model="value5" :readonly="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="事件监听" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-number-box v-model="value6" @change="onChange" />
|
||||
<text class="result-text">当前值：{{ value6 }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 1,
|
||||
value2: 10,
|
||||
value3: 5,
|
||||
value4: 20,
|
||||
value5: 15,
|
||||
value6: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
console.log('值改变：', e)
|
||||
uni.showToast({
|
||||
title: `当前值：${e}`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!--
|
||||
分页器 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-pagination.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-pagination
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">分页器组件，用于数据分页。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-pagination :total="50" :current="current1" :pageSize="10" @change="onPageChange1" />
|
||||
<text class="result-text">当前页：{{ current1 }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="显示总数" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-pagination :total="100" :current="current2" :pageSize="10" :show-icon="true" @change="onPageChange2" />
|
||||
<text class="result-text">当前页：{{ current2 }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-pagination :total="80" :current="current3" :pageSize="10" :show-icon="true" @change="onPageChange3" />
|
||||
<text class="result-text">当前页：{{ current3 }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current1: 1,
|
||||
current2: 1,
|
||||
current3: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onPageChange1(e) {
|
||||
console.log('页码改变：', e)
|
||||
this.current1 = e.current
|
||||
uni.showToast({
|
||||
title: `第${e.current}页`,
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
onPageChange2(e) {
|
||||
this.current2 = e.current
|
||||
},
|
||||
onPageChange3(e) {
|
||||
this.current3 = e.current
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,245 @@
|
||||
<!--
|
||||
弹出层 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-popup
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">弹出层组件用于弹出一个覆盖到页面上的内容，使用场景如：底部弹出分享弹窗、页面插屏广告等。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基本示例" type="line">
|
||||
<view class="example-body box">
|
||||
<button class="button" type="primary" @click="toggle('top')">
|
||||
<text class="button-text">顶部</text>
|
||||
</button>
|
||||
<button class="button" type="primary" @click="toggle('bottom')">
|
||||
<text class="button-text">底部</text>
|
||||
</button>
|
||||
<button class="button" type="primary" @click="toggle('center')">
|
||||
<text class="button-text">居中</text>
|
||||
</button>
|
||||
<button class="button" type="primary" @click="toggle('left')">
|
||||
<text class="button-text">左侧</text>
|
||||
</button>
|
||||
<button class="button" type="primary" @click="toggle('right')">
|
||||
<text class="button-text">右侧</text>
|
||||
</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="提示消息" type="line">
|
||||
<view class="example-body box">
|
||||
<button class="button popup-success" @click="messageToggle('success')">
|
||||
<text class="button-text success-text">成功</text>
|
||||
</button>
|
||||
<button class="button popup-error" @click="messageToggle('error')">
|
||||
<text class="button-text error-text">失败</text>
|
||||
</button>
|
||||
<button class="button popup-warn" @click="messageToggle('warn')">
|
||||
<text class="button-text warn-text">警告</text>
|
||||
</button>
|
||||
<button class="button popup-info" @click="messageToggle('info')">
|
||||
<text class="button-text info-text">信息</text>
|
||||
</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="对话框示例" type="line" class="hideOnPc">
|
||||
<view class="example-body box">
|
||||
<button class="button popup-success" @click="dialogToggle('success')">
|
||||
<text class="button-text success-text">成功</text>
|
||||
</button>
|
||||
<button class="button popup-error" @click="dialogToggle('error')">
|
||||
<text class="button-text error-text">失败</text>
|
||||
</button>
|
||||
<button class="button popup-warn" @click="dialogToggle('warn')">
|
||||
<text class="button-text warn-text">警告</text>
|
||||
</button>
|
||||
<button class="button popup-info" @click="dialogToggle('info')">
|
||||
<text class="button-text info-text">信息</text>
|
||||
</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="输入框示例" type="line" padding>
|
||||
<view class="dialog-box">
|
||||
<text class="dialog-text">输入内容：{{ value }}</text>
|
||||
</view>
|
||||
<button class="button" type="primary" @click="inputDialogToggle">
|
||||
<text class="button-text">输入对话框</text>
|
||||
</button>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="底部分享示例" type="line" padding>
|
||||
<button class="button" type="primary" @click="shareToggle">
|
||||
<text class="button-text">分享模版示例</text>
|
||||
</button>
|
||||
</uni-section>
|
||||
|
||||
<view>
|
||||
<!-- 普通弹窗 -->
|
||||
<uni-popup ref="popup" background-color="#fff" @change="change">
|
||||
<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
|
||||
<text class="text">popup 内容</text>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<!-- 提示信息弹窗 -->
|
||||
<uni-popup ref="message" type="message">
|
||||
<uni-popup-message :type="msgType" :message="messageText" :duration="2000" />
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<!-- 提示窗示例 -->
|
||||
<uni-popup ref="alertDialog" type="dialog">
|
||||
<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="欢迎使用 uni-popup!" @confirm="dialogConfirm" @close="dialogClose" />
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<!-- 输入框示例 -->
|
||||
<uni-popup ref="inputDialog" type="dialog">
|
||||
<uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="对话框预置提示内容!" placeholder="请输入内容" @confirm="dialogInputConfirm" />
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<!-- 分享示例 -->
|
||||
<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
|
||||
<uni-popup-share />
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: 'center',
|
||||
msgType: 'success',
|
||||
messageText: '这是一条成功消息',
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log('popup change', e)
|
||||
},
|
||||
toggle(type) {
|
||||
this.type = type
|
||||
this.$refs.popup.open(type)
|
||||
},
|
||||
messageToggle(type) {
|
||||
this.msgType = type
|
||||
const messageMap = {
|
||||
success: '这是一条成功消息',
|
||||
error: '这是一条错误消息',
|
||||
warn: '这是一条警告消息',
|
||||
info: '这是一条提示消息'
|
||||
}
|
||||
this.messageText = messageMap[type]
|
||||
this.$refs.message.open()
|
||||
},
|
||||
dialogToggle(type) {
|
||||
this.msgType = type
|
||||
this.$refs.alertDialog.open()
|
||||
},
|
||||
dialogConfirm() {
|
||||
console.log('点击确认')
|
||||
this.$refs.alertDialog.close()
|
||||
},
|
||||
dialogClose() {
|
||||
console.log('点击关闭')
|
||||
this.$refs.alertDialog.close()
|
||||
},
|
||||
inputDialogToggle() {
|
||||
this.$refs.inputDialog.open()
|
||||
},
|
||||
dialogInputConfirm(value) {
|
||||
console.log('输入内容：', value)
|
||||
this.value = value
|
||||
this.$refs.inputDialog.close()
|
||||
},
|
||||
shareToggle() {
|
||||
this.$refs.share.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 5px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.popup-height {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.dialog-box {
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.dialog-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.success-text {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.warn-text {
|
||||
color: #e6a23c;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<!--
|
||||
评分 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-rate.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-rate
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">评分组件，用于星级评分。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-rate v-model="rate1" />
|
||||
<text class="result-text">当前评分：{{ rate1 }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="只读模式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-rate :value="4" :readonly="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="禁用状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-rate :value="3" :disabled="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义大小" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-rate v-model="rate2" :size="20" />
|
||||
<uni-rate v-model="rate3" :size="30" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义颜色" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-rate v-model="rate4" color="#ff6b6b" />
|
||||
<uni-rate v-model="rate5" color="#4ecdc4" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="允许半星" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-rate v-model="rate6" :allow-half="true" />
|
||||
<text class="result-text">当前评分：{{ rate6 }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="事件监听" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-rate v-model="rate7" @change="onRateChange" />
|
||||
<text class="result-text">当前评分：{{ rate7 }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rate1: 3,
|
||||
rate2: 4,
|
||||
rate3: 5,
|
||||
rate4: 4,
|
||||
rate5: 3,
|
||||
rate6: 3.5,
|
||||
rate7: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onRateChange(e) {
|
||||
console.log('评分改变：', e)
|
||||
uni.showToast({
|
||||
title: `评分：${e.value}`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!--
|
||||
布局-行 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-row.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-row
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">布局-行组件，用于栅格布局，支持响应式布局。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<uni-row>
|
||||
<uni-col :span="12">
|
||||
<view class="demo-box">12</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="demo-box">12</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同列宽" type="line" padding>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view class="demo-box">8</view>
|
||||
</uni-col>
|
||||
<uni-col :span="8">
|
||||
<view class="demo-box">8</view>
|
||||
</uni-col>
|
||||
<uni-col :span="8">
|
||||
<view class="demo-box">8</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="偏移" type="line" padding>
|
||||
<uni-row>
|
||||
<uni-col :span="8" :offset="4">
|
||||
<view class="demo-box">8 offset 4</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="间距" type="line" padding>
|
||||
<uni-row :gutter="20">
|
||||
<uni-col :span="8">
|
||||
<view class="demo-box">8</view>
|
||||
</uni-col>
|
||||
<uni-col :span="8">
|
||||
<view class="demo-box">8</view>
|
||||
</uni-col>
|
||||
<uni-col :span="8">
|
||||
<view class="demo-box">8</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="对齐方式" type="line" padding>
|
||||
<uni-row justify="center">
|
||||
<uni-col :span="8">
|
||||
<view class="demo-box">居中</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row justify="end">
|
||||
<uni-col :span="8">
|
||||
<view class="demo-box">右对齐</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.demo-box {
|
||||
background-color: #f0f0f0;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,112 @@
|
||||
<!--
|
||||
搜索栏 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-search-bar.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-search-bar
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">搜索栏组件，用于搜索功能。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-search-bar v-model="searchValue1" placeholder="请输入搜索关键词" @confirm="onSearch" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="取消按钮" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-search-bar v-model="searchValue2" placeholder="请输入搜索关键词" :show-action="true" @confirm="onSearch" @cancel="onCancel" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-search-bar v-model="searchValue3" placeholder="请输入搜索关键词" :radius="20" bg-color="#f0f0f0" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="禁用状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-search-bar v-model="searchValue4" placeholder="禁用状态" :disabled="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="只读状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-search-bar v-model="searchValue5" placeholder="只读状态" :readonly="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="事件监听" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-search-bar v-model="searchValue6" placeholder="请输入搜索关键词" @input="onInput" @focus="onFocus" @blur="onBlur" @clear="onClear" />
|
||||
<text class="result-text">搜索值：{{ searchValue6 }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchValue1: '',
|
||||
searchValue2: '',
|
||||
searchValue3: '',
|
||||
searchValue4: '',
|
||||
searchValue5: '只读内容',
|
||||
searchValue6: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSearch(e) {
|
||||
console.log('搜索：', e)
|
||||
uni.showToast({
|
||||
title: `搜索：${e.value}`,
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('取消搜索')
|
||||
uni.showToast({
|
||||
title: '取消搜索',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
onInput(e) {
|
||||
console.log('输入：', e)
|
||||
},
|
||||
onFocus(e) {
|
||||
console.log('获得焦点：', e)
|
||||
},
|
||||
onBlur(e) {
|
||||
console.log('失去焦点：', e)
|
||||
},
|
||||
onClear() {
|
||||
console.log('清除内容')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!--
|
||||
标题栏 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-section.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-section
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">标题栏组件，用于内容区块的标题展示。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<text>这是内容区域</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="带副标题" sub-title="这是副标题" type="line" padding>
|
||||
<view class="example-body">
|
||||
<text>这是内容区域</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<text>line 样式（默认）</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同样式" type="circle" padding>
|
||||
<view class="example-body">
|
||||
<text>circle 样式</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="无样式" type="none" padding>
|
||||
<view class="example-body">
|
||||
<text>none 样式</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义右侧内容" type="line" padding>
|
||||
<template v-slot:right>
|
||||
<text class="custom-right">更多</text>
|
||||
</template>
|
||||
<view class="example-body">
|
||||
<text>这是内容区域</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.custom-right {
|
||||
color: #007aff;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,96 @@
|
||||
<!--
|
||||
分段器 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-segmented-control.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-segmented-control
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">分段器组件，用于分段选择。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-segmented-control :current="current1" :values="values1" @clickItem="onClickItem1" />
|
||||
<text class="result-text">当前选中：{{ values1[current1] }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-segmented-control :current="current2" :values="values2" styleType="button" @clickItem="onClickItem2" />
|
||||
<text class="result-text">当前选中：{{ values2[current2] }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义颜色" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-segmented-control :current="current3" :values="values3" :activeColor="'#ff6b6b'" @clickItem="onClickItem3" />
|
||||
<text class="result-text">当前选中：{{ values3[current3] }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="事件监听" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-segmented-control :current="current4" :values="values4" @clickItem="onClickItem4" />
|
||||
<text class="result-text">当前选中：{{ values4[current4] }}</text>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current1: 0,
|
||||
current2: 0,
|
||||
current3: 0,
|
||||
current4: 0,
|
||||
values1: ['选项1', '选项2', '选项3'],
|
||||
values2: ['按钮1', '按钮2'],
|
||||
values3: ['选项A', '选项B', '选项C'],
|
||||
values4: ['全部', '进行中', '已完成']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickItem1(e) {
|
||||
this.current1 = e.currentIndex
|
||||
console.log('点击项：', e)
|
||||
},
|
||||
onClickItem2(e) {
|
||||
this.current2 = e.currentIndex
|
||||
},
|
||||
onClickItem3(e) {
|
||||
this.current3 = e.currentIndex
|
||||
},
|
||||
onClickItem4(e) {
|
||||
this.current4 = e.currentIndex
|
||||
uni.showToast({
|
||||
title: `选择了${this.values4[e.currentIndex]}`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!--
|
||||
步骤条 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-steps.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-steps
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">步骤条组件，用于步骤流程展示。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-steps :options="steps1" :active="active1" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-steps :options="steps2" :active="active2" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-steps :options="steps3" :active="active3" activeColor="#ff6b6b" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="垂直方向" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-steps :options="steps4" :active="active4" direction="column" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active1: 1,
|
||||
active2: 2,
|
||||
active3: 1,
|
||||
active4: 2,
|
||||
steps1: [
|
||||
{ title: '步骤1' },
|
||||
{ title: '步骤2' },
|
||||
{ title: '步骤3' }
|
||||
],
|
||||
steps2: [
|
||||
{ title: '待处理', desc: '等待处理' },
|
||||
{ title: '处理中', desc: '正在处理' },
|
||||
{ title: '已完成', desc: '处理完成' }
|
||||
],
|
||||
steps3: [
|
||||
{ title: '步骤A' },
|
||||
{ title: '步骤B' },
|
||||
{ title: '步骤C' }
|
||||
],
|
||||
steps4: [
|
||||
{ title: '步骤1', desc: '描述1' },
|
||||
{ title: '步骤2', desc: '描述2' },
|
||||
{ title: '步骤3', desc: '描述3' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<!--
|
||||
滑动操作 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-swipe-action.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-swipe-action
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">滑动操作组件，用于列表项滑动操作。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item :right-options="options1" @click="onClick">
|
||||
<view class="swipe-item">
|
||||
<text>滑动显示操作按钮</text>
|
||||
</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="左右滑动" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item :left-options="options2" :right-options="options3" @click="onClick">
|
||||
<view class="swipe-item">
|
||||
<text>左右都可以滑动</text>
|
||||
</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="多个操作按钮" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item :right-options="options4" @click="onClick">
|
||||
<view class="swipe-item">
|
||||
<text>多个操作按钮</text>
|
||||
</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options1: [
|
||||
{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#dd524d'
|
||||
}
|
||||
}
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
text: '收藏',
|
||||
style: {
|
||||
backgroundColor: '#007aff'
|
||||
}
|
||||
}
|
||||
],
|
||||
options3: [
|
||||
{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#dd524d'
|
||||
}
|
||||
}
|
||||
],
|
||||
options4: [
|
||||
{
|
||||
text: '收藏',
|
||||
style: {
|
||||
backgroundColor: '#007aff'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#dd524d'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
console.log('点击操作：', e)
|
||||
uni.showToast({
|
||||
title: `点击了${e.content.text}`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.swipe-item {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,112 @@
|
||||
<!--
|
||||
轮播图指示点 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-swiper-dot.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-swiper-dot
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">轮播图指示点组件，用于轮播图指示。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<swiper class="swiper" :current="current1" @change="onChange1">
|
||||
<swiper-item v-for="(item, index) in swiperList1" :key="index">
|
||||
<view class="swiper-item">{{ item }}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<uni-swiper-dot :info="swiperList1" :current="current1" :dots-styles="dotsStyles1" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<swiper class="swiper" :current="current2" @change="onChange2">
|
||||
<swiper-item v-for="(item, index) in swiperList2" :key="index">
|
||||
<view class="swiper-item">{{ item }}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<uni-swiper-dot :info="swiperList2" :current="current2" :dots-styles="dotsStyles2" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同模式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<swiper class="swiper" :current="current3" @change="onChange3">
|
||||
<swiper-item v-for="(item, index) in swiperList3" :key="index">
|
||||
<view class="swiper-item">{{ item }}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<uni-swiper-dot :info="swiperList3" :current="current3" mode="round" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current1: 0,
|
||||
current2: 0,
|
||||
current3: 0,
|
||||
swiperList1: ['内容1', '内容2', '内容3'],
|
||||
swiperList2: ['内容A', '内容B', '内容C'],
|
||||
swiperList3: ['内容X', '内容Y', '内容Z'],
|
||||
dotsStyles1: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
border: 'none',
|
||||
color: '#fff',
|
||||
selectedBackgroundColor: '#007aff',
|
||||
selectedBorder: 'none'
|
||||
},
|
||||
dotsStyles2: {
|
||||
backgroundColor: '#ff6b6b',
|
||||
border: 'none',
|
||||
color: '#fff',
|
||||
selectedBackgroundColor: '#4ecdc4',
|
||||
selectedBorder: 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange1(e) {
|
||||
this.current1 = e.detail.current
|
||||
},
|
||||
onChange2(e) {
|
||||
this.current2 = e.detail.current
|
||||
},
|
||||
onChange3(e) {
|
||||
this.current3 = e.detail.current
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 200px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
background-color: #f0f0f0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!--
|
||||
表格 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-table.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-table
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">表格组件，用于展示表格数据。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-table border stripe>
|
||||
<uni-tr>
|
||||
<uni-th>姓名</uni-th>
|
||||
<uni-th>年龄</uni-th>
|
||||
<uni-th>地址</uni-th>
|
||||
</uni-tr>
|
||||
<uni-tr v-for="(item, index) in tableData1" :key="index">
|
||||
<uni-td>{{ item.name }}</uni-td>
|
||||
<uni-td>{{ item.age }}</uni-td>
|
||||
<uni-td>{{ item.address }}</uni-td>
|
||||
</uni-tr>
|
||||
</uni-table>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="无边框" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-table>
|
||||
<uni-tr>
|
||||
<uni-th>姓名</uni-th>
|
||||
<uni-th>年龄</uni-th>
|
||||
<uni-th>地址</uni-th>
|
||||
</uni-tr>
|
||||
<uni-tr v-for="(item, index) in tableData2" :key="index">
|
||||
<uni-td>{{ item.name }}</uni-td>
|
||||
<uni-td>{{ item.age }}</uni-td>
|
||||
<uni-td>{{ item.address }}</uni-td>
|
||||
</uni-tr>
|
||||
</uni-table>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="对齐方式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-table border>
|
||||
<uni-tr>
|
||||
<uni-th align="left">左对齐</uni-th>
|
||||
<uni-th align="center">居中</uni-th>
|
||||
<uni-th align="right">右对齐</uni-th>
|
||||
</uni-tr>
|
||||
<uni-tr v-for="(item, index) in tableData3" :key="index">
|
||||
<uni-td align="left">{{ item.name }}</uni-td>
|
||||
<uni-td align="center">{{ item.age }}</uni-td>
|
||||
<uni-td align="right">{{ item.address }}</uni-td>
|
||||
</uni-tr>
|
||||
</uni-table>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData1: [
|
||||
{ name: '张三', age: 20, address: '北京市' },
|
||||
{ name: '李四', age: 25, address: '上海市' },
|
||||
{ name: '王五', age: 30, address: '广州市' }
|
||||
],
|
||||
tableData2: [
|
||||
{ name: '张三', age: 20, address: '北京市' },
|
||||
{ name: '李四', age: 25, address: '上海市' }
|
||||
],
|
||||
tableData3: [
|
||||
{ name: '张三', age: 20, address: '北京市' },
|
||||
{ name: '李四', age: 25, address: '上海市' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!--
|
||||
标签 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-tag.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-tag
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">标签组件，用于标记和选择，支持多种样式和尺寸。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-tag text="标签" />
|
||||
<uni-tag text="标签" type="primary" />
|
||||
<uni-tag text="标签" type="success" />
|
||||
<uni-tag text="标签" type="warning" />
|
||||
<uni-tag text="标签" type="error" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同尺寸" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-tag text="小标签" size="small" />
|
||||
<uni-tag text="默认标签" />
|
||||
<uni-tag text="大标签" size="large" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="可关闭标签" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-tag text="可关闭" :closable="true" @close="onClose" />
|
||||
<uni-tag text="可关闭" type="primary" :closable="true" @close="onClose" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="圆角标签" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-tag text="圆角标签" :circle="true" />
|
||||
<uni-tag text="圆角标签" type="primary" :circle="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="禁用状态" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-tag text="禁用标签" :disabled="true" />
|
||||
<uni-tag text="禁用标签" type="primary" :disabled="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
uni.showToast({
|
||||
title: '标签已关闭',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!--
|
||||
章节标题 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-title.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-title
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">章节标题组件，用于章节标题展示。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="一级标题" />
|
||||
<uni-title type="h2" title="二级标题" />
|
||||
<uni-title type="h3" title="三级标题" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同尺寸" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="大标题" />
|
||||
<uni-title type="h2" title="中标题" />
|
||||
<uni-title type="h3" title="小标题" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义颜色" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="红色标题" color="#ff6b6b" />
|
||||
<uni-title type="h2" title="蓝色标题" color="#4ecdc4" />
|
||||
<uni-title type="h3" title="绿色标题" color="#95e1d3" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="对齐方式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-title type="h2" title="左对齐" align="left" />
|
||||
<uni-title type="h2" title="居中" align="center" />
|
||||
<uni-title type="h2" title="右对齐" align="right" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="带副标题" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="主标题" subtitle="这是副标题" />
|
||||
<uni-title type="h2" title="主标题" subtitle="这是副标题" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="自定义样式标题" :bold="true" />
|
||||
<uni-title type="h2" title="普通样式标题" :bold="false" />
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!--
|
||||
文字提示 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-tooltip.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-tooltip
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">文字提示组件，用于显示提示信息。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-tooltip content="这是提示信息">
|
||||
<button>悬停显示提示</button>
|
||||
</uni-tooltip>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同位置" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tooltip-group">
|
||||
<uni-tooltip content="顶部提示" placement="top">
|
||||
<button>顶部</button>
|
||||
</uni-tooltip>
|
||||
<uni-tooltip content="底部提示" placement="bottom">
|
||||
<button>底部</button>
|
||||
</uni-tooltip>
|
||||
<uni-tooltip content="左侧提示" placement="left">
|
||||
<button>左侧</button>
|
||||
</uni-tooltip>
|
||||
<uni-tooltip content="右侧提示" placement="right">
|
||||
<button>右侧</button>
|
||||
</uni-tooltip>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-tooltip content="自定义样式提示" backgroundColor="#ff6b6b" color="#fff">
|
||||
<button>自定义样式</button>
|
||||
</uni-tooltip>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.tooltip-group {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,103 @@
|
||||
<!--
|
||||
过渡动画 组件示例
|
||||
|
||||
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-transition.html
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?name=uni-transition
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">过渡动画组件，用于动画效果。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<button @click="toggle1">切换显示</button>
|
||||
<uni-transition mode-class="fade" :show="show1">
|
||||
<view class="transition-box">淡入淡出</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="不同动画" type="line" padding>
|
||||
<view class="example-body">
|
||||
<button @click="toggle2">切换显示</button>
|
||||
<uni-transition mode-class="slide-top" :show="show2">
|
||||
<view class="transition-box">从上滑入</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="缩放动画" type="line" padding>
|
||||
<view class="example-body">
|
||||
<button @click="toggle3">切换显示</button>
|
||||
<uni-transition mode-class="zoom-in" :show="show3">
|
||||
<view class="transition-box">缩放进入</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义动画" type="line" padding>
|
||||
<view class="example-body">
|
||||
<button @click="toggle4">切换显示</button>
|
||||
<uni-transition :custom-class="customClass" :show="show4">
|
||||
<view class="transition-box">自定义动画</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false,
|
||||
customClass: 'custom-transition'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle1() {
|
||||
this.show1 = !this.show1
|
||||
},
|
||||
toggle2() {
|
||||
this.show2 = !this.show2
|
||||
},
|
||||
toggle3() {
|
||||
this.show3 = !this.show3
|
||||
},
|
||||
toggle4() {
|
||||
this.show4 = !this.show4
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.transition-box {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user