Skip to content

U
uview-ui
Commit f21fbd7c authored by PC-20180318CEYD\Administrator's avatar PC-20180318CEYD\Administrator
Browse files
Options

Merge branch 'tonghao' into tmp 

# Conflicts:
#	uview/components/u-alert-tips/u-alert-tips.vue
#	uview/components/u-badge/u-badge.vue
#	uview/components/u-count-down/u-count-down.vue
#	uview/components/u-count-to/u-count-to.vue
#	uview/components/u-divider/u-divider.vue
#	uview/components/u-gap/u-gap.vue
#	uview/components/u-grid/u-grid.vue
#	uview/components/u-lazy-load/u-lazy-load.vue
#	uview/components/u-loadmore/u-loadmore.vue
#	uview/components/u-message-input/u-message-input.vue
#	uview/components/u-navbar/u-navbar.vue
#	uview/components/u-notice-bar/u-notice-bar.vue
#	uview/components/u-search/u-search.vue
#	uview/components/u-section/u-section.vue
parents 09385673 da09bd81
Show whitespace changes
Inline Side-by-side
Showing with 5701 additions and 5272 deletions
uview/components/u-action-sheet/u-action-sheet.vue
View file @ f21fbd7c
<template> <template>
<u-popup mode="bottom" :border-radius="borderRadius" <u-popup mode="bottom" :border-radius="borderRadius" :popup="false" v-model="value" :maskCloseAble="maskCloseAble"
:popup="false" v-model="value" :maskCloseAble="maskCloseAble" length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose" :z-index="uZIndex">
length="auto" :safeAreaInsetBottom="safeAreaInsetBottom"
@close="popupClose"
:z-index="uZIndex"
>
<view class="u-tips u-border-bottom" v-if="tips.text" :style="tipsStyle"> <view class="u-tips u-border-bottom" v-if="tips.text" :style="tipsStyle">
{{tips.text}} {{tips.text}}
</view> </view>
...@@ -16,13 +12,29 @@ ...@@ -16,13 +12,29 @@
</block> </block>
<view class="u-gab" v-if="cancelBtn"> <view class="u-gab" v-if="cancelBtn">
</view> </view>
<view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class" :hover-stay-time="150" v-if="cancelBtn" <view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class"
@tap="close">取消</view> :hover-stay-time="150" v-if="cancelBtn" @tap="close">取消</view>
</u-popup> </u-popup>
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
* @tutorial https://www.uviewui.com/components/actionSheet.html
* @property {Array<Object>} list 按钮的文字数组，见官方文档示例
* @property {Object} tips 顶部的提示文字，见官方文档示例
* @property {Boolean} cancel-btn 是否显示底部的取消按钮（默认true）
* @property {Number String} border-radius 弹出部分顶部左右的圆角值，单位rpx（默认0）
* @property {Boolean} mask-close-able 点击遮罩是否可以关闭（默认true）
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Number String} z-index z-index值（默认1075）
* @event {Function} click 点击ActionSheet列表项时触发
* @event {Function} close 点击取消按钮时触发
* @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
*/
export default { export default {
name: "u-action-sheet",
props: { props: {
// 点击遮罩是否可以关闭actionsheet // 点击遮罩是否可以关闭actionsheet
maskCloseAble: { maskCloseAble: {
......
uview/components/u-avatar/u-avatar.vue
View file @ f21fbd7c
...@@ -7,6 +7,16 @@ ...@@ -7,6 +7,16 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 该组件一般的图片裁剪需求场景，尤其适合于头像裁剪方面。
* @tutorial https://www.uviewui.com/components/avatarCropper.html
* @property {String Number} dest-width 输出图片宽度，高等于宽，单位px（默认200）
* @property {String Number} rect-width 裁剪框宽度，高等于宽，单位px（默认200）
* @property {String} file-type 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可（默认jpg）
* @event {Function} uAvatarCropper 裁剪结束后的事件，通过uni.$on监听
* @example <image class="u-avatar-demo" :src="avatar" mode="aspectFill"></image>
*/
let base64Avatar = "data:image/png;base64,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"; let base64Avatar = "data:image/png;base64,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";
export default { export default {
props: { props: {
......
uview/components/u-button/u-button.vue
View file @ f21fbd7c
...@@ -6,22 +6,10 @@ ...@@ -6,22 +6,10 @@
shape == 'circle' ? 'u-round-circle' : '', shape == 'circle' ? 'u-round-circle' : '',
hairLine ? showHairLineBorder : 'u-bold-border', hairLine ? showHairLineBorder : 'u-bold-border',
]" ]"
:disabled="disabled" :disabled="disabled" :form-type="formType" :open-type="openType" :app-parameter="appParameter"
:form-type="formType" :hover-stop-propagation="hoverStopPropagation" :send-message-title="sendMessageTitle" send-message-path="sendMessagePath"
:open-type="openType" :lang="lang" :session-from="sessionFrom" :send-message-img="sendMessageImg" :show-message-card="showMessageCard"
:app-parameter="appParameter" @getphonenumber="getphonenumber" @getuserinfo="getuserinfo" @error="error" @opensetting="opensetting" @launchapp="launchapp"
:hover-stop-propagation="hoverStopPropagation"
:send-message-title="sendMessageTitle"
send-message-path="sendMessagePath"
:lang="lang"
:session-from="sessionFrom"
:send-message-img="sendMessageImg"
:show-message-card="showMessageCard"
@getphonenumber="getphonenumber"
@getuserinfo="getuserinfo"
@error="error"
@opensetting="opensetting"
@launchapp="launchapp"
:style="[buttonStyle]" @tap="click($event)" :hover-class="getHoverClass" :loading="loading"> :style="[buttonStyle]" @tap="click($event)" :hover-class="getHoverClass" :loading="loading">
<slot></slot> <slot></slot>
<view v-if="ripple" class="u-wave-ripple" :class="[waveActive ? 'u-wave-active' : '']" :style="{ <view v-if="ripple" class="u-wave-ripple" :class="[waveActive ? 'u-wave-active' : '']" :style="{
...@@ -36,7 +24,34 @@ ...@@ -36,7 +24,34 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description Button 按钮
* @tutorial https://www.uviewui.com/components/button.html
* @property {String} size 按钮的大小
* @property {Boolean} ripple 是否开启点击水波纹效果
* @property {String} ripple-bg-color 水波纹的背景色，ripple为true时有效
* @property {String} type 按钮的样式类型
* @property {Boolean} plain 按钮是否镂空，背景色透明
* @property {Boolean} disabled 是否禁用
* @property {Boolean} shape 按钮外观形状，见文档说明
* @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
* @property {String} form-type 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
* @property {String} open-type 开放能力
* @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果(App-nvue 平台暂不支持)
* @property {Number} hover-start-time 按住后多久出现点击态，单位毫秒
* @property {Number} hover-stay-time 手指松开后点击态保留时间，单位毫秒
* @property {Object} custom-style 对按钮的自定义样式，对象形式，见文档说明
* @event {Function} click 按钮点击
* @event {Function} getphonenumber open-type="getPhoneNumber"时有效
* @event {Function} getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
* @event {Function} error 当使用开放能力时，发生错误的回调
* @event {Function} opensetting 在打开授权设置页并关闭后回调
* @event {Function} launchapp 打开 APP 成功的回调
* @example <u-button>月落</u-button>
*/
export default { export default {
name:"u-button",
props: { props: {
// 是否细边框 // 是否细边框
hairLine: { hairLine: {
...@@ -153,7 +168,7 @@ ...@@ -153,7 +168,7 @@
// 自定义样式，对象形式 // 自定义样式，对象形式
customStyle: { customStyle: {
type: Object, type: Object,
default() { default () {
return {} return {}
} }
} }
...@@ -182,7 +197,7 @@ ...@@ -182,7 +197,7 @@
} }
} else { } else {
if (this.disabled) { if (this.disabled) {
if(this.plain) { if (this.plain) {
style.color = this.$u.color[this.type + 'Disabled']; style.color = this.$u.color[this.type + 'Disabled'];
style.backgroundColor = this.$u.color[this.type + 'Light']; style.backgroundColor = this.$u.color[this.type + 'Light'];
style.borderColor = this.$u.color[this.type + 'Disabled']; style.borderColor = this.$u.color[this.type + 'Disabled'];
...@@ -192,7 +207,7 @@ ...@@ -192,7 +207,7 @@
style.borderColor = this.$u.color[this.type + 'Disabled']; style.borderColor = this.$u.color[this.type + 'Disabled'];
} }
} else { } else {
if(this.plain) { if (this.plain) {
style.color = this.$u.color[this.type] style.color = this.$u.color[this.type]
style.backgroundColor = this.$u.color[this.type + 'Light']; style.backgroundColor = this.$u.color[this.type + 'Light'];
style.borderColor = this.$u.color[this.type + 'Disabled']; style.borderColor = this.$u.color[this.type + 'Disabled'];
...@@ -208,7 +223,7 @@ ...@@ -208,7 +223,7 @@
}, },
// 在'primary', 'success', 'error', 'warning'类型下，不显示边框，否则会造成四角有毛刺现象 // 在'primary', 'success', 'error', 'warning'类型下，不显示边框，否则会造成四角有毛刺现象
showHairLineBorder() { showHairLineBorder() {
if(['primary', 'success', 'error', 'warning'].indexOf(this.type) >= 0 && !this.plain) { if (['primary', 'success', 'error', 'warning'].indexOf(this.type) >= 0 && !this.plain) {
return ''; return '';
} else { } else {
return 'u-hairline-border'; return 'u-hairline-border';
...@@ -408,7 +423,7 @@ ...@@ -408,7 +423,7 @@
} }
.u-primary-plain-hover { .u-primary-plain-hover {
color: #FFFFFF!important; color: #FFFFFF !important;
background: $u-type-primary-dark !important; background: $u-type-primary-dark !important;
} }
...@@ -418,29 +433,30 @@ ...@@ -418,29 +433,30 @@
} }
.u-success-plain-hover { .u-success-plain-hover {
color: #FFFFFF!important; color: #FFFFFF !important;
background: $u-type-success-dark!important; background: $u-type-success-dark !important;
} }
.u-warning-plain-hover { .u-warning-plain-hover {
color: #FFFFFF!important; color: #FFFFFF !important;
background: $u-type-warning-dark !important; background: $u-type-warning-dark !important;
} }
.u-error-plain-hover { .u-error-plain-hover {
color: #FFFFFF!important; color: #FFFFFF !important;
background: $u-type-error-dark !important; background: $u-type-error-dark !important;
} }
.u-info-plain-hover { .u-info-plain-hover {
color: #FFFFFF!important; color: #FFFFFF !important;
background: $u-type-info-dark !important; background: $u-type-info-dark !important;
} }
.u-default-hover { .u-default-hover {
color: $u-type-primary-dark !important; color: $u-type-primary-dark !important;
border-color: $u-type-primary-dark !important; border-color: $u-type-primary-dark !important;
background-color: $u-type-primary-light !important;; background-color: $u-type-primary-light !important;
;
} }
.u-primary-hover { .u-primary-hover {
......
uview/components/u-car-keyboard/u-car-keyboard.vue
View file @ f21fbd7c
...@@ -3,11 +3,13 @@ ...@@ -3,11 +3,13 @@
<view class="u-keyboard-grids"> <view class="u-keyboard-grids">
<block> <block>
<view class="u-keyboard-grids-item" v-for="(group, i) in abc ? EngKeyBoardList : areaList" :key="i"> <view class="u-keyboard-grids-item" v-for="(group, i) in abc ? EngKeyBoardList : areaList" :key="i">
<view :hover-stay-time="100" @tap="carInputClick(i, j)" hover-class="u-carinput-hover" class="u-keyboard-grids-btn" v-for="(item, j) in group" :key="j"> <view :hover-stay-time="100" @tap="carInputClick(i, j)" hover-class="u-carinput-hover" class="u-keyboard-grids-btn"
v-for="(item, j) in group" :key="j">
{{ item }} {{ item }}
</view> </view>
</view> </view>
<view @touchstart="backspaceClick" @touchend="clearTimer" :hover-stay-time="100" class="u-keyboard-back" hover-class="u-hover-class"> <view @touchstart="backspaceClick" @touchend="clearTimer" :hover-stay-time="100" class="u-keyboard-back"
hover-class="u-hover-class">
<u-icon :size="38" name="backspace" :bold="true"></u-icon> <u-icon :size="38" name="backspace" :bold="true"></u-icon>
</view> </view>
<view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover" @tap="changeCarInputMode"> <view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover" @tap="changeCarInputMode">
...@@ -21,7 +23,29 @@ ...@@ -21,7 +23,29 @@
</template> </template>
<script> <script>
export default { /**
* alertTips 提示
* @description 此为uViw自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3中模式，都有可以打乱按键顺序的选项。
* @tutorial https://www.uviewui.com/components/keyboard.html
* @property {String} mode 键盘类型，见官网基本使用的说明（默认number）
* @property {Boolean} dot-enabled 是否显示"."按键，只在mode=number时有效（默认true）
* @property {Boolean} tooltip 是否显示键盘顶部工具条（默认true）
* @property {String} tips 工具条中间的提示文字，见官网基本使用的说明，如不需要，请传""空字符
* @property {Boolean} cancel-btn 是否显示工具条左边的"取消"按钮（默认true）
* @property {Boolean} confirm-btn 是否显示工具条右边的"完成"按钮（默认true）
* @property {Boolean} mask 是否显示遮罩（默认true）
* @property {Number String} z-index 弹出键盘的z-index值（默认1075）
* @property {Boolean} random 是否打乱键盘按键的顺序（默认false）
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Boolean} mask-close-able 是否允许点击遮罩收起键盘（默认true）
* @event {Function} change 按键被点击(不包含退格键被点击)
* @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
* @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
* @event {Function} backspace 键盘退格键被点击
* @example <u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard>
*/
export default {
name: "u-keyboard",
props: { props: {
// 是否打乱键盘按键的顺序 // 是否打乱键盘按键的顺序
random: { random: {
...@@ -149,32 +173,32 @@ export default { ...@@ -149,32 +173,32 @@ export default {
// 点击退格键 // 点击退格键
backspaceClick() { backspaceClick() {
this.$emit('backspace'); this.$emit('backspace');
 clearInterval(this.timer); //再次清空定时器，防止重复注册定时器 clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
      this.timer = setInterval(() => { this.timer = setInterval(() => {
    this.$emit('backspace'); this.$emit('backspace');
      }, 250); }, 250);
}, },
clearTimer() { clearTimer() {
clearInterval(this.timer); clearInterval(this.timer);
}, },
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.u-keyboard-grids { .u-keyboard-grids {
background: rgb(215, 215, 217); background: rgb(215, 215, 217);
padding: 24rpx 0; padding: 24rpx 0;
position: relative; position: relative;
} }
.u-keyboard-grids-item { .u-keyboard-grids-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.u-keyboard-grids-btn { .u-keyboard-grids-btn {
text-decoration: none; text-decoration: none;
width: 62rpx; width: 62rpx;
flex: 0 0 64rpx; flex: 0 0 64rpx;
...@@ -188,13 +212,13 @@ export default { ...@@ -188,13 +212,13 @@ export default {
border-radius: 8rpx; border-radius: 8rpx;
box-shadow: 0 2rpx 0rpx #888992; box-shadow: 0 2rpx 0rpx #888992;
font-weight: 500; font-weight: 500;
} }
.u-carinput-hover { .u-carinput-hover {
background-color: rgb(185, 188, 195)!important; background-color: rgb(185, 188, 195) !important;
} }
.u-keyboard-back { .u-keyboard-back {
position: absolute; position: absolute;
width: 96rpx; width: 96rpx;
right: 22rpx; right: 22rpx;
...@@ -206,9 +230,9 @@ export default { ...@@ -206,9 +230,9 @@ export default {
border-radius: 8rpx; border-radius: 8rpx;
justify-content: center; justify-content: center;
box-shadow: 0 2rpx 0rpx #888992; box-shadow: 0 2rpx 0rpx #888992;
} }
.u-keyboard-change { .u-keyboard-change {
font-size: 24rpx; font-size: 24rpx;
box-shadow: 0 2rpx 0rpx #888992; box-shadow: 0 2rpx 0rpx #888992;
position: absolute; position: absolute;
...@@ -222,26 +246,26 @@ export default { ...@@ -222,26 +246,26 @@ export default {
align-items: center; align-items: center;
border-radius: 8rpx; border-radius: 8rpx;
justify-content: center; justify-content: center;
} }
.u-keyboard-change .inactive.zh { .u-keyboard-change .inactive.zh {
transform: scale(0.85) translateY(-10rpx); transform: scale(0.85) translateY(-10rpx);
} }
.u-keyboard-change .inactive.en { .u-keyboard-change .inactive.en {
transform: scale(0.85) translateY(10rpx); transform: scale(0.85) translateY(10rpx);
} }
.u-keyboard-change .active { .u-keyboard-change .active {
color: rgb(237, 112, 64); color: rgb(237, 112, 64);
font-size: 30rpx; font-size: 30rpx;
} }
.u-keyboard-change .zh { .u-keyboard-change .zh {
transform: translateY(-10rpx); transform: translateY(-10rpx);
} }
.u-keyboard-change .en { .u-keyboard-change .en {
transform: translateY(10rpx); transform: translateY(10rpx);
} }
</style> </style>
uview/components/u-cell-group/u-cell-group.vue
View file @ f21fbd7c
...@@ -10,7 +10,17 @@ ...@@ -10,7 +10,17 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-item
* @tutorial https://www.uviewui.com/components/cell.html
* @property {String} title 分组标题
* @property {Boolean} border 是否显示外边框（默认true）
* @property {Object} title-style 分组标题的的样式，对象形式，如{'font-size': '24rpx'} 或 {'fontSize': '24rpx'}
* @example <u-cell-group title="设置喜好">
*/
export default { export default {
name: "u-cell-group",
props: { props: {
// 分组标题 // 分组标题
title: { title: {
...@@ -26,7 +36,7 @@ ...@@ -26,7 +36,7 @@
// 类似 {'font-size': '24rpx'} 和 {'fontSize': '24rpx'} // 类似 {'font-size': '24rpx'} 和 {'fontSize': '24rpx'}
titleStyle: { titleStyle: {
type: Object, type: Object,
default() { default () {
return {}; return {};
} }
} }
......
uview/components/u-cell-item/u-cell-item.vue
View file @ f21fbd7c
<template> <template>
<view @tap="click" class="u-cell-item-box" :class="{'u-cell-border': itemIndex > 0 }" hover-stay-time="150" :hover-class="hover ? 'u-hover-class' : ''" :style="{ <view @tap="click" class="u-cell-item-box" :class="{'u-cell-border': itemIndex > 0 }" hover-stay-time="150"
:hover-class="hover ? 'u-hover-class' : ''" :style="{
backgroundColor: bgColor backgroundColor: bgColor
}"> }">
<view class="u-cell-content"> <view class="u-cell-content">
...@@ -30,7 +31,27 @@ ...@@ -30,7 +31,27 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 警告提示，展现需要关注的信息。
* @tutorial https://www.uviewui.com/components/cell.html
* @property {String} title 左侧标题
* @property {String} icon 左侧图标名，只支持uView内置图标，见Icon 图标
* @property {String} value 右侧内容
* @property {String} label 标题下方的描述信息
* @property {Boolean} border 是否显示每个cell的下边框（默认true）
* @property {Boolean} hover 是否开启点击反馈，hover-class形式，如果右侧通过slot传递switch进去的话，可以将此值设置为false（默认true）
* @property {Boolean} arrow 是否显示右侧箭头（默认true）
* @property {Boolean} arrow-direction 箭头方向，可选值（默认right）
* @property {Object} title-style 标题样式，对象形式
* @property {Object} value-style 右侧内容样式，对象形式
* @property {Object} label-style 标题下方描述信息的样式，对象形式
* @property {String} bg-color 背景颜色（默认#ffffff）
* @property {String Number} index 用于在click事件回调中返回，标识当前是第几个Item
* @example <u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item>
*/
export default { export default {
name: "u-cell-item",
props: { props: {
// 左侧图标名称(只能uView内置图标)，或者图标src // 左侧图标名称(只能uView内置图标)，或者图标src
icon: { icon: {
...@@ -75,21 +96,21 @@ ...@@ -75,21 +96,21 @@
// 控制标题的样式 // 控制标题的样式
titleStyle: { titleStyle: {
type: Object, type: Object,
default() { default () {
return {}; return {};
} }
}, },
// 右侧显示内容的样式 // 右侧显示内容的样式
valueStyle: { valueStyle: {
type: Object, type: Object,
default() { default () {
return {}; return {};
} }
}, },
// 描述信息的样式 // 描述信息的样式
labelStyle: { labelStyle: {
type: Object, type: Object,
default() { default () {
return {}; return {};
} }
}, },
...@@ -116,8 +137,8 @@ ...@@ -116,8 +137,8 @@
computed: { computed: {
arrowStyle() { arrowStyle() {
let style = {}; let style = {};
if(this.arrowDirection == 'top') style.transform = 'rotate(-90deg)'; if (this.arrowDirection == 'top') style.transform = 'rotate(-90deg)';
else if(this.arrowDirection == 'bottom') style.transform = 'rotate(90deg)'; else if (this.arrowDirection == 'bottom') style.transform = 'rotate(90deg)';
else style.transform = 'rotate(0deg)'; else style.transform = 'rotate(0deg)';
return style; return style;
} }
...@@ -137,7 +158,7 @@ ...@@ -137,7 +158,7 @@
} }
.u-cell-border:after { .u-cell-border:after {
left: 32rpx!important; left: 32rpx !important;
position: absolute; position: absolute;
box-sizing: border-box; box-sizing: border-box;
content: ' '; content: ' ';
...@@ -189,6 +210,7 @@ ...@@ -189,6 +210,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
/* #endif */ /* #endif */
.u-icon { .u-icon {
......
uview/components/u-checkbox-group/u-checkbox-group.vue
View file @ f21fbd7c
...@@ -5,6 +5,16 @@ ...@@ -5,6 +5,16 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
* @tutorial https://www.uviewui.com/components/checkbox.html
* @property {String Number} max 最多能选中多少个checkbox（默认999）
* @property {Boolean} disabled 是否禁用所有checkbox（默认false）
* @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff）
* @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象
* @example <u-checkbox-group></u-checkbox-group>
*/
export default { export default {
props: { props: {
// 最多能选中多少个checkbox // 最多能选中多少个checkbox
......
uview/components/u-checkbox/u-checkbox.vue
View file @ f21fbd7c
...@@ -3,12 +3,29 @@ ...@@ -3,12 +3,29 @@
<view class="u-checkbox__icon-wrap" @tap="toggle"> <view class="u-checkbox__icon-wrap" @tap="toggle">
<u-icon :class="iconClass" name="checkbox-mark" :size="iconSize" :color="iconColor" class="u-checkbox__icon" :style="[iconStyle]" /> <u-icon :class="iconClass" name="checkbox-mark" :size="iconSize" :color="iconColor" class="u-checkbox__icon" :style="[iconStyle]" />
</view> </view>
<view class="u-label-class u-checkbox__label" @tap="onClickLabel"><slot /></view> <view class="u-label-class u-checkbox__label" @tap="onClickLabel">
<slot />
</view>
</view> </view>
</template> </template>
<script> <script>
export default { /**
* alertTips 提示
* @description 该组件需要搭配checkboxGroup组件使用，以便用户进行操作时，获得当前复选框组的选中情况。
* @tutorial https://www.uviewui.com/components/checkbox.html
* @property {String Number} icon-size 图标大小，单位rpx（默认24）
* @property {String Number} size 组件整体的大小，单位rpx（默认40）
* @property {String Number} name checkbox组件的标示符
* @property {String} shape 形状，见官网说明（默认circle）
* @property {Boolean} disabled 是否禁用（默认false）
* @property {Boolean} label-disabled 点击文本是否可以操作checkbox（默认true）
* @property {String} active-color 选中时的颜色，如设置CheckboxGroup的active-color将失效
* @event {Function} change 某个checkbox状态发生变化时触发，回调为一个对象
* @example <u-checkbox v-model="checked" :disabled="false">天涯</u-checkbox>
*/
export default {
name: "u-checkbox",
props: { props: {
// checkbox的名称 // checkbox的名称
name: { name: {
...@@ -73,9 +90,9 @@ export default { ...@@ -73,9 +90,9 @@ export default {
iconClass() { iconClass() {
let classs = []; let classs = [];
classs.push('u-checkbox__icon--' + this.shape); classs.push('u-checkbox__icon--' + this.shape);
if(this.value == true) classs.push('u-checkbox__icon--checked'); if (this.value == true) classs.push('u-checkbox__icon--checked');
if(this.disabled || this.parentDisabled) classs.push('u-checkbox__icon--disabled'); if (this.disabled || this.parentDisabled) classs.push('u-checkbox__icon--disabled');
if(this.value && (this.disabled || this.parentDisabled)) classs.push('u-checkbox__icon--disabled--checked'); if (this.value && (this.disabled || this.parentDisabled)) classs.push('u-checkbox__icon--disabled--checked');
return classs; return classs;
}, },
// 激活的颜色，可能受checkboxGroup和本组件的activeColor影响 // 激活的颜色，可能受checkboxGroup和本组件的activeColor影响
...@@ -96,7 +113,10 @@ export default { ...@@ -96,7 +113,10 @@ export default {
} }
}, },
emitEvent() { emitEvent() {
this.$emit('change', {value: this.value, name: this.name}) this.$emit('change', {
value: this.value,
name: this.name
})
this.checkboxGroup.emitEvent(); this.checkboxGroup.emitEvent();
}, },
// 设置input的值，这里通过input事件，设置通过v-model绑定的组件的值 // 设置input的值，这里通过input事件，设置通过v-model绑定的组件的值
...@@ -104,31 +124,31 @@ export default { ...@@ -104,31 +124,31 @@ export default {
// 判断是否超过了可选的最大数量 // 判断是否超过了可选的最大数量
let checkedNum = 0; let checkedNum = 0;
this.checkboxGroup.children.map(val => { this.checkboxGroup.children.map(val => {
if(val.value) checkedNum ++; if (val.value) checkedNum++;
}) })
// 如果原来为选中状态，那么可以取消 // 如果原来为选中状态，那么可以取消
if(this.value == true) { if (this.value == true) {
this.$emit('input', !this.value); this.$emit('input', !this.value);
// 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间 // 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
this.$nextTick(function(){ this.$nextTick(function() {
this.emitEvent(); this.emitEvent();
}) })
} else if(checkedNum < this.checkboxGroup.max && this.value == false) { } else if (checkedNum < this.checkboxGroup.max && this.value == false) {
// 如果原来为未选中状态，需要选中的数量少于父组件中设置的max值，才可以选中 // 如果原来为未选中状态，需要选中的数量少于父组件中设置的max值，才可以选中
this.$emit('input', !this.value); this.$emit('input', !this.value);
// 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间 // 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
this.$nextTick(function(){ this.$nextTick(function() {
this.emitEvent(); this.emitEvent();
}) })
} }
} }
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.u-checkbox { .u-checkbox {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: center; -webkit-align-items: center;
...@@ -136,19 +156,19 @@ export default { ...@@ -136,19 +156,19 @@ export default {
overflow: hidden; overflow: hidden;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
} }
.u-checkbox__icon-wrap, .u-checkbox__icon-wrap,
.u-checkbox__label { .u-checkbox__label {
color: $u-content-color; color: $u-content-color;
} }
.u-checkbox__icon-wrap { .u-checkbox__icon-wrap {
-webkit-flex: none; -webkit-flex: none;
flex: none; flex: none;
} }
.u-checkbox__icon { .u-checkbox__icon {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: center; -webkit-align-items: center;
...@@ -164,44 +184,44 @@ export default { ...@@ -164,44 +184,44 @@ export default {
font-size: 20px; font-size: 20px;
border: 1px solid #c8c9cc; border: 1px solid #c8c9cc;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.u-checkbox__icon--circle { .u-checkbox__icon--circle {
border-radius: 100%; border-radius: 100%;
} }
.u-checkbox__icon--square { .u-checkbox__icon--square {
border-radius: 3px; border-radius: 3px;
} }
.u-checkbox__icon--checked { .u-checkbox__icon--checked {
color: #fff; color: #fff;
background-color: #2979ff; background-color: #2979ff;
border-color: #2979ff; border-color: #2979ff;
} }
.u-checkbox__icon--disabled { .u-checkbox__icon--disabled {
background-color: #ebedf0; background-color: #ebedf0;
border-color: #c8c9cc; border-color: #c8c9cc;
} }
.u-checkbox__icon--disabled--checked { .u-checkbox__icon--disabled--checked {
color: #c8c9cc!important; color: #c8c9cc !important;
} }
.u-checkbox__label { .u-checkbox__label {
word-wrap: break-word; word-wrap: break-word;
margin-left: 10rpx; margin-left: 10rpx;
margin-right: 18rpx; margin-right: 18rpx;
color: $u-content-color; color: $u-content-color;
font-size: 30rpx; font-size: 30rpx;
} }
.u-checkbox__label--disabled { .u-checkbox__label--disabled {
color: #c8c9cc; color: #c8c9cc;
} }
.u-checkbox__label:empty { .u-checkbox__label:empty {
margin: 0; margin: 0;
} }
</style> </style>
uview/components/u-circle-progress/u-circle-progress.vue
View file @ f21fbd7c
...@@ -17,7 +17,22 @@ ...@@ -17,7 +17,22 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
* @tutorial https://www.uviewui.com/components/circleProgress.html
* @property {String Number} percent 圆环进度百分比值，为数值类型，0-100
* @property {String} inactive-color 圆环的底色，默认为灰色(该值无法动态变更)（默认#ececec）
* @property {String} active-color 圆环激活部分的颜色(该值无法动态变更)（默认#19be6b）
* @property {String Number} width 整个圆环组件的宽度，高度默认等于宽度值，单位rpx（默认200）
* @property {String Number} border-width 圆环的边框宽度，单位rpx（默认14）
* @property {String Number} duration 整个圆环执行一圈的时间，单位ms（默认呢1500）
* @property {String} type 如设置，active-color值将会失效
* @property {String} bg-color 整个组件背景颜色，默认为白色
* @example <u-circle-progress active-color="#2979ff" :percent="80"></u-circle-progress>
*/
export default { export default {
name: "u-circle-progress",
props: { props: {
// 圆环进度百分比值 // 圆环进度百分比值
percent: { percent: {
...@@ -95,7 +110,7 @@ ...@@ -95,7 +110,7 @@
computed: { computed: {
// 有type主题时，优先起作用 // 有type主题时，优先起作用
circleColor() { circleColor() {
if(['success', 'error', 'info', 'primary', 'warning'].indexOf(this.type) >= 0) return this.$u.color[this.type]; if (['success', 'error', 'info', 'primary', 'warning'].indexOf(this.type) >= 0) return this.$u.color[this.type];
else return this.activeColor; else return this.activeColor;
} }
}, },
...@@ -114,7 +129,8 @@ ...@@ -114,7 +129,8 @@
this.ctxBg.setLineCap('round'); // 圆环端点的形状为圆形 this.ctxBg.setLineCap('round'); // 圆环端点的形状为圆形
this.ctxBg.beginPath(); // 开始描绘路径 this.ctxBg.beginPath(); // 开始描绘路径
// 设置一个原点(110,110)，半径为100的圆的路径到当前路径 // 设置一个原点(110,110)，半径为100的圆的路径到当前路径
this.ctxBg.arc(this.widthPx / 2, this.widthPx / 2, this.widthPx / 2 - this.borderWidthPx / 2 - 1, 0, 2 * Math.PI, false); this.ctxBg.arc(this.widthPx / 2, this.widthPx / 2, this.widthPx / 2 - this.borderWidthPx / 2 - 1, 0, 2 * Math.PI,
false);
this.ctxBg.stroke(); // 对路径进行描绘 this.ctxBg.stroke(); // 对路径进行描绘
this.ctxBg.draw(); this.ctxBg.draw();
}, },
...@@ -124,11 +140,12 @@ ...@@ -124,11 +140,12 @@
this.ctx.setLineCap('round'); this.ctx.setLineCap('round');
this.ctx.beginPath(); this.ctx.beginPath();
// 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定 // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
if(this.mode == 'more') { if (this.mode == 'more') {
this.ctx.arc(this.widthPx / 2, this.widthPx / 2, this.widthPx / 2 - this.borderWidthPx / 2 - 1, -Math.PI / 2, step * this.ctx.arc(this.widthPx / 2, this.widthPx / 2, this.widthPx / 2 - this.borderWidthPx / 2 - 1, -Math.PI / 2, step *
Math.PI - Math.PI / 2, false); Math.PI - Math.PI / 2, false);
} else { } else {
this.ctx.arc(this.widthPx / 2, this.widthPx / 2, this.widthPx / 2 - this.borderWidthPx / 2 - 1, -Math.PI / 2, Math.PI / 2 - step * this.ctx.arc(this.widthPx / 2, this.widthPx / 2, this.widthPx / 2 - this.borderWidthPx / 2 - 1, -Math.PI / 2, Math
.PI / 2 - step *
Math.PI, false); Math.PI, false);
} }
this.ctx.stroke(); this.ctx.stroke();
......
uview/components/u-collapse-item/u-collapse-item.vue
View file @ f21fbd7c
<template> <template>
<view class="u-collapse-item"> <view class="u-collapse-item">
<view <view class="u-collapse-head" @tap.stop="headClick" hover-class="u-hover-class" :style="[headStyle]">
class="u-collapse-head" <view class="u-collapse-title u-line-1" :style="[{ textAlign: align ? align : 'left' },
@tap.stop="headClick" isShow && activeStyle && !arrow ? activeStyle : '']">
hover-class="u-hover-class"
:style="[headStyle]"
>
<view class="u-collapse-title u-line-1"
:style="[{ textAlign: align ? align : 'left' },
isShow && activeStyle && !arrow ? activeStyle : '']"
>
{{ title }} {{ title }}
</view> </view>
<view class="u-icon-wrap"> <view class="u-icon-wrap">
<u-icon <u-icon v-if="arrow" :color="arrowColor ? arrowColor : $u.color.tipsColor" :class="{ 'u-arrow-down-icon-active': isShow }"
v-if="arrow" class="u-arrow-down-icon" name="arrow-down"></u-icon>
:color="arrowColor ? arrowColor : $u.color.tipsColor"
:class="{ 'u-arrow-down-icon-active': isShow }"
class="u-arrow-down-icon"
name="arrow-down"
></u-icon>
</view> </view>
</view> </view>
<view <view class="u-collapse-body" :style="[{
class="u-collapse-body"
:style="[{
height: isShow ? height + 'px' : '0' height: isShow ? height + 'px' : '0'
}, bodyStyle]" }, bodyStyle]">
> <view class="u-collapse-content" :id="elId">
<view class="u-collapse-content" :id="elId"><slot></slot></view> <slot></slot>
</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { /**
* alertTips 提示
* @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
* @tutorial https://www.uviewui.com/components/collapse.html
* @property {String} title 面板标题
* @property {String Number} index 主要用于事件的回调，标识那个Item被点击
* @property {Boolean} disabled 面板是否可以打开或收起（默认false）
* @property {Boolean} open 设置某个面板的初始状态是否打开（默认false）
* @property {String Number} name 唯一标识符，如不设置，默认用当前collapse-item的索引值
* @property {String} align 标题的对齐方式（默认left）
* @property {Object} active-style 不显示箭头时，可以添加当前选择的collapse-item活动样式，对象形式
* @event {Function} change 某个item被打开或者收起时触发
* @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item>
*/
export default {
name: "u-collapse-item",
props: { props: {
// 标题 // 标题
title: { title: {
...@@ -64,7 +66,7 @@ export default { ...@@ -64,7 +66,7 @@ export default {
//活动样式 //活动样式
activeStyle: { activeStyle: {
type: Object, type: Object,
default() { default () {
return {} return {}
} }
}, },
...@@ -149,19 +151,19 @@ export default { ...@@ -149,19 +151,19 @@ export default {
.exec(); .exec();
} }
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.u-collapse-head { .u-collapse-head {
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: $u-main-color; color: $u-main-color;
} }
.u-collapse-title { .u-collapse-title {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
margin-right: 14rpx; margin-right: 14rpx;
...@@ -170,27 +172,27 @@ export default { ...@@ -170,27 +172,27 @@ export default {
line-height: 1; line-height: 1;
padding: 24rpx 0; padding: 24rpx 0;
text-align: left; text-align: left;
} }
.u-arrow-down-icon { .u-arrow-down-icon {
transition: all 0.3s; transition: all 0.3s;
margin-right: 24rpx; margin-right: 24rpx;
} }
.u-arrow-down-icon-active { .u-arrow-down-icon-active {
transform: rotate(180deg); transform: rotate(180deg);
transform-origin: center center; transform-origin: center center;
} }
.u-collapse-body { .u-collapse-body {
overflow: hidden; overflow: hidden;
transition: all 0.3s; transition: all 0.3s;
} }
.u-collapse-content { .u-collapse-content {
overflow: hidden; overflow: hidden;
font-size: 28rpx; font-size: 28rpx;
color: $u-tips-color; color: $u-tips-color;
text-align: left; text-align: left;
} }
</style> </style>
uview/components/u-collapse/u-collapse.vue
View file @ f21fbd7c
...@@ -5,7 +5,20 @@ ...@@ -5,7 +5,20 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 通过折叠面板收纳内容区域
* @tutorial https://www.uviewui.com/components/collapse.html
* @property {Boolean} accordion 是否手风琴模式（默认true）
* @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
* @property {String} arrow-color 标题右侧箭头的颜色（默认#909399）
* @property {String} head-bg-color 标题的背景颜色（默认#ffffff）
* @property {String} body-bg-color 主体内容的背景颜色（默认#ffffff）
* @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)
* @example <u-collapse></u-collapse>
*/
export default { export default {
name:"u-collapse",
props: { props: {
// 是否手风琴模式 // 是否手风琴模式
accordion: { accordion: {
...@@ -15,14 +28,14 @@ ...@@ -15,14 +28,14 @@
// 头部的样式 // 头部的样式
headStyle: { headStyle: {
type: Object, type: Object,
default() { default () {
return {} return {}
} }
}, },
// 主体的样式 // 主体的样式
bodyStyle: { bodyStyle: {
type: Object, type: Object,
default() { default () {
return {} return {}
} }
}, },
...@@ -60,7 +73,7 @@ ...@@ -60,7 +73,7 @@
} }
}) })
// 如果是手风琴模式，只有一个匹配结果，也即activeItem长度为1，将其转为字符串 // 如果是手风琴模式，只有一个匹配结果，也即activeItem长度为1，将其转为字符串
if(this.accordion) activeItem = activeItem.join(''); if (this.accordion) activeItem = activeItem.join('');
this.$emit('change', activeItem); this.$emit('change', activeItem);
} }
} }
......
uview/components/u-empty/u-empty.vue
View file @ f21fbd7c
...@@ -17,8 +17,25 @@ ...@@ -17,8 +17,25 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
* @tutorial https://www.uviewui.com/components/empty.html
* @property {String} color 文字颜色（默认#c0c4cc）
* @property {String} text 文字提示（默认“无内容”）
* @property {String} src 自定义图标路径，如定义，mode参数会失效
* @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
* @property {String} mode 内置的图标，见官网说明（默认data）
* @property {String Number} img-width 图标的宽度，单位rpx（默认240）
* @property {String} img-height 图标的高度，单位rpx（默认auto）
* @property {Boolean} show 是否显示组件（默认true）
* @event {Function} click 点击组件时触发
* @event {Function} close 点击关闭按钮时触发
* @example <u-empty text="所谓伊人，在水一方" mode="list"></u-empty>
*/
import icon from "./icon.js"; import icon from "./icon.js";
export default { export default {
name: "u-empty",
props: { props: {
// 图标路径 // 图标路径
src: { src: {
......
uview/components/u-field/u-field.vue
View file @ f21fbd7c
<template> <template>
<view class="u-field" :class="{'u-field-border': itemIndex > 0 }"> <view class="u-field" :class="{'u-field-border': itemIndex > 0 }">
<view class="u-field-inner" :class="[type == 'textarea' ? 'u-textarea-inner' : '', 'u-label-postion-' + labelPostion]"> <view class="u-field-inner" :class="[type == 'textarea' ? 'u-textarea-inner' : '', 'u-label-postion-' + labelPostion]">
<view class="u-label" :class="[required ? 'u-required' : '']" <view class="u-label" :class="[required ? 'u-required' : '']" :style="{
:style="{
justifyContent: justifyContent, justifyContent: justifyContent,
flex: labelPostion == 'left' ? `0 0 ${labelWidth}rpx` : '1' flex: labelPostion == 'left' ? `0 0 ${labelWidth}rpx` : '1'
}"> }">
...@@ -13,24 +12,10 @@ ...@@ -13,24 +12,10 @@
<text class="u-label-text" :class="[this.$slots.icon || icon ? 'u-label-left-gap' : '']">{{ label }}</text> <text class="u-label-text" :class="[this.$slots.icon || icon ? 'u-label-left-gap' : '']">{{ label }}</text>
</view> </view>
<view class="fild-body"> <view class="fild-body">
<textarea <textarea v-if="type == 'textarea'" class="u-input-class u-textarea-class" :style="[inputStyle]" :value="value"
v-if="type == 'textarea'" :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" :maxlength="inputMaxlength"
class="u-input-class u-textarea-class" :focus="focus" :autoHeight="autoHeight" :fixed="fixed" @input="onInput" @blur="onBlur" @focus="onFocus" @confirm="onConfirm"
:style="[inputStyle]" @tap="fieldClick" />
:value="value"
:placeholder="placeholder"
:placeholderStyle="placeholderStyle"
:disabled="disabled"
:maxlength="inputMaxlength"
:focus="focus"
:autoHeight="autoHeight"
:fixed="fixed"
@input="onInput"
@blur="onBlur"
@focus="onFocus"
@confirm="onConfirm"
@tap="fieldClick"
/>
<input <input
v-else v-else
:style="[inputStyle]" :style="[inputStyle]"
...@@ -62,7 +47,40 @@ ...@@ -62,7 +47,40 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 借助此组件，可以实现表单的输入， 有"text"和"textarea"类型的，此外，借助uView的picker和actionSheet组件可以快速实现上拉菜单，时间，地区选择等， 为表单解决方案的利器。
* @tutorial https://www.uviewui.com/components/field.html
* @property {String} type 输入框的类型（默认text）
* @property {String} icon label左边的图标，限uView的图标名称
* @property {Boolean} right-icon 输入框右边的（默认false）
* @property {Boolean} required 是否必填，左边您显示红色"*"号（默认false）
* @property {String} label 输入框左边的文字提示
* @property {Boolean} password 是否密码输入方式(用点替换文字)，type为text时有效（默认false）
* @property {Boolean} clearable 是否显示右侧清空内容的图标控件(输入框有内容，且获得焦点时才显示)，点击可清空输入框内容（默认true）
* @property {Number String} label-width label的宽度，单位rpx（默认130）
* @property {String} label-align label的文字对齐方式（默认left）
* @property {String} input-align 输入框内容对齐方式（默认left）
* @property {String} icon-color 左边通过icon配置的图标的颜色（默认#606266）
* @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效（默认true）
* @property {String Boolean} error-message 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
* @property {String} placeholder 输入框的提示文字
* @property {String} placeholder-style placeholder的样式(内联样式，字符串)，如"color: #ddd"
* @property {Boolean} focus 是否自动获得焦点（默认false）
* @property {Boolean} fixed 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true（默认false）
* @property {Boolean} disabled 是否不可输入（默认false）
* @property {Number String} maxlength 最大输入长度，设置为 -1 的时候不限制最大长度（默认140）
* @property {String} confirm-type 设置键盘右下角按钮的文字，仅在type="text"时生效（默认done）
* @event {Function} input 输入框内容发生变化时触发
* @event {Function} focus 输入框获得焦点时触发
* @event {Function} blur 输入框失去焦点时触发
* @event {Function} confirm 点击完成按钮时触发
* @event {Function} right-icon-click 通过right-icon生成的图标被点击时触发
* @event {Function} click 输入框被点击或者通过right-icon生成的图标被点击时触发，这样设计是考虑到传递右边的图标，一般都为需要弹出"picker"等操作时的场景，点击倒三角图标，理应发出此事件，见上方说明
* @example <u-field v-model="mobile" label="手机号" required :error-message="errorMessage"></u-field>
*/
export default { export default {
name:"u-field",
props: { props: {
icon: String, icon: String,
rightIcon: String, rightIcon: String,
......
uview/components/u-grid-item/u-grid-item.vue
View file @ f21fbd7c
<template> <template>
<view <view class="u-grid-item" :class="[showBorder ? 'u-border-right u-border-bottom' : '']" :hover-class="hoverClass ? 'u-grid-item-hover' : ''"
class="u-grid-item" :hover-stay-time="200" @tap="click" :style="{
:class="[showBorder ? 'u-border-right u-border-bottom' : '']"
:hover-class="hoverClass ? 'u-grid-item-hover' : ''"
:hover-stay-time="200"
@tap="click"
:style="{
background: bgColor, background: bgColor,
width: width + 'px' width: width + 'px'
}" }">
>
<view class="u-grid-item-box"> <view class="u-grid-item-box">
<slot /> <slot />
</view> </view>
...@@ -17,7 +11,17 @@ ...@@ -17,7 +11,17 @@
</template> </template>
<script> <script>
export default { /**
* alertTips 提示
* @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。搭配<u-grid>使用
* @tutorial https://www.uviewui.com/components/grid.html
* @property {String} bg-color 宫格的背景颜色（默认#ffffff）
* @property {String Number} index 点击宫格时，返回的值
* @event {Function} click 点击宫格触发
* @example <u-grid-item></u-grid-item>
*/
export default {
name: "u-grid-item",
props: { props: {
// 背景颜色 // 背景颜色
bgColor: { bgColor: {
...@@ -61,12 +65,11 @@ export default { ...@@ -61,12 +65,11 @@ export default {
this.uGrid.click(this.index); this.uGrid.click(this.index);
} }
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.u-grid-item {
.u-grid-item {
box-sizing: border-box; box-sizing: border-box;
background: #fff; background: #fff;
display: flex; display: flex;
...@@ -75,27 +78,27 @@ export default { ...@@ -75,27 +78,27 @@ export default {
position: relative; position: relative;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
} }
.u-grid-item-hover { .u-grid-item-hover {
background: #f7f7f7 !important; background: #f7f7f7 !important;
} }
.u-grid-marker-box { .u-grid-marker-box {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
line-height: 0; line-height: 0;
} }
.u-grid-marker-wrap { .u-grid-marker-wrap {
position: absolute; position: absolute;
} }
.u-grid-item-box { .u-grid-item-box {
padding: 30rpx 0; padding: 30rpx 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
} }
</style> </style>
uview/components/u-icon/u-icon.vue
View file @ f21fbd7c
...@@ -3,13 +3,27 @@ ...@@ -3,13 +3,27 @@
color: color, color: color,
fontSize: size + 'rpx', fontSize: size + 'rpx',
fontWeight: bold ? 'bold' :　'normal', fontWeight: bold ? 'bold' :　'normal',
}" @tap="click" :hover-class="hoverClass" @touchstart="touchstart"> }"
@tap="click" :hover-class="hoverClass" @touchstart="touchstart">
</text> </text>
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 基于字体的图标集，包含了大多数常见场景的图标。
* @tutorial https://www.uviewui.com/components/icon.html
* @property {String} name 图标名称，见示例图标集
* @property {String} color 图标颜色（默认inherit）
* @property {String Number} size 图标字体大小，单位rpx（默认32）
* @property {String} index 一个用于区分多个图标的值，点击图标时通过click事件传出
* @property {String} hover-class 图标按下去的样式类，用法同uni的view组件的hover-class参数，详情见官网
* @event {Function} click 点击图标时触发
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
*/
export default { export default {
name: "u-icon",
props: { props: {
// 图标类名 // 图标类名
name: { name: {
...@@ -57,7 +71,7 @@ ...@@ -57,7 +71,7 @@
let classes = []; let classes = [];
classes.push(this.customPrefix + '-' + this.name); classes.push(this.customPrefix + '-' + this.name);
// uView的自定义图标类名为u-iconfont // uView的自定义图标类名为u-iconfont
if(this.customPrefix == 'uicon') classes.push('u-iconfont'); if (this.customPrefix == 'uicon') classes.push('u-iconfont');
else classes.push(this.customPrefix); else classes.push(this.customPrefix);
return classes; return classes;
} }
......
uview/components/u-index-anchor/u-index-anchor.vue
View file @ f21fbd7c
...@@ -10,7 +10,18 @@ ...@@ -10,7 +10,18 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
* @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props
* @property {Boolean} use-slot 是否使用自定义内容的插槽（默认false）
* @property {String Number} index 索引字符，如果定义了use-slot，此参数自动失效
* @property {Object} custStyle 自定义样式，对象形式，如"{color: 'red'}"
* @event {Function} default 锚点位置显示内容，默认为索引字符
* @example <u-index-anchor :index="item" />
*/
export default { export default {
name: "u-index-anchor",
props: { props: {
useSlot: { useSlot: {
type: Boolean, type: Boolean,
...@@ -22,7 +33,7 @@ ...@@ -22,7 +33,7 @@
}, },
customStyle: { customStyle: {
type: Object, type: Object,
default() { default () {
return {} return {}
} }
} }
......
uview/components/u-index-list/u-index-list.vue
View file @ f21fbd7c
<template> <template>
<view class="u-index-bar"> <view class="u-index-bar">
<slot /> <slot />
<view v-if="showSidebar" class="u-index-bar__sidebar" @touchstart.stop.prevent="onTouchMove" @touchmove.stop.prevent="onTouchMove" @touchend.stop.prevent="onTouchStop" <view v-if="showSidebar" class="u-index-bar__sidebar" @touchstart.stop.prevent="onTouchMove" @touchmove.stop.prevent="onTouchMove"
@touchcancel.stop.prevent="onTouchStop"> @touchend.stop.prevent="onTouchStop" @touchcancel.stop.prevent="onTouchStop">
<view v-for="(item, index) in indexList" :key="index" class="u-index-bar__index" :style="{zIndex: zIndex + 1, color: activeAnchorIndex === index ? activeColor : ''}" <view v-for="(item, index) in indexList" :key="index" class="u-index-bar__index" :style="{zIndex: zIndex + 1, color: activeAnchorIndex === index ? activeColor : ''}"
:data-index="index"> :data-index="index">
{{ item }} {{ item }}
...@@ -17,6 +17,19 @@ ...@@ -17,6 +17,19 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
* @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props
* @property {Number String} scroll-top 当前滚动高度，自定义组件无法获得滚动条事件，所以依赖接入方传入
* @property {Array[string number]} index-list 索引字符列表，数组（默认A-Z）
* @property {Number String} z-index 锚点吸顶时的层级（默认965）
* @property {Boolean} sticky 是否开启锚点自动吸顶（默认true）
* @property {Number String} offset-top 锚点自动吸顶时与顶部的距离（默认0）
* @property {String} highlight-color 锚点和右边索引字符高亮颜色（默认#2979ff）
* @event {Function} select 选中右边索引字符时触发
* @example <u-index-list :scrollTop="scrollTop"></u-index-list>
*/
var indexList = function() { var indexList = function() {
var indexList = []; var indexList = [];
var charCodeOfA = 'A'.charCodeAt(0); var charCodeOfA = 'A'.charCodeAt(0);
...@@ -26,6 +39,7 @@ ...@@ -26,6 +39,7 @@
return indexList; return indexList;
}; };
export default { export default {
name: "u-index-list",
props: { props: {
sticky: { sticky: {
type: Boolean, type: Boolean,
......
uview/components/u-keyboard/u-keyboard.vue
View file @ f21fbd7c
<template> <template>
<u-popup class="" :mask="mask" :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose"> <u-popup class="" :mask="mask" :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
:safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose">
<slot /> <slot />
<view class="u-tooltip" v-if="tooltip"> <view class="u-tooltip" v-if="tooltip">
<view class="u-tooltip-item u-tooltip-cancel" hover-class="u-tooltip-cancel-hover" @tap="onCancel"> <view class="u-tooltip-item u-tooltip-cancel" hover-class="u-tooltip-cancel-hover" @tap="onCancel">
...@@ -22,7 +23,29 @@ ...@@ -22,7 +23,29 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 此为uViw自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3中模式，都有可以打乱按键顺序的选项。
* @tutorial https://www.uviewui.com/components/keyboard.html
* @property {String} mode 键盘类型，见官网基本使用的说明（默认number）
* @property {Boolean} dot-enabled 是否显示"."按键，只在mode=number时有效（默认true）
* @property {Boolean} tooltip 是否显示键盘顶部工具条（默认true）
* @property {String} tips 工具条中间的提示文字，见上方基本使用的说明，如不需要，请传""空字符
* @property {Boolean} cancel-btn 是否显示工具条左边的"取消"按钮（默认true）
* @property {Boolean} confirm-btn 是否显示工具条右边的"完成"按钮（默认true）
* @property {Boolean} mask 是否显示遮罩（默认true）
* @property {Number String} z-index 弹出键盘的z-index值（默认1075）
* @property {Boolean} random 是否打乱键盘按键的顺序（默认false）
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Boolean} mask-close-able 是否允许点击遮罩收起键盘（默认true）
* @event {Function} change 按键被点击(不包含退格键被点击)
* @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
* @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
* @event {Function} backspace 键盘退格键被点击
* @example <u-keyboard mode="number" v-model="show"></u-keyboard>
*/
export default { export default {
name: "u-keyboard",
props: { props: {
// 键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘 // 键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘
mode: { mode: {
......
uview/components/u-line-progress/u-line-progress.vue
View file @ f21fbd7c
...@@ -9,7 +9,23 @@ ...@@ -9,7 +9,23 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
* @tutorial https://www.uviewui.com/components/lineProgress.html
* @property {String Number} percent 进度条百分比值，为数值类型，0-100
* @property {Boolean} round 进度条两端是否为半圆（默认true）
* @property {String} type 如设置，active-color值将会失效
* @property {String} active-color 进度条激活部分的颜色（默认#19be6b）
* @property {String} inactive-color 进度条的底色（默认#ececec）
* @property {Boolean} show-percent 是否在进度条内部显示当前的百分比值数值（默认true）
* @property {String Number} height 进度条的高度，单位rpx（默认28）
* @property {Boolean} striped 是否显示进度条激活部分的条纹（默认false）
* @property {Boolean} striped-active 条纹是否具有动态效果（默认false）
* @example <u-line-progress :percent="70" :show-percent="true"></u-line-progress>
*/
export default { export default {
name: "u-line-progress",
props: { props: {
// 两端是否显示半圆形 // 两端是否显示半圆形
round: { round: {
...@@ -99,7 +115,7 @@ ...@@ -99,7 +115,7 @@
transition: all 0.4s ease; transition: all 0.4s ease;
} }
.u-striped{ .u-striped {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 39px 39px; background-size: 39px 39px;
} }
...@@ -112,6 +128,7 @@ ...@@ -112,6 +128,7 @@
0% { 0% {
background-position: 0 0; background-position: 0 0;
} }
100% { 100% {
background-position: 39px 0; background-position: 39px 0;
} }
......
uview/components/u-link/u-link.vue
View file @ f21fbd7c
...@@ -10,7 +10,20 @@ ...@@ -10,7 +10,20 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 该组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。
* @tutorial https://www.uviewui.com/components/link.html
* @property {String} color 文字颜色（默认#606266）
* @property {String Number} font-size 字体大小，单位rpx（默认28）
* @property {Boolean} under-line 是否显示下划线（默认false）
* @property {String} href 跳转的链接，要带上http(s)
* @property {String} line-color 下划线颜色，默认同color参数颜色
* @property {String} mp-tips 各个小程序平台把链接复制到粘贴板后的提示语（默认“链接已复制，请在浏览器打开”）
* @example <u-link href="http://www.uviewui.com">蜀道难，难于上青天</u-link>
*/
export default { export default {
name: "u-link",
props: { props: {
// 文字颜色 // 文字颜色
color: { color: {
......
uview/components/u-loading/u-loading.vue
View file @ f21fbd7c
<template> <template>
<view <view v-if="show" class="u-loading" :class="mode == 'circle' ? 'u-loading-circle' : 'u-loading-flower'" :style="[cricleStyle]">
v-if="show"
class="u-loading"
:class="mode == 'circle' ? 'u-loading-circle' : 'u-loading-flower'"
:style="[cricleStyle]"
>
</view> </view>
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
* @tutorial https://www.uviewui.com/components/loading.html
* @property {String} mode 模式选择，见官网说明（默认circle）
* @property {String} color 动画活动区域的颜色，只对 mode = flower 模式有效（默认#c7c7c7）
* @property {String Number} size 加载图标的大小，单位rpx（默认34）
* @property {Boolean} show 是否显示动画（默认true）
* @example <u-loading mode="circle"></u-loading>
*/
export default { export default {
name: "u-loading",
props: { props: {
// 动画的类型 // 动画的类型
mode: { mode: {
...@@ -38,7 +44,7 @@ ...@@ -38,7 +44,7 @@
let style = {}; let style = {};
style.width = this.size + 'rpx'; style.width = this.size + 'rpx';
style.height = this.size + 'rpx'; style.height = this.size + 'rpx';
if(this.mode == 'circle') style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${this.color ? this.color : '#c7c7c7'}`; if (this.mode == 'circle') style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${this.color ? this.color : '#c7c7c7'}`;
return style; return style;
}, },
} }
......
uview/components/u-mask/u-mask.vue
View file @ f21fbd7c
...@@ -5,7 +5,21 @@ ...@@ -5,7 +5,21 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
* @tutorial https://www.uviewui.com/components/mask.html
* @property {Boolean} show 是否显示遮罩（默认false）
* @property {String Number} z-index z-index 层级（默认1070）
* @property {Object} custom-style 自定义样式对象，见上方说明
* @property {String Number} duration 动画时长，单位毫秒（默认300）
* @property {Boolean} zoom 是否使用scale对这招进行缩放（默认true）
* @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true）
* @event {Function} click mask-click-able为true时，点击遮罩发送此事件
* @example <u-mask :show="show" @click="show = false"></u-mask>
*/
export default { export default {
name: "u-mask",
props: { props: {
// 是否显示遮罩 // 是否显示遮罩
show: { show: {
...@@ -59,7 +73,7 @@ ...@@ -59,7 +73,7 @@
}, },
methods: { methods: {
click() { click() {
if(!this.maskClickAble) return ; if (!this.maskClickAble) return;
this.$emit('click'); this.$emit('click');
} }
} }
......
uview/components/u-no-network/u-no-network.vue
View file @ f21fbd7c
...@@ -19,7 +19,18 @@ ...@@ -19,7 +19,18 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 该组件无需任何配置，引入即可，内部自动处理所有功能和事件。
* @tutorial https://www.uviewui.com/components/noNetwork.html
* @property {String} tips 没有网络时的提示语（默认哎呀，网络信号丢失）
* @property {String Number} zIndex 组件的z-index值（默认1080）
* @property {String} image 无网络的图片提示，可用的src地址或base64图片
* @event {Function} retry 用户点击页面的"重试"按钮时触发
* @example <u-no-network></u-no-network>
*/
export default { export default {
name: "u-no-network",
props: { props: {
// 页面文字提示 // 页面文字提示
tips: { tips: {
......
uview/components/u-number-box/u-number-box.vue
View file @ f21fbd7c
<template> <template>
<view class="u-numberbox"> <view class="u-numberbox">
<view <view class="u-icon-minus" @tap="minus" :class="{ 'u-icon-disabled': disabled || inputVal <= min }" :style="{
class="u-icon-minus"
@tap="minus"
:class="{ 'u-icon-disabled': disabled || inputVal <= min }"
:style="{
background: bgColor, background: bgColor,
height: inputHeight + 'rpx', height: inputHeight + 'rpx',
color: color color: color
}" }">
>
<u-icon name="minus" :size="size"></u-icon> <u-icon name="minus" :size="size"></u-icon>
</view> </view>
<input <input :disabled="disabled" :class="{ 'u-input-disabled': disabled }" v-model="inputVal" class="u-number-input" @blur="onBlur"
:disabled="disabled" type="number" :style="{
:class="{ 'u-input-disabled': disabled }"
v-model="inputVal"
class="u-number-input"
@blur="onBlur"
type="number"
:style="{
color: color, color: color,
fontSize: size + 'rpx', fontSize: size + 'rpx',
background: bgColor, background: bgColor,
height: inputHeight + 'rpx', height: inputHeight + 'rpx',
width: inputWidth + 'rpx' width: inputWidth + 'rpx'
}" }" />
/> <view class="u-icon-plus" @tap="plus" :class="{ 'u-icon-disabled': disabled || inputVal >= max }" :style="{
<view
class="u-icon-plus"
@tap="plus"
:class="{ 'u-icon-disabled': disabled || inputVal >= max }"
:style="{
background: bgColor, background: bgColor,
height: inputHeight + 'rpx', height: inputHeight + 'rpx',
color: color color: color
}" }">
>
<u-icon name="plus" :size="size"></u-icon> <u-icon name="plus" :size="size"></u-icon>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { /**
* alertTips 提示
* @description 该组件一般用于商城购物选择物品数量的场景。注意：该输入框只能输入大于或等于0的整数，不支持小数输入
* @tutorial https://www.uviewui.com/components/numberBox.html
* @property {Number} value 输入框初始值（默认1）
* @property {String} bg-color 输入框和按钮的背景颜色（默认#F2F3F5）
* @property {Number} min 用户可输入的最小值（默认0）
* @property {Number} max 用户可输入的最大值（默认99999）
* @property {Number} step 步长，每次加或减的值（默认1）
* @property {Boolean} disabled 是否禁用操作，禁用后无法加减或手动修改输入框的值（默认false）
* @property {String Number} size 输入框文字和按钮字体大小，单位rpx（默认26）
* @property {String} color 输入框文字和加减按钮图标的颜色（默认#323233）
* @property {String Number} input-width 输入框宽度，单位rpx（默认80）
* @property {String Number} input-height 输入框和按钮的高度，单位rpx（默认50）
* @property {String Number} index 事件回调时用以区分当前发生变化的是哪个输入框
* @event {Function} change 输入框内容发生变化时触发，对象形式
* @event {Function} blur 输入框失去焦点时触发，对象形式
* @event {Function} minus 点击减少按钮时触发(按钮可点击情况下)，对象形式
* @event {Function} plus 点击增加按钮时触发(按钮可点击情况下)，对象形式
* @example <u-number-box :min="1" :max="100"></u-number-box>
*/
export default {
name: "u-number-box",
props: { props: {
// 预显示的数字 // 预显示的数字
value: { value: {
...@@ -107,11 +112,11 @@ export default { ...@@ -107,11 +112,11 @@ export default {
}, },
inputVal(v1, v2) { inputVal(v1, v2) {
// 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串 // 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
if(v1 == '') return ; if (v1 == '') return;
let value = 0; let value = 0;
// 首先判断是否正整数，并且在min和max之间，如果不是，使用原来值 // 首先判断是否正整数，并且在min和max之间，如果不是，使用原来值
let tmp = /(^\d+$)/.test(v1) && value[0] != 0; let tmp = /(^\d+$)/.test(v1) && value[0] != 0;
if(tmp && v1 >= this.min && v1 <= this.max) value = v1; if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
else value = v2; else value = v2;
this.handleChange(value, 'change'); this.handleChange(value, 'change');
this.$nextTick(() => { this.$nextTick(() => {
...@@ -191,7 +196,7 @@ export default { ...@@ -191,7 +196,7 @@ export default {
let value = event.detail.value; let value = event.detail.value;
// 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值 // 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
// 这里不直接判断是否正整数，是因为用户传递的props min值可能为0 // 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
if(!/(^\d+$)/.test(value) || value[0] == 0) val = this.min; if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min;
val = +value; val = +value;
if (val > this.max) { if (val > this.max) {
val = this.max; val = this.max;
...@@ -211,16 +216,16 @@ export default { ...@@ -211,16 +216,16 @@ export default {
}) })
} }
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.u-numberbox { .u-numberbox {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
.u-number-input { .u-number-input {
position: relative; position: relative;
text-align: center; text-align: center;
padding: 0; padding: 0;
...@@ -228,31 +233,31 @@ export default { ...@@ -228,31 +233,31 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.u-icon-plus, .u-icon-plus,
.u-icon-minus { .u-icon-minus {
width: 60rpx; width: 60rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.u-icon-plus { .u-icon-plus {
border-radius: 0 8rpx 8rpx 0; border-radius: 0 8rpx 8rpx 0;
} }
.u-icon-minus { .u-icon-minus {
border-radius: 8rpx 0 0 8rpx; border-radius: 8rpx 0 0 8rpx;
} }
.u-icon-disabled { .u-icon-disabled {
color: #c8c9cc !important; color: #c8c9cc !important;
background: #f7f8fa !important; background: #f7f8fa !important;
} }
.u-input-disabled { .u-input-disabled {
color: #c8c9cc !important; color: #c8c9cc !important;
background-color: #f2f3f5 !important; background-color: #f2f3f5 !important;
} }
</style> </style>
uview/components/u-picker/u-picker.vue
View file @ f21fbd7c
<template> <template>
<u-popup :maskCloseAble="maskCloseAble" mode="bottom" <u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
:popup="false" v-model="value" length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
:safeAreaInsetBottom="safeAreaInsetBottom"
@close="close" :z-index="uZIndex"
>
<view class="u-datetime-picker" @tap.stop> <view class="u-datetime-picker" @tap.stop>
<view class="u-picker-header" @touchmove.stop.prevent="stop" catchtouchmove="stop"> <view class="u-picker-header" @touchmove.stop.prevent="stop" catchtouchmove="stop">
<view class="u-btn-picker u-tips-color" :style="{ color: cancelColor }" hover-class="u-opacity" :hover-stay-time="150" <view class="u-btn-picker u-tips-color" :style="{ color: cancelColor }" hover-class="u-opacity" :hover-stay-time="150"
@tap="getResult('cancel')">取消</view> @tap="getResult('cancel')">取消</view>
<view class="u-btn-picker u-type-primary" :style="{ color: confirmColor }" hover-class="u-opacity" <view class="u-btn-picker u-type-primary" :style="{ color: confirmColor }" hover-class="u-opacity" :hover-stay-time="150"
:hover-stay-time="150" @touchmove.stop="" @tap.stop="getResult('confirm')">确定</view> @touchmove.stop="" @tap.stop="getResult('confirm')">确定</view>
</view> </view>
<view class="u-picker-body"> <view class="u-picker-body">
<picker-view v-if="mode == 'region'" :value="valueArr" @change="change" class="u-picker-view"> <picker-view v-if="mode == 'region'" :value="valueArr" @change="change" class="u-picker-view">
...@@ -73,10 +70,32 @@ ...@@ -73,10 +70,32 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 此选择器有两种弹出模式：一是时间模式，可以配置年，日，月，时，分，秒参数 二是地区模式，可以配置省，市，区参数
* @tutorial https://www.uviewui.com/components/picker.html
* @property {Object} params 需要显示的参数，见官网说明
* @property {String} mode 模式选择，region-地区类型，time-时间类型（默认time）
* @property {String Number} start-year 可选的开始年份，mode=time时有效（默认1950）
* @property {String Number} end-year 可选的结束年份，mode=time时有效（默认2050）
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {String} cancel-color 取消按钮的颜色（默认#606266）
* @property {String} confirm-color 确认按钮的颜色（默认#2979ff）
* @property {String} default-time 默认选中的时间，mode=time时有效
* @property {String} default-region 默认选中的地区，中文形式，mode=region时有效
* @property {String} default-code 默认选中的地区，编号形式，mode=region时有效
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
* @property {String Number} z-index 弹出时的z-index值（默认1075）
* @event {Function} confirm 点击确定按钮，返回当前选择的值
* @event {Function} cancel 点击取消按钮，返回当前选择的值
* @example <u-picker v-model="show" mode="time"></u-picker>
*/
import provinces from '@/uview/libs/util/province.js'; import provinces from '@/uview/libs/util/province.js';
import citys from '@/uview/libs/util/city.js'; import citys from '@/uview/libs/util/city.js';
import areas from '@/uview/libs/util/area.js'; import areas from '@/uview/libs/util/area.js';
export default { export default {
name: "u-picker",
props: { props: {
// picker中需要显示的参数 // picker中需要显示的参数
params: { params: {
...@@ -218,11 +237,11 @@ ...@@ -218,11 +237,11 @@
// watch监听月份的变化，实时变更日的天数，因为不同月份，天数不一样 // watch监听月份的变化，实时变更日的天数，因为不同月份，天数不一样
// 一个月可能有30，31天，甚至闰年2月的29天，平年2月28天 // 一个月可能有30，31天，甚至闰年2月的29天，平年2月28天
yearAndMonth(val) { yearAndMonth(val) {
if(this.params.year) this.setDays(); if (this.params.year) this.setDays();
}, },
// 微信和QQ小程序由于一些奇怪的原因，需要重新初始化才能显示正确的值 // 微信和QQ小程序由于一些奇怪的原因，需要重新初始化才能显示正确的值
value(n) { value(n) {
if(n) { if (n) {
// #ifdef MP-WEIXIN || MP-QQ // #ifdef MP-WEIXIN || MP-QQ
this.reset = true; this.reset = true;
setTimeout(() => this.init(), 10); setTimeout(() => this.init(), 10);
...@@ -326,9 +345,9 @@ ...@@ -326,9 +345,9 @@
let index = 0; let index = 0;
// 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, xxx)做法 // 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, xxx)做法
// 因为this.month和this.year变化时，会触发watch中的this.setDays()，导致this.valueArr.length计算有误 // 因为this.month和this.year变化时，会触发watch中的this.setDays()，导致this.valueArr.length计算有误
if(this.params.year && this.params.month) index = 2; if (this.params.year && this.params.month) index = 2;
else if(this.params.month) index = 1; else if (this.params.month) index = 1;
else if(this.params.year) index = 1; else if (this.params.year) index = 1;
else index = 0; else index = 0;
this.valueArr.splice(index, 1, this.getIndex(this.days, this.day)); this.valueArr.splice(index, 1, this.getIndex(this.days, this.day));
}, },
...@@ -440,7 +459,7 @@ ...@@ -440,7 +459,7 @@
if (this.params.city) result.city = citys[this.province][this.city]; if (this.params.city) result.city = citys[this.province][this.city];
if (this.params.area) result.area = areas[this.province][this.city][this.area]; if (this.params.area) result.area = areas[this.province][this.city][this.area];
} }
if(event) this.$emit(event, result); if (event) this.$emit(event, result);
this.close(); this.close();
} }
} }
......
uview/components/u-popup/u-popup.vue
View file @ f21fbd7c
<template> <template>
<view v-if="visibleSync" :style="[customStyle]" :class="{ 'u-drawer-visible': showDrawer }" class="u-drawer"> <view v-if="visibleSync" :style="[customStyle]" :class="{ 'u-drawer-visible': showDrawer }" class="u-drawer">
<u-mask :maskClickAble="maskCloseAble" :show="showDrawer && mask" @click="maskClick"></u-mask> <u-mask :maskClickAble="maskCloseAble" :show="showDrawer && mask" @click="maskClick"></u-mask>
<view <view class="u-drawer-content" @tap="modeCenterClose(mode)" :class="[
class="u-drawer-content"
@tap="modeCenterClose(mode)"
:class="[
safeAreaInsetBottom ? 'safe-area-inset-bottom' : '', safeAreaInsetBottom ? 'safe-area-inset-bottom' : '',
'u-drawer-' + mode, 'u-drawer-' + mode,
showDrawer ? 'u-drawer-content-visible' : '', showDrawer ? 'u-drawer-content-visible' : '',
zoom && mode == 'center' ? 'u-animation-zoom' : '' zoom && mode == 'center' ? 'u-animation-zoom' : ''
]" ]"
@touchmove.stop.prevent @touchmove.stop.prevent :style="[style]">
:style="[style]" <view class="u-mode-center-box" @touchmove.stop.prevent v-if="mode == 'center'" :style="[centerStyle]">
> <slot />
<view class="u-mode-center-box" @touchmove.stop.prevent v-if="mode == 'center'" :style="[centerStyle]"><slot /></view> </view>
<block v-else><slot /></block> <block v-else>
<slot />
</block>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { /**
name: 'uDrawer', * alertTips 提示
* @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
* @tutorial https://www.uviewui.com/components/popup.html
* @property {String} mode 弹出方向（默认left）
* @property {Boolean} mask 是否显示遮罩（默认true）
* @property {String Number} length mode=left | 见官网说明（默认auto）
* @property {Boolean} zoom 是否开启缩放动画，只在mode为center时有效（默认true）
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true）
* @property {Object} custom-style 用户自定义样式
* @property {Number String} border-radius 弹窗圆角值（默认0）
* @property {Number String} z-index 弹出内容的z-index值（默认1075）
* @event {Function} open 弹出层打开
* @event {Function} close 弹出层收起
* @example <u-popup v-model="show"><view>出淤泥而不染，濯清涟而不妖</view></u-popup>
*/
export default {
name: 'u-popup',
props: { props: {
/** /**
* 显示状态 * 显示状态
...@@ -68,7 +84,7 @@ export default { ...@@ -68,7 +84,7 @@ export default {
// 用户自定义样式 // 用户自定义样式
customStyle: { customStyle: {
type: Object, type: Object,
default() { default () {
return {}; return {};
} }
}, },
...@@ -138,7 +154,8 @@ export default { ...@@ -138,7 +154,8 @@ export default {
case 'bottom': case 'bottom':
style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`; style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`;
break; break;
default: ; default:
;
} }
// 不加可能圆角无效 // 不加可能圆角无效
style.overflow = 'hidden'; style.overflow = 'hidden';
...@@ -151,7 +168,7 @@ export default { ...@@ -151,7 +168,7 @@ export default {
let length = (/%$/.test(this.length) || this.length == 'auto') ? this.length : uni.upx2px(this.length) + 'px'; let length = (/%$/.test(this.length) || this.length == 'auto') ? this.length : uni.upx2px(this.length) + 'px';
style.width = length; style.width = length;
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.popup; style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.popup;
if(this.borderRadius) { if (this.borderRadius) {
style.borderRadius = `${this.borderRadius}rpx`; style.borderRadius = `${this.borderRadius}rpx`;
// 不加可能圆角无效 // 不加可能圆角无效
style.overflow = 'hidden'; style.overflow = 'hidden';
...@@ -210,11 +227,11 @@ export default { ...@@ -210,11 +227,11 @@ export default {
); );
} }
} }
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.u-drawer { .u-drawer {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
...@@ -225,46 +242,46 @@ export default { ...@@ -225,46 +242,46 @@ export default {
bottom: 0; bottom: 0;
overflow: hidden; overflow: hidden;
z-index: 999; z-index: 999;
} }
.u-drawer-content { .u-drawer-content {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
position: absolute; position: absolute;
z-index: 1003; z-index: 1003;
transition: all 0.25s linear; transition: all 0.25s linear;
} }
.u-drawer-left { .u-drawer-left {
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: #ffffff; background-color: #ffffff;
} }
.u-drawer-right { .u-drawer-right {
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: #ffffff; background-color: #ffffff;
} }
.u-drawer-top { .u-drawer-top {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: #ffffff; background-color: #ffffff;
} }
.u-drawer-bottom { .u-drawer-bottom {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: #ffffff; background-color: #ffffff;
} }
.u-drawer-center { .u-drawer-center {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -277,9 +294,9 @@ export default { ...@@ -277,9 +294,9 @@ export default {
align-items: center; align-items: center;
opacity: 0; opacity: 0;
z-index: 99999; z-index: 99999;
} }
.u-mode-center-box { .u-mode-center-box {
min-width: 100rpx; min-width: 100rpx;
min-height: 100rpx; min-height: 100rpx;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -287,22 +304,22 @@ export default { ...@@ -287,22 +304,22 @@ export default {
/* #endif */ /* #endif */
position: relative; position: relative;
background-color: #ffffff; background-color: #ffffff;
} }
.u-drawer-content-visible.u-drawer-center { .u-drawer-content-visible.u-drawer-center {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
} }
.u-animation-zoom { .u-animation-zoom {
transform: scale(1.15); transform: scale(1.15);
} }
.u-drawer-content-visible { .u-drawer-content-visible {
transform: translate3D(0px, 0px, 0px) !important; transform: translate3D(0px, 0px, 0px) !important;
} }
.u-drawer-mask { .u-drawer-mask {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
...@@ -314,12 +331,12 @@ export default { ...@@ -314,12 +331,12 @@ export default {
right: 0; right: 0;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition: opacity 0.25s; transition: opacity 0.25s;
} }
.u-drawer-mask-visible { .u-drawer-mask-visible {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
opacity: 1; opacity: 1;
} }
</style> </style>
uview/components/u-radio-group/u-radio-group.vue
View file @ f21fbd7c
...@@ -5,7 +5,17 @@ ...@@ -5,7 +5,17 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配<u-radio>使用
* @tutorial https://www.uviewui.com/components/radio.html
* @property {Boolean} disabled 是否禁用所有radio（默认false）
* @property {String} active-color 选中时的颜色，应用到所有子Radio组件（默认#2979ff）
* @event {Function} change 任一个radio状态发生变化时触发
* @example <u-radio-group v-model="value"></u-radio-group>
*/
export default { export default {
name: "u-radio-group",
props: { props: {
// 是否禁用所有单选框 // 是否禁用所有单选框
disabled: { disabled: {
...@@ -39,7 +49,7 @@ ...@@ -39,7 +49,7 @@
// 通过emit事件，设置父组件通过v-model双向绑定的值 // 通过emit事件，设置父组件通过v-model双向绑定的值
this.$emit('input', val); this.$emit('input', val);
// 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间 // 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
this.$nextTick(function(){ this.$nextTick(function() {
this.$emit('change', this.value); this.$emit('change', this.value);
}); });
} }
......
uview/components/u-radio/u-radio.vue
View file @ f21fbd7c
...@@ -3,12 +3,29 @@ ...@@ -3,12 +3,29 @@
<view class="u-radio__icon-wrap" @tap="toggle"> <view class="u-radio__icon-wrap" @tap="toggle">
<u-icon :class="iconClass" name="checkbox-mark" :size="iconSize" :color="iconColor" class="u-radio__icon" :style="[iconStyle]" /> <u-icon :class="iconClass" name="checkbox-mark" :size="iconSize" :color="iconColor" class="u-radio__icon" :style="[iconStyle]" />
</view> </view>
<view class="u-label-class u-radio__label" @tap="onClickLabel"><slot /></view> <view class="u-label-class u-radio__label" @tap="onClickLabel">
<slot />
</view>
</view> </view>
</template> </template>
<script> <script>
export default { /**
* alertTips 提示
* @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配<u-radio-group>使用
* @tutorial https://www.uviewui.com/components/radio.html
* @property {String Number} icon-size 图标大小，单位rpx（默认24）
* @property {String Number} size 组件整体的大小，单位rpx（默认40）
* @property {String Number} name radio组件的标示符
* @property {String} shape 形状，见上方说明（默认circle）
* @property {Boolean} disabled 是否禁用（默认false）
* @property {Boolean} label-disabled 点击文本是否可以操作radio（默认true）
* @property {String} active-color 选中时的颜色，如设置radioGroup的active-color将失效
* @event {Function} change 某个radio状态发生变化时触发(选中状态)
* @example <u-radio :label-disabled="false">门掩黄昏，无计留春住</u-radio>
*/
export default {
name: "u-radio",
props: { props: {
// radio的名称 // radio的名称
name: { name: {
...@@ -68,9 +85,10 @@ export default { ...@@ -68,9 +85,10 @@ export default {
iconClass() { iconClass() {
let classs = []; let classs = [];
classs.push('u-radio__icon--' + this.shape); classs.push('u-radio__icon--' + this.shape);
if(this.name == this.radioGroup.value) classs.push('u-radio__icon--checked'); if (this.name == this.radioGroup.value) classs.push('u-radio__icon--checked');
if(this.disabled || this.parentDisabled) classs.push('u-radio__icon--disabled'); if (this.disabled || this.parentDisabled) classs.push('u-radio__icon--disabled');
if(this.name == this.radioGroup.value && (this.disabled || this.parentDisabled)) classs.push('u-radio__icon--disabled--checked'); if (this.name == this.radioGroup.value && (this.disabled || this.parentDisabled)) classs.push(
'u-radio__icon--disabled--checked');
return classs; return classs;
}, },
// 激活的颜色，可能受radioGroup和本组件的activeColor影响 // 激活的颜色，可能受radioGroup和本组件的activeColor影响
...@@ -96,11 +114,11 @@ export default { ...@@ -96,11 +114,11 @@ export default {
this.$emit('change', this.name) this.$emit('change', this.name)
}, },
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.u-radio { .u-radio {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: center; -webkit-align-items: center;
...@@ -108,19 +126,19 @@ export default { ...@@ -108,19 +126,19 @@ export default {
overflow: hidden; overflow: hidden;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
} }
.u-radio__icon-wrap, .u-radio__icon-wrap,
.u-radio__label { .u-radio__label {
color: $u-content-color; color: $u-content-color;
} }
.u-radio__icon-wrap { .u-radio__icon-wrap {
-webkit-flex: none; -webkit-flex: none;
flex: none; flex: none;
} }
.u-radio__icon { .u-radio__icon {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: center; -webkit-align-items: center;
...@@ -136,44 +154,44 @@ export default { ...@@ -136,44 +154,44 @@ export default {
font-size: 20px; font-size: 20px;
border: 1px solid #c8c9cc; border: 1px solid #c8c9cc;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.u-radio__icon--circle { .u-radio__icon--circle {
border-radius: 100%; border-radius: 100%;
} }
.u-radio__icon--square { .u-radio__icon--square {
border-radius: 3px; border-radius: 3px;
} }
.u-radio__icon--checked { .u-radio__icon--checked {
color: #fff; color: #fff;
background-color: #2979ff; background-color: #2979ff;
border-color: #2979ff; border-color: #2979ff;
} }
.u-radio__icon--disabled { .u-radio__icon--disabled {
background-color: #ebedf0; background-color: #ebedf0;
border-color: #c8c9cc; border-color: #c8c9cc;
} }
.u-radio__icon--disabled--checked { .u-radio__icon--disabled--checked {
color: #c8c9cc!important; color: #c8c9cc !important;
} }
.u-radio__label { .u-radio__label {
word-wrap: break-word; word-wrap: break-word;
margin-left: 10rpx; margin-left: 10rpx;
margin-right: 18rpx; margin-right: 18rpx;
color: $u-content-color; color: $u-content-color;
font-size: 30rpx; font-size: 30rpx;
} }
.u-radio__label--disabled { .u-radio__label--disabled {
color: #c8c9cc; color: #c8c9cc;
} }
.u-radio__label:empty { .u-radio__label:empty {
margin: 0; margin: 0;
} }
</style> </style>
uview/components/u-rate/u-rate.vue
View file @ f21fbd7c
...@@ -11,7 +11,24 @@ ...@@ -11,7 +11,24 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 该组件一般用于满意度调查，星型评分的场景
* @tutorial https://www.uviewui.com/components/rate.html
* @property {String Number} count 最多可选的星星数量（默认5）
* @property {String Number} current 默认选中的星星数量（默认0）
* @property {Boolean} disabled 是否禁止用户操作（默认false）
* @property {String Number} size 星星的大小，单位rpx（默认32）
* @property {String} inactive-color 未选中星星的颜色（默认#b2b2b2）
* @property {String} active-color 选中的星星颜色（默认#FA3534）
* @property {String} gutter 星星之间的距离（默认#323233）
* @property {String Number} min-count 最少选中星星的个数（默认0）
* @property {Boolean} allow-half 是否允许半星选择（默认false）
* @event {Function} change 选中的星星发生变化时触发
* @example <u-rate :count="count" :current="2"></u-rate>
*/
export default { export default {
name: "u-rate",
props: { props: {
// 要显示的星星数量 // 要显示的星星数量
count: { count: {
...@@ -108,7 +125,7 @@ ...@@ -108,7 +125,7 @@
} }
this.starWidth = res.width; this.starWidth = res.width;
// 把每个星星右边到组件盒子左边的距离放入数组中 // 把每个星星右边到组件盒子左边的距离放入数组中
for(let i = 0; i < this.count; i ++) { for (let i = 0; i < this.count; i++) {
this.starWidthArr[i] = (i + 1) * this.starWidth; this.starWidthArr[i] = (i + 1) * this.starWidth;
} }
}).exec() }).exec()
...@@ -133,7 +150,7 @@ ...@@ -133,7 +150,7 @@
let index = Math.ceil(distance / this.starWidth); let index = Math.ceil(distance / this.starWidth);
this.activeIndex = index > this.count ? this.count : index; this.activeIndex = index > this.count ? this.count : index;
// 对最少颗星星的限制 // 对最少颗星星的限制
if(this.activeIndex < this.minCount) this.activeIndex = this.minCount; if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
this.$emit('change', this.activeIndex) this.$emit('change', this.activeIndex)
}, },
// 通过点击，直接选中 // 通过点击，直接选中
...@@ -142,7 +159,7 @@ ...@@ -142,7 +159,7 @@
return; return;
} }
// 半星选择，尚未实现 // 半星选择，尚未实现
if(this.allowHalf) { if (this.allowHalf) {
} }
// 对第一个星星特殊处理，只有一个的时候，点击可以取消，否则无法作0星评价 // 对第一个星星特殊处理，只有一个的时候，点击可以取消，否则无法作0星评价
...@@ -153,7 +170,7 @@ ...@@ -153,7 +170,7 @@
this.activeIndex = index; this.activeIndex = index;
} }
// 对最少颗星星的限制 // 对最少颗星星的限制
if(this.activeIndex < this.minCount) this.activeIndex = this.minCount; if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
this.$emit('change', this.activeIndex) this.$emit('change', this.activeIndex)
}, },
}, },
......
uview/components/u-read-more/u-read-more.vue
View file @ f21fbd7c
...@@ -16,7 +16,20 @@ ...@@ -16,7 +16,20 @@
</template> </template>
<script> <script>
export default { /**
* alertTips 提示
* @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
* @tutorial https://www.uviewui.com/components/readMore.html
* @property {String Number} show-height 内容超出此高度才会显示展开全文按钮，单位rpx（默认400）
* @property {Boolean} toggle 展开后是否显示收起按钮（默认false）
* @property {String} close-text 关闭时的提示文字（默认“展开阅读全文”）
* @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
* @property {String} open-text 展开时的提示文字（默认“收起”）
* @property {String} color 提示文字的颜色（默认#2979ff）
* @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
*/
export default {
name: "u-read-more",
props: { props: {
// 默认的显示占位高度，单位为px // 默认的显示占位高度，单位为px
showHeight: { showHeight: {
...@@ -88,23 +101,23 @@ export default { ...@@ -88,23 +101,23 @@ export default {
toggleReadMore() { toggleReadMore() {
this.showMore = !this.showMore; this.showMore = !this.showMore;
// 如果toggle为false，隐藏"收起"部分的内容 // 如果toggle为false，隐藏"收起"部分的内容
if(this.toggle == false) this.isLongContent = false; if (this.toggle == false) this.isLongContent = false;
} }
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.u-content { .u-content {
font-size: 30rpx; font-size: 30rpx;
color: $u-content-color; color: $u-content-color;
line-height: 1.8; line-height: 1.8;
text-align: left; text-align: left;
text-indent: 2em; text-indent: 2em;
overflow: hidden; overflow: hidden;
} }
.u-showmore-wrap { .u-showmore-wrap {
position: relative; position: relative;
width: 100%; width: 100%;
background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%); background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%);
...@@ -114,22 +127,22 @@ export default { ...@@ -114,22 +127,22 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.u-show-more { .u-show-more {
padding-top: 0; padding-top: 0;
background: none; background: none;
margin-top: 20rpx; margin-top: 20rpx;
} }
.u-readmore-btn { .u-readmore-btn {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
line-height: 1; line-height: 1;
} }
.u-icon { .u-icon {
margin-left: 14rpx; margin-left: 14rpx;
} }
</style> </style>
uview/components/u-skeleton/u-skeleton.vue
View file @ f21fbd7c
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
top: top + 'px', top: top + 'px',
zIndex: 9998, zIndex: 9998,
overflow: 'hidden' overflow: 'hidden'
}" @touchmove.stop.prevent> }"
@touchmove.stop.prevent>
<view v-for="(item, index) in RectNodes" :key="$u.guid()" :class="[animation ? 'skeleton-fade' : '']" :style="{ <view v-for="(item, index) in RectNodes" :key="$u.guid()" :class="[animation ? 'skeleton-fade' : '']" :style="{
width: item.width + 'px', width: item.width + 'px',
height: item.height + 'px', height: item.height + 'px',
...@@ -39,7 +40,19 @@ ...@@ -39,7 +40,19 @@
</template> </template>
<script> <script>
/**
* alertTips 提示
* @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
* @tutorial https://www.uviewui.com/components/skeleton.html
* @property {String} el-color 骨架块状元素的背景颜色（默认#e5e5e5）
* @property {String} bg-color 骨架组件背景颜色（默认#ffffff）
* @property {Boolean} animation 骨架块是否显示动画效果（默认false）
* @property {String Number} border-radius u-skeleton-fillet类名元素，对应的骨架块的圆角大小，单位rpx（默认10）
* @property {Boolean} loading 是否显示骨架组件，请求完成后，将此值设置为false（默认true）
* @example <u-skeleton :loading="true" :animation="true"></u-skeleton>
*/
export default { export default {
name: "u-skeleton",
props: { props: {
// 需要渲染的元素背景颜色，十六进制或者rgb等都可以 // 需要渲染的元素背景颜色，十六进制或者rgb等都可以
elColor: { elColor: {
......
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