home1022
This commit is contained in:
bwstudio
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<u-navbar
|
||||
title="上拉菜单"
|
||||
@leftClick="navigateBack"
|
||||
safeAreaInsetTop
|
||||
fixed
|
||||
placeholder
|
||||
></u-navbar>
|
||||
<u-cell-group>
|
||||
<u-cell
|
||||
@click="openSheet(index)"
|
||||
:title="item.title"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
isLink
|
||||
>
|
||||
<image
|
||||
slot="icon"
|
||||
class="u-cell-icon"
|
||||
:src="item.iconUrl"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
<u-action-sheet
|
||||
:show="show0"
|
||||
@close="close"
|
||||
@select="select"
|
||||
:actions="actions0"
|
||||
:closeOnClickOverlay="false"
|
||||
>
|
||||
</u-action-sheet>
|
||||
<u-action-sheet
|
||||
:show="show1"
|
||||
@close="show1 = false"
|
||||
:actions="actions1"
|
||||
>
|
||||
</u-action-sheet>
|
||||
<u-action-sheet
|
||||
:show="show2"
|
||||
@close="show2 = false"
|
||||
:actions="actions2"
|
||||
cancelText="取消"
|
||||
>
|
||||
</u-action-sheet>
|
||||
<u-action-sheet
|
||||
:show="show3"
|
||||
@close="show3 = false"
|
||||
:actions="actions3"
|
||||
description="这是一段描述文本,字号偏小,颜色偏淡"
|
||||
>
|
||||
</u-action-sheet>
|
||||
<u-action-sheet
|
||||
:show="show4"
|
||||
@close="show4 = false"
|
||||
title="标题位置"
|
||||
:round="10"
|
||||
>
|
||||
<text style="margin: 10px 20px 30px 20px; color: #303133; font-size: 15px;">这是一段通过slot传入的内容,您可以在此自定义操作面板</text>
|
||||
</u-action-sheet>
|
||||
<u-action-sheet
|
||||
:show="show5"
|
||||
@close="show5 = false"
|
||||
title="微信开放能力"
|
||||
:actions="actions5"
|
||||
@getuserinfo="getuserinfo"
|
||||
></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show0: false,
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false,
|
||||
show5: false,
|
||||
actions0: [{
|
||||
name: '选项1',
|
||||
},
|
||||
{
|
||||
name: '选项2',
|
||||
},
|
||||
{
|
||||
name: '选项3',
|
||||
subname: '描述文本'
|
||||
},
|
||||
],
|
||||
actions1: [{
|
||||
name: '选项1',
|
||||
},
|
||||
{
|
||||
loading: true
|
||||
},
|
||||
{
|
||||
name: '选项被禁用',
|
||||
disabled: true
|
||||
},
|
||||
],
|
||||
actions2: [{
|
||||
name: '选项1',
|
||||
},
|
||||
{
|
||||
name: '选项2',
|
||||
},
|
||||
{
|
||||
name: '选项3',
|
||||
},
|
||||
],
|
||||
actions3: [{
|
||||
name: '选项1',
|
||||
},
|
||||
{
|
||||
name: '选项2',
|
||||
},
|
||||
{
|
||||
name: '选项3',
|
||||
},
|
||||
],
|
||||
actions5: [{
|
||||
name: '获取用户信息',
|
||||
openType: 'getUserInfo',
|
||||
color: uni.$u.color['success']
|
||||
}],
|
||||
list: [{
|
||||
title: '普通使用',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/custom.png'
|
||||
|
||||
},
|
||||
{
|
||||
title: '设置状态',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/status.png'
|
||||
},
|
||||
{
|
||||
title: '显示取消按钮',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/cancel.png'
|
||||
},
|
||||
{
|
||||
title: '描述内容',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/desc.png'
|
||||
},
|
||||
{
|
||||
title: '显示标题(显示圆角)',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/title.png'
|
||||
},
|
||||
{
|
||||
title: '微信开放能力',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/open.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 点击cell，判断显示哪个功能
|
||||
openSheet(index) {
|
||||
// #ifndef MP
|
||||
if (index === 5) return uni.$u.toast('请在微信内预览')
|
||||
// #endif
|
||||
this[`show${index}`] = true
|
||||
},
|
||||
getuserinfo(res) {
|
||||
uni.$u.toast(`用户名：${res.userInfo.nickName}`)
|
||||
},
|
||||
navigateBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
close() {
|
||||
console.log('close');
|
||||
this['show0'] = false
|
||||
},
|
||||
select(e) {
|
||||
console.log('select', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础功能</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-alert-item">
|
||||
<u-alert
|
||||
description="山不在于高，有了神仙就出名"
|
||||
type="warning"
|
||||
></u-alert>
|
||||
</view>
|
||||
<view class="u-alert-item">
|
||||
<u-alert
|
||||
description="水不在深，有龙则灵"
|
||||
type="primary"
|
||||
></u-alert>
|
||||
</view>
|
||||
<view class="u-alert-item">
|
||||
<u-alert
|
||||
description="斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青"
|
||||
type="error"
|
||||
></u-alert>
|
||||
</view>
|
||||
<view class="u-alert-item">
|
||||
<u-alert
|
||||
description="谈笑有鸿儒，往来无白丁"
|
||||
type="info"
|
||||
></u-alert>
|
||||
</view>
|
||||
<view class="u-alert-item">
|
||||
<u-alert
|
||||
description="可以调素琴，阅金经"
|
||||
type="success"
|
||||
></u-alert>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">深浅色</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-alert-item">
|
||||
<u-alert
|
||||
description="无丝竹之乱耳，无案牍之劳形"
|
||||
type="warning"
|
||||
></u-alert>
|
||||
</view>
|
||||
<view class="u-alert-item">
|
||||
<u-alert
|
||||
description="南阳诸葛庐，西蜀子云亭。孔子云：何陋之有"
|
||||
type="warning"
|
||||
effect="dark"
|
||||
></u-alert>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">显示图标</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-alert-item">
|
||||
<u-alert
|
||||
description="六王毕，四海一；蜀山兀，阿房出"
|
||||
type="error"
|
||||
showIcon
|
||||
></u-alert>
|
||||
</view>
|
||||
<view class="u-alert-item">
|
||||
<u-alert
|
||||
description="覆压三百余里，隔离天日。骊山北构而西折，直走咸阳，二川溶溶，流入宫墙"
|
||||
type="error"
|
||||
effect="dark"
|
||||
showIcon
|
||||
></u-alert>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">可关闭</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-alert-item">
|
||||
<u-alert
|
||||
description="五步一楼，十步一阁；廊腰缦回，檐牙高啄；各抱地势，钩心斗角"
|
||||
type="success"
|
||||
showIcon
|
||||
closable
|
||||
></u-alert>
|
||||
</view>
|
||||
<view class="u-alert-item">
|
||||
<u-alert
|
||||
description="盘盘焉，囷囷焉，蜂房水涡，矗不知其几千万落"
|
||||
type="success"
|
||||
effect="dark"
|
||||
closable
|
||||
showIcon
|
||||
></u-alert>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">带标题</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-alert-item">
|
||||
<u-alert
|
||||
title="妃嫔媵嫱，王子皇孙，辞楼下殿"
|
||||
description="长桥卧波，未云何龙？复道行空，不霁何虹"
|
||||
type="info"
|
||||
showIcon
|
||||
closable
|
||||
></u-alert>
|
||||
</view>
|
||||
<view class="u-alert-item">
|
||||
<u-alert
|
||||
title="辇来于秦，朝歌夜弦，为秦宫人。明星荧荧，开妆镜也"
|
||||
description="高低冥迷，不知西东。歌台暖响，春光融融；舞殿冷袖，风雨凄凄。一日之内，一宫之间，而气候不齐"
|
||||
type="info"
|
||||
effect="dark"
|
||||
closable
|
||||
showIcon
|
||||
></u-alert>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
description: '',
|
||||
title: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-alert-item {
|
||||
flex: 1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.u-demo-block__content {
|
||||
flex-direction: column !important;
|
||||
align-items: stretch;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">直角边形状</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-badge
|
||||
:value="1500"
|
||||
shape="horn"
|
||||
></u-badge>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">徽标数显示方式</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-badge
|
||||
:value="5132"
|
||||
numberType="ellipsis"
|
||||
></u-badge>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-badge
|
||||
:value="1011"
|
||||
numberType="overflow"
|
||||
></u-badge>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-badge
|
||||
:value="1500"
|
||||
numberType="limit"
|
||||
></u-badge>
|
||||
</view>
|
||||
|
||||
<view class="u-page__tag-item">
|
||||
<u-badge
|
||||
:value="45187"
|
||||
numberType="limit"
|
||||
></u-badge>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">显示圆点</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-badge
|
||||
:value="1011"
|
||||
numberType="overflow"
|
||||
isDot
|
||||
>
|
||||
</u-badge>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义主题</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-badge
|
||||
:value="9"
|
||||
type="error"
|
||||
>
|
||||
</u-badge>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-badge
|
||||
:value="9"
|
||||
type="warning"
|
||||
>
|
||||
</u-badge>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-badge
|
||||
:value="9"
|
||||
type="success"
|
||||
>
|
||||
</u-badge>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-badge
|
||||
:value="9"
|
||||
type="primary"
|
||||
>
|
||||
</u-badge>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">反转色</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-badge
|
||||
:value="9"
|
||||
type="error"
|
||||
inverted
|
||||
>
|
||||
</u-badge>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-badge
|
||||
:value="1532"
|
||||
inverted
|
||||
type="warning"
|
||||
>
|
||||
</u-badge>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-badge
|
||||
:value="12"
|
||||
inverted
|
||||
type="success"
|
||||
>
|
||||
</u-badge>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-badge
|
||||
:value="999"
|
||||
inverted
|
||||
type="primary"
|
||||
>
|
||||
</u-badge>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.box {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.u-page__tag-item {
|
||||
margin-right: 40px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.badge-box {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
background-color: #E6E6E6;
|
||||
}
|
||||
|
||||
.u-demo-block__content {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础功能</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-code
|
||||
ref="uCode"
|
||||
@change="codeChange"
|
||||
seconds="20"
|
||||
change-text="XS获取"
|
||||
@start="disabled1 = true"
|
||||
@end="disabled1 = false"
|
||||
></u-code>
|
||||
<u-button
|
||||
@tap="getCode"
|
||||
:text="tips"
|
||||
type="success"
|
||||
size="small"
|
||||
:disabled="disabled1"
|
||||
></u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">保持倒计时(开始后，左上角返退出此页面再进入，会发现倒计时还在继续)</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-code
|
||||
ref="uCode1"
|
||||
@change="codeChange1"
|
||||
keep-running
|
||||
change-text="倒计时XS"
|
||||
@start="disabled2 = true"
|
||||
@end="disabled2 = false"
|
||||
></u-code>
|
||||
<u-button
|
||||
type="primary"
|
||||
@tap="getCode1"
|
||||
:text="tips1"
|
||||
size="small"
|
||||
:disabled="disabled2"
|
||||
></u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">文本样式</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-code
|
||||
ref="uCode2"
|
||||
@change="codeChange2"
|
||||
keep-running
|
||||
start-text="点我获取验证码"
|
||||
></u-code>
|
||||
<text
|
||||
@tap="getCode2"
|
||||
:text="tips2"
|
||||
class="u-page__code-text"
|
||||
>{{tips2}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tips: '',
|
||||
// 此为错误定义，见下方说明
|
||||
// refCode: null,
|
||||
tips1: '',
|
||||
tips2: '',
|
||||
disabled1: false,
|
||||
disabled2: false,
|
||||
disabled3: false
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
|
||||
// 造成循环引用而报错，如果你想这样做，请在onReady或者onLoad生命周期中定义，如下
|
||||
// this.refCode = this.$refs.uCode;
|
||||
},
|
||||
methods: {
|
||||
codeChange(text) {
|
||||
this.tips = text;
|
||||
},
|
||||
codeChange1(text) {
|
||||
this.tips1 = text;
|
||||
},
|
||||
codeChange2(text) {
|
||||
this.tips2 = text;
|
||||
},
|
||||
getCode() {
|
||||
if (this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
uni.$u.toast('验证码已发送');
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
}, 2000);
|
||||
} else {
|
||||
uni.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
},
|
||||
getCode1() {
|
||||
if (this.$refs.uCode1.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
uni.$u.toast('验证码已发送');
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode1.start();
|
||||
}, 2000);
|
||||
} else {
|
||||
uni.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
},
|
||||
getCode2() {
|
||||
if (this.$refs.uCode2.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
uni.$u.toast('验证码已发送');
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode2.start();
|
||||
}, 2000);
|
||||
} else {
|
||||
uni.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
&__code-text {
|
||||
color: $u-primary;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-demo-block__content {
|
||||
@include flex;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">基础功能</text>
|
||||
<u-collapse
|
||||
@change="change"
|
||||
@close="close"
|
||||
@open="open"
|
||||
>
|
||||
<u-collapse-item
|
||||
title="文档指南"
|
||||
name="Docs guide"
|
||||
>
|
||||
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
|
||||
</u-collapse-item>
|
||||
<u-collapse-item
|
||||
title="组件全面"
|
||||
name="Variety components"
|
||||
>
|
||||
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
|
||||
</u-collapse-item>
|
||||
<u-collapse-item
|
||||
title="众多利器"
|
||||
name="Numerous tools"
|
||||
>
|
||||
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">展开和禁用</text>
|
||||
<u-collapse
|
||||
:value="['2']"
|
||||
>
|
||||
<u-collapse-item
|
||||
title="文档指南"
|
||||
>
|
||||
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
|
||||
</u-collapse-item>
|
||||
<u-collapse-item
|
||||
disabled
|
||||
title="组件全面"
|
||||
>
|
||||
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
|
||||
</u-collapse-item>
|
||||
<u-collapse-item
|
||||
name="2"
|
||||
title="众多利器"
|
||||
>
|
||||
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">手风琴模式</text>
|
||||
<u-collapse
|
||||
accordion
|
||||
>
|
||||
<u-collapse-item
|
||||
title="文档指南"
|
||||
>
|
||||
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
|
||||
</u-collapse-item>
|
||||
<u-collapse-item
|
||||
title="组件全面"
|
||||
>
|
||||
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
|
||||
</u-collapse-item>
|
||||
<u-collapse-item
|
||||
title="众多利器"
|
||||
>
|
||||
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">移除下划线</text>
|
||||
<u-collapse
|
||||
accordion
|
||||
:border="false"
|
||||
>
|
||||
<u-collapse-item
|
||||
title="文档指南"
|
||||
>
|
||||
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
|
||||
</u-collapse-item>
|
||||
<u-collapse-item
|
||||
title="组件全面"
|
||||
>
|
||||
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
|
||||
</u-collapse-item>
|
||||
<u-collapse-item
|
||||
title="众多利器"
|
||||
>
|
||||
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</view>
|
||||
<!-- 微信小程序不支持，因为微信中不支持 <slot name="title" slot="title" />的写法 -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">自定义标题和内容</text>
|
||||
<u-collapse
|
||||
accordion
|
||||
>
|
||||
<u-collapse-item
|
||||
>
|
||||
<text slot="title" class="u-page__item__title__slot-title">文档指南</text>
|
||||
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
|
||||
</u-collapse-item>
|
||||
<!-- <u-collapse-item
|
||||
:isLink="false"
|
||||
>
|
||||
<text slot="title" class="u-page__item__title__slot-title">文档指南</text>
|
||||
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
|
||||
</u-collapse-item> -->
|
||||
<u-collapse-item
|
||||
title="组件全面"
|
||||
>
|
||||
<u-icon name="tags-fill" size="20" slot="icon"></u-icon>
|
||||
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
|
||||
</u-collapse-item>
|
||||
<u-collapse-item
|
||||
title="众多利器"
|
||||
>
|
||||
<text slot="value" class="u-page__item__title__slot-title">自定义内容</text>
|
||||
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<u-gap height="50"></u-gap>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open(e) {
|
||||
// console.log('open', e)
|
||||
},
|
||||
close(e) {
|
||||
// console.log('close', e)
|
||||
},
|
||||
change(e) {
|
||||
// console.log('change', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
padding: 0;
|
||||
|
||||
&__item {
|
||||
|
||||
&__title {
|
||||
color: $u-tips-color;
|
||||
background-color: $u-bg-color;
|
||||
padding: 15px;
|
||||
font-size: 15px;
|
||||
|
||||
&__slot-title {
|
||||
color: $u-primary;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-collapse-content {
|
||||
color: $u-tips-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title" style="margin-top: 0;">主色调</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #3c9cff;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Primary</text>
|
||||
<text class="u-page__item__color-box__item__value">#3c9cff</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #398ade;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Dark</text>
|
||||
<text class="u-page__item__color-box__item__value">#398ade</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #9acafc;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Disabled</text>
|
||||
<text class="u-page__item__color-box__item__value">#9acafc</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #ecf5ff;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
|
||||
<text class="u-page__item__color-box__item__value u-tips-color">#ecf5ff</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">Error</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f56c6c;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Error</text>
|
||||
<text class="u-page__item__color-box__item__value">#f56c6c</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #e45656;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Dark</text>
|
||||
<text class="u-page__item__color-box__item__value">#e45656</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f7b2b2;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Disabled</text>
|
||||
<text class="u-page__item__color-box__item__value">#f7b2b2</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #fef0f0;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
|
||||
<text class="u-page__item__color-box__item__value u-tips-color">#fef0f0</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">Warning</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f9ae3d;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Warning</text>
|
||||
<text class="u-page__item__color-box__item__value">#f9ae3d</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f1a532;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Dark</text>
|
||||
<text class="u-page__item__color-box__item__value">#f1a532</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f9d39b;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Disabled</text>
|
||||
<text class="u-page__item__color-box__item__value">#f9d39b</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #fdf6ec;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
|
||||
<text class="u-page__item__color-box__item__value u-tips-color">#fdf6ec</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">Info</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #909399;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Info</text>
|
||||
<text class="u-page__item__color-box__item__value">#909399</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #767a82;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Dark</text>
|
||||
<text class="u-page__item__color-box__item__value">#767a82</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #c4c6c9;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Disabled</text>
|
||||
<text class="u-page__item__color-box__item__value">#c4c6c9</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f4f4f5;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
|
||||
<text class="u-page__item__color-box__item__value u-tips-color">#f4f4f5</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">Success</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #5ac725;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Success</text>
|
||||
<text class="u-page__item__color-box__item__value">#5ac725</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #53c21d;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Dark</text>
|
||||
<text class="u-page__item__color-box__item__value">#53c21d</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #a9e08f;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">Disabled</text>
|
||||
<text class="u-page__item__color-box__item__value">#a9e08f</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f5fff0;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
|
||||
<text class="u-page__item__color-box__item__value u-tips-color">#f5fff0</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">文字颜色</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #303133;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">主要文字</text>
|
||||
<text class="u-page__item__color-box__item__value">#303133</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #606266;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">常规文字</text>
|
||||
<text class="u-page__item__color-box__item__value">#606266</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #909399;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">次要文字</text>
|
||||
<text class="u-page__item__color-box__item__value">#909399</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #c0c4cc;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title">占位文字</text>
|
||||
<text class="u-page__item__color-box__item__value">#c0c4cc</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">边框颜色</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #9a9998;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title ">一级边框</text>
|
||||
<text class="u-page__item__color-box__item__value ">#9a9998</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #b4b3b1;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title ">二级边框</text>
|
||||
<text class="u-page__item__color-box__item__value ">#b4b3b1</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #ceccca;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title ">三级边框</text>
|
||||
<text class="u-page__item__color-box__item__value ">#ceccca</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #e7e6e4;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title u-tips-color">四级边框</text>
|
||||
<text class="u-page__item__color-box__item__value u-tips-color">#e7e6e4</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">背景颜色</text>
|
||||
<view class="u-page__item__color-box">
|
||||
<view
|
||||
class="u-page__item__color-box__item"
|
||||
style="background-color: #f3f4f6;"
|
||||
>
|
||||
<text class="u-page__item__color-box__item__title u-tips-color">背景颜色</text>
|
||||
<text class="u-page__item__color-box__item__value u-tips-color">#f3f4f6</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
padding: 15px;
|
||||
|
||||
&__item {
|
||||
|
||||
&__title {
|
||||
font-size: 15px;
|
||||
color: $u-content-color;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__color-box {
|
||||
@include flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__item {
|
||||
width: 160rpx;
|
||||
@include flex(column);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 0;
|
||||
border-radius: 3px;
|
||||
|
||||
&__title {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-tips-color {
|
||||
color: $u-tips-color;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础用法</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-count-down
|
||||
:time="30 * 60 * 60 * 1000"
|
||||
format="HH:mm:ss"
|
||||
autoStart
|
||||
millisecond
|
||||
@finish="finish"
|
||||
>
|
||||
</u-count-down>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义格式</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-count-down
|
||||
:time="30 * 60 * 60 * 1000"
|
||||
format="DD:HH:mm:ss"
|
||||
autoStart
|
||||
millisecond
|
||||
@change="onChange"
|
||||
>
|
||||
<view class="time">
|
||||
<text class="time__item">{{ timeData.days }} 天</text>
|
||||
<text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}} 时</text>
|
||||
<text class="time__item">{{ timeData.minutes }} 分</text>
|
||||
<text class="time__item">{{ timeData.seconds }} 秒</text>
|
||||
</view>
|
||||
</u-count-down>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">毫秒级渲染</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-count-down
|
||||
:time="30 * 60 * 60 * 1000"
|
||||
format="HH:mm:ss:SSS"
|
||||
autoStart
|
||||
millisecond
|
||||
>
|
||||
</u-count-down>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义样式</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-count-down
|
||||
:time="30 * 60 * 60 * 1000"
|
||||
format="HH:mm:ss"
|
||||
autoStart
|
||||
millisecond
|
||||
@change="onChange"
|
||||
>
|
||||
<view class="time">
|
||||
<view class="time__custom">
|
||||
<text class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
|
||||
</view>
|
||||
<text class="time__doc">:</text>
|
||||
<view class="time__custom">
|
||||
<text class="time__custom__item">{{ timeData.minutes }}</text>
|
||||
</view>
|
||||
<text class="time__doc">:</text>
|
||||
<view class="time__custom">
|
||||
<text class="time__custom__item">{{ timeData.seconds }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-count-down>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">手动控制</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-count-down
|
||||
ref="countDown"
|
||||
:time="3* 1000"
|
||||
format="ss:SSS"
|
||||
:autoStart="false"
|
||||
millisecond
|
||||
>
|
||||
</u-count-down>
|
||||
</view>
|
||||
<u-grid
|
||||
:border="true"
|
||||
:customStyle="{marginTop:10+'px'}"
|
||||
>
|
||||
<u-grid-item @click="reset">
|
||||
<view class="count-down__grid-item">
|
||||
<u-icon
|
||||
name="reload"
|
||||
:size="22"
|
||||
></u-icon>
|
||||
<text class="count-down__grid-item__grid-text">重置</text>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item @click="start">
|
||||
<view class="count-down__grid-item">
|
||||
<view class="count-down__grid-item__circle">
|
||||
<u-icon
|
||||
color="#fff"
|
||||
name="play-right-fill"
|
||||
:size="22"
|
||||
></u-icon>
|
||||
</view>
|
||||
<text class="count-down__grid-item__grid-text">开始</text>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item @click="pause">
|
||||
<view class="count-down__grid-item">
|
||||
<u-icon
|
||||
name="pause-circle"
|
||||
:size="22"
|
||||
></u-icon>
|
||||
<text class="count-down__grid-item__grid-text">暂停</text>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timeData: {},
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//开始
|
||||
start() {
|
||||
this.$refs.countDown.start();
|
||||
},
|
||||
// 暂停
|
||||
pause() {
|
||||
this.$refs.countDown.pause();
|
||||
},
|
||||
// 重置
|
||||
reset() {
|
||||
this.$refs.countDown.reset();
|
||||
},
|
||||
onChange(e) {
|
||||
this.timeData = e
|
||||
},
|
||||
finish() {
|
||||
console.log('finish');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
|
||||
}
|
||||
|
||||
.time {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
|
||||
&__custom {
|
||||
margin-top: 4px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: $u-primary;
|
||||
border-radius: 4px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&__item {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__doc {
|
||||
color: $u-primary;
|
||||
padding: 0px 4px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
color: #606266;
|
||||
font-size: 15px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-view {
|
||||
padding: 40px 20px 0px 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
color: rgb(143, 156, 162);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// 手动控制的btn样式
|
||||
.count-down {
|
||||
&__grid-item {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&__circle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 32px;
|
||||
background-color: $u-primary;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 4px rgba(155, 191, 255, .7);
|
||||
}
|
||||
|
||||
&__grid-text {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
/* #ifndef APP-PLUS */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础功能</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-count-to
|
||||
:endVal="value"
|
||||
@end="end"
|
||||
></u-count-to>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">倒计数</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-count-to :startVal="startVal1"></u-count-to>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">显示小数位</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-count-to
|
||||
:startVal="startVal2"
|
||||
:endVal="endVal"
|
||||
:decimals="decimals"
|
||||
></u-count-to>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">千分位分隔符</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-count-to
|
||||
:startVal="startVal3"
|
||||
:endVal="endVal2"
|
||||
separator=","
|
||||
:decimals="decimals"
|
||||
></u-count-to>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义控制</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-count-to
|
||||
ref="uCountTo"
|
||||
:endVal="endVal3"
|
||||
:autoplay="autoplay"
|
||||
></u-count-to>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block__content">
|
||||
<view
|
||||
class=""
|
||||
style="flex: 1;"
|
||||
>
|
||||
<u-grid
|
||||
border
|
||||
align="center"
|
||||
customStyle="margin-top: 20px;margin-bottom: 20"
|
||||
>
|
||||
<u-grid-item @click="start">
|
||||
<view class="u-grid-slot">
|
||||
<view class="u-grid-slot__circle">
|
||||
<text class="u-grid-slot__circle__text">开始</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item @click="paused">
|
||||
<view class="u-grid-slot">
|
||||
<view class="u-grid-slot__circle">
|
||||
<text class="u-grid-slot__circle__text">暂停</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item @click="resume">
|
||||
<view class="u-grid-slot">
|
||||
<view class="u-grid-slot__circle">
|
||||
<text class="u-grid-slot__circle__text">继续</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-count-to
|
||||
:endVal="value"
|
||||
color="#909399"
|
||||
:fontSize="fontSize"
|
||||
:bold="true"
|
||||
></u-count-to>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 3000,
|
||||
startVal1: 300,
|
||||
startVal2: 100.00,
|
||||
endVal: 10.55,
|
||||
decimals: 2,
|
||||
startVal3: 2000,
|
||||
endVal2: 1542,
|
||||
endVal3: 3000,
|
||||
autoplay: false,
|
||||
color: '#FF0000',
|
||||
fontSize: 40,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// setTimeout(() => {
|
||||
// this.value = 3000
|
||||
// }, 3000)
|
||||
},
|
||||
methods: {
|
||||
start() {
|
||||
this.$refs.uCountTo.start();
|
||||
},
|
||||
paused() {
|
||||
this.$refs.uCountTo.stop()
|
||||
},
|
||||
resume() {
|
||||
this.$refs.uCountTo.resume()
|
||||
},
|
||||
end() {
|
||||
console.log('end');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-demo-block__content {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-grid-slot {
|
||||
border-radius: 100px;
|
||||
border-color: #dbfbdb;
|
||||
border-width: 2px;
|
||||
@include flex;
|
||||
|
||||
&__circle {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #dbfbdb;
|
||||
border-radius: 100px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 2px;
|
||||
|
||||
&__text {
|
||||
color: rgb(25, 190, 107);
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础功能</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-dropdown>
|
||||
<u-dropdown-item title="标题1">
|
||||
<view class="" style="height: 300px;">
|
||||
123
|
||||
</view>
|
||||
</u-dropdown-item>
|
||||
<u-dropdown-item title="标题2">
|
||||
456
|
||||
</u-dropdown-item>
|
||||
<u-dropdown-item title="标题3">
|
||||
789
|
||||
</u-dropdown-item>
|
||||
<u-dropdown-item title="标题4">
|
||||
abc
|
||||
</u-dropdown-item>
|
||||
</u-dropdown>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<u-navbar
|
||||
title="键盘"
|
||||
@leftClick="navigateBack"
|
||||
safeAreaInsetTop
|
||||
fixed
|
||||
placeholder
|
||||
></u-navbar>
|
||||
<u-gap height="20" bgColor="#fff"></u-gap>
|
||||
<u-cell-group>
|
||||
<u-cell
|
||||
:titleStyle="{fontWeight: 500}"
|
||||
@click="openKeyboard(index)"
|
||||
:title="item.title"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
isLink
|
||||
>
|
||||
<image
|
||||
slot="icon"
|
||||
class="u-cell-icon"
|
||||
:src="item.iconUrl"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
<u-keyboard
|
||||
:mode="keyData.mode"
|
||||
:dotDisabled="keyData.dotDisabled"
|
||||
:random='keyData.random'
|
||||
:show="show"
|
||||
@close="close"
|
||||
@cancel="cancel"
|
||||
@confirm="confirm"
|
||||
@change="change"
|
||||
@backspace="backspace"
|
||||
></u-keyboard>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
keyData: {
|
||||
mode: '',
|
||||
dotDisabled: false,
|
||||
random: false,
|
||||
},
|
||||
list: [{
|
||||
title: '车牌号键盘',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/car.png'
|
||||
},
|
||||
{
|
||||
title: '数字键盘',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/number.png'
|
||||
},
|
||||
{
|
||||
title: '身份证键盘',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/IdCard.png'
|
||||
},
|
||||
{
|
||||
title: '隐藏键盘"."符号',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/dot.png'
|
||||
},
|
||||
{
|
||||
title: '打乱键盘按键的顺序',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/order.png'
|
||||
},
|
||||
],
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navigateBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
// 点击展示不同的键盘
|
||||
openKeyboard(indexNum) {
|
||||
this.keyData = {
|
||||
mode: '',
|
||||
dotDisabled: false,
|
||||
random: false,
|
||||
}
|
||||
if (indexNum == 0) {
|
||||
this.keyData.mode = ''
|
||||
} else if (indexNum == 1) {
|
||||
this.keyData.mode = 'number'
|
||||
} else if (indexNum == 2) {
|
||||
this.keyData.mode = 'card'
|
||||
} else if (indexNum == 3) {
|
||||
this.keyData.mode = 'number'
|
||||
this.keyData.dotDisabled = true
|
||||
} else if (indexNum == 4) {
|
||||
this.keyData.mode = 'number'
|
||||
this.keyData.random = true
|
||||
}
|
||||
this.input = ''
|
||||
this.show = true
|
||||
},
|
||||
change(e) {
|
||||
// console.log('change');
|
||||
this.input += e
|
||||
},
|
||||
close() {
|
||||
// console.log('close');
|
||||
this.show = false
|
||||
},
|
||||
cancel() {
|
||||
// console.log('cancel');
|
||||
this.show = false
|
||||
},
|
||||
confirm() {
|
||||
// console.log('confirm');
|
||||
this.show = false
|
||||
},
|
||||
backspace() {
|
||||
this.input = this.input.slice(0, -1)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础功能</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-notice-bar
|
||||
:text="text1"
|
||||
></u-notice-bar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">可关闭</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-notice-bar
|
||||
:text="text5"
|
||||
mode="closable"
|
||||
></u-notice-bar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义横向滚动速度</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-notice-bar
|
||||
:text="text2"
|
||||
speed="250"
|
||||
mode="closable"
|
||||
></u-notice-bar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">可跳转(点击右箭头)</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-notice-bar
|
||||
:text="text3"
|
||||
mode="link"
|
||||
url="/pages/componentsB/tag/tag"
|
||||
></u-notice-bar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">横向步进滚动</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-notice-bar
|
||||
:text="text4"
|
||||
:step="true"
|
||||
@click="click"
|
||||
></u-notice-bar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">纵向滚动</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-notice-bar
|
||||
:text="text4"
|
||||
direction="column"
|
||||
@click="click"
|
||||
></u-notice-bar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义样式</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-notice-bar
|
||||
:text="text1"
|
||||
color="#ffffff"
|
||||
bgColor="#f56c6c"
|
||||
></u-notice-bar>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
|
||||
text2: 'uView UI众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨',
|
||||
text3: 'uView UI收集众多的常用页面和布局，减少开发者的重复工作，让您专注逻辑，事半功倍',
|
||||
text4: [
|
||||
'寒雨连江夜入吴',
|
||||
'平明送客楚山孤',
|
||||
'洛阳亲友如相问',
|
||||
'一片冰心在玉壶'
|
||||
],
|
||||
text5: '涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
click(e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-demo-block__content {
|
||||
@include flex(column);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<u-gap
|
||||
height="30"
|
||||
bgColor="#fff"
|
||||
></u-gap>
|
||||
<u-cell-group>
|
||||
<u-cell
|
||||
:titleStyle="{fontWeight: 500}"
|
||||
@click="openNotify(item.notifyData)"
|
||||
:title="item.title"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
isLink
|
||||
>
|
||||
<image
|
||||
slot="icon"
|
||||
class="u-cell-icon"
|
||||
:src="item.iconUrl"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
<u-notify ref="uNotify"></u-notify>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
notifyData: {
|
||||
message: 'notify顶部提示',
|
||||
type: 'primary',
|
||||
color: '#ffffff',
|
||||
bgColor: '',
|
||||
fontSize: 15,
|
||||
duration: 3000,
|
||||
},
|
||||
list: [{
|
||||
notifyData: {
|
||||
message: 'notify顶部提示',
|
||||
type: 'primary',
|
||||
color: '#ffffff',
|
||||
bgColor: '',
|
||||
fontSize: 15,
|
||||
duration: 3000
|
||||
},
|
||||
title: '主要通知',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/main.png'
|
||||
}, {
|
||||
notifyData: {
|
||||
message: 'notify顶部提示',
|
||||
type: 'success',
|
||||
color: '#ffffff',
|
||||
bgColor: '',
|
||||
fontSize: 15,
|
||||
duration: 3000,
|
||||
safeAreaInsetTop: false
|
||||
},
|
||||
title: '成功通知',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/success.png'
|
||||
}, {
|
||||
notifyData: {
|
||||
message: 'notify顶部提示',
|
||||
type: 'error',
|
||||
color: '#ffffff',
|
||||
bgColor: '',
|
||||
fontSize: 14,
|
||||
duration: 3000,
|
||||
safeAreaInsetTop: false
|
||||
},
|
||||
title: '危险通知',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/error.png'
|
||||
}, {
|
||||
notifyData: {
|
||||
message: 'notify顶部提示',
|
||||
type: 'warning',
|
||||
color: '#ffffff',
|
||||
bgColor: '',
|
||||
fontSize: 15,
|
||||
duration: 3000,
|
||||
safeAreaInsetTop: false
|
||||
},
|
||||
title: '警告通知',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/warning.png'
|
||||
},
|
||||
{
|
||||
notifyData: {
|
||||
message: 'notify顶部提示',
|
||||
color: '#fff',
|
||||
bgColor: '#000',
|
||||
fontSize: 15,
|
||||
duration: 3000,
|
||||
safeAreaInsetTop: false
|
||||
},
|
||||
title: '自定义样式',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/customStyle.png'
|
||||
},
|
||||
{
|
||||
notifyData: {
|
||||
message: 'notify顶部提示',
|
||||
type: 'primary',
|
||||
color: '#ffffff',
|
||||
bgColor: '',
|
||||
fontSize: 15,
|
||||
duration: 6000,
|
||||
safeAreaInsetTop: false
|
||||
},
|
||||
title: '自定义时间',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/customTime.png'
|
||||
},
|
||||
{
|
||||
notifyData: {
|
||||
message: 'notify顶部提示',
|
||||
color: '#fff',
|
||||
bgColor: '',
|
||||
fontSize: 15,
|
||||
duration: 3000,
|
||||
safeAreaInsetTop: true
|
||||
},
|
||||
title: '插入状态栏高度',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/height.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
openNotify(params) {
|
||||
this.$refs.uNotify.show({
|
||||
...params
|
||||
})
|
||||
// 也可以通过主题形式调用，如：
|
||||
// this.$refs.uNotify.primary('Primary主题')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<u-cell-group :border="true">
|
||||
<u-cell
|
||||
:border="true"
|
||||
title="基础用法"
|
||||
>
|
||||
<u-number-box
|
||||
slot="right-icon"
|
||||
v-model="value1"
|
||||
step="1"
|
||||
@change="change"
|
||||
>
|
||||
</u-number-box>
|
||||
</u-cell>
|
||||
<u-cell
|
||||
:border="true"
|
||||
title="步长设置"
|
||||
>
|
||||
<u-number-box
|
||||
slot="right-icon"
|
||||
v-model="value2"
|
||||
:step="step1"
|
||||
@change="change"
|
||||
>
|
||||
</u-number-box>
|
||||
</u-cell>
|
||||
<u-cell
|
||||
:border="true"
|
||||
title="限制输入范围"
|
||||
>
|
||||
<u-number-box
|
||||
slot="right-icon"
|
||||
v-model="value3"
|
||||
step="1"
|
||||
:min="min1"
|
||||
:max="max1"
|
||||
@change="change"
|
||||
>
|
||||
</u-number-box>
|
||||
</u-cell>
|
||||
<u-cell
|
||||
:border="true"
|
||||
title="限制输入整数"
|
||||
>
|
||||
<u-number-box
|
||||
slot="right-icon"
|
||||
v-model="value4"
|
||||
step="1"
|
||||
integer
|
||||
@change="change"
|
||||
>
|
||||
</u-number-box>
|
||||
</u-cell>
|
||||
<u-cell
|
||||
:border="true"
|
||||
title="禁用状态"
|
||||
>
|
||||
<u-number-box
|
||||
slot="right-icon"
|
||||
v-model="value5"
|
||||
step="1"
|
||||
:disabled="true"
|
||||
@change="change"
|
||||
>
|
||||
</u-number-box>
|
||||
</u-cell>
|
||||
<u-cell
|
||||
:border="true"
|
||||
title="禁用输入框"
|
||||
>
|
||||
<u-number-box
|
||||
slot="right-icon"
|
||||
v-model="value6"
|
||||
step="1"
|
||||
:disabledInput="true"
|
||||
@change="change"
|
||||
>
|
||||
</u-number-box>
|
||||
</u-cell>
|
||||
<u-cell
|
||||
:border="true"
|
||||
title="禁用长按"
|
||||
>
|
||||
<u-number-box
|
||||
slot="right-icon"
|
||||
v-model="value7"
|
||||
step="1"
|
||||
:longPress="false"
|
||||
@change="change"
|
||||
>
|
||||
</u-number-box>
|
||||
</u-cell>
|
||||
<u-cell
|
||||
:border="true"
|
||||
title="固定小数位数"
|
||||
>
|
||||
<u-number-box
|
||||
slot="right-icon"
|
||||
v-model="value8"
|
||||
step="0.2"
|
||||
decimalLength="1"
|
||||
@change="change"
|
||||
>
|
||||
</u-number-box>
|
||||
</u-cell>
|
||||
<u-cell
|
||||
:border="true"
|
||||
title="异步变更"
|
||||
>
|
||||
<u-number-box
|
||||
slot="right-icon"
|
||||
v-model="value9"
|
||||
step="1"
|
||||
:asyncChange="asyncChange"
|
||||
@change="myAsyncChange"
|
||||
>
|
||||
</u-number-box>
|
||||
</u-cell>
|
||||
<u-cell
|
||||
:border="true"
|
||||
title="自定义大小颜色样式"
|
||||
>
|
||||
<u-number-box
|
||||
slot="right-icon"
|
||||
v-model="value10"
|
||||
step="1"
|
||||
:color="color"
|
||||
:buttonSize="buttonSize"
|
||||
:bgColor="bgColor"
|
||||
@change="change"
|
||||
iconStyle="color: #fff"
|
||||
>
|
||||
</u-number-box>
|
||||
</u-cell>
|
||||
<u-cell
|
||||
:border="true"
|
||||
title="自定义(为0时减少按钮会消失)"
|
||||
>
|
||||
<u-number-box
|
||||
slot="right-icon"
|
||||
v-model="value11"
|
||||
step="1"
|
||||
:min="0"
|
||||
:showMinus="value11 > 0"
|
||||
>
|
||||
<view
|
||||
slot="minus"
|
||||
class="minus"
|
||||
>
|
||||
<u-icon
|
||||
name="minus"
|
||||
size="12"
|
||||
></u-icon>
|
||||
</view>
|
||||
<text
|
||||
slot="input"
|
||||
style="width: 50px;text-align: center;"
|
||||
class="input"
|
||||
>{{value11}}</text>
|
||||
<view
|
||||
slot="plus"
|
||||
class="plus"
|
||||
>
|
||||
<u-icon
|
||||
name="plus"
|
||||
color="#FFFFFF"
|
||||
size="12"
|
||||
></u-icon>
|
||||
</view>
|
||||
</u-number-box>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 3,
|
||||
value2: 3,
|
||||
value3: 3,
|
||||
value4: 3,
|
||||
value5: 3,
|
||||
value6: 3,
|
||||
value7: 3,
|
||||
value8: 3.1,
|
||||
value9: 3,
|
||||
value10: 3,
|
||||
value11: 3,
|
||||
step1: 2,
|
||||
min1: 5,
|
||||
max1: 8,
|
||||
asyncChange: true,
|
||||
color: '#FFFFFF',
|
||||
buttonSize: 36,
|
||||
bgColor: '#2979ff'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log('change', e);
|
||||
},
|
||||
myAsyncChange(e) {
|
||||
this.asyncChange = false
|
||||
uni.showLoading({
|
||||
title: '正在加载'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
this.value9 = e
|
||||
this.asyncChange = true
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.minus {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-width: 1px;
|
||||
border-color: #E6E6E6;
|
||||
border-top-left-radius: 100px;
|
||||
border-top-right-radius: 100px;
|
||||
border-bottom-left-radius: 100px;
|
||||
border-bottom-right-radius: 100px;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.plus {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: #FF0000;
|
||||
border-radius: 50%;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
/**
|
||||
* @fileoverview 用于测试的 html 内容
|
||||
*/
|
||||
module.exports = `<title>富文本示例</title>
|
||||
<div>
|
||||
<section style="text-align: center; margin: 0px auto;">
|
||||
<section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;">
|
||||
<span style="font-size: 18px; color: #595959;">表格</span>
|
||||
</section>
|
||||
</section>
|
||||
<section style="margin-top: 1.5em;">
|
||||
<table width="100%" cellspacing="0" cellpadding="5">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>标题 1</th>
|
||||
<th>标题 2</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center">内容 1</td>
|
||||
<td align="center">内容 2</td>
|
||||
</tr>
|
||||
<tr style="background-color: #f6f8fa;">
|
||||
<td align="center">内容 3</td>
|
||||
<td align="center"><a>链接</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">内容 5</td>
|
||||
<td align="center">内容 6</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="font-size: 12px; color: gray; text-align: center; margin-top: 5px;">普通表格</div>
|
||||
</section>
|
||||
<section style="margin-top: 1.5em;">
|
||||
<table width="500px" cellspacing="0" cellpadding="5">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>标题 1</th>
|
||||
<th>标题 2</th>
|
||||
<th>标题 3</th>
|
||||
<th>标题 4</th>
|
||||
<th>标题 5</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center">内容 1</td>
|
||||
<td align="center">内容 2</td>
|
||||
<td align="center">内容 3</td>
|
||||
<td align="center">内容 4</td>
|
||||
<td align="center">内容 5</td>
|
||||
</tr>
|
||||
<tr style="background-color: #f6f8fa;">
|
||||
<td align="center"><a>链接</a></td>
|
||||
<td align="center">内容 7</td>
|
||||
<td align="center">内容 8</td>
|
||||
<td align="center">内容 9</td>
|
||||
<td align="center">内容 10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">内容 11</td>
|
||||
<td align="center">内容 12</td>
|
||||
<td align="center">内容 13</td>
|
||||
<td align="center">内容 14</td>
|
||||
<td align="center">内容 15</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="font-size: 12px; color: gray; text-align: center; margin-top: 5px;">长表格，可以单独横向滚动</div>
|
||||
</section>
|
||||
<section style="margin-top: 1.5em;">
|
||||
<table width="100%" cellspacing="0" cellpadding="5">
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="center">标题 1</th>
|
||||
<th align="center">标题 2</th>
|
||||
<th align="center">标题 3</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center" colspan="2">内容 1</td>
|
||||
<td align="center" rowspan="2">内容 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" rowspan="2">内容 3</td>
|
||||
<td align="center">内容 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" colspan="2">内容 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">内容 6</td>
|
||||
<td align="center">内容 7</td>
|
||||
<td align="center"><a>链接</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="font-size: 12px; color: gray; text-align: center; margin-top: 5px;">含有合并单元格的表格</div>
|
||||
</section>
|
||||
<section id="list" style="text-align: center; margin: 0px auto; margin-top: 2em">
|
||||
<section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;">
|
||||
<span style="font-size: 18px; color: #595959;">列表</span>
|
||||
</section>
|
||||
</section>
|
||||
<section style="margin-top: 1.5em;">
|
||||
<ol style="margin-bottom: 1.5em;">
|
||||
<li>这是第一条列表项</li>
|
||||
<li>这是第二条列表项</li>
|
||||
<li>这是第三条 <a>链接</a></li>
|
||||
</ol>
|
||||
<ol type="A" style="margin-bottom: 1.5em;">
|
||||
<li>这是第一条列表项</li>
|
||||
<li>这是第二条列表项</li>
|
||||
<li>这是第三条 <a>链接</a></li>
|
||||
</ol>
|
||||
<ol type="I" style="margin-bottom: 1.5em;">
|
||||
<li>这是第一条列表项</li>
|
||||
<li>这是第二条列表项</li>
|
||||
<li>这是第三条 <a>链接</a></li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>第一级无序列表</li>
|
||||
<li>第一级无序列表
|
||||
<ul>
|
||||
<li>第二级无序列表</li>
|
||||
<li>第二级无序列表
|
||||
<ul>
|
||||
<li>第三级无序列表</li>
|
||||
<li>第三级 <a>链接</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section style="text-align: center; margin: 0px auto; margin-top: 2em">
|
||||
<section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;">
|
||||
<span style="font-size: 18px; color: #595959;">文本</span>
|
||||
</section>
|
||||
</section>
|
||||
<section style="margin-top: 1.5em;">
|
||||
<p style="margin-bottom: 1em;">
|
||||
<ruby>
|
||||
拼<rp>(</rp><rt>pin</rt><rp>)</rp>
|
||||
音<rp>(</rp><rt>yin</rt><rp>)</rp>
|
||||
</ruby>
|
||||
<i>斜体</i>
|
||||
<b>粗体</b>
|
||||
上标<sup>1</sup>
|
||||
下标<sub>2</sub>
|
||||
</p>
|
||||
<p style="margin-bottom: 1em;">
|
||||
<span style="text-decoration: overline;">上划线</span>
|
||||
<s>中划线</s>
|
||||
<u>下划线</u>
|
||||
</p>
|
||||
<p>
|
||||
<big>大一号</big>
|
||||
<span>正常</span>
|
||||
<small>小一号</small>
|
||||
</p>
|
||||
<h2 style="margin-top: 0.5em;">大标题</h2>
|
||||
<h3 style="margin-top: 0.5em;">中标题</h3>
|
||||
<h4 style="margin-top: 0.5em;">小标题</h4>
|
||||
</section>
|
||||
<section style="text-align: center; margin: 0px auto; margin-top: 2em">
|
||||
<section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;">
|
||||
<span style="font-size: 18px; color: #595959;">链接</span>
|
||||
</section>
|
||||
</section>
|
||||
<section style="margin-top: 1.5em; text-align: center;">
|
||||
<a href="#">跳转到顶部</a> <a href="#list">跳转到列表</a>
|
||||
<div style="font-size: 12px; color: gray; margin-top: 5px;">锚点链接，将滚动到对应位置</div>
|
||||
</section>
|
||||
<section style="margin-top: 1.5em; text-align: center;">
|
||||
<a href="https://github.com/jin-yufeng/mp-html">外部链接</a>
|
||||
<div style="font-size: 12px; color: gray; margin-top: 5px;">外部链接，将复制链接</div>
|
||||
</section>
|
||||
<section style="margin-top: 1.5em; text-align: center;">
|
||||
<a href="/pages/componentsB/parse/jump">内部链接</a>
|
||||
<div style="font-size: 12px; color: gray; margin-top: 5px;">内部链接，将跳转页面</div>
|
||||
</section>
|
||||
<section style="text-align: center; margin: 0px auto; margin-top: 2em">
|
||||
<section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;">
|
||||
<span style="font-size: 18px; color: #595959;">图片</span>
|
||||
</section>
|
||||
</section>
|
||||
<section style="margin-top: 1.5em; text-align: center;">
|
||||
<img src="/demo-thumb.jpg?sign=91b3e495d16f96a0df3d263c9ff95821&t=1609059235" original-src="/demo.jpg?sign=af7082bed28711177bd952dbab67373e&t=1609059255">
|
||||
<div style="font-size: 12px; color: gray; margin-top: 5px;">点击预览高清图</div>
|
||||
</section>
|
||||
<section style="margin-top: 1.5em; text-align: center;">
|
||||
<svg width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;">
|
||||
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
|
||||
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</svg>
|
||||
<div style="font-size: 12px; color: gray; margin-top: 5px;">svg 动画</div>
|
||||
</section>
|
||||
</div>`
|
||||
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<view>
|
||||
跳转测试页面
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<view class="u-content">
|
||||
<u-parse container-style="padding: 20px" :content="content" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la/demo" lazy-load scroll-table selectable use-anchor :tag-style="tagStyle" @load="load" @ready="ready" @imgTap="imgTap" @linkTap="linkTap" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const content = require('./content')
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: '',
|
||||
tagStyle: {
|
||||
table: 'box-sizing: border-box; border-top: 1px solid #dfe2e5; border-left: 1px solid #dfe2e5;',
|
||||
th: 'border-right: 1px solid #dfe2e5; border-bottom: 1px solid #dfe2e5;',
|
||||
td: 'border-right: 1px solid #dfe2e5; border-bottom: 1px solid #dfe2e5;',
|
||||
li: 'margin: 5px 0;'
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 模拟网络请求
|
||||
setTimeout(() => {
|
||||
this.content = content
|
||||
}, 200)
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
// dom 结构加载完毕时触发
|
||||
},
|
||||
ready() {
|
||||
// 渲染完毕时触发
|
||||
},
|
||||
imgTap() {
|
||||
// 图片被点击时触发
|
||||
},
|
||||
linkTap() {
|
||||
// 链接被点击时触发
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-content {
|
||||
padding: 24rpx;
|
||||
font-size: 32rpx;
|
||||
color: $u-content-color;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础功能</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-line-progress :percentage="percentage1">
|
||||
</u-line-progress>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">不显示百分比</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-line-progress
|
||||
:showText="false"
|
||||
:percentage="percentage2"
|
||||
>
|
||||
</u-line-progress>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义高度</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-line-progress
|
||||
height="8"
|
||||
:showText="false"
|
||||
:percentage="percentage3"
|
||||
>
|
||||
</u-line-progress>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义颜色</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-line-progress
|
||||
height="8"
|
||||
:showText="false"
|
||||
:percentage="percentage4"
|
||||
activeColor="#3c9cff"
|
||||
inactiveColor="#f3f4f6"
|
||||
>
|
||||
</u-line-progress>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="u-demo-block"
|
||||
v-if="!androidNvue"
|
||||
>
|
||||
<text class="u-demo-block__title">自定义样式(不支持安卓环境的nvue)</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-line-progress
|
||||
height="8"
|
||||
:showText="false"
|
||||
:percentage="percentage5"
|
||||
activeColor="#3c9cff"
|
||||
inactiveColor="#f3f4f6"
|
||||
>
|
||||
<text class="u-percentage-slot">{{percentage4}}%</text>
|
||||
</u-line-progress>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">手动加减</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-line-progress
|
||||
height="8"
|
||||
:showText="false"
|
||||
:percentage="percentage6"
|
||||
activeColor="#3c9cff"
|
||||
inactiveColor="#f3f4f6"
|
||||
>
|
||||
</u-line-progress>
|
||||
<view class="button-group">
|
||||
<view class="button-group__circle" hover-class="u-hover-class" @click="computedWidth('minus')">
|
||||
<text class="button-group__circle__text">减少</text>
|
||||
</view>
|
||||
<view class="button-group__circle" hover-class="u-hover-class" @click="computedWidth('plus')">
|
||||
<text class="button-group__circle__text">增加</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
androidNvue: false,
|
||||
percentage1: 30,
|
||||
percentage2: 40,
|
||||
percentage3: 50,
|
||||
percentage4: 60,
|
||||
percentage5: 70,
|
||||
percentage6: 50,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef APP-NVUE
|
||||
this.androidNvue = uni.$u.os() === 'android'
|
||||
// #endif
|
||||
uni.$u.sleep(2500).then(() => {
|
||||
this.percentage1 = 120
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
computedWidth(type) {
|
||||
if(type === 'plus') {
|
||||
this.percentage6 = uni.$u.range(0, 100, this.percentage6 + 10)
|
||||
} else {
|
||||
this.percentage6 = uni.$u.range(0, 100, this.percentage6 - 10)
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {}
|
||||
|
||||
.u-percentage-slot {
|
||||
padding: 1px 5px;
|
||||
background-color: $u-warning;
|
||||
color: #fff;
|
||||
border-radius: 100px;
|
||||
font-size: 10px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
.u-demo-block__content {
|
||||
flex-direction: column !important;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
|
||||
&__circle {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #dbfbdb;
|
||||
border-radius: 100px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 30px 30px;
|
||||
|
||||
&__text {
|
||||
color: rgb(25, 190, 107);
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础功能</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search
|
||||
v-model="value1"
|
||||
:show-action="false"
|
||||
@change="change"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">设置初始值</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search
|
||||
v-model="value2"
|
||||
:show-action="false"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">搜索框形状</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search
|
||||
v-model="value3"
|
||||
:show-action="false"
|
||||
shape="round"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block__content m-t-10">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search
|
||||
v-model="value4"
|
||||
:show-action="false"
|
||||
shape="square"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">右侧控件</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search v-model="value5"></u-search>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">禁用输入框</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search
|
||||
placeholder="输入框被禁用,可以监听点击事件进行跳转"
|
||||
disabled
|
||||
:show-action="false"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">点击左侧图标</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search
|
||||
v-model="value6"
|
||||
:show-action="false"
|
||||
@clickIcon="clickIcon"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">搜索框内容水平对齐</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search
|
||||
v-model="value7"
|
||||
:show-action="false"
|
||||
input-align="left"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block__content m-t-10">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search
|
||||
v-model="value8"
|
||||
:show-action="false"
|
||||
input-align="center"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block__content m-t-10">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search
|
||||
v-model="value9"
|
||||
:show-action="false"
|
||||
input-align="right"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search
|
||||
v-model="value10"
|
||||
:show-action="false"
|
||||
borderColor="rgb(230, 230, 230)"
|
||||
bgColor="#fff"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block__content m-t-10">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search
|
||||
v-model="value11"
|
||||
:show-action="false"
|
||||
search-icon-color="#FF0000"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block__content m-t-10">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search
|
||||
v-model="value12"
|
||||
:show-action="false"
|
||||
placeholder-color="#FF0000"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block__content m-t-10">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search
|
||||
v-model="value13"
|
||||
:show-action="false"
|
||||
color="#FF0000"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block__content m-t-10">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search
|
||||
v-model="value14"
|
||||
label="手机"
|
||||
:show-action="false"
|
||||
>
|
||||
</u-search>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block__content m-t-10">
|
||||
<view class="u-page__tag-item">
|
||||
<u-search
|
||||
v-model="value15"
|
||||
search-icon="scan"
|
||||
:show-action="false"
|
||||
>
|
||||
</u-search>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '天山雪莲',
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: '',
|
||||
value6: '',
|
||||
value7: '',
|
||||
value8: '',
|
||||
value9: '',
|
||||
value10: '',
|
||||
value11: '',
|
||||
value12: '',
|
||||
value13: '',
|
||||
value14: '',
|
||||
value15: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value1(newValue, oldValue) {
|
||||
// console.log('value1', newValue);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log(e);
|
||||
},
|
||||
clickIcon() {
|
||||
uni.$u.toast('点击了左侧图标')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page__tag-item {
|
||||
@include flex(column);
|
||||
flex: 1
|
||||
}
|
||||
|
||||
.m-t-10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基本案例</text>
|
||||
<view class="u-page__slide-item">
|
||||
<u-slider
|
||||
v-model="value1"
|
||||
></u-slider>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义范围(0—50)</text>
|
||||
<view class="u-page__slide-item">
|
||||
<u-slider
|
||||
v-model="value2"
|
||||
showValue
|
||||
min="0"
|
||||
max="50"
|
||||
></u-slider>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">指定步长(每次步进5)</text>
|
||||
<view class="u-page__slide-item">
|
||||
<u-slider
|
||||
v-model="value4"
|
||||
:step="5"
|
||||
></u-slider>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义样式</text>
|
||||
<view class="u-page__slide-item">
|
||||
<u-slider
|
||||
v-model="value5"
|
||||
activeColor="#deab8a"
|
||||
blockColor="#f47920"
|
||||
></u-slider>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 30,
|
||||
value2: 30,
|
||||
value3: 30,
|
||||
value4: 30,
|
||||
value5: 30
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value1(n) {
|
||||
// console.log(n);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
moving(value) {
|
||||
// console.log('moving', value)
|
||||
},
|
||||
click(value) {
|
||||
// console.log('click', value)
|
||||
},
|
||||
end(value) {
|
||||
// console.log('end', value)
|
||||
},
|
||||
start(value) {
|
||||
// console.log('start', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础功能</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-switch
|
||||
v-model="value1"
|
||||
@change="change"
|
||||
></u-switch>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-switch v-model="value2"></u-switch>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">加载中</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-switch
|
||||
v-model="value3"
|
||||
loading
|
||||
></u-switch>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-switch
|
||||
v-model="value4"
|
||||
loading
|
||||
></u-switch>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">禁用状态</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-switch
|
||||
v-model="value5"
|
||||
disabled
|
||||
></u-switch>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-switch
|
||||
v-model="value6"
|
||||
disabled
|
||||
></u-switch>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义尺寸</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-switch
|
||||
v-model="value7"
|
||||
size="28"
|
||||
></u-switch>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-switch
|
||||
v-model="value8"
|
||||
size="20"
|
||||
></u-switch>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义颜色</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-switch
|
||||
v-model="value9"
|
||||
activeColor="#f56c6c"
|
||||
loading
|
||||
></u-switch>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-switch
|
||||
v-model="value10"
|
||||
activeColor="#5ac725"
|
||||
loading
|
||||
></u-switch>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义样式</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-switch
|
||||
:space="2"
|
||||
v-model="value11"
|
||||
activeColor="#f56c6c"
|
||||
inactiveColor="rgb(230, 230, 230)"
|
||||
></u-switch>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-switch
|
||||
space="2"
|
||||
v-model="value12"
|
||||
activeColor="#f9ae3d"
|
||||
inactiveColor="rgb(230, 230, 230)"
|
||||
></u-switch>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">异步控制</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-switch
|
||||
v-model="value13"
|
||||
asyncChange
|
||||
@change="asyncChange"
|
||||
></u-switch>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: false,
|
||||
value2: true,
|
||||
value3: false,
|
||||
value4: true,
|
||||
value5: false,
|
||||
value6: true,
|
||||
value7: false,
|
||||
value8: true,
|
||||
value9: true,
|
||||
value10: true,
|
||||
value11: false,
|
||||
value12: true,
|
||||
value13: true,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value1(newValue, oldValue) {
|
||||
console.log('v-model', newValue);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log('change', e);
|
||||
},
|
||||
asyncChange(e) {
|
||||
uni.showModal({
|
||||
content: e ? '确定要打开吗' : '确定要关闭吗',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.value13 = e
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
&__tag-item {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-demo-block__content {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">基础功能</text>
|
||||
<u-tabbar
|
||||
:value="value1"
|
||||
@change="change1"
|
||||
:fixed="false"
|
||||
:placeholder="false"
|
||||
:safeAreaInsetBottom="false"
|
||||
>
|
||||
<u-tabbar-item
|
||||
text="首页"
|
||||
icon="home"
|
||||
@click="click1"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="放映厅"
|
||||
icon="photo"
|
||||
@click="click1"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="直播"
|
||||
icon="play-right"
|
||||
@click="click1"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="我的"
|
||||
icon="account"
|
||||
@click="click1"
|
||||
></u-tabbar-item>
|
||||
</u-tabbar>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">显示徽标</text>
|
||||
<u-tabbar
|
||||
:value="value2"
|
||||
:placeholder="false"
|
||||
@change="name => value2 = name"
|
||||
:fixed="false"
|
||||
:safeAreaInsetBottom="false"
|
||||
>
|
||||
<u-tabbar-item
|
||||
text="首页"
|
||||
icon="home"
|
||||
dot
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="放映厅"
|
||||
icon="photo"
|
||||
badge="3"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="直播"
|
||||
icon="play-right"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="我的"
|
||||
icon="account"
|
||||
></u-tabbar-item>
|
||||
</u-tabbar>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">匹配标签的名称</text>
|
||||
<u-tabbar
|
||||
:placeholder="false"
|
||||
:value="value3"
|
||||
@change="name => value3 = name"
|
||||
:fixed="false"
|
||||
:safeAreaInsetBottom="false"
|
||||
>
|
||||
<u-tabbar-item
|
||||
text="首页"
|
||||
icon="home"
|
||||
name="home"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="放映厅"
|
||||
icon="photo"
|
||||
name="photo"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="直播"
|
||||
icon="play-right"
|
||||
name="play-right"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="我的"
|
||||
name="account"
|
||||
icon="account"
|
||||
></u-tabbar-item>
|
||||
</u-tabbar>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">自定义图标/颜色</text>
|
||||
<u-tabbar
|
||||
:value="value4"
|
||||
@change="name => value4 = name"
|
||||
:fixed="false"
|
||||
:placeholder="false"
|
||||
activeColor="#d81e06"
|
||||
:safeAreaInsetBottom="false"
|
||||
>
|
||||
<u-tabbar-item text="首页">
|
||||
<image
|
||||
class="u-page__item__slot-icon"
|
||||
slot="active-icon"
|
||||
src="https://cdn.uviewui.com/uview/common/bell-selected.png"
|
||||
></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon"
|
||||
slot="inactive-icon"
|
||||
src="https://cdn.uviewui.com/uview/common/bell.png"
|
||||
></image>
|
||||
</u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="放映厅"
|
||||
icon="photo"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="直播"
|
||||
icon="play-right"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="我的"
|
||||
icon="account"
|
||||
></u-tabbar-item>
|
||||
</u-tabbar>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">拦截切换事件(点击第二个标签)</text>
|
||||
<u-tabbar
|
||||
:value="value5"
|
||||
:fixed="false"
|
||||
@change="change5"
|
||||
:safeAreaInsetBottom="false"
|
||||
:placeholder="false"
|
||||
>
|
||||
<u-tabbar-item
|
||||
text="首页"
|
||||
icon="home"
|
||||
>
|
||||
</u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="放映厅"
|
||||
icon="photo"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="直播"
|
||||
icon="play-right"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="我的"
|
||||
icon="account"
|
||||
></u-tabbar-item>
|
||||
</u-tabbar>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">去除上边框</text>
|
||||
<u-tabbar
|
||||
:value="value7"
|
||||
:placeholder="false"
|
||||
:border="false"
|
||||
@change="name => value7 = name"
|
||||
:fixed="false"
|
||||
:safeAreaInsetBottom="false"
|
||||
>
|
||||
<u-tabbar-item
|
||||
text="首页"
|
||||
icon="home"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="放映厅"
|
||||
icon="photo"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="直播"
|
||||
icon="play-right"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="我的"
|
||||
icon="account"
|
||||
></u-tabbar-item>
|
||||
</u-tabbar>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">固定在底部(固定在屏幕最下方)</text>
|
||||
<u-gap height="150"></u-gap>
|
||||
<u-tabbar
|
||||
:value="value6"
|
||||
@change="name => value6 = name"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:safeAreaInsetBottom="true"
|
||||
>
|
||||
<u-tabbar-item
|
||||
text="首页"
|
||||
icon="home"
|
||||
>
|
||||
</u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="放映厅"
|
||||
icon="photo"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="直播"
|
||||
icon="play-right"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="我的"
|
||||
icon="account"
|
||||
></u-tabbar-item>
|
||||
</u-tabbar>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 0,
|
||||
value2: 1,
|
||||
value3: 'play-right',
|
||||
value4: 0,
|
||||
value5: 0,
|
||||
value6: 0,
|
||||
value7: 3
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
change5(name) {
|
||||
if (name === 1) return uni.$u.toast('请您先登录')
|
||||
else this.value5 = name
|
||||
},
|
||||
change1(e) {
|
||||
this.value1 = e
|
||||
console.log('change1', e);
|
||||
},
|
||||
click1(e) {
|
||||
console.log('click1', e);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
padding: 0;
|
||||
|
||||
&__item {
|
||||
|
||||
&__title {
|
||||
color: $u-tips-color;
|
||||
background-color: $u-bg-color;
|
||||
padding: 15px;
|
||||
font-size: 15px;
|
||||
|
||||
&__slot-title {
|
||||
color: $u-primary;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&__slot-icon {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础功能</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
plain
|
||||
size="mini"
|
||||
type="warning"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义主题</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag text="标签">
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="warning"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="success"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="error"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">圆形标签</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
plain
|
||||
shape="circle"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="warning"
|
||||
shape="circle"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">镂空标签</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
plain
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="warning"
|
||||
plain
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="success"
|
||||
plain
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="error"
|
||||
plain
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">镂空带背景色</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
plain
|
||||
plainFill
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="warning"
|
||||
plain
|
||||
plainFill
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="success"
|
||||
plain
|
||||
plainFill
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="error"
|
||||
plain
|
||||
plainFill
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义尺寸</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
plain
|
||||
size="mini"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="warning"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="success"
|
||||
plain
|
||||
size="large"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">可关闭标签</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
size="mini"
|
||||
closable
|
||||
:show="close1"
|
||||
@close="close1 = false"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="warning"
|
||||
closable
|
||||
:show="close2"
|
||||
@close="close2 = false"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="success"
|
||||
plain
|
||||
size="large"
|
||||
closable
|
||||
:show="close3"
|
||||
@close="close3 = false"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">带图片和图标</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
size="mini"
|
||||
icon="map"
|
||||
plain
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="warning"
|
||||
icon="tags-fill"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
<view class="u-page__tag-item">
|
||||
<u-tag
|
||||
text="标签"
|
||||
type="success"
|
||||
plain
|
||||
size="large"
|
||||
icon="https://cdn.uviewui.com/uview/example/tag.png"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">单选标签</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view
|
||||
class="u-page__tag-item"
|
||||
v-for="(item, index) in radios"
|
||||
:key="index"
|
||||
>
|
||||
<u-tag
|
||||
:text="`选项${index + 1}`"
|
||||
:plain="!item.checked"
|
||||
type="warning"
|
||||
:name="index"
|
||||
@click="radioClick"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">多选标签</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view
|
||||
class="u-page__tag-item"
|
||||
v-for="(item, index) in checkboxs"
|
||||
:key="index"
|
||||
>
|
||||
<u-tag
|
||||
:text="`选项${index + 1}`"
|
||||
:plain="!item.checked"
|
||||
type="warning"
|
||||
:name="index"
|
||||
@click="checkboxClick"
|
||||
>
|
||||
</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
close1: true,
|
||||
close2: true,
|
||||
close3: true,
|
||||
radios: [{
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
checked: false
|
||||
}
|
||||
],
|
||||
checkboxs: [{
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
checked: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
radioClick(name) {
|
||||
this.radios.map((item, index) => {
|
||||
item.checked = index === name ? true : false
|
||||
})
|
||||
},
|
||||
checkboxClick(name) {
|
||||
this.checkboxs[name].checked = !this.checkboxs[name].checked
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page__tag-item {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.u-demo-block__content {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<u-gap
|
||||
height="30"
|
||||
bgColor="#fff"
|
||||
></u-gap>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-cell-group title-bg-color="rgb(243, 244, 246)">
|
||||
<u-cell
|
||||
:titleStyle="{fontWeight: 500}"
|
||||
:title="item.title"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
isLink
|
||||
:icon="item.iconUrl"
|
||||
@click="showToast(item)"
|
||||
>
|
||||
<!-- <image
|
||||
slot="icon"
|
||||
class="u-cell-icon"
|
||||
:src="getIcon(item.icon)"
|
||||
mode="widthFix"
|
||||
></image> -->
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
list: [{
|
||||
type: 'default',
|
||||
title: '默认主题',
|
||||
message: "锦瑟无端五十弦",
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
|
||||
},
|
||||
{
|
||||
type: 'error',
|
||||
icon: false,
|
||||
title: '失败主题',
|
||||
message: "一弦一柱思华年",
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
|
||||
},
|
||||
{
|
||||
type: 'success',
|
||||
title: '成功主题(带图标)',
|
||||
message: "庄生晓梦迷蝴蝶",
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
|
||||
},
|
||||
{
|
||||
type: 'warning',
|
||||
position: "top",
|
||||
title: '位置偏移上方',
|
||||
message: "望帝春心托杜鹃",
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png'
|
||||
},
|
||||
{
|
||||
type: 'loading',
|
||||
title: '正在加载',
|
||||
message: "正在加载",
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
|
||||
},
|
||||
{
|
||||
type: 'default',
|
||||
title: '结束后跳转标签页',
|
||||
message: "此情可待成追忆",
|
||||
url: '/pages/componentsB/tag/tag',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getIcon() {
|
||||
return path => {
|
||||
return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showToast(params) {
|
||||
this.$refs.uToast.show({
|
||||
...params,
|
||||
complete() {
|
||||
params.url && uni.navigateTo({
|
||||
url: params.url
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.u-cell-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.u-cell-group__title__text {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础用法</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__upload-item">
|
||||
<u-upload
|
||||
:fileList="fileList1"
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
name="1"
|
||||
multiple
|
||||
:maxCount="10"
|
||||
></u-upload>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">上传视频</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__upload-item">
|
||||
<u-upload
|
||||
:fileList="fileList2"
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
name="2"
|
||||
multiple
|
||||
:maxCount="10"
|
||||
accept="video"
|
||||
></u-upload>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">文件预览</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__upload-item">
|
||||
<u-upload
|
||||
:fileList="fileList3"
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
name="3"
|
||||
multiple
|
||||
:maxCount="10"
|
||||
:previewFullImage="true"
|
||||
></u-upload>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">隐藏上传按钮</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__upload-item">
|
||||
<u-upload
|
||||
:fileList="fileList4"
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
name="4"
|
||||
multiple
|
||||
:maxCount="2"
|
||||
></u-upload>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">限制上传数量</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__upload-item">
|
||||
<u-upload
|
||||
:fileList="fileList5"
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
name="5"
|
||||
multiple
|
||||
:maxCount="3"
|
||||
></u-upload>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义上传样式</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__upload-item">
|
||||
<u-upload
|
||||
:fileList="fileList6"
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
name="6"
|
||||
multiple
|
||||
:maxCount="1"
|
||||
width="250"
|
||||
height="150"
|
||||
>
|
||||
<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix" style="width: 250px;height: 150px;"></image>
|
||||
</u-upload>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList1: [],
|
||||
fileList2: [],
|
||||
fileList3: [{
|
||||
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
||||
}],
|
||||
fileList4: [{
|
||||
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
||||
},
|
||||
{
|
||||
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
||||
}
|
||||
],
|
||||
fileList5: [],
|
||||
fileList6: [],
|
||||
fileList7: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let a = uni.uploadFile({
|
||||
url: 'http://www.example.com/upload', // 仅为示例，非真实的接口地址
|
||||
filePath: url,
|
||||
name: 'file',
|
||||
formData: {
|
||||
user: 'test'
|
||||
},
|
||||
success: (res) => {
|
||||
setTimeout(() => {
|
||||
resolve(res.data.data)
|
||||
}, 1000)
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
&__upload-item{
|
||||
margin-top:5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user