Skip to content

U
uview-ui
Commit 4a3a32b8 authored by beiqiao's avatar beiqiao
Browse files
Options

语法提示，文档说明，进一步更新。

parent da09bd81
Show whitespace changes
Inline Side-by-side
Showing with 3739 additions and 3497 deletions
uview/components/u-notice-bar/u-notice-bar.vue
View file @ 4a3a32b8
......@@ -32,7 +32,7 @@
* @property {String Number} speed 水平滚动时的滚动速度，即每秒移动多少距离，只对水平衔接方式有效，单位rpx（默认160）
* @property {String Number} font-size 字体大小，单位rpx（默认28）
* @property {Boolean} is-circular mode为horizontal时，指明是否水平衔接滚动（默认true）
* @property {String} play-state 播放状态，paly - 播放，paused - 暂停（默认paly）
* @property {String} play-state 播放状态，play - 播放，paused - 暂停（默认play）
* @property {Boolean} disable-touch 是否禁止通过手动滑动切换通知，只有mode = vertical，或者mode = horizontal且is-circular = false时有效（默认true）
* @event {Function} click 点击通告文字触发，只有mode = vertical，或者mode = horizontal且is-circular = false时有效
* @event {Function} close 点击右侧关闭图标触发
......@@ -116,7 +116,7 @@
type: Boolean,
default: true
},
// 播放状态，paly-播放，paused-暂停
// 播放状态，play-播放，paused-暂停
playState: {
type: String,
default: 'play'
......
uview/components/u-steps/u-steps.vue
View file @ 4a3a32b8
......@@ -15,7 +15,20 @@
</template>
<script>
/**
* alertTips 提示
* @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
* @tutorial https://www.uviewui.com/components/steps.html
* @property {String} mode 设置模式（默认dot）
* @property {Array} list 数轴条数据，数组。具体见上方示例
* @property {String} type type主题（默认primary）
* @property {Number String} current 设置当前处于第几步
* @property {String} active-color 已完成步骤的激活颜色，如设置，type值会失效
* @property {String} un-active-color 未激活的颜色，用于表示未完成步骤的颜色（默认#606266）
* @example <u-steps :list="numList" active-color="#fa3534"></u-steps>
*/
export default {
name: "u-steps",
props: {
// 步骤条的类型，dot|number
mode: {
......
uview/components/u-sticky/u-sticky.vue
View file @ 4a3a32b8
......@@ -18,7 +18,21 @@
</template>
<script>
/**
* alertTips 提示
* @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
* @tutorial https://www.uviewui.com/components/sticky.html
* @property {String Number} offset-top 吸顶时与顶部的距离，单位rpx（默认0）
* @property {String Number} index 自定义标识，用于区分是哪一个组件
* @property {Boolean} enable 是否开启吸顶功能（默认true）
* @property {String} bg-color 组件背景颜色（默认#ffffff）
* @property {String Number} z-index 吸顶时的z-index值（默认970）
* @property {String Number} h5-nav-height 导航栏高度，自定义导航栏时(无导航栏时需设置为0)，需要传入此值，单位px（默认44）
* @event {Function} fixed 组件吸顶时触发
* @example <u-sticky offset-top="200"><view>塞下秋来风景异，衡阳雁去无留意</view></u-sticky>
*/
export default {
name: "u-sticky",
props: {
// 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
offsetTop: {
......@@ -66,7 +80,7 @@
this.initObserver();
},
enable(val) {
if(val == false) {
if (val == false) {
this.fixed = false;
this.disconnectObserver('contentObserver');
} else {
......@@ -84,7 +98,7 @@
},
methods: {
initObserver() {
if(!this.enable) return ;
if (!this.enable) return;
// #ifdef H5
this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) + this.h5NavHeight : this.h5NavHeight;
// #endif
......@@ -111,7 +125,7 @@
top: -this.stickyTop
});
contentObserver.observe('.' + this.elClass, res => {
if (!this.enable) return ;
if (!this.enable) return;
this.setFixed(res.boundingClientRect.top);
});
this.contentObserver = contentObserver;
......@@ -119,7 +133,7 @@
setFixed(top) {
const fixed = top < this.stickyTop;
this.fixed = fixed;
if(fixed) this.$emit('fixed', this.index);
if (fixed) this.$emit('fixed', this.index);
},
disconnectObserver(observerName) {
const observer = this[observerName];
......
uview/components/u-subsection/u-subsection.vue
View file @ 4a3a32b8
<template>
<view class="u-subsection" :style="[subsectionStyle]">
<view
class="u-item u-line-1"
:style="[itemStyle(index)]"
@tap="click(index)"
:class="[noBorderRight(index), 'u-item-' + index]"
v-for="(item, index) in listInfo"
:key="index"
>
<view class="u-item u-line-1" :style="[itemStyle(index)]" @tap="click(index)" :class="[noBorderRight(index), 'u-item-' + index]"
v-for="(item, index) in listInfo" :key="index">
<view :style="[textStyle(index)]" class="u-item-text u-line-1">{{ item.name }}</view>
</view>
<view class="u-item-bg" :style="[itemBarStyle]"></view>
......@@ -15,12 +9,30 @@
</template>
<script>
export default {
/**
* alertTips 提示
* @description 该分段器一般用于用户从几个选项中选择某一个的场景
* @tutorial https://www.uviewui.com/components/subsection.html
* @property {Array} list 选项的数组，形式见上方"基本使用"
* @property {String Number} current 初始化时默认选中的选项索引值（默认0）
* @property {String} active-color 激活时的颜色，mode为subsection时固定为白色（默认#ff9900）
* @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#303133）
* @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
* @property {String Number} font-size 字体大小，单位rpx（默认28）
* @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
* @property {Boolean} bold 激活选项的字体是否加粗（默认true）
* @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef）
* @property {String} button-color 按钮背景颜色，mode为button时有效（默认#ffffff）
* @event {Function} change 分段器选项发生改变时触发
* @example <u-subsection active-color="#ff9900"></u-subsection>
*/
export default {
name: "u-subsection",
props: {
// tab的数据
list: {
type: Array,
default() {
default () {
return [];
}
},
......@@ -281,18 +293,18 @@ export default {
}
}
}
};
};
</script>
<style lang="scss" scoped>
.u-subsection {
.u-subsection {
display: flex;
align-items: center;
overflow: hidden;
position: relative;
}
}
.u-item {
.u-item {
flex: 1;
text-align: center;
font-size: 26rpx;
......@@ -303,34 +315,34 @@ export default {
color: $u-main-color;
display: inline-flex;
padding: 0 6rpx;
}
}
.u-item-bg {
.u-item-bg {
background-color: $u-type-primary;
position: absolute;
z-index: -1;
}
}
.u-none-border-right {
.u-none-border-right {
border-right: none !important;
}
}
.u-item-first {
.u-item-first {
border-top-left-radius: 8rpx;
border-bottom-left-radius: 8rpx;
}
}
.u-item-last {
.u-item-last {
border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
}
.u-item-text {
.u-item-text {
transition: all 0.35s;
color: $u-main-color;
display: flex;
align-items: center;
position: relative;
z-index: 99;
}
}
</style>
uview/components/u-swipe-action/u-swipe-action.vue
View file @ 4a3a32b8
<template>
<movable-area class="u-swipe-action" :style="{backgroundColor: bgColor}">
<movable-view
class="u-swipe-view"
@change="change"
@touchend="touchend"
@touchstart="touchstart"
direction="horizontal"
:disabled="disabled"
:x="moveX"
:style="{
<movable-view class="u-swipe-view" @change="change" @touchend="touchend" @touchstart="touchstart" direction="horizontal"
:disabled="disabled" :x="moveX" :style="{
width: movableViewWidth
}"
>
<view class="u-swipe-content"><slot></slot></view>
<view
class="u-swipe-del"
@tap.stop="del"
:style="{
}">
<view class="u-swipe-content">
<slot></slot>
</view>
<view class="u-swipe-del" @tap.stop="del" :style="{
width: innerBtnWidth + 'px',
backgroundColor: btnBgColor
}"
>
}">
<view class="u-btn-text">{{ btnText }}</view>
</view>
</movable-view>
......@@ -28,7 +18,23 @@
</template>
<script>
export default {
/**
* alertTips 提示
* @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。
* @tutorial https://www.uviewui.com/components/swipeAction.html
* @property {String} btn-text 按钮文字（默认“删除”）
* @property {String} btn-bg-color 按钮背景颜色（默认#ff0033）
* @property {String} bg-color 整个组件背景颜色（默认#ffffff）
* @property {String Number} index 标识符，点击时候用于区分点击了哪一个，用v-for循环时的index即可
* @property {String Number} btn-width 按钮宽度，单位rpx（默认180）
* @property {Boolean} disabled 是否禁止某个swipeAction滑动（默认false）
* @event {Function} click 点击组件时触发
* @event {Function} close 组件触发关闭状态时
* @event {Function} open 组件触发打开状态时
* @example <u-swipe-action btn-text="收藏">...</u-swipe-action>
*/
export default {
name: "u-swipe-action",
props: {
// 左边滑动出来按钮的文字
btnText: {
......@@ -70,7 +76,7 @@ export default {
show: {
immediate: true,
handler(nVal, oVal) {
if(nVal) {
if (nVal) {
this.open();
} else {
this.close();
......@@ -117,8 +123,8 @@ export default {
},
// 打开按钮的状态
open() {
if(this.disabled) return ;
this.moveX = - this.btnWidth;
if (this.disabled) return;
this.moveX = -this.btnWidth;
this.status = true;
},
// 用户手指离开movable-view元素，停止触摸
......@@ -129,10 +135,10 @@ export default {
// 这一步很重要，需要先给this.moveX一个变化的随机值，否则因为前后设置的为同一个值
// props单向数据流的原因，导致movable-view元素不会发生变化，切记，详见文档：
// https://uniapp.dcloud.io/use?id=%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98
this.$nextTick(function(){
if(this.status == false) {
this.$nextTick(function() {
if (this.status == false) {
// 关闭状态左滑，产生的x轴位移为负值，也就是说滑动的距离大于按钮的三分之一宽度，自动展开按钮
if(this.scrollX <= -this.innerBtnWidth / 3) {
if (this.scrollX <= -this.innerBtnWidth / 3) {
this.moveX = -this.innerBtnWidth; // 按钮宽度的负值，即为展开状态movable-view元素左滑的距离
this.status = true; // 标志当前为展开状态
this.emitOpenEvent();
......@@ -145,7 +151,7 @@ export default {
}
} else {
// 如果在打开的状态下，右滑动的距离X轴偏移超过按钮的三分之一(负值反过来的三分之二)，自动收起按钮
if(this.scrollX > -this.innerBtnWidth * 2 / 3) {
if (this.scrollX > -this.innerBtnWidth * 2 / 3) {
this.moveX = 0;
this.$nextTick(() => {
this.moveX = 101;
......@@ -176,37 +182,38 @@ export default {
})
}
}
}
}
</script>
<style scoped lang="scss">
.u-swipe-action {
.u-swipe-action {
width: auto;
height: initial;
position: relative;
overflow: hidden;
}
}
.u-swipe-view {
.u-swipe-view {
display: flex;
height: initial;
position: relative; /* 这一句很关键，覆盖默认的绝对定位 */
}
position: relative;
/* 这一句很关键，覆盖默认的绝对定位 */
}
.u-swipe-content {
.u-swipe-content {
flex: 1;
}
}
.u-swipe-del {
.u-swipe-del {
position: relative;
font-size: 30rpx;
color: #ffffff;
}
}
.u-btn-text {
.u-btn-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>
uview/components/u-swiper/u-swiper.vue
View file @ 4a3a32b8
<template>
<view class="u-swiper-wrap"
:style="{
<view class="u-swiper-wrap" :style="{
borderRadius: `${borderRadius}rpx`,
}">
<swiper
@change="change"
:current="current"
:interval="interval"
:circular="circular"
:duration="duration"
:autoplay="autoplay"
:previous-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
:next-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
<swiper @change="change" :current="current" :interval="interval" :circular="circular" :duration="duration" :autoplay="autoplay"
:previous-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'" :next-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
:style="{
height: height + 'rpx'
}"
>
<swiper-item
class="u-swiper-item"
v-for="(item, index) in list"
:key="index"
@tap="listClick(index)"
>
<view
class="u-list-image-wrap"
:class="[current != index ? 'u-list-scale' : '']"
:style="{
}">
<swiper-item class="u-swiper-item" v-for="(item, index) in list" :key="index" @tap="listClick(index)">
<view class="u-list-image-wrap" :class="[current != index ? 'u-list-scale' : '']" :style="{
borderRadius: `${borderRadius}rpx`,
transform: effect3d && current != index ? 'scaleY(0.9)' : 'scaleY(1)',
margin: effect3d && current != index ? '0 20rpx' : 0
}"
>
}">
<image class="u-swiper-image" :src="item[name]" :mode="imgMode"></image>
<view v-if="title"
class="u-swiper-title u-line-1"
:style="{
<view v-if="title" class="u-swiper-title u-line-1" :style="{
'padding-bottom': titlePaddingBottom
}"
>
}">
{{ item.title }}
</view>
</view>
</swiper-item>
</swiper>
<view
class="u-swiper-indicator"
:style="{
<view class="u-swiper-indicator" :style="{
top: indicatorPos == 'topLeft' || indicatorPos == 'topCenter' || indicatorPos == 'topRight' ? '12rpx' : 'auto',
bottom: indicatorPos == 'bottomLeft' || indicatorPos == 'bottomCenter' || indicatorPos == 'bottomRight' ? '12rpx' : 'auto',
justifyContent: justifyContent,
padding: `0 ${effect3d ? '74rpx' : '24rpx'}`
}"
>
}">
<block v-if="mode == 'rect'">
<view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index == current }" v-for="(item, index) in list" :key="index"></view>
<view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index == current }" v-for="(item, index) in list"
:key="index"></view>
</block>
<block v-if="mode == 'dot'">
<view class="u-indicator-item-dot" :class="{ 'u-indicator-item-dot-active': index == current }" v-for="(item, index) in list" :key="index"></view>
<view class="u-indicator-item-dot" :class="{ 'u-indicator-item-dot-active': index == current }" v-for="(item, index) in list"
:key="index"></view>
</block>
<block v-if="mode == 'round'">
<view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index == current }" v-for="(item, index) in list" :key="index"></view>
<view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index == current }" v-for="(item, index) in list"
:key="index"></view>
</block>
<block v-if="mode == 'number'">
<view class="u-indicator-item-number">{{ current + 1 }}/{{ list.length }}</view>
......@@ -69,12 +48,33 @@
</template>
<script>
export default {
/**
* alertTips 提示
* @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用
* @tutorial https://www.uviewui.com/components/swiper.html
* @property {Array} list 轮播图数据，见官网"基本使用"说明
* @property {Boolean} title 是否显示标题文字，需要配合list参数，见官网说明（默认false）
* @property {String} mode 指示器模式，见官网说明（默认round）
* @property {String Number} height 轮播图组件高度，单位rpx（默认250）
* @property {String} indicator-pos 指示器的位置（默认bottomCenter）
* @property {Boolean} effect3d 是否开启3D效果（默认false）
* @property {Boolean} autoplay 是否自动播放（默认true）
* @property {String Number} interval 自动轮播时间间隔，单位ms（默认2500）
* @property {Boolean} circular 是否衔接播放，见官网说明（默认true）
* @property {String Number} border-radius 轮播图圆角值，单位rpx（默认8）
* @property {Object} title-style 自定义标题样式
* @property {String Number} effect3d-previous-margin mode = true模式的情况下，激活项与前后项之间的距离，单位rpx（默认50）
* @property {String} img-mode 图片的裁剪模式，详见image组件裁剪模式（默认aspectFill）
* @event {Function} click 点击轮播图时触发
* @example <u-swiper :list="list" mode="dot" indicator-pos="bottomRight"></u-swiper>
*/
export default {
name: "u-swiper",
props: {
// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选
list: {
type: Array,
default() {
default () {
return [];
}
},
......@@ -86,7 +86,7 @@ export default {
// 用户自定义的指示器的样式
indicator: {
type: Object,
default() {
default () {
return {};
}
},
......@@ -158,16 +158,16 @@ export default {
},
computed: {
justifyContent() {
if(this.indicatorPos == 'topLeft' || this.indicatorPos == 'bottomLeft') return 'flex-start';
if(this.indicatorPos == 'topCenter' || this.indicatorPos == 'bottomCenter') return 'center';
if(this.indicatorPos == 'topRight' || this.indicatorPos == 'bottomRight') return 'flex-end';
if (this.indicatorPos == 'topLeft' || this.indicatorPos == 'bottomLeft') return 'flex-start';
if (this.indicatorPos == 'topCenter' || this.indicatorPos == 'bottomCenter') return 'center';
if (this.indicatorPos == 'topRight' || this.indicatorPos == 'bottomRight') return 'flex-end';
},
titlePaddingBottom() {
let tmp = 0;
if(this.mode == 'none') return '12rpx';
if(['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode == 'number') {
if (this.mode == 'none') return '12rpx';
if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode == 'number') {
tmp = '60rpx';
} else if(['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode != 'number') {
} else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode != 'number') {
tmp = '40rpx';
} else {
tmp = '12rpx';
......@@ -183,16 +183,16 @@ export default {
this.current = e.detail.current;
}
}
};
};
</script>
<style lang="scss" scoped>
.u-swiper-wrap {
.u-swiper-wrap {
position: relative;
overflow: hidden;
}
}
.u-swiper-image {
.u-swiper-image {
width: 100%;
will-change: transform;
height: 100%;
......@@ -200,69 +200,69 @@ export default {
/* #ifdef H5 */
pointer-events: none;
/* #endif */
}
}
.u-swiper-indicator {
.u-swiper-indicator {
padding: 0 24rpx;
position: absolute;
display: flex;
width: 100%;
z-index: 1;
}
}
.u-indicator-item-rect {
.u-indicator-item-rect {
width: 26rpx;
height: 8rpx;
margin: 0 6rpx;
transition: all 0.5s;
background-color: rgba(0, 0, 0, 0.3);
}
}
.u-indicator-item-rect-active {
.u-indicator-item-rect-active {
background-color: rgba(255, 255, 255, 0.8);
}
}
.u-indicator-item-dot {
.u-indicator-item-dot {
width: 14rpx;
height: 14rpx;
margin: 0 6rpx;
border-radius: 20rpx;
transition: all 0.5s;
background-color: rgba(0, 0, 0, 0.3);
}
}
.u-indicator-item-dot-active {
.u-indicator-item-dot-active {
background-color: rgba(255, 255, 255, 0.8);
}
}
.u-indicator-item-round {
.u-indicator-item-round {
width: 14rpx;
height: 14rpx;
margin: 0 6rpx;
border-radius: 20rpx;
transition: all 0.5s;
background-color: rgba(0, 0, 0, 0.3);
}
}
.u-indicator-item-round-active {
.u-indicator-item-round-active {
width: 34rpx;
background-color: rgba(255, 255, 255, 0.8);
}
}
.u-indicator-item-number {
.u-indicator-item-number {
padding: 6rpx 16rpx;
line-height: 1;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 100rpx;
font-size: 26rpx;
color: rgba(255, 255, 255, 0.8);
}
}
.u-list-scale {
.u-list-scale {
transform-origin: center center;
}
}
.u-list-image-wrap {
.u-list-image-wrap {
width: 100%;
height: 100%;
flex: 1;
......@@ -270,9 +270,9 @@ export default {
overflow: hidden;
box-sizing: content-box;
position: relative;
}
}
.u-swiper-title {
.u-swiper-title {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
bottom: 0;
......@@ -281,11 +281,11 @@ export default {
font-size: 28rpx;
padding: 12rpx 24rpx;
color: rgba(255, 255, 255, 0.9);
}
}
.u-swiper-item {
.u-swiper-item {
display: flex;
overflow: hidden;
align-items: center;
}
}
</style>
uview/components/u-switch/u-switch.vue
View file @ 4a3a32b8
<template>
<view
class="u-switch"
:class="[value == true ? 'u-switch--on' : '', disabled ? 'u-switch--disabled' : '']"
@tap="onClick"
:style="[switchStyle]"
>
<view class="u-switch" :class="[value == true ? 'u-switch--on' : '', disabled ? 'u-switch--disabled' : '']" @tap="onClick"
:style="[switchStyle]">
<view class="u-switch__node node-class">
<u-loading :show="loading" class="u-switch__loading" :size="size * 0.6" :color="loadingColor"/>
<u-loading :show="loading" class="u-switch__loading" :size="size * 0.6" :color="loadingColor" />
</view>
</view>
</template>
<script>
export default {
/**
* alertTips 提示
* @description 选择开关一般用于只有两个选择，且只能选其一的场景。
* @tutorial https://www.uviewui.com/components/switch.html
* @property {Boolean} loading 是否处于加载中（默认false）
* @property {Boolean} disabled 是否禁用（默认false）
* @property {String Number} size 开关尺寸，单位rpx（默认50）
* @property {String} active-color 打开时的背景色（默认#2979ff）
* @property {Boolean} inactive-color 关闭时的背景色（默认#ffffff）
* @event {Function} change 在switch打开或关闭时触发
* @example <u-switch v-model="checked" active-color="red" inactive-color="#eee"></u-switch>
*/
export default {
name: "u-switch",
props: {
// 是否为加载中状态
loading: {
......@@ -68,17 +77,17 @@ export default {
uni.vibrateShort();
this.$emit('input', !this.value);
// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
this.$nextTick(function(){
this.$nextTick(function() {
this.$emit('change', this.value);
})
}
}
}
};
};
</script>
<style lang="scss" scoped>
.u-switch {
.u-switch {
position: relative;
display: inline-block;
box-sizing: initial;
......@@ -94,9 +103,9 @@ export default {
border-radius: var(--switch-node-size, 1em);
transition: background-color 0.3s;
transition: background-color var(--switch-transition-duration, 0.3s);
}
}
.u-switch__node {
.u-switch__node {
display: flex;
align-items: center;
justify-content: center;
......@@ -121,28 +130,28 @@ export default {
transition: transform var(--switch-transition-duration, 0.3s) cubic-bezier(0.3, 1.05, 0.4, 1.05);
transition: transform var(--switch-transition-duration, 0.3s) cubic-bezier(0.3, 1.05, 0.4, 1.05),
-webkit-transform var(--switch-transition-duration, 0.3s) cubic-bezier(0.3, 1.05, 0.4, 1.05);
}
}
.u-switch__loading {
.u-switch__loading {
display: flex;
align-items: center;
justify-content: center;
}
}
.u-switch--on {
.u-switch--on {
background-color: #1989fa;
background-color: var(--switch-on-background-color, #1989fa);
}
}
.u-switch--on .u-switch__node {
.u-switch--on .u-switch__node {
-webkit-transform: translateX(1em);
transform: translateX(1em);
-webkit-transform: translateX(calc(var(--switch-width, 2em) - var(--switch-node-size, 1em)));
transform: translateX(calc(var(--switch-width, 2em) - var(--switch-node-size, 1em)));
}
}
.u-switch--disabled {
.u-switch--disabled {
opacity: 0.4;
opacity: var(--switch-disabled-opacity, 0.4);
}
}
</style>
uview/components/u-table/u-table.vue
View file @ 4a3a32b8
......@@ -5,7 +5,23 @@
</template>
<script>
/**
* alertTips 提示
* @description 表格组件一般用于展示大量结构化数据的场景
* @tutorial https://www.uviewui.com/components/table.html
* @property {String} border-color 表格边框的颜色（默认#e4e7ed）
* @property {String} bg-color 表格的背景颜色（默认#ffffff）
* @property {String} align 单元格的内容对齐方式，作用类似css的text-align（默认center）
* @property {String} padding 单元格的内边距，同css的padding写法（默认10rpx 0）
* @property {String Number} font-size 单元格字体大小，单位rpx（默认28）
* @property {String} color 单元格字体颜色（默认#606266）
* @property {Object} th-style th单元格的样式，对象形式(将th所需参数放在table组件，是为了避免每一个th组件要写一遍）
* @event {Function} click 点击组件时触发
* @event {Function} close 点击关闭按钮时触发
* @example <u-table></u-table>
*/
export default {
name: "u-table",
props: {
borderColor: {
type: String,
......@@ -33,7 +49,7 @@
// th的自定义样式
thStyle: {
type: Object,
default() {
default () {
return {}
}
},
......@@ -50,8 +66,7 @@
};
},
data() {
return {
}
return {}
},
computed: {
tableStyle() {
......
uview/components/u-tabs-swiper/u-tabs-swiper.vue
View file @ 4a3a32b8
<template>
<view
class="u-tabs"
:style="{
<view class="u-tabs" :style="{
zIndex: zIndex,
background: bgColor
}"
>
}">
<scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation :style="{ zIndex: zIndex + 1 }">
<view class="u-tabs-scroll-box" :class="{'u-tabs-scorll-flex': !isScroll}">
<view
class="u-tabs-item"
:style="{
<view class="u-tabs-item" :style="{
height: height + 'rpx',
lineHeight: height + 'rpx',
padding: `0 ${gutter / 2}rpx`,
......@@ -19,34 +14,53 @@
zIndex: zIndex + 2,
fontWeight: (index == getCurrent && bold) ? 'bold' : 'normal'
}"
v-for="(item, index) in getTabs"
:key="index"
:class="[preId + index]"
@tap="emit(index)"
>
v-for="(item, index) in getTabs" :key="index" :class="[preId + index]" @tap="emit(index)">
{{ item[name] || item['name']}}
</view>
<view
class="u-scroll-bar"
:style="{
<view class="u-scroll-bar" :style="{
width: barWidthPx + 'px',
height: barHeight + 'rpx',
borderRadius: '100px',
backgroundColor: activeColor,
left: scrollBarLeft + 'px'
}"
></view>
}"></view>
</view>
</scroll-view>
</view>
</template>
<script>
import colorGradient from '@/uview/libs/function/colorGradient';
let color = colorGradient;
const { windowWidth } = uni.getSystemInfoSync();
const preId = 'UEl_';
export default {
/**
* alertTips 提示
* @description 该组件内部实现主要依托于uniapp的scroll-view和swiper组件，主要特色是切换过程中，tabsSwiper文字的颜色可以渐变，底部滑块可以 跟随式滑动，活动tab滚动居中等。应用场景可以用于需要左右切换页面，比如商城的订单中心(待收货-待付款-待评价-已退货)等应用场景。
* @tutorial https://www.uviewui.com/components/tabsSwiper.html
* @property {Boolean} is-scroll tabs是否可以左右拖动（默认true）
* @property {Array} list 标签数组，元素为对象，如[{name: '推荐'}]
* @property {String Number} current 指定哪个tab为激活状态（默认0）
* @property {String Number} height 导航栏的高度，单位rpx（默认80）
* @property {String Number} font-size tab文字大小，单位rpx（默认30）
* @property {String Number} swiper-width tabs组件外部swiper的宽度，默认为屏幕宽度，单位rpx（默认750）
* @property {String} active-color 滑块和激活tab文字的颜色（默认#2979ff）
* @property {String} inactive-color tabs文字颜色（默认#303133）
* @property {String Number} bar-width 滑块宽度，单位rpx（默认40）
* @property {String Number} bar-height 滑块高度，单位rpx（默认6）
* @property {String Number} gutter 单个tab标签的左右内边距之和，单位rpx（默认40）
* @property {String} bg-color tabs导航栏的背景颜色（默认#ffffff）
* @property {String} name 组件内部读取的list参数中的属性名，见官网说明（默认name）
* @property {Boolean} bold 激活选项的字体是否加粗（默认true）
* @event {Function} change 点击标签时触发
* @example <u-tabs-swiper ref="tabs" :list="list" :is-scroll="false"></u-tabs-swiper>
*/
import colorGradient from '@/uview/libs/function/colorGradient';
let color = colorGradient;
const {
windowWidth
} = uni.getSystemInfoSync();
const preId = 'UEl_';
export default {
name: "u-tabs-swiper",
props: {
// 导航菜单是否需要滚动，如只有2或者3个的时候，就不需要滚动了，此时使用flex平分tab的宽度
isScroll: {
......@@ -56,7 +70,7 @@ export default {
//需循环的标签列表
list: {
type: Array,
default() {
default () {
return [];
}
},
......@@ -241,8 +255,7 @@ export default {
getQuery(cb) {
try {
let view = uni.createSelectorQuery().in(this).select('.u-tabs');
view.fields(
{
view.fields({
size: true
},
data => {
......@@ -317,88 +330,89 @@ export default {
this.countLine3Dx();
}
}
};
};
</script>
<style scoped lang="scss">
view,
scroll-view {
view,
scroll-view {
box-sizing: border-box;
}
}
.u-tabs {
.u-tabs {
width: 100%;
transition-property: background-color, color;
}
}
::-webkit-scrollbar,
::-webkit-scrollbar,
::-webkit-scrollbar {
::-webkit-scrollbar,
::-webkit-scrollbar,
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
}
/* #ifdef H5 */
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
scroll-view /deep/ ::-webkit-scrollbar {
/* #ifdef H5 */
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
scroll-view /deep/ ::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
/* #endif */
}
.u-scroll-view {
/* #endif */
.u-scroll-view {
width: 100%;
white-space: nowrap;
position: relative;
}
}
.u-tabs-scroll-box {
.u-tabs-scroll-box {
position: relative;
}
}
.u-tabs-scorll-flex {
.u-tabs-scorll-flex {
display: flex;
justify-content: space-between;
}
}
.u-tabs-scorll-flex .u-tabs-item {
.u-tabs-scorll-flex .u-tabs-item {
flex: 1;
}
}
.u-tabs-item {
.u-tabs-item {
position: relative;
display: inline-block;
text-align: center;
transition-property: background-color, color, font-weight;
}
}
.content {
.content {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.boxStyle {
.boxStyle {
pointer-events: none;
position: absolute;
transition-property: all;
}
}
.boxStyle2 {
.boxStyle2 {
pointer-events: none;
position: absolute;
bottom: 0;
transition-property: all;
transform: translateY(-100%);
}
}
.itemBackgroundBox {
.itemBackgroundBox {
pointer-events: none;
position: absolute;
top: 0;
......@@ -407,16 +421,16 @@ scroll-view /deep/ ::-webkit-scrollbar {
flex-direction: row;
justify-content: center;
align-items: center;
}
}
.itemBackground {
.itemBackground {
height: 100%;
width: 100%;
transition-property: all;
}
}
.u-scroll-bar {
.u-scroll-bar {
position: absolute;
bottom: 4rpx;
}
}
</style>
uview/components/u-tabs/u-tabs.vue
View file @ 4a3a32b8
......@@ -4,14 +4,8 @@
}">
<scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation>
<view class="u-scroll-box" :class="{'u-tabs-scorll-flex': !isScroll}">
<view
class="u-tab-item"
:id="'u-tab-item-' + index"
v-for="(item, index) in list"
:key="index"
@tap="clickTab(index)"
:style="[tabItemStyle(index)]"
>
<view class="u-tab-item" :id="'u-tab-item-' + index" v-for="(item, index) in list" :key="index" @tap="clickTab(index)"
:style="[tabItemStyle(index)]">
{{ item[name] || item['name']}}
</view>
<view class="u-tab-bar" :style="[tabBarStyle]"></view>
......@@ -21,7 +15,29 @@
</template>
<script>
export default {
/**
* alertTips 提示
* @description 该组件，是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
* @tutorial https://www.uviewui.com/components/tabs.html
* @property {Boolean} is-scroll tabs是否可以左右拖动（默认true）
* @property {Array} list 标签数组，元素为对象，如[{name: '推荐'}]
* @property {String Number} current 指定哪个tab为激活状态（默认0）
* @property {String Number} height 导航栏的高度，单位rpx（默认80）
* @property {String Number} font-size tab文字大小，单位rpx（默认30）
* @property {String Number} duration 滑块移动一次所需的时间，单位秒（默认0.5）
* @property {String} active-color 滑块和激活tab文字的颜色（默认#2979ff）
* @property {String} inactive-color tabs文字颜色（默认#303133）
* @property {String Number} bar-width 滑块宽度，单位rpx（默认40）
* @property {String Number} bar-height 滑块高度，单位rpx（默认6）
* @property {String Number} gutter 单个tab标签的左右内边距之和，单位rpx（默认40）
* @property {String} bg-color tabs导航栏的背景颜色（默认#ffffff）
* @property {String} name 组件内部读取的list参数中的属性名，见官网说明（默认name）
* @property {Boolean} bold 激活选项的字体是否加粗（默认true）
* @event {Function} change 点击标签时触发
* @example <u-tabs ref="tabs" :list="list" :is-scroll="false"></u-tabs>
*/
export default {
name: "u-tabs",
props: {
// 导航菜单是否需要滚动，如只有2或者3个的时候，就不需要滚动了，此时使用flex平分tab的宽度
isScroll: {
......@@ -31,7 +47,7 @@ export default {
//需循环的标签列表
list: {
type: Array,
default() {
default () {
return [];
}
},
......@@ -101,7 +117,7 @@ export default {
scrollLeft: 0, // 滚动scroll-view的左边滚动距离
tabQueryInfo: [], // 存放对tab菜单查询后的节点信息
componentWidth: 0, // 屏幕宽度，单位为px
scrollBarLeft: 0 ,// 移动bar需要通过translateX()移动的距离
scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离
parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离
id: this.$u.guid(), // id值
currentIndex: this.current,
......@@ -152,7 +168,7 @@ export default {
};
// 字体加粗
if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
if(index == this.currentIndex) {
if (index == this.currentIndex) {
style.color = this.activeColor;
} else {
style.color = this.inactiveColor;
......@@ -219,60 +235,61 @@ export default {
mounted() {
this.init();
}
};
};
</script>
<style lang="scss">
view,
scroll-view {
view,
scroll-view {
box-sizing: border-box;
}
}
::-webkit-scrollbar,
::-webkit-scrollbar,
::-webkit-scrollbar {
::-webkit-scrollbar,
::-webkit-scrollbar,
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
}
.u-scroll-box {
.u-scroll-box {
position: relative;
}
}
/* #ifdef H5 */
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
scroll-view /deep/ ::-webkit-scrollbar {
/* #ifdef H5 */
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
scroll-view /deep/ ::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
/* #endif */
}
.u-scroll-view {
/* #endif */
.u-scroll-view {
width: 100%;
white-space: nowrap;
position: relative;
}
}
.u-tab-item {
.u-tab-item {
position: relative;
display: inline-block;
text-align: center;
transition-property: background-color, color;
}
}
.u-tab-bar {
.u-tab-bar {
position: absolute;
bottom: 0;
}
}
.u-tabs-scorll-flex {
.u-tabs-scorll-flex {
display: flex;
justify-content: space-between;
}
}
</style>
uview/components/u-tag/u-tag.vue
View file @ 4a3a32b8
......@@ -14,7 +14,27 @@
</template>
<script>
/**
* alertTips 提示
* @description 该组件一般用于标记和选择
* @tutorial https://www.uviewui.com/components/tag.html
* @property {String} type 主题类型（默认primary）
* @property {String} size 标签大小（默认default）
* @property {String} shape 标签形状（默认square）
* @property {String} text 标签的文字内容
* @property {String} bg-color 自定义标签的背景颜色
* @property {String} border-color 标签的边框颜色
* @property {String} close-color 关闭按钮的颜色
* @property {String Number} index 点击标签时，会通过click事件返回该值
* @property {String} mode 模式选择，见官网说明（默认light）
* @property {Boolean} closeable 是否可关闭，设置为true，文字右边会出现一个关闭图标（默认false）
* @property {Boolean} show 标签显示与否（默认true）
* @event {Function} click 点击标签触发
* @event {Function} close closeable为true时，点击标签关闭按钮触发
* @example <u-tag text="雪月夜" type="success" />
*/
export default {
name: "u-tag",
// 是否禁用这个标签，禁用的话，会屏蔽点击事件
props: {
// 标签类型info、primary、success、warning、error
......@@ -91,22 +111,22 @@
customStyle() {
let style = {};
// 文字颜色（如果有此值，会覆盖type值的颜色）
if(this.color) style.color = this.color+"!important";
if (this.color) style.color = this.color + "!important";
// tag的背景颜色（如果有此值，会覆盖type值的颜色）
if(this.bgColor) style.backgroundColor = this.bgColor+"!important";
if (this.bgColor) style.backgroundColor = this.bgColor + "!important";
// 如果是镂空型tag，没有传递边框颜色（borderColor）的话，使用文字的颜色（color属性）
if(this.plain && this.color && !this.borderColor) style.borderColor = this.color;
if (this.plain && this.color && !this.borderColor) style.borderColor = this.color;
else style.borderColor = this.borderColor;
return style;
},
iconStyle() {
if(!this.closeable) return ;
if (!this.closeable) return;
let style = {};
if(this.size == 'mini') style.fontSize = '20rpx';
if (this.size == 'mini') style.fontSize = '20rpx';
else style.fontSize = '22rpx';
if(this.mode == 'plain' || this.mode == 'light') style.color = this.$u.color[this.type];
else if(this.mode == 'dark') style.color = "#ffffff";
if(this.closeColor) style.color = this.closeColor;
if (this.mode == 'plain' || this.mode == 'light') style.color = this.$u.color[this.type];
else if (this.mode == 'dark') style.color = "#ffffff";
if (this.closeColor) style.color = this.closeColor;
return style;
}
},
......@@ -114,7 +134,7 @@
// 标签被点击
clickTag() {
// 如果是disabled状态，不发送点击事件
if(this.disabled) return ;
if (this.disabled) return;
this.$emit('click', this.index);
},
// 点击标签关闭按钮
......
uview/components/u-td/u-td.vue
View file @ 4a3a32b8
......@@ -5,7 +5,15 @@
</template>
<script>
/**
* alertTips 提示
* @description 表格组件一般用于展示大量结构化数据的场景（搭配<u-table>使用）
* @tutorial https://www.uviewui.com/components/table.html#td-props
* @property {String Number} width 单元格宽度百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比，单元格宽度默认为均分tr的长度（默认auto）
* @example <u-td>二年级</u-td>
*/
export default {
name: "u-td",
props: {
// 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比
width: {
......@@ -30,7 +38,7 @@
computed: {
tdStyle() {
let style = {};
if(this.width != "auto") style.flex = `0 0 ${this.width}`;
if (this.width != "auto") style.flex = `0 0 ${this.width}`;
style.textAlign = this.uTable.align;
style.padding = this.tr.length == 0 ? this.uTable.padding : 0;
style.borderBottom = this.tr.length == 0 ? `solid 1px ${this.uTable.borderColor}` : 0;
......
uview/components/u-th/u-th.vue
View file @ 4a3a32b8
......@@ -5,7 +5,15 @@
</template>
<script>
/**
* alertTips 提示
* @description 表格组件一般用于展示大量结构化数据的场景（搭配<u-table>使用）
* @tutorial https://www.uviewui.com/components/table.html#td-props
* @property {String Number} width 标题单元格宽度百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比，单元格宽度默认为均分tr的长度
* @example
*/
export default {
name: "u-th",
props: {
// 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比
width: {
......@@ -22,7 +30,7 @@
computed: {
thStyle() {
let style = {};
if(this.width) style.flex = `0 0 ${this.width}%`;
if (this.width) style.flex = `0 0 ${this.width}%`;
style.textAlign = this.uTable.align;
style.padding = this.uTable.padding;
style.borderBottom = `solid 1px ${this.uTable.borderColor}`;
......
uview/components/u-time-line-item/u-time-line-item.vue
View file @ 4a3a32b8
......@@ -11,7 +11,16 @@
</template>
<script>
/**
* alertTips 提示
* @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。(搭配<u-time-line>使用)
* @tutorial https://www.uviewui.com/components/timeLine.html
* @property {String} bg-color 左边节点的背景颜色，一般通过slot内容自定义背景颜色即可（默认#ffffff）
* @property {String Number} node-top 节点左边图标绝对定位的top值，单位rpx
* @example <u-time-line-item node-top="2">...</u-time-line-item>
*/
export default {
name: "u-time-line-item",
props: {
// 节点的背景颜色
bgColor: {
......@@ -34,7 +43,7 @@
let style = {
backgroundColor: this.bgColor,
};
if(this.nodeTop != "") style.top = this.nodeTop + 'rpx';
if (this.nodeTop != "") style.top = this.nodeTop + 'rpx';
return style;
}
}
......
uview/components/u-time-line/u-time-line.vue
View file @ 4a3a32b8
......@@ -5,7 +5,14 @@
</template>
<script>
/**
* alertTips 提示
* @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。
* @tutorial https://www.uviewui.com/components/timeLine.html
* @example <u-time-line></u-time-line>
*/
export default {
name: "u-time-line",
data() {
return {
......
uview/components/u-toast/u-toast.vue
View file @ 4a3a32b8
......@@ -11,7 +11,16 @@
</template>
<script>
/**
* alertTips 提示
* @description 此组件表现形式类似uni的uni.showToastAPI，但也有不同的地方。
* @tutorial https://www.uviewui.com/components/toast.html
* @property {String} z-index toast展示时的z-index值
* @event {Function} show 显示toast，如需一进入页面就显示toast，请在onReady生命周期调用
* @example <u-toast ref="uToast" />
*/
export default {
name: "u-toast",
props: {
// z-index值
zIndex: {
......@@ -40,7 +49,7 @@
// 只有不为none，并且type为error|warning|succes|info时候，才显示图标
if (['error', 'warning', 'success', 'info'].indexOf(this.config.type) >= 0 && this.config.icon) {
let icon = this.$u.type2icon(this.config.type);
return icon ;
return icon;
}
},
uZIndex() {
......@@ -136,7 +145,7 @@
.u-text {
word-break: keep-all;
white-space:nowrap;
white-space: nowrap;
line-height: normal;
}
......
uview/components/u-top-tips/u-top-tips.vue
View file @ 4a3a32b8
......@@ -6,7 +6,16 @@
</template>
<script>
export default {
/**
* alertTips 提示
* @description 该组件一般用于页面顶部向下滑出一个提示，尔后自动收起的场景。
* @tutorial https://www.uviewui.com/components/topTips.html
* @property {String Number} navbar-height 导航栏高度(包含状态栏高度在内)，单位PX
* @property {String Number} z-index z-index值（默认975）
* @example <u-top-tips ref="uTips" type="success" duration="1500"></u-top-tips>
*/
export default {
name: "u-top-tips",
props: {
// 导航栏高度，用于提示的初始化
navbarHeight: {
......@@ -55,16 +64,16 @@ export default {
}, this.duration);
}
}
};
};
</script>
<style lang="scss" scoped>
view {
view {
box-sizing: border-box;
}
}
// 顶部弹出类型样式
.u-tips {
// 顶部弹出类型样式
.u-tips {
width: 100%;
position: fixed;
z-index: 1;
......@@ -80,31 +89,31 @@ view {
// 此处为最核心点，translateY(-100%)意味着将其从Y轴隐藏（隐藏到顶部(h5)或者说导航栏(app)下面）
transform: translateY(-100%);
transition: all 0.35s linear;
}
}
.u-tip-show {
.u-tip-show {
transform: translateY(0);
opacity: 1;
z-index: 99;
}
}
.u-primary {
.u-primary {
background: $u-type-primary;
}
}
.u-success {
.u-success {
background: $u-type-success;
}
}
.u-warning {
.u-warning {
background: $u-type-warning;
}
}
.u-error {
.u-error {
background: $u-type-error;
}
}
.u-info {
.u-info {
background: $u-type-info;
}
}
</style>
uview/components/u-tr/u-tr.vue
View file @ 4a3a32b8
......@@ -5,7 +5,14 @@
</template>
<script>
/**
* alertTips 提示
* @description 表格组件一般用于展示大量结构化数据的场景（搭配<u-table>使用）
* @tutorial https://www.uviewui.com/components/table.html
* @example <u-tr></u-tr>
*/
export default {
name: "u-tr",
inject: ['uTable', 'uTd'],
provide() {
return {
......@@ -13,7 +20,7 @@
};
},
created() {
if(this.uTd && this.uTd.tr) {
if (this.uTd && this.uTd.tr) {
this.uTd.tr.push(this);
}
}
......
uview/components/u-upload/u-upload.vue
View file @ 4a3a32b8
......@@ -4,7 +4,8 @@
<view v-if="deletable" class="u-delete-icon" @tap.stop="deleteItem(index)">
<u-icon class="u-icon" name="close" size="20" color="#ffffff"></u-icon>
</view>
<u-line-progress v-if="showProgress && item.progress > 0 && !item.error" :show-percent="false" height="16" class="u-progress" :percent="item.progress"></u-line-progress>
<u-line-progress v-if="showProgress && item.progress > 0 && !item.error" :show-percent="false" height="16" class="u-progress"
:percent="item.progress"></u-line-progress>
<view @tap.stop="retry(index)" v-if="item.error" class="u-error-btn">点击重试</view>
<image @tap.stop="doPreviewImage(item.url || item.path, index)" class="u-preview-image" v-if="!item.isImage" :src=" item.url || item.path "
:mode="imageMode"></image>
......@@ -21,7 +22,43 @@
</template>
<script>
/**
* alertTips 提示
* @description 该组件用于上传图片场景
* @tutorial https://www.uviewui.com/components/upload.html
* @property {String} action 服务器上传地址
* @property {String Number} max-count 最大选择图片的数量（默认99）
* @property {Boolean} custom-btn 如果需要自定义选择图片的按钮，设置为true（默认false）
* @property {Boolean} show-progress 是否显示进度条（默认true）
* @property {Boolean} disabled 是否启用(显示/移仓)组件（默认false）
* @property {String} image-mode 预览图片等显示模式，可选值为uni的image的mode属性值（默认aspectFill）
* @property {Object} header 上传携带的头信息，对象形式
* @property {Object} form-data 上传额外携带的参数
* @property {String} name 上传文件的字段名，供后端获取使用（默认file）
* @property {Array<String>} size-type original 原图，compressed 压缩图，默认二者都有（默认['original', 'compressed']）
* @property {Array<String>} source-type 选择图片的来源，album-从相册选图，camera-使用相机，默认二者都有（默认['album', 'camera']）
* @property {Boolean} preview-full-image 是否可以通过uni.previewImage预览已选择的图片（默认true）
* @property {Boolean} multiple 是否开启图片多选，部分安卓机型不支持（默认true）
* @property {Boolean} deletable 是否显示删除图片的按钮（默认true）
* @property {String Number} max-size 选择单个文件的最大大小，单位B(byte)，默认不限制（默认Number.MAX_VALUE）
* @property {Array<Object>} file-list 默认显示的图片列表，数组元素为对象，必须提供url属性
* @property {Boolean} upload-text 选择图片按钮的提示文字（默认“选择图片”）
* @property {Boolean} auto-upload 选择完图片是否自动上传，见上方说明（默认true）
* @property {Boolean} show-tips 特殊情况下是否自动提示toast，见上方说明（默认true）
* @property {Boolean} show-upload-list 是否显示组件内部的图片预览（默认true）
* @event {Function} on-oversize 图片大小超出最大允许大小
* @event {Function} on-preview 全屏预览图片时触发
* @event {Function} on-remove 移除图片时触发
* @event {Function} on-success 图片上传成功时触发
* @event {Function} on-change 图片上传后，无论成功或者失败都会触发
* @event {Function} on-error 图片上传失败时触发
* @event {Function} on-progress 图片上传过程中的进度变化过程触发
* @event {Function} on-uploaded 所有图片上传完毕触发
* @event {Function} on-choose-complete 每次选择图片后触发，只是让外部可以得知每次选择后，内部的文件列表
* @example <u-upload :action="action" :file-list="fileList" ></u-upload>
*/
export default {
name: "u-upload",
props: {
//是否显示组件自带的图片预览功能
showUploadList: {
......@@ -148,7 +185,11 @@
immediate: true,
handler(val) {
val.map(value => {
this.lists.push({url: value.url, error: false, progress: 100});
this.lists.push({
url: value.url,
error: false,
progress: 100
});
})
}
}
......@@ -183,10 +224,10 @@
this.$emit('on-oversize', val, this.lists);
this.showToast('超出允许的文件大小');
} else {
if(maxCount <= lists.length) {
if (maxCount <= lists.length) {
this.$emit('on-exceed', val, this.lists);
this.showToast('超出最大允许的文件个数');
return ;
return;
}
lists.push({
url: val.path,
......@@ -197,7 +238,7 @@
})
// 每次图片选择完，抛出一个事件，并将当前内部选择的图片数组抛出去
this.$emit('on-choose-complete', this.lists);
if(this.autoUpload) this.uploadFile(listOldLength);
if (this.autoUpload) this.uploadFile(listOldLength);
})
.catch(error => {
// this.$emit('on-error', error);
......@@ -205,7 +246,7 @@
},
// 提示用户消息
showToast(message, force = false) {
if(this.showTips || force) {
if (this.showTips || force) {
uni.showToast({
title: message,
icon: "none"
......@@ -229,11 +270,11 @@
// 上传图片
uploadFile(index = 0) {
if (this.disabled) return;
if(this.uploading) return ;
if (this.uploading) return;
// 全部上传完成
if (index >= this.lists.length) {
this.$emit('on-uploaded', this.lists);
return ;
return;
}
// 检查上传地址
if (!this.action) {
......@@ -242,7 +283,7 @@
}
// 检查是否是已上传或者正在上传中
if (this.lists[index].progress == 100) {
if(this.autoUpload == false) this.uploadFile(index + 1);
if (this.autoUpload == false) this.uploadFile(index + 1);
return;
}
this.lists[index].error = false;
......
uview/components/u-verification-code/u-verification-code.vue
View file @ 4a3a32b8
......@@ -5,7 +5,21 @@
</template>
<script>
/**
* alertTips 提示
* @description 考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件 不提供界面显示，只提供提示语，由用户将提示语嵌入到具体的场景
* @tutorial https://www.uviewui.com/components/verificationCode.html
* @property {Number String} seconds 倒计时所需的秒数（默认60）
* @property {String} start-text 开始前的提示语，见官网说明（默认获取验证码）
* @property {String} change-text 倒计时期间的提示语，必须带有字母"x"，见官网说明（默认X秒重新获取）
* @property {String} end-text 倒计结束的提示语，见官网说明（默认重新获取）
* @event {Function} change 倒计时期间，每秒触发一次
* @event {Function} start 开始倒计时触发
* @event {Function} end 结束倒计时触发
* @example <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
*/
export default {
name: "u-verification-code",
props: {
// 倒计时总秒数
seconds: {
......@@ -47,7 +61,7 @@
// 这里放这句，是为了一开始时就提示，否则要等setInterval的1秒后才会有提示
this.changeEvent(this.changeText.replace(/x|X/, this.secNum));
this.timer = setInterval(() => {
if(--this.secNum) {
if (--this.secNum) {
// 用当前倒计时的秒数替换提示字符串中的"x"字母
this.changeEvent(this.changeText.replace(/x|X/, this.secNum));
} else {
......
uview/components/u-waterfall/u-waterfall.vue
View file @ 4a3a32b8
......@@ -10,7 +10,16 @@
</template>
<script>
/**
* alertTips 提示
* @description 这是一个瀑布流形式的组件，内容分为左右两列，结合uView的懒加载组件效果更佳。相较于某些只是奇偶数左右分别，或者没有利用vue作用域插槽的做法，uView的瀑布流实现了真正的 组件化，搭配LazyLoad 懒加载和loadMore 加载更多组件，让您开箱即用，眼前一亮。
* @tutorial https://www.uviewui.com/components/waterfall.html
* @property {Array} flow-list 用于渲染的数据
* @property {String Number} add-time 单条数据添加到队列的时间间隔，单位ms，见上方注意事项说明（默认200）
* @example <u-waterfall :flowList="flowList"></u-waterfall>
*/
export default {
name: "u-waterfall",
props: {
flowList: {
// 瀑布流数据
......@@ -67,12 +76,12 @@
let item = this.tempList[0];
if (leftRect.height < rightRect.height) {
this.leftList.push(item);
} else if(leftRect.height > rightRect.height) {
} else if (leftRect.height > rightRect.height) {
this.rightList.push(item);
} else {
// 这里是为了保证第一和第二张添加时，左右都能有内容
// 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
if(this.leftList.length <= this.rightList.length) {
if (this.leftList.length <= this.rightList.length) {
this.leftList.push(item);
} else {
this.rightList.push(item);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment