订单
This commit is contained in:
170
node_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue
generated
vendored
Normal file
170
node_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue
generated
vendored
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<u-popup mode="bottom" :border-radius="borderRadius" :popup="false" v-model="value" :maskCloseAble="maskCloseAble"
|
||||
length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose" :z-index="uZIndex">
|
||||
<view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
|
||||
{{tips.text}}
|
||||
</view>
|
||||
<block v-for="(item, index) in list" :key="index">
|
||||
<view @touchmove.stop.prevent @tap="itemClick(index)" :style="[itemStyle(index)]" class="u-action-sheet-item" :class="[index < list.length - 1 ? 'u-border-bottom' : '']"
|
||||
hover-class="u-hover-class" :hover-stay-time="150">
|
||||
{{item.text}}
|
||||
</view>
|
||||
</block>
|
||||
<view class="u-gab" v-if="cancelBtn">
|
||||
</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" @tap="close">{{cancelText}}</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* actionSheet 操作菜单
|
||||
* @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
|
||||
* @tutorial https://www.uviewui.com/components/actionSheet.html
|
||||
* @property {Array<Object>} list 按钮的文字数组，见官方文档示例
|
||||
* @property {Object} tips 顶部的提示文字，见官方文档示例
|
||||
* @property {String} cancel-text 取消按钮的提示文字
|
||||
* @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）
|
||||
* @property {String} cancel-text 取消按钮的提示文字
|
||||
* @event {Function} click 点击ActionSheet列表项时触发
|
||||
* @event {Function} close 点击取消按钮时触发
|
||||
* @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
|
||||
*/
|
||||
export default {
|
||||
name: "u-action-sheet",
|
||||
props: {
|
||||
// 点击遮罩是否可以关闭actionsheet
|
||||
maskCloseAble: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
// 如下
|
||||
// return [{
|
||||
// text: '确定',
|
||||
// color: '',
|
||||
// fontSize: ''
|
||||
// }]
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 顶部的提示文字
|
||||
tips: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
text: '',
|
||||
color: '',
|
||||
fontSize: '26'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 底部的取消按钮
|
||||
cancelBtn: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 通过双向绑定控制组件的弹出与收起
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 弹出的顶部圆角值
|
||||
borderRadius: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 弹出的z-index值
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 取消按钮的文字提示
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 顶部提示的样式
|
||||
tipsStyle() {
|
||||
let style = {};
|
||||
if (this.tips.color) style.color = this.tips.color;
|
||||
if (this.tips.fontSize) style.fontSize = this.tips.fontSize + 'rpx';
|
||||
return style;
|
||||
},
|
||||
// 操作项目的样式
|
||||
itemStyle() {
|
||||
return (index) => {
|
||||
let style = {};
|
||||
if (this.list[index].color) style.color = this.list[index].color;
|
||||
if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + 'rpx';
|
||||
return style;
|
||||
}
|
||||
},
|
||||
uZIndex() {
|
||||
// 如果用户有传递z-index值，优先使用
|
||||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击取消按钮
|
||||
close() {
|
||||
// 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数
|
||||
// 这是一个vue发送事件的特殊用法
|
||||
this.popupClose();
|
||||
this.$emit('close');
|
||||
},
|
||||
// 弹窗关闭
|
||||
popupClose() {
|
||||
this.$emit('input', false);
|
||||
},
|
||||
// 点击某一个itemif (!this.show) return;
|
||||
itemClick(index) {
|
||||
this.$emit('click', index);
|
||||
this.$emit('input', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-tips {
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
padding: 34rpx 0;
|
||||
line-height: 1;
|
||||
color: $u-tips-color;
|
||||
}
|
||||
|
||||
.u-action-sheet-item {
|
||||
display: flex;
|
||||
line-height: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 34rpx;
|
||||
padding: 34rpx 0;
|
||||
}
|
||||
|
||||
.u-gab {
|
||||
height: 12rpx;
|
||||
background-color: rgb(234, 234, 236);
|
||||
}
|
||||
|
||||
.u-actionsheet-cancel {
|
||||
color: $u-main-color;
|
||||
}
|
||||
</style>
|
||||
189
node_modules/uview-ui/components/u-alert-tips/u-alert-tips.vue
generated
vendored
Normal file
189
node_modules/uview-ui/components/u-alert-tips/u-alert-tips.vue
generated
vendored
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<view class="u-alert-tips" v-if="show" :class="{'u-close-alert-tips': !show}" :style="{
|
||||
backgroundColor: computeBgColor,
|
||||
borderColor: computeBorderColor
|
||||
}">
|
||||
<view class="u-icon-wrap">
|
||||
<u-icon v-if="showIcon" :name="$u.type2icon(type)" :size="description ? 40 : 32" class="u-icon" :color="computeColor"></u-icon>
|
||||
</view>
|
||||
<view class="u-alert-content" @tap.stop="click">
|
||||
<view class="u-alert-title" :style="{fontWeight: description ? 500 : 'normal'}">
|
||||
{{title}}
|
||||
</view>
|
||||
<view v-if="description" class="u-alert-desc">
|
||||
{{description}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-icon-wrap">
|
||||
<u-icon @click="close" v-if="closeAble && !closeText" hoverClass="u-type-error-hover-color" name="close" color="#c0c4cc"
|
||||
:size="22" class="u-close-icon" :style="{
|
||||
top: description ? '18rpx' : '24rpx'
|
||||
}"></u-icon>
|
||||
</view>
|
||||
<text v-if="closeAble && closeText" class="u-close-text" :style="{
|
||||
top: description ? '18rpx' : '24rpx'
|
||||
}">{{closeText}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* alertTips 警告提示
|
||||
* @description 警告提示，展现需要关注的信息
|
||||
* @tutorial https://uviewui.com/components/alertTips.html
|
||||
* @property {String} title 显示的标题文字
|
||||
* @property {String} description 辅助性文字，颜色比title浅一点，字号也小一点，可选
|
||||
* @property {String} type 关闭按钮(默认为叉号icon图标)
|
||||
* @property {String} close-able 用文字替代关闭图标，close-able为true时有效
|
||||
* @property {Boolean} show-icon 是否显示左边的辅助图标
|
||||
* @property {Boolean} show 显示或隐藏组件
|
||||
* @event {Function} click 点击组件时触发
|
||||
* @event {Function} close 点击关闭按钮时触发
|
||||
*/
|
||||
export default {
|
||||
name: 'u-alert-tips',
|
||||
props: {
|
||||
// 显示文字
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 主题，success/warning/info/error
|
||||
type: {
|
||||
type: String,
|
||||
default: 'warning'
|
||||
},
|
||||
// 辅助性文字
|
||||
description: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否可关闭
|
||||
closeAble: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 关闭按钮自定义文本
|
||||
closeText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否显示图标
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 文字颜色，如果定义了color值，icon会失效
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 边框颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否显示
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 计算字体颜色，如果没有自定义的，就用uview主题颜色
|
||||
computeColor() {
|
||||
if (this.color) return this.color;
|
||||
else return this.$u.color[this.type];
|
||||
},
|
||||
// 计算背景颜色
|
||||
computeBgColor() {
|
||||
if (this.bgColor) return this.bgColor;
|
||||
return this.$u.color[this.type + 'Light'];
|
||||
},
|
||||
computeBorderColor() {
|
||||
if (this.borderColor) return this.borderColor;
|
||||
return this.$u.color[this.type + 'Disabled'];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击内容
|
||||
click() {
|
||||
this.$emit('click');
|
||||
},
|
||||
// 点击关闭按钮
|
||||
close() {
|
||||
this.$emit('close');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-alert-tips {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 30rpx;
|
||||
border-radius: 8rpx;
|
||||
position: relative;
|
||||
transition: all 0.3s linear;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.u-close-alert-tips {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@keyframes myfirst {
|
||||
from {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
to {
|
||||
height: 0
|
||||
}
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.u-alert-title {
|
||||
font-size: 28rpx;
|
||||
color: $u-main-color;
|
||||
}
|
||||
|
||||
.u-alert-desc {
|
||||
font-size: 26rpx;
|
||||
text-align: left;
|
||||
color: $u-content-color;
|
||||
}
|
||||
|
||||
.u-close-icon {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
}
|
||||
|
||||
.u-close-hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.u-close-text {
|
||||
font-size: 24rpx;
|
||||
color: $u-tips-color;
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
283
node_modules/uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue
generated
vendored
Normal file
283
node_modules/uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue
generated
vendored
Normal file
@@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }">
|
||||
<canvas
|
||||
class="cropper"
|
||||
:disable-scroll="true"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd"
|
||||
:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
|
||||
canvas-id="cropper"
|
||||
></canvas>
|
||||
<canvas
|
||||
class="cropper"
|
||||
:disable-scroll="true"
|
||||
:style="{
|
||||
position: 'fixed',
|
||||
top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`,
|
||||
left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`,
|
||||
width: `${cropperOpt.width * cropperOpt.pixelRatio}px`,
|
||||
height: `${cropperOpt.height * cropperOpt.pixelRatio}`
|
||||
}"
|
||||
canvas-id="targetId"
|
||||
></canvas>
|
||||
</view>
|
||||
<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="upload" @tap="uploadTap">选择图片</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 -->
|
||||
<view class="upload" @tap="uploadTap">重新选择</view>
|
||||
<!-- #endif -->
|
||||
<view class="getCropperImage" @tap="getCropperImage(false)">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WeCropper from './weCropper.js';
|
||||
export default {
|
||||
props: {
|
||||
// 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
|
||||
// mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
|
||||
boundStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
lineWidth: 4,
|
||||
borderColor: 'rgb(245, 245, 245)',
|
||||
mask: 'rgba(0, 0, 0, 0.35)'
|
||||
};
|
||||
}
|
||||
}
|
||||
// // 裁剪框宽度，单位rpx
|
||||
// rectWidth: {
|
||||
// type: [String, Number],
|
||||
// default: 400
|
||||
// },
|
||||
// // 裁剪框高度，单位rpx
|
||||
// rectHeight: {
|
||||
// type: [String, Number],
|
||||
// default: 400
|
||||
// },
|
||||
// // 输出图片宽度，单位rpx
|
||||
// destWidth: {
|
||||
// type: [String, Number],
|
||||
// default: 400
|
||||
// },
|
||||
// // 输出图片高度，单位rpx
|
||||
// destHeight: {
|
||||
// type: [String, Number],
|
||||
// default: 400
|
||||
// },
|
||||
// // 输出的图片类型，如果发现裁剪的图片很大，可能是因为设置为了"png"，改成"jpg"即可
|
||||
// fileType: {
|
||||
// type: String,
|
||||
// default: 'jpg',
|
||||
// },
|
||||
// // 生成的图片质量
|
||||
// // H5上无效，目前不考虑使用此参数
|
||||
// quality: {
|
||||
// type: [Number, String],
|
||||
// default: 1
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 底部导航的高度
|
||||
bottomNavHeight: 50,
|
||||
originWidth: 200,
|
||||
width: 0,
|
||||
height: 0,
|
||||
cropperOpt: {
|
||||
id: 'cropper',
|
||||
targetId: 'targetCropper',
|
||||
pixelRatio: 1,
|
||||
width: 0,
|
||||
height: 0,
|
||||
scale: 2.5,
|
||||
zoom: 8,
|
||||
cut: {
|
||||
x: (this.width - this.originWidth) / 2,
|
||||
y: (this.height - this.originWidth) / 2,
|
||||
width: this.originWidth,
|
||||
height: this.originWidth
|
||||
},
|
||||
boundStyle: {
|
||||
lineWidth: uni.upx2px(this.boundStyle.lineWidth),
|
||||
mask: this.boundStyle.mask,
|
||||
color: this.boundStyle.borderColor
|
||||
}
|
||||
},
|
||||
// 裁剪框和输出图片的尺寸，高度默认等于宽度
|
||||
// 输出图片宽度，单位px
|
||||
destWidth: 200,
|
||||
// 裁剪框宽度，单位px
|
||||
rectWidth: 200,
|
||||
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
|
||||
fileType: 'jpg'
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
let rectInfo = uni.getSystemInfoSync();
|
||||
this.width = rectInfo.windowWidth;
|
||||
this.height = rectInfo.windowHeight - this.bottomNavHeight;
|
||||
this.cropperOpt.width = this.width;
|
||||
this.cropperOpt.height = this.height;
|
||||
this.cropperOpt.pixelRatio = rectInfo.pixelRatio;
|
||||
|
||||
if (option.destWidth) this.destWidth = option.destWidth;
|
||||
if (option.rectWidth) {
|
||||
let rectWidth = Number(option.rectWidth);
|
||||
this.cropperOpt.cut = {
|
||||
x: (this.width - rectWidth) / 2,
|
||||
y: (this.height - rectWidth) / 2,
|
||||
width: rectWidth,
|
||||
height: rectWidth
|
||||
};
|
||||
}
|
||||
this.rectWidth = option.rectWidth;
|
||||
if (option.fileType) this.fileType = option.fileType;
|
||||
// 初始化
|
||||
this.cropper = new WeCropper(this.cropperOpt)
|
||||
.on('ready', ctx => {
|
||||
// console.log(`wecropper is ready for work!`)
|
||||
})
|
||||
.on('beforeImageLoad', ctx => {
|
||||
// console.log(`before picture loaded, i can do something`)
|
||||
})
|
||||
.on('imageLoad', ctx => {
|
||||
// console.log(`picture loaded`)
|
||||
})
|
||||
.on('beforeDraw', (ctx, instance) => {
|
||||
// console.log(`before canvas draw,i can do something`)
|
||||
});
|
||||
// 设置导航栏样式，以免用户在page.json中没有设置为黑色背景
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#000000'
|
||||
});
|
||||
uni.chooseImage({
|
||||
count: 1, // 默认9
|
||||
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success: res => {
|
||||
let src = res.tempFilePaths[0];
|
||||
// 获取裁剪图片资源后，给data添加src属性及其值
|
||||
this.cropper.pushOrign(src);
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
touchStart(e) {
|
||||
this.cropper.touchStart(e);
|
||||
},
|
||||
touchMove(e) {
|
||||
this.cropper.touchMove(e);
|
||||
},
|
||||
touchEnd(e) {
|
||||
this.cropper.touchEnd(e);
|
||||
},
|
||||
getCropperImage(isPre = false) {
|
||||
let cropper_opt = {
|
||||
destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值
|
||||
destWidth: Number(this.destWidth),
|
||||
fileType: this.fileType
|
||||
};
|
||||
this.cropper.getCropperImage(cropper_opt, (path, err) => {
|
||||
if (err) {
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: err.message
|
||||
});
|
||||
} else {
|
||||
if (isPre) {
|
||||
uni.previewImage({
|
||||
current: '', // 当前显示图片的 http 链接
|
||||
urls: [path] // 需要预览的图片 http 链接列表
|
||||
});
|
||||
} else {
|
||||
uni.$emit('uAvatarCropper', path);
|
||||
this.$u.route({
|
||||
type: 'back'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadTap() {
|
||||
const self = this;
|
||||
uni.chooseImage({
|
||||
count: 1, // 默认9
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success(res) {
|
||||
const src = res.tempFilePaths[0];
|
||||
// 获取裁剪图片资源后，给data添加src属性及其值
|
||||
|
||||
self.cropper.pushOrign(src);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.cropper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 99999999999999;
|
||||
}
|
||||
|
||||
.cropper-buttons {
|
||||
background-color: #000000;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.cropper-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cropper-buttons {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.cropper-buttons .upload,
|
||||
.cropper-buttons .getCropperImage {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cropper-buttons .upload {
|
||||
text-align: left;
|
||||
padding-left: 50rpx;
|
||||
}
|
||||
|
||||
.cropper-buttons .getCropperImage {
|
||||
text-align: right;
|
||||
padding-right: 50rpx;
|
||||
}
|
||||
</style>
|
||||
1265
node_modules/uview-ui/components/u-avatar-cropper/weCropper.js
generated
vendored
Normal file
1265
node_modules/uview-ui/components/u-avatar-cropper/weCropper.js
generated
vendored
Normal file
File diff suppressed because it is too large
Load Diff
120
node_modules/uview-ui/components/u-avatar/u-avatar.vue
generated
vendored
Normal file
120
node_modules/uview-ui/components/u-avatar/u-avatar.vue
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
145
node_modules/uview-ui/components/u-back-top/u-back-top.vue
generated
vendored
Normal file
145
node_modules/uview-ui/components/u-back-top/u-back-top.vue
generated
vendored
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<view @tap="backToTop" class="u-back-top" :class="['u-back-top--mode--' + mode]" :style="[{
|
||||
bottom: bottom + 'rpx',
|
||||
right: right + 'rpx',
|
||||
borderRadius: mode == 'circle' ? '10000rpx' : '8rpx',
|
||||
zIndex: uZIndex,
|
||||
opacity: opacity
|
||||
}, customStyle]">
|
||||
<view class="" v-if="!$slots.default">
|
||||
<u-icon @click="backToTop" :name="icon" :custom-style="iconStyle"></u-icon>
|
||||
<view class="u-back-top__tips">
|
||||
{{tips}}
|
||||
</view>
|
||||
</view>
|
||||
<slot v-else />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'u-back-top',
|
||||
props: {
|
||||
// 返回顶部的形状，circle-圆形，square-方形
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'circle'
|
||||
},
|
||||
// 自定义图标
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'arrow-upward'
|
||||
},
|
||||
// 提示文字
|
||||
tips: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 返回顶部滚动时间
|
||||
duration: {
|
||||
type: [Number, String],
|
||||
default: 100
|
||||
},
|
||||
// 滚动距离
|
||||
scrollTop: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 距离顶部多少距离显示，单位rpx
|
||||
top: {
|
||||
type: [Number, String],
|
||||
default: 400
|
||||
},
|
||||
// 返回顶部按钮到底部的距离，单位rpx
|
||||
bottom: {
|
||||
type: [Number, String],
|
||||
default: 200
|
||||
},
|
||||
// 返回顶部按钮到右边的距离，单位rpx
|
||||
right: {
|
||||
type: [Number, String],
|
||||
default: 40
|
||||
},
|
||||
// 层级
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: '9'
|
||||
},
|
||||
// 图标的样式，对象形式
|
||||
iconStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
color: '#909399',
|
||||
fontSize: '38rpx'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 整个组件的样式
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showBackTop(nVal, oVal) {
|
||||
// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
|
||||
// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
|
||||
if(nVal) {
|
||||
this.uZIndex = this.zIndex;
|
||||
this.opacity = 1;
|
||||
} else {
|
||||
this.uZIndex = -1;
|
||||
this.opacity = 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showBackTop() {
|
||||
// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
|
||||
// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
|
||||
return this.scrollTop > uni.upx2px(this.top);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 不透明度，为了让组件有一个显示和隐藏的过渡动画
|
||||
opacity: 0,
|
||||
// 组件的z-index值，隐藏时设置为-1，就会看不到
|
||||
uZIndex: -1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
backToTop() {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
duration: this.duration
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-back-top {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-color: #E1E1E1;
|
||||
color: $u-content-color;
|
||||
align-items: center;
|
||||
transition: opacity 0.4s;
|
||||
|
||||
&__tips {
|
||||
font-size: 24rpx;
|
||||
transform: scale(0.8);
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
193
node_modules/uview-ui/components/u-badge/u-badge.vue
generated
vendored
Normal file
193
node_modules/uview-ui/components/u-badge/u-badge.vue
generated
vendored
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<view v-if="show" class="u-badge-box" :class="[isDot ? 'u-badge-dot' : 'u-badge', size == 'mini' ? 'u-badge-mini' : '']" :style="[{
|
||||
top: offset[0] + 'rpx',
|
||||
right: offset[1] + 'rpx',
|
||||
fontSize: fontSize + 'rpx',
|
||||
position: absolute ? 'absolute' : 'static',
|
||||
color: color,
|
||||
backgroundColor: backgroundColor
|
||||
}, boxStyle]">
|
||||
{{showText}}
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* badge 角标
|
||||
* @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
|
||||
* @tutorial https://www.uviewui.com/components/badge.html
|
||||
* @property {String Number} count 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为0且show-zero为false时隐藏
|
||||
* @property {Boolean} is-dot 不展示数字，只有一个小点（默认false）
|
||||
* @property {Boolean} absolute 组件是否绝对定位，为true时，offset参数才有效（默认true）
|
||||
* @property {String Number} overflow-count 展示封顶的数字值（默认99）
|
||||
* @property {String} type 使用预设的背景颜色（默认error）
|
||||
* @property {Boolean} show-zero 当数值为 0 时，是否展示 Badge（默认false）
|
||||
* @property {String} size Badge的尺寸，设为mini会得到小一号的Badge（默认default）
|
||||
* @property {Array} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx。absolute为true时有效（默认[20, 20]）
|
||||
* @property {String} color 字体颜色（默认#ffffff）
|
||||
* @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效
|
||||
* @property {Boolean} is-center 组件中心点是否和父组件右上角重合，优先级比offset高，如设置，offset参数会失效（默认false）
|
||||
* @example <u-badge type="error" count="7"></u-badge>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-badge',
|
||||
props: {
|
||||
// primary,warning,success,error,info
|
||||
type: {
|
||||
type: String,
|
||||
default: 'error'
|
||||
},
|
||||
// default, mini
|
||||
size: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
//是否是圆点
|
||||
isDot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 显示的数值内容
|
||||
count: {
|
||||
type: [Number, String],
|
||||
},
|
||||
// 展示封顶的数字值
|
||||
overflowCount: {
|
||||
type: Number,
|
||||
default: 99
|
||||
},
|
||||
// 当数值为 0 时，是否展示 Badge
|
||||
showZero: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 位置偏移
|
||||
offset: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [20, 20]
|
||||
}
|
||||
},
|
||||
// 是否开启绝对定位，开启了offset才会起作用
|
||||
absolute: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 字体大小
|
||||
fontSize: {
|
||||
type: [String, Number],
|
||||
default: '24'
|
||||
},
|
||||
// 字体演示
|
||||
color: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
// badge的背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否让badge组件的中心点和父组件右上角重合，配置的话，offset将会失效
|
||||
isCenter: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 是否将badge中心与父组件右上角重合
|
||||
boxStyle() {
|
||||
let style = {};
|
||||
if(this.isCenter) {
|
||||
style.top = 0;
|
||||
style.right = 0;
|
||||
// Y轴-50%，意味着badge向上移动了badge自身高度一半，X轴50%，意味着向右移动了自身宽度一半
|
||||
style.transform = "translateY(-50%) translateX(50%)";
|
||||
} else {
|
||||
style.top = this.offset[0] + 'rpx';
|
||||
style.right = this.offset[1] + 'rpx';
|
||||
style.transform = "translateY(0) translateX(0)";
|
||||
}
|
||||
// 如果尺寸为mini，后接上scal()
|
||||
if(this.size == 'mini') {
|
||||
style.transform = style.transform + " scale(0.8)";
|
||||
}
|
||||
return style;
|
||||
},
|
||||
// isDot类型时，不显示文字
|
||||
showText() {
|
||||
if(this.isDot) return '';
|
||||
else {
|
||||
if(this.count > this.overflowCount) return `${this.overflowCount}+`;
|
||||
else return this.count;
|
||||
}
|
||||
},
|
||||
// 是否显示组件
|
||||
show() {
|
||||
// 如果count的值为0，并且showZero设置为false，不显示组件
|
||||
if(this.count == 0 && this.showZero == false) return false;
|
||||
else return true;
|
||||
},
|
||||
// 获取背景颜色，如果定义了bgColor参数，就放弃type主题色
|
||||
backgroundColor() {
|
||||
return this.bgColor ? this.bgColor : this.$u.color[this.type];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-badge-box {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-badge {
|
||||
line-height: 24rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
|
||||
.u-badge-dot {
|
||||
height: 16rpx;
|
||||
width: 16rpx;
|
||||
border-radius: 100rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.u-badge-mini {
|
||||
transform: scale(0.8);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
// .u-primary {
|
||||
// background: $u-type-primary;
|
||||
// color: #fff;
|
||||
// }
|
||||
|
||||
// .u-error {
|
||||
// background: $u-type-error;
|
||||
// color: #fff;
|
||||
// }
|
||||
|
||||
// .u-warning {
|
||||
// background: $u-type-warning;
|
||||
// color: #fff;
|
||||
// }
|
||||
|
||||
// .u-success {
|
||||
// background: $u-type-success;
|
||||
// color: #fff;
|
||||
// }
|
||||
|
||||
// .u-black {
|
||||
// background: #585858;
|
||||
// color: #fff;
|
||||
// }
|
||||
|
||||
.u-info {
|
||||
background: $u-type-info;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
512
node_modules/uview-ui/components/u-button/u-button.vue
generated
vendored
Normal file
512
node_modules/uview-ui/components/u-button/u-button.vue
generated
vendored
Normal file
@@ -0,0 +1,512 @@
|
||||
<template>
|
||||
<button
|
||||
id="u-wave-btn"
|
||||
class="u-btn u-line-1 u-fix-ios-appearance"
|
||||
:class="[
|
||||
'u-size-' + size,
|
||||
plain ? 'u-' + type + '-plain' : '',
|
||||
loading ? 'u-loading' : '',
|
||||
shape == 'circle' ? 'u-round-circle' : '',
|
||||
hairLine ? showHairLineBorder : 'u-bold-border'
|
||||
]"
|
||||
:disabled="disabled"
|
||||
:form-type="formType"
|
||||
:open-type="openType"
|
||||
:app-parameter="appParameter"
|
||||
: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.stop="click($event)"
|
||||
:hover-class="getHoverClass"
|
||||
:loading="loading"
|
||||
>
|
||||
<slot></slot>
|
||||
<view
|
||||
v-if="ripple"
|
||||
class="u-wave-ripple"
|
||||
:class="[waveActive ? 'u-wave-active' : '']"
|
||||
:style="{
|
||||
top: rippleTop + 'px',
|
||||
left: rippleLeft + 'px',
|
||||
width: fields.targetWidth + 'px',
|
||||
height: fields.targetWidth + 'px',
|
||||
'background-color': rippleBgColor || 'rgba(0, 0, 0, 0.15)'
|
||||
}"
|
||||
></view>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* button 按钮
|
||||
* @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} hair-line 是否显示按钮的细边框(默认true)
|
||||
* @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 {
|
||||
name: 'u-button',
|
||||
props: {
|
||||
// 是否细边框
|
||||
hairLine: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 按钮的预置样式，default，primary，error，warning，success
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
// 按钮尺寸，default，medium，mini
|
||||
size: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
// 按钮形状，circle（两边为半圆），square（带圆角）
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'square'
|
||||
},
|
||||
// 按钮是否镂空
|
||||
plain: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否禁止状态
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否加载中
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 开放能力，具体请看uniapp稳定关于button组件部分说明
|
||||
// https://uniapp.dcloud.io/component/button
|
||||
openType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
|
||||
// 取值为submit（提交表单），reset（重置表单）
|
||||
formType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
|
||||
// 只微信小程序、QQ小程序有效
|
||||
appParameter: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
|
||||
hoverStopPropagation: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
|
||||
lang: {
|
||||
type: String,
|
||||
default: 'en'
|
||||
},
|
||||
// 会话来源，open-type="contact"时有效。只微信小程序有效
|
||||
sessionFrom: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 会话内消息卡片标题，open-type="contact"时有效
|
||||
// 默认当前标题，只微信小程序有效
|
||||
sendMessageTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
|
||||
// 默认当前分享路径，只微信小程序有效
|
||||
sendMessagePath: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 会话内消息卡片图片，open-type="contact"时有效
|
||||
// 默认当前页面截图，只微信小程序有效
|
||||
sendMessageImg: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
|
||||
// 用户点击后可以快速发送小程序消息，open-type="contact"时有效
|
||||
showMessageCard: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 手指按（触摸）按钮时按钮时的背景颜色
|
||||
hoverBgColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 水波纹的背景颜色
|
||||
rippleBgColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否开启水波纹效果
|
||||
ripple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 按下的类名
|
||||
hoverClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 自定义样式，对象形式
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 当没有传bgColor变量时，按钮按下去的颜色类名
|
||||
getHoverClass() {
|
||||
// 如果开启水波纹效果，则不启用hover-class效果
|
||||
if (this.loading || this.disabled || this.ripple || this.hoverClass) return '';
|
||||
let hoverClass = '';
|
||||
hoverClass = this.plain ? 'u-' + this.type + '-plain-hover' : 'u-' + this.type + '-hover';
|
||||
return hoverClass;
|
||||
},
|
||||
// 按钮主题
|
||||
buttonStyle() {
|
||||
let style = {};
|
||||
if (this.type == 'default') {
|
||||
if (this.disabled) {
|
||||
style.color = '#c0c4cc';
|
||||
style.backgroundColor = '#ffffff';
|
||||
style.borderColor = '#e4e7ed';
|
||||
} else {
|
||||
style.color = this.$u.color['contentColor'];
|
||||
style.backgroundColor = '#ffffff';
|
||||
style.borderColor = '#c0c4cc';
|
||||
}
|
||||
} else {
|
||||
if (this.disabled) {
|
||||
if (this.plain) {
|
||||
style.color = this.$u.color[this.type + 'Disabled'];
|
||||
style.backgroundColor = this.$u.color[this.type + 'Light'];
|
||||
style.borderColor = this.$u.color[this.type + 'Disabled'];
|
||||
} else {
|
||||
style.color = '#ffffff';
|
||||
style.backgroundColor = this.$u.color[this.type + 'Disabled'];
|
||||
style.borderColor = this.$u.color[this.type + 'Disabled'];
|
||||
}
|
||||
} else {
|
||||
if (this.plain) {
|
||||
style.color = this.$u.color[this.type];
|
||||
style.backgroundColor = this.$u.color[this.type + 'Light'];
|
||||
style.borderColor = this.$u.color[this.type + 'Disabled'];
|
||||
} else {
|
||||
style.color = '#ffffff';
|
||||
style.backgroundColor = this.$u.color[this.type];
|
||||
style.borderColor = this.$u.color[this.type];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return Object.assign(style, this.customStyle);
|
||||
},
|
||||
// 在'primary', 'success', 'error', 'warning'类型下，不显示边框，否则会造成四角有毛刺现象
|
||||
showHairLineBorder() {
|
||||
if (['primary', 'success', 'error', 'warning'].indexOf(this.type) >= 0 && !this.plain) {
|
||||
return '';
|
||||
} else {
|
||||
return 'u-hairline-border';
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rippleTop: 0, // 水波纹的起点Y坐标到按钮上边界的距离
|
||||
rippleLeft: 0, // 水波纹起点X坐标到按钮左边界的距离
|
||||
fields: {}, // 波纹按钮节点信息
|
||||
waveActive: false // 激活水波纹
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 按钮点击
|
||||
click(e) {
|
||||
// 如果按钮时disabled和loading状态，不触发水波纹效果
|
||||
if (this.loading === true || this.disabled === true) return;
|
||||
// 是否开启水波纹效果
|
||||
if (this.ripple) {
|
||||
// 每次点击时，移除上一次的类，再次添加，才能触发动画效果
|
||||
this.waveActive = false;
|
||||
this.$nextTick(function() {
|
||||
this.getWaveQuery(e);
|
||||
});
|
||||
}
|
||||
this.$emit('click');
|
||||
},
|
||||
// 查询按钮的节点信息
|
||||
getWaveQuery(e) {
|
||||
this.getElQuery().then(res => {
|
||||
// 查询返回的是一个数组节点
|
||||
let data = res[0];
|
||||
// 查询不到节点信息，不操作
|
||||
if (!data.width || !data.width) return;
|
||||
// 水波纹的最终形态是一个正方形(通过border-radius让其变为一个圆形)，这里要保证正方形的边长等于按钮的最长边
|
||||
// 最终的方形（变换后的圆形）才能覆盖整个按钮
|
||||
data.targetWidth = data.height > data.width ? data.height : data.width;
|
||||
if (!data.targetWidth) return;
|
||||
this.fields = data;
|
||||
let touchesX = '',
|
||||
touchesY = '';
|
||||
// #ifdef MP-BAIDU
|
||||
touchesX = e.changedTouches[0].clientX;
|
||||
touchesY = e.changedTouches[0].clientY;
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
touchesX = e.detail.clientX;
|
||||
touchesY = e.detail.clientY;
|
||||
// #endif
|
||||
// #ifndef MP-BAIDU || MP-ALIPAY
|
||||
touchesX = e.touches[0].clientX;
|
||||
touchesY = e.touches[0].clientY;
|
||||
// #endif
|
||||
// 获取触摸点相对于按钮上边和左边的x和y坐标，原理是通过屏幕的触摸点（touchesY），减去按钮的上边界data.top
|
||||
// 但是由于`transform-origin`默认是center，所以这里再减去半径才是水波纹view应该的位置
|
||||
// 总的来说，就是把水波纹的矩形（变换后的圆形）的中心点，移动到我们的触摸点位置
|
||||
this.rippleTop = touchesY - data.top - data.targetWidth / 2;
|
||||
this.rippleLeft = touchesX - data.left - data.targetWidth / 2;
|
||||
this.$nextTick(() => {
|
||||
this.waveActive = true;
|
||||
});
|
||||
});
|
||||
},
|
||||
// 获取节点信息
|
||||
getElQuery() {
|
||||
return new Promise(resolve => {
|
||||
let queryInfo = '';
|
||||
// 获取元素节点信息，请查看uniapp相关文档
|
||||
// https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesrefboundingclientrect
|
||||
queryInfo = uni.createSelectorQuery().in(this);
|
||||
//#ifdef MP-ALIPAY
|
||||
queryInfo = uni.createSelectorQuery();
|
||||
//#endif
|
||||
queryInfo.select('.u-btn').boundingClientRect();
|
||||
queryInfo.exec(data => {
|
||||
resolve(data);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 下面为对接uniapp官方按钮开放能力事件回调的对接
|
||||
getphonenumber(res) {
|
||||
this.$emit('getphonenumber', res);
|
||||
},
|
||||
getuserinfo(res) {
|
||||
this.$emit('getuserinfo', res);
|
||||
},
|
||||
error(res) {
|
||||
this.$emit('error', res);
|
||||
},
|
||||
opensetting(res) {
|
||||
this.$emit('opensetting', res);
|
||||
},
|
||||
launchapp(res) {
|
||||
this.$emit('launchapp', res);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.u-btn {
|
||||
position: relative;
|
||||
border: 0;
|
||||
//border-radius: 10rpx;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 0 40rpx;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.u-hairline-border:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
// 设置为border-box，意味着下面的scale缩小为0.5，实际上缩小的是伪元素的内容（border-box意味着内容不含border）
|
||||
box-sizing: border-box;
|
||||
// 中心点作为变形(scale())的原点
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 199.8%;
|
||||
height: 199.7%;
|
||||
-webkit-transform: scale(0.5, 0.5);
|
||||
transform: scale(0.5, 0.5);
|
||||
border: 1px solid currentColor;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.u-bold-border {
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
.u-wave-ripple {
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
background-clip: padding-box;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
transform: scale(0);
|
||||
opacity: 1;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.u-wave-ripple.u-wave-active {
|
||||
opacity: 0;
|
||||
transform: scale(2);
|
||||
transition: opacity 1s linear, transform 0.4s linear;
|
||||
}
|
||||
|
||||
.u-round-circle {
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
|
||||
.u-round-circle::after {
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
|
||||
.u-loading::after {
|
||||
background-color: hsla(0, 0%, 100%, 0.35);
|
||||
}
|
||||
|
||||
.u-size-default {
|
||||
font-size: 30rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.u-size-medium {
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
font-size: 26rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
padding: 0 80rpx;
|
||||
}
|
||||
|
||||
.u-size-mini {
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
font-size: 22rpx;
|
||||
padding-top: 1px;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.u-primary-plain-hover {
|
||||
color: #ffffff !important;
|
||||
background: $u-type-primary-dark !important;
|
||||
}
|
||||
|
||||
.u-default-plain-hover {
|
||||
color: $u-type-primary-dark !important;
|
||||
background: $u-type-primary-light !important;
|
||||
}
|
||||
|
||||
.u-success-plain-hover {
|
||||
color: #ffffff !important;
|
||||
background: $u-type-success-dark !important;
|
||||
}
|
||||
|
||||
.u-warning-plain-hover {
|
||||
color: #ffffff !important;
|
||||
background: $u-type-warning-dark !important;
|
||||
}
|
||||
|
||||
.u-error-plain-hover {
|
||||
color: #ffffff !important;
|
||||
background: $u-type-error-dark !important;
|
||||
}
|
||||
|
||||
.u-info-plain-hover {
|
||||
color: #ffffff !important;
|
||||
background: $u-type-info-dark !important;
|
||||
}
|
||||
|
||||
.u-default-hover {
|
||||
color: $u-type-primary-dark !important;
|
||||
border-color: $u-type-primary-dark !important;
|
||||
background-color: $u-type-primary-light !important;
|
||||
}
|
||||
|
||||
.u-primary-hover {
|
||||
background: $u-type-primary-dark !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.u-success-hover {
|
||||
background: $u-type-success-dark !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.u-info-hover {
|
||||
background: $u-type-info-dark !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.u-warning-hover {
|
||||
background: $u-type-warning-dark !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.u-error-hover {
|
||||
background: $u-type-error-dark !important;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
608
node_modules/uview-ui/components/u-calendar/u-calendar.vue
generated
vendored
Normal file
608
node_modules/uview-ui/components/u-calendar/u-calendar.vue
generated
vendored
Normal file
@@ -0,0 +1,608 @@
|
||||
<template>
|
||||
<u-popup closeable :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
|
||||
:safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex" :border-radius="borderRadius" :closeable="closeable">
|
||||
<view class="u-calendar">
|
||||
<view class="u-calendar__header">
|
||||
<view class="u-calendar__header__text" v-if="!$slots['tooltip']">
|
||||
{{toolTip}}
|
||||
</view>
|
||||
<slot v-else name="tooltip" />
|
||||
</view>
|
||||
<view class="u-calendar__action u-flex u-row-center">
|
||||
<view class="u-calendar__action__icon">
|
||||
<u-icon v-if="changeYear" name="arrow-left-double" :color="yearArrowColor" @click="changeYearHandler(0)"></u-icon>
|
||||
</view>
|
||||
<view class="u-calendar__action__icon">
|
||||
<u-icon v-if="changeMonth" name="arrow-left" :color="monthArrowColor" @click="changeMonthHandler(0)"></u-icon>
|
||||
</view>
|
||||
<view class="u-calendar__action__text">{{ showTitle }}</view>
|
||||
<view class="u-calendar__action__icon">
|
||||
<u-icon v-if="changeMonth" name="arrow-right" :color="monthArrowColor" @click="changeMonthHandler(1)"></u-icon>
|
||||
</view>
|
||||
<view class="u-calendar__action__icon">
|
||||
<u-icon v-if="changeYear" name="arrow-right-double" :color="yearArrowColor" @click="changeYearHandler(1)"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-calendar__week-day">
|
||||
<view class="u-calendar__week-day__text" v-for="(item, index) in weekDayZh" :key="index">{{item}}</view>
|
||||
</view>
|
||||
<view class="u-calendar__content">
|
||||
<!-- 前置空白部分 -->
|
||||
<block v-for="(item, index) in weekdayArr" :key="index">
|
||||
<view class="u-calendar__content__item"></view>
|
||||
</block>
|
||||
<view class="u-calendar__content__item" :class="{
|
||||
'u-hover-class':openDisAbled(year,month,index+1),
|
||||
'u-calendar__content--start-date': (mode == 'range' && startDate==`${year}-${month}-${index+1}`) || mode== 'date',
|
||||
'u-calendar__content--end-date':(mode== 'range' && endDate==`${year}-${month}-${index+1}`) || mode == 'date'
|
||||
}" :style="{backgroundColor: getColor(index,1)}" v-for="(item, index) in daysArr" :key="index"
|
||||
@tap="dateClick(index)">
|
||||
<view class="u-calendar__content__item__inner" :style="{color: getColor(index,2)}">
|
||||
<view>{{ index + 1 }}</view>
|
||||
</view>
|
||||
<view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">{{startText}}</view>
|
||||
<view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && endDate==`${year}-${month}-${index+1}`">{{endText}}</view>
|
||||
</view>
|
||||
<view class="u-calendar__content__bg-month">{{month}}</view>
|
||||
</view>
|
||||
<view class="u-calendar__bottom">
|
||||
<view class="u-calendar__bottom__choose">
|
||||
<text>{{mode == 'date' ? activeDate : startDate}}</text>
|
||||
<text v-if="endDate">至{{endDate}}</text>
|
||||
</view>
|
||||
<view class="u-calendar__bottom__btn">
|
||||
<u-button :type="btnType" shape="circle" size="default" @click="btnFix(false)">确定</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'u-calendar',
|
||||
props: {
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否允许通过点击遮罩关闭Picker
|
||||
maskCloseAble: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 通过双向绑定控制组件的弹出与收起
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 弹出的z-index值
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 是否允许切换年份
|
||||
changeYear: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否允许切换月份
|
||||
changeMonth: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// date-单个日期选择，range-开始日期+结束日期选择
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'date'
|
||||
},
|
||||
// 可切换的最大年份
|
||||
maxYear: {
|
||||
type: [Number, String],
|
||||
default: 2050
|
||||
},
|
||||
// 可切换的最小年份
|
||||
minYear: {
|
||||
type: [Number, String],
|
||||
default: 1950
|
||||
},
|
||||
// 最小可选日期(不在范围内日期禁用不可选)
|
||||
minDate: {
|
||||
type: [Number, String],
|
||||
default: '1950-01-01'
|
||||
},
|
||||
/**
|
||||
* 最大可选日期
|
||||
* 默认最大值为今天，之后的日期不可选
|
||||
* 2030-12-31
|
||||
* */
|
||||
maxDate: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 弹窗顶部左右两边的圆角值
|
||||
borderRadius: {
|
||||
type: [String, Number],
|
||||
default: 20
|
||||
},
|
||||
// 月份切换按钮箭头颜色
|
||||
monthArrowColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// 年份切换按钮箭头颜色
|
||||
yearArrowColor: {
|
||||
type: String,
|
||||
default: '#909399'
|
||||
},
|
||||
// 默认日期字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#303133'
|
||||
},
|
||||
// 选中|起始结束日期背景色
|
||||
activeBgColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 选中|起始结束日期字体颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
// 范围内日期背景色
|
||||
rangeBgColor: {
|
||||
type: String,
|
||||
default: 'rgba(41,121,255,0.13)'
|
||||
},
|
||||
// 范围内日期字体颜色
|
||||
rangeColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// mode=range时生效，起始日期自定义文案
|
||||
startText: {
|
||||
type: String,
|
||||
default: '开始'
|
||||
},
|
||||
// mode=range时生效，结束日期自定义文案
|
||||
endText: {
|
||||
type: String,
|
||||
default: '结束'
|
||||
},
|
||||
//按钮样式类型
|
||||
btnType: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
// 当前选中日期带选中效果
|
||||
isActiveCurrent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 切换年月是否触发事件 mode=date时生效
|
||||
isChange: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示右上角的关闭图标
|
||||
closeable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 顶部的提示文字
|
||||
toolTip: {
|
||||
type: String,
|
||||
default: '选择日期'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 星期几,值为1-7
|
||||
weekday: 1,
|
||||
weekdayArr:[],
|
||||
// 当前月有多少天
|
||||
days: 0,
|
||||
daysArr:[],
|
||||
showTitle: '',
|
||||
year: 2020,
|
||||
month: 0,
|
||||
day: 0,
|
||||
startYear: 0,
|
||||
startMonth: 0,
|
||||
startDay: 0,
|
||||
endYear: 0,
|
||||
endMonth: 0,
|
||||
endDay: 0,
|
||||
today: '',
|
||||
activeDate: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
isStart: true,
|
||||
min: null,
|
||||
max: null,
|
||||
weekDayZh: ['日', '一', '二', '三', '四', '五', '六']
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
dataChange() {
|
||||
return `${this.mode}-${this.minDate}-${this.maxDate}`;
|
||||
},
|
||||
uZIndex() {
|
||||
// 如果用户有传递z-index值，优先使用
|
||||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataChange(val) {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
getColor(index, type) {
|
||||
let color = type == 1 ? '' : this.color;
|
||||
let day = index + 1
|
||||
let date = `${this.year}-${this.month}-${day}`
|
||||
let timestamp = new Date(date.replace(/\-/g, '/')).getTime();
|
||||
let start = this.startDate.replace(/\-/g, '/')
|
||||
let end = this.endDate.replace(/\-/g, '/')
|
||||
if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
|
||||
color = type == 1 ? this.activeBgColor : this.activeColor;
|
||||
} else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
|
||||
color = type == 1 ? this.rangeBgColor : this.rangeColor;
|
||||
}
|
||||
return color;
|
||||
},
|
||||
init() {
|
||||
let now = new Date();
|
||||
this.year = now.getFullYear();
|
||||
this.month = now.getMonth() + 1;
|
||||
this.day = now.getDate();
|
||||
this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
|
||||
this.activeDate = this.today;
|
||||
this.min = this.initDate(this.minDate);
|
||||
this.max = this.initDate(this.maxDate || this.today);
|
||||
this.startDate = "";
|
||||
this.startYear = 0;
|
||||
this.startMonth = 0;
|
||||
this.startDay = 0;
|
||||
this.endYear = 0;
|
||||
this.endMonth = 0;
|
||||
this.endDay = 0;
|
||||
this.endDate = "";
|
||||
this.isStart = true;
|
||||
this.changeData();
|
||||
},
|
||||
//日期处理
|
||||
initDate(date) {
|
||||
let fdate = date.split('-');
|
||||
return {
|
||||
year: Number(fdate[0] || 1920),
|
||||
month: Number(fdate[1] || 1),
|
||||
day: Number(fdate[2] || 1)
|
||||
}
|
||||
},
|
||||
openDisAbled: function(year, month, day) {
|
||||
let bool = true;
|
||||
let date = `${year}/${month}/${day}`;
|
||||
// let today = this.today.replace(/\-/g, '/');
|
||||
let min = `${this.min.year}/${this.min.month}/${this.min.day}`;
|
||||
let max = `${this.max.year}/${this.max.month}/${this.max.day}`;
|
||||
let timestamp = new Date(date).getTime();
|
||||
if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
|
||||
bool = false;
|
||||
}
|
||||
return bool;
|
||||
},
|
||||
generateArray: function(start, end) {
|
||||
return Array.from(new Array(end + 1).keys()).slice(start);
|
||||
},
|
||||
formatNum: function(num) {
|
||||
return num < 10 ? '0' + num : num + '';
|
||||
},
|
||||
//一个月有多少天
|
||||
getMonthDay(year, month) {
|
||||
let days = new Date(year, month, 0).getDate();
|
||||
return days;
|
||||
},
|
||||
getWeekday(year, month) {
|
||||
let date = new Date(`${year}/${month}/01 00:00:00`);
|
||||
return date.getDay();
|
||||
},
|
||||
checkRange(year) {
|
||||
let overstep = false;
|
||||
if (year < this.minYear || year > this.maxYear) {
|
||||
uni.showToast({
|
||||
title: "日期超出范围啦~",
|
||||
icon: 'none'
|
||||
})
|
||||
overstep = true;
|
||||
}
|
||||
return overstep;
|
||||
},
|
||||
changeMonthHandler(isAdd) {
|
||||
if (isAdd) {
|
||||
let month = this.month + 1;
|
||||
let year = month > 12 ? this.year + 1 : this.year;
|
||||
if (!this.checkRange(year)) {
|
||||
this.month = month > 12 ? 1 : month;
|
||||
this.year = year;
|
||||
this.changeData();
|
||||
}
|
||||
|
||||
} else {
|
||||
let month = this.month - 1;
|
||||
let year = month < 1 ? this.year - 1 : this.year;
|
||||
if (!this.checkRange(year)) {
|
||||
this.month = month < 1 ? 12 : month;
|
||||
this.year = year;
|
||||
this.changeData();
|
||||
}
|
||||
}
|
||||
},
|
||||
changeYearHandler(isAdd) {
|
||||
let year = isAdd ? this.year + 1 : this.year - 1;
|
||||
if (!this.checkRange(year)) {
|
||||
this.year = year;
|
||||
this.changeData();
|
||||
}
|
||||
},
|
||||
changeData() {
|
||||
this.days = this.getMonthDay(this.year, this.month);
|
||||
this.daysArr=this.generateArray(1,this.days)
|
||||
this.weekday = this.getWeekday(this.year, this.month);
|
||||
this.weekdayArr=this.generateArray(1,this.weekday)
|
||||
this.showTitle = `${this.year}年${this.month}月`;
|
||||
if (this.isChange && this.mode == 'date') {
|
||||
this.btnFix(true);
|
||||
}
|
||||
},
|
||||
dateClick: function(day) {
|
||||
day += 1;
|
||||
if (!this.openDisAbled(this.year, this.month, day)) {
|
||||
this.day = day;
|
||||
let date = `${this.year}-${this.month}-${day}`;
|
||||
if (this.mode == 'date') {
|
||||
this.activeDate = date;
|
||||
} else {
|
||||
let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime()
|
||||
if (this.isStart || compare) {
|
||||
this.startDate = date;
|
||||
this.startYear = this.year;
|
||||
this.startMonth = this.month;
|
||||
this.startDay = this.day;
|
||||
this.endYear = 0;
|
||||
this.endMonth = 0;
|
||||
this.endDay = 0;
|
||||
this.endDate = "";
|
||||
this.activeDate = "";
|
||||
this.isStart = false;
|
||||
} else {
|
||||
this.endDate = date;
|
||||
this.endYear = this.year;
|
||||
this.endMonth = this.month;
|
||||
this.endDay = this.day;
|
||||
this.isStart = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
close() {
|
||||
// 修改通过v-model绑定的父组件变量的值为false，从而隐藏日历弹窗
|
||||
this.$emit('input', false);
|
||||
},
|
||||
getWeekText(date) {
|
||||
date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
|
||||
let week = date.getDay();
|
||||
return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week];
|
||||
},
|
||||
btnFix(show) {
|
||||
if (!show) {
|
||||
this.close();
|
||||
}
|
||||
if (this.mode == 'date') {
|
||||
let arr = this.activeDate.split('-')
|
||||
let year = this.isChange ? this.year : Number(arr[0]);
|
||||
let month = this.isChange ? this.month : Number(arr[1]);
|
||||
let day = this.isChange ? this.day : Number(arr[2]);
|
||||
//当前月有多少天
|
||||
let days = this.getMonthDay(year, month);
|
||||
let result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`;
|
||||
let weekText = this.getWeekText(result);
|
||||
let isToday = false;
|
||||
if (`${year}-${month}-${day}` == this.today) {
|
||||
//今天
|
||||
isToday = true;
|
||||
}
|
||||
this.$emit('change', {
|
||||
year: year,
|
||||
month: month,
|
||||
day: day,
|
||||
days: days,
|
||||
result: result,
|
||||
week: weekText,
|
||||
isToday: isToday,
|
||||
// switch: show //是否是切换年月操作
|
||||
});
|
||||
} else {
|
||||
if (!this.startDate || !this.endDate) return;
|
||||
let startMonth = this.formatNum(this.startMonth);
|
||||
let startDay = this.formatNum(this.startDay);
|
||||
let startDate = `${this.startYear}-${startMonth}-${startDay}`;
|
||||
let startWeek = this.getWeekText(startDate)
|
||||
|
||||
let endMonth = this.formatNum(this.endMonth);
|
||||
let endDay = this.formatNum(this.endDay);
|
||||
let endDate = `${this.endYear}-${endMonth}-${endDay}`;
|
||||
let endWeek = this.getWeekText(endDate);
|
||||
this.$emit('change', {
|
||||
startYear: this.startYear,
|
||||
startMonth: this.startMonth,
|
||||
startDay: this.startDay,
|
||||
startDate: startDate,
|
||||
startWeek: startWeek,
|
||||
endYear: this.endYear,
|
||||
endMonth: this.endMonth,
|
||||
endDay: this.endDay,
|
||||
endDate: endDate,
|
||||
endWeek: endWeek
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-calendar {
|
||||
color: $u-content-color;
|
||||
|
||||
&__header {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-size: 30rpx;
|
||||
background-color: #fff;
|
||||
color: $u-main-color;
|
||||
|
||||
&__text {
|
||||
margin-top: 30rpx;
|
||||
padding: 0 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__action {
|
||||
padding: 40rpx 0 40rpx 0;
|
||||
|
||||
&__icon {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
padding: 0 16rpx;
|
||||
color: $u-main-color;
|
||||
font-size: 32rpx;
|
||||
line-height: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&__week-day {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 0;
|
||||
overflow: hidden;
|
||||
|
||||
&__text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 6px 0;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
|
||||
&--end-date {
|
||||
border-top-right-radius: 8rpx;
|
||||
border-bottom-right-radius: 8rpx;
|
||||
}
|
||||
|
||||
&--start-date {
|
||||
border-top-left-radius: 8rpx;
|
||||
border-bottom-left-radius: 8rpx;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 14.2857%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
&__inner {
|
||||
height: 84rpx;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
font-size: 32rpx;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
|
||||
&__desc {
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
transform: scale(0.75);
|
||||
transform-origin: center center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
bottom: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__tips {
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transform: scale(0.8);
|
||||
transform-origin: center center;
|
||||
text-align: center;
|
||||
bottom: 8rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__bg-month {
|
||||
position: absolute;
|
||||
font-size: 130px;
|
||||
line-height: 130px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #e4e7ed;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
padding: 0 40rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 24rpx;
|
||||
color: $u-tips-color;
|
||||
|
||||
&__choose {
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
250
node_modules/uview-ui/components/u-car-keyboard/u-car-keyboard.vue
generated
vendored
Normal file
250
node_modules/uview-ui/components/u-car-keyboard/u-car-keyboard.vue
generated
vendored
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<view class="u-keyboard" @touchmove.stop.prevent>
|
||||
<view class="u-keyboard-grids">
|
||||
<block>
|
||||
<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">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
<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>
|
||||
</view>
|
||||
<view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover" @tap="changeCarInputMode">
|
||||
<text class="zh" :class="[!abc ? 'active' : 'inactive']">中</text>
|
||||
/
|
||||
<text class="en" :class="[abc ? 'active' : 'inactive']">英</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "u-keyboard",
|
||||
props: {
|
||||
// 是否打乱键盘按键的顺序
|
||||
random: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
|
||||
abc: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
areaList() {
|
||||
let data = [
|
||||
'京',
|
||||
'沪',
|
||||
'粤',
|
||||
'津',
|
||||
'冀',
|
||||
'豫',
|
||||
'云',
|
||||
'辽',
|
||||
'黑',
|
||||
'湘',
|
||||
'皖',
|
||||
'鲁',
|
||||
'苏',
|
||||
'浙',
|
||||
'赣',
|
||||
'鄂',
|
||||
'桂',
|
||||
'甘',
|
||||
'晋',
|
||||
'陕',
|
||||
'蒙',
|
||||
'吉',
|
||||
'闽',
|
||||
'贵',
|
||||
'渝',
|
||||
'川',
|
||||
'青',
|
||||
'琼',
|
||||
'宁',
|
||||
'挂',
|
||||
'藏',
|
||||
'港',
|
||||
'澳',
|
||||
'新',
|
||||
'使',
|
||||
'学'
|
||||
];
|
||||
let tmp = [];
|
||||
// 打乱顺序
|
||||
if (this.random) data = this.$u.randomArray(data);
|
||||
// 切割成二维数组
|
||||
tmp[0] = data.slice(0, 10);
|
||||
tmp[1] = data.slice(10, 20);
|
||||
tmp[2] = data.slice(20, 30);
|
||||
tmp[3] = data.slice(30, 36);
|
||||
return tmp;
|
||||
},
|
||||
EngKeyBoardList() {
|
||||
let data = [
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
0,
|
||||
'Q',
|
||||
'W',
|
||||
'E',
|
||||
'R',
|
||||
'T',
|
||||
'Y',
|
||||
'U',
|
||||
'I',
|
||||
'O',
|
||||
'P',
|
||||
'A',
|
||||
'S',
|
||||
'D',
|
||||
'F',
|
||||
'G',
|
||||
'H',
|
||||
'J',
|
||||
'K',
|
||||
'L',
|
||||
'Z',
|
||||
'X',
|
||||
'C',
|
||||
'V',
|
||||
'B',
|
||||
'N',
|
||||
'M'
|
||||
];
|
||||
let tmp = [];
|
||||
if (this.random) data = this.$u.randomArray(data);
|
||||
tmp[0] = data.slice(0, 10);
|
||||
tmp[1] = data.slice(10, 20);
|
||||
tmp[2] = data.slice(20, 30);
|
||||
tmp[3] = data.slice(30, 36);
|
||||
return tmp;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击键盘按钮
|
||||
carInputClick(i, j) {
|
||||
let value = '';
|
||||
// 不同模式，获取不同数组的值
|
||||
if (this.abc) value = this.EngKeyBoardList[i][j];
|
||||
else value = this.areaList[i][j];
|
||||
this.$emit('change', value);
|
||||
},
|
||||
// 修改汽车牌键盘的输入模式，中文|英文
|
||||
changeCarInputMode() {
|
||||
this.abc = !this.abc;
|
||||
},
|
||||
// 点击退格键
|
||||
backspaceClick() {
|
||||
this.$emit('backspace');
|
||||
clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
|
||||
this.timer = setInterval(() => {
|
||||
this.$emit('backspace');
|
||||
}, 250);
|
||||
},
|
||||
clearTimer() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-keyboard-grids {
|
||||
background: rgb(215, 215, 217);
|
||||
padding: 24rpx 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-keyboard-grids-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-keyboard-grids-btn {
|
||||
text-decoration: none;
|
||||
width: 62rpx;
|
||||
flex: 0 0 64rpx;
|
||||
height: 80rpx;
|
||||
display: inline-block;
|
||||
font-size: 36rpx;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
background-color: #fff;
|
||||
margin: 8rpx 5rpx;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 2rpx 0rpx #888992;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.u-carinput-hover {
|
||||
background-color: rgb(185, 188, 195) !important;
|
||||
}
|
||||
|
||||
.u-keyboard-back {
|
||||
position: absolute;
|
||||
width: 96rpx;
|
||||
right: 22rpx;
|
||||
bottom: 32rpx;
|
||||
height: 80rpx;
|
||||
background-color: rgb(185, 188, 195);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 8rpx;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2rpx 0rpx #888992;
|
||||
}
|
||||
|
||||
.u-keyboard-change {
|
||||
font-size: 24rpx;
|
||||
box-shadow: 0 2rpx 0rpx #888992;
|
||||
position: absolute;
|
||||
width: 96rpx;
|
||||
left: 22rpx;
|
||||
line-height: 1;
|
||||
bottom: 32rpx;
|
||||
height: 80rpx;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 8rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-keyboard-change .inactive.zh {
|
||||
transform: scale(0.85) translateY(-10rpx);
|
||||
}
|
||||
|
||||
.u-keyboard-change .inactive.en {
|
||||
transform: scale(0.85) translateY(10rpx);
|
||||
}
|
||||
|
||||
.u-keyboard-change .active {
|
||||
color: rgb(237, 112, 64);
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.u-keyboard-change .zh {
|
||||
transform: translateY(-10rpx);
|
||||
}
|
||||
|
||||
.u-keyboard-change .en {
|
||||
transform: translateY(10rpx);
|
||||
}
|
||||
</style>
|
||||
275
node_modules/uview-ui/components/u-card/u-card.vue
generated
vendored
Normal file
275
node_modules/uview-ui/components/u-card/u-card.vue
generated
vendored
Normal file
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<view
|
||||
class="u-card"
|
||||
@tap.stop="click"
|
||||
:class="{ 'u-border': border, 'u-card-full': full }"
|
||||
:style="{
|
||||
borderRadius: full ? 0 : borderRadius + 'rpx',
|
||||
margin: margin
|
||||
}"
|
||||
>
|
||||
<view
|
||||
class="u-card__head"
|
||||
:style="[headStyle, {padding: padding + 'rpx'}]"
|
||||
:class="{
|
||||
'u-border-bottom': headBorderBottom
|
||||
}"
|
||||
@tap="headClick"
|
||||
>
|
||||
<view v-if="!$slots.head" class="u-flex u-row-between">
|
||||
<view class="u-card__head--left u-flex u-line-1" v-if="title">
|
||||
<image
|
||||
:src="thumb"
|
||||
class="u-card__head--left__thumb"
|
||||
mode="aspectfull"
|
||||
v-if="thumb"
|
||||
:style="{
|
||||
height: thumbWidth + 'rpx',
|
||||
width: thumbWidth + 'rpx',
|
||||
borderRadius: thumbCircle ? '100rpx' : '6rpx'
|
||||
}"
|
||||
></image>
|
||||
<text
|
||||
class="u-card__head--left__title u-line-1"
|
||||
:style="{
|
||||
fontSize: titleSize + 'rpx',
|
||||
color: titleColor
|
||||
}"
|
||||
>
|
||||
{{ title }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="u-card__head--right u-line-1" v-if="subTitle">
|
||||
<text
|
||||
class="u-card__head__title__text"
|
||||
:style="{
|
||||
fontSize: subTitleSize + 'rpx',
|
||||
color: subTitleColor
|
||||
}"
|
||||
>
|
||||
{{ subTitle }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<slot name="head" v-else />
|
||||
</view>
|
||||
<view @tap="bodyClick" class="u-card__body" :style="[bodyStyle, {padding: padding + 'rpx'}]"><slot name="body" /></view>
|
||||
<view
|
||||
class="u-card__foot"
|
||||
@tap="footClick"
|
||||
:style="[footStyle, {padding: $slots.foot ? padding + 'rpx' : 0}]"
|
||||
:class="{
|
||||
'u-border-top': footBorderTop
|
||||
}"
|
||||
>
|
||||
<slot name="foot" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* card 卡片
|
||||
* @description 卡片组件一般用于多个列表条目，且风格统一的场景
|
||||
* @tutorial https://www.uviewui.com/components/line.html
|
||||
* @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
|
||||
* @property {String} title 头部左边的标题
|
||||
* @property {String} title-color 标题颜色（默认#303133）
|
||||
* @property {String | Number} title-size 标题字体大小，单位rpx（默认30）
|
||||
* @property {String} sub-title 头部右边的副标题
|
||||
* @property {String} sub-title-color 副标题颜色（默认#909399）
|
||||
* @property {String | Number} sub-title-size 副标题字体大小（默认26）
|
||||
* @property {Boolean} border 是否显示边框（默认true）
|
||||
* @property {String | Number} index 用于标识点击了第几个卡片
|
||||
* @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"（默认30rpx）
|
||||
* @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认16）
|
||||
* @property {Object} head-style 头部自定义样式，对象形式
|
||||
* @property {Object} body-style 中部自定义样式，对象形式
|
||||
* @property {Object} foot-style 底部自定义样式，对象形式
|
||||
* @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true）
|
||||
* @property {Boolean} foot-border-top 是否显示底部的上边框（默认true）
|
||||
* @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
|
||||
* @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位rpx（默认60）
|
||||
* @property {Boolean} thumb-circle 缩略图是否为圆形（默认false）
|
||||
* @event {Function} click 整个卡片任意位置被点击时触发
|
||||
* @event {Function} head-click 卡片头部被点击时触发
|
||||
* @event {Function} body-click 卡片主体部分被点击时触发
|
||||
* @event {Function} foot-click 卡片底部部分被点击时触发
|
||||
* @example <u-card padding="30" title="card"></u-card>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-card',
|
||||
props: {
|
||||
// 与屏幕两侧是否留空隙
|
||||
full: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 标题颜色
|
||||
titleColor: {
|
||||
type: String,
|
||||
default: '#303133'
|
||||
},
|
||||
// 标题字体大小，单位rpx
|
||||
titleSize: {
|
||||
type: [Number, String],
|
||||
default: '30'
|
||||
},
|
||||
// 副标题
|
||||
subTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 副标题颜色
|
||||
subTitleColor: {
|
||||
type: String,
|
||||
default: '#909399'
|
||||
},
|
||||
// 副标题字体大小，单位rpx
|
||||
subTitleSize: {
|
||||
type: [Number, String],
|
||||
default: '26'
|
||||
},
|
||||
// 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时)
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 用于标识点击了第几个
|
||||
index: {
|
||||
type: [Number, String, Object],
|
||||
default: ''
|
||||
},
|
||||
// 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx"
|
||||
margin: {
|
||||
type: String,
|
||||
default: '30rpx'
|
||||
},
|
||||
// card卡片的圆角
|
||||
borderRadius: {
|
||||
type: [Number, String],
|
||||
default: '16'
|
||||
},
|
||||
// 头部自定义样式，对象形式
|
||||
headStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 主体自定义样式，对象形式
|
||||
bodyStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 底部自定义样式，对象形式
|
||||
footStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 头部是否下边框
|
||||
headBorderBottom: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 底部是否有上边框
|
||||
footBorderTop: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 标题左边的缩略图
|
||||
thumb: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 缩略图宽高，单位rpx
|
||||
thumbWidth: {
|
||||
type: [String, Number],
|
||||
default: '60'
|
||||
},
|
||||
// 缩略图是否为圆形
|
||||
thumbCircle: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 给head，body，foot的内边距
|
||||
padding: {
|
||||
type: [String, Number],
|
||||
default: '30'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
this.$emit('click', this.index);
|
||||
},
|
||||
headClick() {
|
||||
this.$emit('head-click', this.index);
|
||||
},
|
||||
bodyClick() {
|
||||
this.$emit('body-click', this.index);
|
||||
},
|
||||
footClick() {
|
||||
this.$emit('foot-click', this.index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
background-color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-full {
|
||||
// 如果是与屏幕之间不留空隙，应该设置左右边距为0
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
&__head {
|
||||
&--left {
|
||||
color: $u-main-color;
|
||||
|
||||
&__thumb {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
&__title {
|
||||
max-width: 400rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&--right {
|
||||
color: $u-tips-color;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
color: $u-content-color;
|
||||
}
|
||||
|
||||
&__foot {
|
||||
color: $u-tips-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
72
node_modules/uview-ui/components/u-cell-group/u-cell-group.vue
generated
vendored
Normal file
72
node_modules/uview-ui/components/u-cell-group/u-cell-group.vue
generated
vendored
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<view class="u-cell-box">
|
||||
<view class="u-cell-title" v-if="title" :style="[titleStyle]">
|
||||
{{title}}
|
||||
</view>
|
||||
<view class="u-cell-item-box" :class="{'u-border-bottom u-border-top': border}">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* cellGroup 单元格父组件Group
|
||||
* @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 {
|
||||
name: "u-cell-group",
|
||||
props: {
|
||||
// 分组标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否显示分组list上下边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 分组标题的样式，对象形式，注意驼峰属性写法
|
||||
// 类似 {'font-size': '24rpx'} 和 {'fontSize': '24rpx'}
|
||||
titleStyle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
uCellGroup: this
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-cell-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.u-cell-title {
|
||||
padding: 30rpx 32rpx 10rpx 32rpx;
|
||||
font-size: 30rpx;
|
||||
text-align: left;
|
||||
color: $u-tips-color;
|
||||
}
|
||||
|
||||
.u-cell-item-box {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
300
node_modules/uview-ui/components/u-cell-item/u-cell-item.vue
generated
vendored
Normal file
300
node_modules/uview-ui/components/u-cell-item/u-cell-item.vue
generated
vendored
Normal file
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<view
|
||||
@tap="click"
|
||||
class="u-cell"
|
||||
:class="{ 'u-cell-border': itemIndex > 0 && borderBottom, 'u-col-center': center, 'u-border-gap': borderGap, 'u-cell--required': required }"
|
||||
hover-stay-time="150"
|
||||
:hover-class="hoverClass"
|
||||
:style="{
|
||||
backgroundColor: bgColor
|
||||
}"
|
||||
>
|
||||
<u-icon :size="iconSize" :name="icon" v-if="icon" class="u-cell__left-icon-wrap"></u-icon>
|
||||
<view class="u-flex" v-else>
|
||||
<slot name="icon"></slot>
|
||||
</view>
|
||||
<view
|
||||
class="u-cell_title"
|
||||
:style="[
|
||||
{
|
||||
width: titleWidth ? titleWidth + 'rpx' : 'auto'
|
||||
},
|
||||
titleStyle
|
||||
]"
|
||||
>
|
||||
<block v-if="title">{{ title }}</block>
|
||||
<slot name="title" v-else></slot>
|
||||
|
||||
<view class="u-cell__label" v-if="label || $slots.label" :style="[labelStyle]">
|
||||
<block v-if="label">{{ label }}</block>
|
||||
<slot name="label" v-else></slot>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-cell__value" :style="[valueStyle]">
|
||||
<block class="u-cell__value" v-if="value">{{ value }}</block>
|
||||
<slot v-else></slot>
|
||||
</view>
|
||||
<u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
|
||||
<view class="u-flex" v-else>
|
||||
<slot name="right-icon"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* cellItem 单元格Item
|
||||
* @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-group使用
|
||||
* @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-bottom 是否显示每个cell的下边框（默认true）
|
||||
* @property {Boolean} center 是否使内容垂直居中（默认false）
|
||||
* @property {String} hover-class 是否开启点击反馈，none为无效果（默认true）
|
||||
* @property {Boolean} border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔（默认true）
|
||||
* @property {Boolean} arrow 是否显示右侧箭头（默认true）
|
||||
* @property {Boolean} required 箭头方向，可选值（默认right）
|
||||
* @property {Boolean} arrow-direction 是否显示左边表示必填的星号（默认false）
|
||||
* @property {Object} title-style 标题样式，对象形式
|
||||
* @property {Object} value-style 右侧内容样式，对象形式
|
||||
* @property {Object} label-style 标题下方描述信息的样式，对象形式
|
||||
* @property {String} bg-color 背景颜色（默认transparent）
|
||||
* @property {String Number} index 用于在click事件回调中返回，标识当前是第几个Item
|
||||
* @property {String Number} title-width 标题的宽度，单位rpx
|
||||
* @example <u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-cell-item',
|
||||
props: {
|
||||
// 左侧图标名称(只能uView内置图标)，或者图标src
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 左侧标题
|
||||
title: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 右侧内容
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 标题下方的描述信息
|
||||
label: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 是否显示内边框
|
||||
borderBottom: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 多个cell中，中间的cell显示下划线时，下划线是否给一个到左边的距离
|
||||
borderGap: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否开启点击反馈，即点击时cell背景为灰色，none为无效果
|
||||
hoverClass: {
|
||||
type: String,
|
||||
default: 'u-cell-hover'
|
||||
},
|
||||
// 是否显示右侧箭头
|
||||
arrow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 内容是否垂直居中
|
||||
center: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示左边表示必填的星号
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 标题的宽度，单位rpx
|
||||
titleWidth: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 右侧箭头方向，可选值：right|up|down，默认为right
|
||||
arrowDirection: {
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
// 控制标题的样式
|
||||
titleStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 右侧显示内容的样式
|
||||
valueStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 描述信息的样式
|
||||
labelStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
// 用于识别被点击的是第几个cell
|
||||
index: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 是否使用lable插槽
|
||||
useLabelSlot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 左边图标的大小，单位rpx，只对传入icon字段时有效
|
||||
iconSize: {
|
||||
type: [Number, String],
|
||||
default: 34
|
||||
}
|
||||
},
|
||||
inject: {
|
||||
uCellGroup: {
|
||||
// 添加默认值，是为了能让u-cell-item组件无需u-cell-group组件嵌套亦可单独使用
|
||||
default() {
|
||||
return {
|
||||
index: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
itemIndex: 0
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.itemIndex = this.uCellGroup.index++;
|
||||
},
|
||||
computed: {
|
||||
arrowStyle() {
|
||||
let style = {};
|
||||
if (this.arrowDirection == 'up') style.transform = 'rotate(-90deg)';
|
||||
else if (this.arrowDirection == 'down') style.transform = 'rotate(90deg)';
|
||||
else style.transform = 'rotate(0deg)';
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
this.$emit('click', this.index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-cell {
|
||||
position: relative;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 20rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 48rpx;
|
||||
color: $u-content-color;
|
||||
background-color: #fff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.u-cell_title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.u-cell__left-icon-wrap {
|
||||
margin-right: 10rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.u-cell__right-icon-wrap {
|
||||
margin-left: 10rpx;
|
||||
color: #969799;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.u-cell__left-icon-wrap,
|
||||
.u-cell__right-icon-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.u-cell-border:after {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
content: ' ';
|
||||
pointer-events: none;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-bottom: 1px solid $u-border-color;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.u-cell-border {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-border-gap:after {
|
||||
left: 32rpx !important;
|
||||
}
|
||||
|
||||
.u-cell__label {
|
||||
margin-top: 6rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: $u-tips-color;
|
||||
}
|
||||
|
||||
.u-cell__value {
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
color: $u-tips-color;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.u-cell__title,
|
||||
.u-cell__value {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.u-cell--required {
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-cell--required:before {
|
||||
position: absolute;
|
||||
content: '*';
|
||||
left: 8px;
|
||||
margin-top: 4rpx;
|
||||
font-size: 14px;
|
||||
color: $u-type-error;
|
||||
}
|
||||
</style>
|
||||
106
node_modules/uview-ui/components/u-checkbox-group/u-checkbox-group.vue
generated
vendored
Normal file
106
node_modules/uview-ui/components/u-checkbox-group/u-checkbox-group.vue
generated
vendored
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<view class="u-checkbox-group u-clearfix">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Emitter from '../../libs/util/emitter.js';
|
||||
/**
|
||||
* checkboxGroup 开关选择器父组件Group
|
||||
* @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
|
||||
* @tutorial https://www.uviewui.com/components/checkbox.html
|
||||
* @property {String Number} max 最多能选中多少个checkbox（默认999）
|
||||
* @property {String Number} size 组件整体的大小，单位rpx（默认40）
|
||||
* @property {Boolean} disabled 是否禁用所有checkbox（默认false）
|
||||
* @property {String} width 宽度，需带单位
|
||||
* @property {Boolean} wrap 是否每个checkbox都换行（默认false）
|
||||
* @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff）
|
||||
* @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象
|
||||
* @example <u-checkbox-group></u-checkbox-group>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-checkbox-group',
|
||||
mixins: [Emitter],
|
||||
props: {
|
||||
// 最多能选中多少个checkbox
|
||||
max: {
|
||||
type: [Number, String],
|
||||
default: 999
|
||||
},
|
||||
// 所有选中项的 name
|
||||
// value: {
|
||||
// default: Array,
|
||||
// default() {
|
||||
// return []
|
||||
// }
|
||||
// },
|
||||
// 是否禁用所有复选框
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 在表单内提交时的标识符
|
||||
name: {
|
||||
type: [Boolean, String],
|
||||
default: ''
|
||||
},
|
||||
// 选中状态下的颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 组件的整体大小
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: 34
|
||||
},
|
||||
// 每个checkbox占u-checkbox-group的宽度
|
||||
width: {
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
// 是否每个checkbox都换行
|
||||
wrap: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
checkboxGroup: this
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 如果将children定义在data中，在微信小程序会造成循环引用而报错
|
||||
this.children = [];
|
||||
},
|
||||
methods: {
|
||||
emitEvent() {
|
||||
let values = [];
|
||||
this.children.map(val => {
|
||||
if(val.value) values.push(val.name);
|
||||
})
|
||||
this.$emit('change', values);
|
||||
// 发出事件，用于在表单组件中嵌入checkbox的情况，进行验证
|
||||
this.$nextTick(() => {
|
||||
// 将当前的值发送到 u-form-item 进行校验
|
||||
this.dispatch('u-form-item', 'on-form-change', values);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-checkbox-group {
|
||||
/* #ifndef MP */
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
278
node_modules/uview-ui/components/u-checkbox/u-checkbox.vue
generated
vendored
Normal file
278
node_modules/uview-ui/components/u-checkbox/u-checkbox.vue
generated
vendored
Normal file
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<view class="u-checkbox" :style="[checkboxStyle]">
|
||||
<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]" />
|
||||
</view>
|
||||
<view class="u-label-class u-checkbox__label" @tap="onClickLabel" :style="{
|
||||
fontSize: labelSize + 'rpx'
|
||||
}">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* checkbox 复选框
|
||||
* @description 该组件需要搭配checkboxGroup组件使用，以便用户进行操作时，获得当前复选框组的选中情况。
|
||||
* @tutorial https://www.uviewui.com/components/checkbox.html
|
||||
* @property {String Number} icon-size 图标大小，单位rpx（默认24）
|
||||
* @property {String Number} label-size label字体大小，单位rpx（默认28）
|
||||
* @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: {
|
||||
// checkbox的名称
|
||||
name: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 形状，square为方形，circle为原型
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'square'
|
||||
},
|
||||
// 是否为选中状态
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否禁止点击提示语选中复选框
|
||||
labelDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 选中状态下的颜色，如设置此值，将会覆盖checkboxGroup的activeColor值
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 图标的大小，单位rpx
|
||||
iconSize: {
|
||||
type: [String, Number],
|
||||
default: 20
|
||||
},
|
||||
// label的字体大小，rpx单位
|
||||
labelSize: {
|
||||
type: [String, Number],
|
||||
default: 28
|
||||
},
|
||||
// 组件的整体大小
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: 34
|
||||
},
|
||||
},
|
||||
inject: {
|
||||
checkboxGroup: {
|
||||
// 添加默认值，是为了能让u-checkbox组件无需u-checkbox-group组件嵌套时单独使用
|
||||
default() {
|
||||
return {
|
||||
disabled: false,
|
||||
children: [],
|
||||
size: 34,
|
||||
activeColor: '#2979ff',
|
||||
max: 999999,
|
||||
emitEvent: () => {},
|
||||
width: '',
|
||||
wrap: false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
parentDisabled: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.parentDisabled = this.checkboxGroup.disabled;
|
||||
this.checkboxGroup.children.push(this);
|
||||
},
|
||||
computed: {
|
||||
iconStyle() {
|
||||
let style = {};
|
||||
if (this.checkboxActiveColor && this.value && !this.disabled && !this.parentDisabled) {
|
||||
style.borderColor = this.checkboxActiveColor;
|
||||
style.backgroundColor = this.checkboxActiveColor;
|
||||
}
|
||||
style.width = this.checkboxGroup.size + 'rpx';
|
||||
style.height = this.checkboxGroup.size + 'rpx';
|
||||
return style;
|
||||
},
|
||||
iconColor() {
|
||||
return this.value ? '#ffffff' : 'transparent';
|
||||
},
|
||||
iconClass() {
|
||||
let classs = [];
|
||||
classs.push('u-checkbox__icon--' + this.shape);
|
||||
if (this.value == true) classs.push('u-checkbox__icon--checked');
|
||||
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');
|
||||
return classs;
|
||||
},
|
||||
// 激活的颜色，可能受checkboxGroup和本组件的activeColor影响
|
||||
// 本组件的activeColor值优先
|
||||
checkboxActiveColor() {
|
||||
return this.activeColor ? this.activeColor : this.checkboxGroup.activeColor;
|
||||
},
|
||||
checkboxStyle() {
|
||||
let style = {};
|
||||
if(this.checkboxGroup.width) {
|
||||
style.width = this.checkboxGroup.width;
|
||||
// #ifdef MP
|
||||
// 各家小程序因为它们特殊的编译结构，使用float布局
|
||||
style.float = 'left';
|
||||
// #endif
|
||||
// #ifndef MP
|
||||
// H5和APP使用flex布局
|
||||
style.flex = `0 0 ${this.checkboxGroup.width}`;
|
||||
// #endif
|
||||
}
|
||||
if(this.checkboxGroup.wrap) {
|
||||
style.width = '100%';
|
||||
// #ifndef MP
|
||||
// H5和APP使用flex布局，将宽度设置100%，即可自动换行
|
||||
style.flex = '0 0 100%';
|
||||
// #endif
|
||||
}
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickLabel() {
|
||||
if (!this.disabled && !this.labelDisabled && !this.parentDisabled) {
|
||||
this.setValue();
|
||||
}
|
||||
},
|
||||
toggle() {
|
||||
if (!this.disabled && !this.parentDisabled) {
|
||||
this.setValue();
|
||||
}
|
||||
},
|
||||
emitEvent() {
|
||||
this.$emit('change', {
|
||||
value: this.value,
|
||||
name: this.name
|
||||
})
|
||||
this.checkboxGroup.emitEvent();
|
||||
},
|
||||
// 设置input的值，这里通过input事件，设置通过v-model绑定的组件的值
|
||||
setValue() {
|
||||
// 判断是否超过了可选的最大数量
|
||||
let checkedNum = 0;
|
||||
this.checkboxGroup.children.map(val => {
|
||||
if (val.value) checkedNum++;
|
||||
})
|
||||
// 如果原来为选中状态，那么可以取消
|
||||
if (this.value == true) {
|
||||
this.$emit('input', !this.value);
|
||||
// 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
|
||||
this.$nextTick(function() {
|
||||
this.emitEvent();
|
||||
})
|
||||
} else if (checkedNum < this.checkboxGroup.max && this.value == false) {
|
||||
// 如果原来为未选中状态，需要选中的数量少于父组件中设置的max值，才可以选中
|
||||
this.$emit('input', !this.value);
|
||||
// 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
|
||||
this.$nextTick(function() {
|
||||
this.emitEvent();
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-checkbox {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.u-checkbox__icon-wrap,
|
||||
.u-checkbox__label {
|
||||
color: $u-content-color;
|
||||
}
|
||||
|
||||
.u-checkbox__icon-wrap {
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.u-checkbox__icon {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
color: transparent;
|
||||
text-align: center;
|
||||
transition-property: color, border-color, background-color;
|
||||
font-size: 20px;
|
||||
border: 1px solid #c8c9cc;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.u-checkbox__icon--circle {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.u-checkbox__icon--square {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.u-checkbox__icon--checked {
|
||||
color: #fff;
|
||||
background-color: #2979ff;
|
||||
border-color: #2979ff;
|
||||
}
|
||||
|
||||
.u-checkbox__icon--disabled {
|
||||
background-color: #ebedf0;
|
||||
border-color: #c8c9cc;
|
||||
}
|
||||
|
||||
.u-checkbox__icon--disabled--checked {
|
||||
color: #c8c9cc !important;
|
||||
}
|
||||
|
||||
.u-checkbox__label {
|
||||
word-wrap: break-word;
|
||||
margin-left: 10rpx;
|
||||
margin-right: 24rpx;
|
||||
color: $u-content-color;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.u-checkbox__label--disabled {
|
||||
color: #c8c9cc;
|
||||
}
|
||||
|
||||
.u-checkbox__label:empty {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
214
node_modules/uview-ui/components/u-circle-progress/u-circle-progress.vue
generated
vendored
Normal file
214
node_modules/uview-ui/components/u-circle-progress/u-circle-progress.vue
generated
vendored
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<view
|
||||
class="u-circle-progress"
|
||||
:style="{
|
||||
width: widthPx + 'px',
|
||||
height: widthPx + 'px',
|
||||
backgroundColor: bgColor
|
||||
}"
|
||||
>
|
||||
<canvas
|
||||
class="u-canvas-bg"
|
||||
:canvas-id="elBgId"
|
||||
:style="{
|
||||
width: widthPx + 'px',
|
||||
height: widthPx + 'px'
|
||||
}"
|
||||
></canvas>
|
||||
<canvas
|
||||
class="u-canvas"
|
||||
:canvas-id="elId"
|
||||
:style="{
|
||||
width: widthPx + 'px',
|
||||
height: widthPx + 'px'
|
||||
}"
|
||||
></canvas>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* circleProgress 环形进度条
|
||||
* @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 {
|
||||
name: 'u-circle-progress',
|
||||
props: {
|
||||
// 圆环进度百分比值
|
||||
percent: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
// 限制值在0到100之间
|
||||
validator: val => {
|
||||
return val >= 0 && val <= 100;
|
||||
}
|
||||
},
|
||||
// 底部圆环的颜色（灰色的圆环）
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: '#ececec'
|
||||
},
|
||||
// 圆环激活部分的颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#19be6b'
|
||||
},
|
||||
// 圆环线条的宽度，单位rpx
|
||||
borderWidth: {
|
||||
type: [Number, String],
|
||||
default: 14
|
||||
},
|
||||
// 整个圆形的宽度，单位rpx
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 200
|
||||
},
|
||||
// 整个圆环执行一圈的时间，单位ms
|
||||
duration: {
|
||||
type: [Number, String],
|
||||
default: 1500
|
||||
},
|
||||
// 主题类型
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 整个圆环进度区域的背景色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// #ifdef MP-WEIXIN
|
||||
elBgId: 'uCircleProgressBgId', // 微信小程序中不能使用this.$u.guid()形式动态生成id值，否则会报错
|
||||
elId: 'uCircleProgressElId',
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
elBgId: this.$u.guid(), // 非微信端的时候，需用动态的id，否则一个页面多个圆形进度条组件数据会混乱
|
||||
elId: this.$u.guid(),
|
||||
// #endif
|
||||
widthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度
|
||||
borderWidthPx: uni.upx2px(this.borderWidth), // 转成px后的圆环的宽度
|
||||
startAngle: -Math.PI / 2, // canvas画圆的起始角度，默认为3点钟方向，定位到12点钟方向
|
||||
progressContext: null, // 活动圆的canvas上下文
|
||||
newPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
|
||||
oldPercent: 0 // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
percent(nVal, oVal = 0) {
|
||||
if (nVal > 100) nVal = 100;
|
||||
if (nVal < 0) oVal = 0;
|
||||
// 此值其实等于this.percent，命名一个新
|
||||
this.newPercent = nVal;
|
||||
this.oldPercent = oVal;
|
||||
setTimeout(() => {
|
||||
// 无论是百分比值增加还是减少，需要操作还是原来的旧的百分比值
|
||||
// 将此值减少或者新增到新的百分比值
|
||||
this.drawCircleByProgress(oVal);
|
||||
}, 50);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 赋值，用于加载后第一个画圆使用
|
||||
this.newPercent = this.percent;
|
||||
this.oldPercent = 0;
|
||||
},
|
||||
computed: {
|
||||
// 有type主题时，优先起作用
|
||||
circleColor() {
|
||||
if (['success', 'error', 'info', 'primary', 'warning'].indexOf(this.type) >= 0) return this.$u.color[this.type];
|
||||
else return this.activeColor;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 在h5端，必须要做一点延时才起作用，this.$nextTick()无效(HX2.4.7)
|
||||
setTimeout(() => {
|
||||
this.drawProgressBg();
|
||||
this.drawCircleByProgress(this.oldPercent);
|
||||
}, 50);
|
||||
},
|
||||
methods: {
|
||||
drawProgressBg() {
|
||||
let ctx = uni.createCanvasContext(this.elBgId, this);
|
||||
ctx.setLineWidth(this.borderWidthPx); // 设置圆环宽度
|
||||
ctx.setStrokeStyle(this.inactiveColor); // 线条颜色
|
||||
ctx.beginPath(); // 开始描绘路径
|
||||
// 设置一个原点(110,110)，半径为100的圆的路径到当前路径
|
||||
let radius = this.widthPx / 2;
|
||||
ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 2 * Math.PI, false);
|
||||
ctx.stroke(); // 对路径进行描绘
|
||||
ctx.draw();
|
||||
},
|
||||
drawCircleByProgress(progress) {
|
||||
// 第一次操作进度环时将上下文保存到了this.data中，直接使用即可
|
||||
let ctx = this.progressContext;
|
||||
if (!ctx) {
|
||||
ctx = uni.createCanvasContext(this.elId, this);
|
||||
this.progressContext = ctx;
|
||||
}
|
||||
// 表示进度的两端为圆形
|
||||
ctx.setLineCap('round');
|
||||
// 设置线条的宽度和颜色
|
||||
ctx.setLineWidth(this.borderWidthPx);
|
||||
ctx.setStrokeStyle(this.circleColor);
|
||||
// 将总过渡时间除以100，得出每修改百分之一进度所需的时间
|
||||
let time = Math.floor(this.duration / 100);
|
||||
// 结束角的计算依据为：将2π分为100份，乘以当前的进度值，得出终止点的弧度值，加起始角，为整个圆从默认的
|
||||
// 3点钟方向开始画图，转为更好理解的12点钟方向开始作图，这需要起始角和终止角同时加上this.startAngle值
|
||||
let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
|
||||
ctx.beginPath();
|
||||
// 半径为整个canvas宽度的一半
|
||||
let radius = this.widthPx / 2;
|
||||
ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false);
|
||||
ctx.stroke();
|
||||
ctx.draw();
|
||||
// 如果变更后新值大于旧值，意味着增大了百分比
|
||||
if (this.newPercent > this.oldPercent) {
|
||||
// 每次递增百分之一
|
||||
progress++;
|
||||
// 如果新增后的值，大于需要设置的值百分比值，停止继续增加
|
||||
if (progress > this.newPercent) return;
|
||||
} else {
|
||||
// 同理于上面
|
||||
progress--;
|
||||
if (progress < this.newPercent) return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
// 定时器，每次操作间隔为time值，为了让进度条有动画效果
|
||||
this.drawCircleByProgress(progress);
|
||||
}, time);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-circle-progress {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-canvas-bg {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.u-canvas {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
98
node_modules/uview-ui/components/u-col/u-col.vue
generated
vendored
Normal file
98
node_modules/uview-ui/components/u-col/u-col.vue
generated
vendored
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view class="u-col" :class="[
|
||||
'u-col-' + span
|
||||
]" :style="{
|
||||
padding: `0 ${Number(gutter)/2 + 'rpx'}`,
|
||||
marginLeft: 100 / 12 * offset + '%',
|
||||
flex: `0 0 ${100 / 12 * span}%`
|
||||
}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* col 布局单元格
|
||||
* @description 通过基础的 12 分栏，迅速简便地创建布局（搭配<u-row>使用）
|
||||
* @tutorial https://www.uviewui.com/components/layout.html
|
||||
* @property {String Number} span 栅格占据的列数，总12等分（默认0）
|
||||
* @property {String Number} offset 分栏左边偏移，计算方式与span相同（默认0）
|
||||
* @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col>
|
||||
*/
|
||||
export default {
|
||||
name: "u-col",
|
||||
props: {
|
||||
// 占父容器宽度的多少等分，总分为12份
|
||||
span: {
|
||||
type: [Number, String],
|
||||
default: 12
|
||||
},
|
||||
// 指定栅格左侧的间隔数(总12栏)
|
||||
offset: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
inject: ['gutter'],
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-col {
|
||||
/* #ifdef MP-WEIXIN */
|
||||
float: left;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.u-col-0 {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.u-col-1 {
|
||||
width: calc(100%/12);
|
||||
}
|
||||
|
||||
.u-col-2 {
|
||||
width: calc(100%/12 * 2);
|
||||
}
|
||||
|
||||
.u-col-3 {
|
||||
width: calc(100%/12 * 3);
|
||||
}
|
||||
|
||||
.u-col-4 {
|
||||
width: calc(100%/12 * 4);
|
||||
}
|
||||
|
||||
.u-col-5 {
|
||||
width: calc(100%/12 * 5);
|
||||
}
|
||||
|
||||
.u-col-6 {
|
||||
width: calc(100%/12 * 6);
|
||||
}
|
||||
|
||||
.u-col-7 {
|
||||
width: calc(100%/12 * 7);
|
||||
}
|
||||
|
||||
.u-col-8 {
|
||||
width: calc(100%/12 * 8);
|
||||
}
|
||||
|
||||
.u-col-9 {
|
||||
width: calc(100%/12 * 9);
|
||||
}
|
||||
|
||||
.u-col-10 {
|
||||
width: calc(100%/12 * 10);
|
||||
}
|
||||
|
||||
.u-col-11 {
|
||||
width: calc(100%/12 * 11);
|
||||
}
|
||||
|
||||
.u-col-12 {
|
||||
width: calc(100%/12 * 12);
|
||||
}
|
||||
</style>
|
||||
196
node_modules/uview-ui/components/u-collapse-item/u-collapse-item.vue
generated
vendored
Normal file
196
node_modules/uview-ui/components/u-collapse-item/u-collapse-item.vue
generated
vendored
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<view class="u-collapse-item" :style="[itemStyle]">
|
||||
<view :hover-stay-time="200" class="u-collapse-head" @tap.stop="headClick" :hover-class="hoverClass" :style="[headStyle]">
|
||||
<view class="u-collapse-title u-line-1" :style="[{ textAlign: align ? align : 'left' },
|
||||
isShow && activeStyle && !arrow ? activeStyle : '']">
|
||||
{{ title }}
|
||||
</view>
|
||||
<view class="u-icon-wrap">
|
||||
<u-icon v-if="arrow" :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 class="u-collapse-body" :style="[{
|
||||
height: isShow ? height + 'px' : '0'
|
||||
}]">
|
||||
<view class="u-collapse-content" :id="elId" :style="[bodyStyle]">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* collapseItem 手风琴Item
|
||||
* @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: {
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 标题的对齐方式
|
||||
align: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
// 是否可以点击收起
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// collapse显示与否
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 唯一标识符
|
||||
name: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
//活动样式
|
||||
activeStyle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 标识当前为第几个
|
||||
index: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
inject: ['uCollapse'],
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
elId: this.$u.guid(),
|
||||
height: 0, // body内容的高度
|
||||
headStyle: {}, // 头部样式，对象形式
|
||||
bodyStyle: {}, // 主体部分样式
|
||||
//itemStyle: {}, // 每个item的整体样式
|
||||
arrowColor: '', // 箭头的颜色
|
||||
hoverClass: '', // 头部按下时的效果样式类
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.queryRect();
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
open(val) {
|
||||
this.isShow = val;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
arrow() {
|
||||
return this.uCollapse.arrow;
|
||||
},
|
||||
itemStyle() {
|
||||
return this.uCollapse.itemStyle;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.isShow = this.open;
|
||||
this.nameSync = this.name ? this.name : this.uCollapse.childrens.length;
|
||||
this.uCollapse.childrens.push(this);
|
||||
//this.itemStyle = this.uCollapse.itemStyle;
|
||||
this.headStyle = this.uCollapse.headStyle;
|
||||
this.bodyStyle = this.uCollapse.bodyStyle;
|
||||
this.arrowColor = this.uCollapse.arrowColor;
|
||||
this.hoverClass = this.uCollapse.hoverClass;
|
||||
},
|
||||
methods: {
|
||||
// 点击collapsehead头部
|
||||
headClick() {
|
||||
if (this.disabled) return;
|
||||
if (this.uCollapse.accordion == true) {
|
||||
this.uCollapse.childrens.map(val => {
|
||||
// 自身不设置为false，因为后面有this.isShow = !this.isShow;处理了
|
||||
if (this != val) {
|
||||
val.isShow = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.isShow = !this.isShow;
|
||||
// 触发本组件的事件
|
||||
uni.$emit('change', {
|
||||
index: this.index,
|
||||
show: this.isShow
|
||||
})
|
||||
|
||||
// 只有在打开时才发出事件
|
||||
if (this.isShow) this.uCollapse.onChange();
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 查询内容高度
|
||||
queryRect() {
|
||||
// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
|
||||
// 组件内部一般用this.$uGetRect，对外的为this.$u.getRect，二者功能一致，名称不同
|
||||
this.$uGetRect('#' + this.elId).then(res => {
|
||||
this.height = res.height;
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-collapse-head {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $u-main-color;
|
||||
font-size: 30rpx;
|
||||
line-height: 1;
|
||||
padding: 24rpx 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.u-collapse-title {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
.u-arrow-down-icon {
|
||||
transition: all 0.3s;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.u-arrow-down-icon-active {
|
||||
transform: rotate(180deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.u-collapse-body {
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.u-collapse-content {
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
color: $u-tips-color;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
98
node_modules/uview-ui/components/u-collapse/u-collapse.vue
generated
vendored
Normal file
98
node_modules/uview-ui/components/u-collapse/u-collapse.vue
generated
vendored
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view class="u-collapse">
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* collapse 手风琴
|
||||
* @description 通过折叠面板收纳内容区域
|
||||
* @tutorial https://www.uviewui.com/components/collapse.html
|
||||
* @property {Boolean} accordion 是否手风琴模式（默认true）
|
||||
* @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
|
||||
* @property {String} arrow-color 标题右侧箭头的颜色（默认#909399）
|
||||
* @property {Object} head-style 标题自定义样式，对象形式
|
||||
* @property {Object} body-style 主体自定义样式，对象形式
|
||||
* @property {String} hover-class 样式类名，按下时有效（默认u-hover-class）
|
||||
* @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)
|
||||
* @example <u-collapse></u-collapse>
|
||||
*/
|
||||
export default {
|
||||
name:"u-collapse",
|
||||
props: {
|
||||
// 是否手风琴模式
|
||||
accordion: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 头部的样式
|
||||
headStyle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 主体的样式
|
||||
bodyStyle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 每一个item的样式
|
||||
itemStyle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 是否显示右侧的箭头
|
||||
arrow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 箭头的颜色
|
||||
arrowColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 标题部分按压时的样式类，"none"为无效果
|
||||
hoverClass: {
|
||||
type: String,
|
||||
default: 'u-hover-class'
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
uCollapse: this
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.childrens = []
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// collapse item被点击，由collapse item调用父组件方法
|
||||
onChange() {
|
||||
let activeItem = [];
|
||||
this.childrens.forEach((vm, index) => {
|
||||
if (vm.isShow) {
|
||||
activeItem.push(vm.nameSync);
|
||||
}
|
||||
})
|
||||
// 如果是手风琴模式，只有一个匹配结果，也即activeItem长度为1，将其转为字符串
|
||||
if (this.accordion) activeItem = activeItem.join('');
|
||||
this.$emit('change', activeItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
222
node_modules/uview-ui/components/u-column-notice/u-column-notice.vue
generated
vendored
Normal file
222
node_modules/uview-ui/components/u-column-notice/u-column-notice.vue
generated
vendored
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<view
|
||||
class="u-notice-bar"
|
||||
:style="{
|
||||
background: computeBgColor,
|
||||
padding: padding
|
||||
}"
|
||||
>
|
||||
<view class="u-icon-wrap">
|
||||
<u-icon class="u-left-icon" v-if="volumeIcon" name="volume-fill" :size="volumeSize" :color="computeColor"></u-icon>
|
||||
</view>
|
||||
<swiper :disable-touch="disableTouch" @change="change" :autoplay="autoplay && playState == 'play'" :vertical="vertical" circular :interval="duration" class="u-swiper">
|
||||
<swiper-item v-for="(item, index) in list" :key="index" class="u-swiper-item">
|
||||
<view
|
||||
class="u-news-item u-line-1"
|
||||
:style="{
|
||||
color: computeColor,
|
||||
fontSize: fontSize + 'rpx'
|
||||
}"
|
||||
@tap="click(index)"
|
||||
>
|
||||
{{ item }}
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="u-icon-wrap">
|
||||
<u-icon @click="getMore" class="u-right-icon" v-if="moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon>
|
||||
<u-icon @click="close" class="u-right-icon" v-if="closeIcon" name="close" :size="24" :color="computeColor"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
// 显示的内容，数组
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 显示的主题，success|error|primary|info|warning
|
||||
type: {
|
||||
type: String,
|
||||
default: 'warning'
|
||||
},
|
||||
// 是否显示左侧的音量图标
|
||||
volumeIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示右侧的右箭头图标
|
||||
moreIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示右侧的关闭图标
|
||||
closeIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否自动播放
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 文字颜色，各图标也会使用文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 滚动方向，row-水平滚动，column-垂直滚动
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'row'
|
||||
},
|
||||
// 是否显示
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 字体大小，单位rpx
|
||||
fontSize: {
|
||||
type: [Number, String],
|
||||
default: 26
|
||||
},
|
||||
// 滚动一个周期的时间长，单位ms
|
||||
duration: {
|
||||
type: [Number, String],
|
||||
default: 2000
|
||||
},
|
||||
// 音量喇叭的大小
|
||||
volumeSize: {
|
||||
type: [Number, String],
|
||||
default: 34
|
||||
},
|
||||
// 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度
|
||||
speed: {
|
||||
type: Number,
|
||||
default: 160
|
||||
},
|
||||
// 水平滚动时，是否采用衔接形式滚动
|
||||
isCircular: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 滚动方向，horizontal-水平滚动，vertical-垂直滚动
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'horizontal'
|
||||
},
|
||||
// 播放状态，play-播放，paused-暂停
|
||||
playState: {
|
||||
type: String,
|
||||
default: 'play'
|
||||
},
|
||||
// 是否禁止用手滑动切换
|
||||
// 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
|
||||
disableTouch: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 通知的边距
|
||||
padding: {
|
||||
type: [Number, String],
|
||||
default: '18rpx 24rpx'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 计算字体颜色，如果没有自定义的，就用uview主题颜色
|
||||
computeColor() {
|
||||
if (this.color) return this.color;
|
||||
else if(this.type == 'none') return this.$u.color['contentColor'];
|
||||
else return this.$u.color[this.type];
|
||||
},
|
||||
// 垂直或者水平滚动
|
||||
vertical() {
|
||||
if(this.mode == 'horizontal') return false;
|
||||
else return true;
|
||||
},
|
||||
// 计算背景颜色
|
||||
computeBgColor() {
|
||||
if (this.bgColor) return this.bgColor;
|
||||
else if(this.type == 'none') return 'transparent';
|
||||
else return this.$u.color[this.type + 'Light'];
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// animation: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 点击通告栏
|
||||
click(index) {
|
||||
this.$emit('click', index);
|
||||
},
|
||||
// 点击关闭按钮
|
||||
close() {
|
||||
this.$emit('close');
|
||||
},
|
||||
// 点击更多箭头按钮
|
||||
getMore() {
|
||||
this.$emit('getMore');
|
||||
},
|
||||
change(e) {
|
||||
let index = e.detail.current;
|
||||
if(index == this.list.length - 1) {
|
||||
this.$emit('end');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-notice-bar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
padding: 18rpx 24rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-swiper {
|
||||
font-size: 26rpx;
|
||||
height: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.u-swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-news-item {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-right-icon {
|
||||
margin-left: 12rpx;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-left-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
299
node_modules/uview-ui/components/u-count-down/u-count-down.vue
generated
vendored
Normal file
299
node_modules/uview-ui/components/u-count-down/u-count-down.vue
generated
vendored
Normal file
@@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<view class="u-countdown">
|
||||
<view class="u-countdown-item" :style="[itemStyle]" v-if="showDays">
|
||||
<view class="u-countdown-time" :style="[letterStyle]">
|
||||
{{ d }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="u-countdown-colon"
|
||||
:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
|
||||
v-if="showDays"
|
||||
>
|
||||
{{ separator == 'colon' ? ':' : '天' }}
|
||||
</view>
|
||||
<view class="u-countdown-item" :style="[itemStyle]" v-if="showHours">
|
||||
<view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}">
|
||||
{{ h }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="u-countdown-colon"
|
||||
:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
|
||||
v-if="showHours"
|
||||
>
|
||||
{{ separator == 'colon' ? ':' : '时' }}
|
||||
</view>
|
||||
<view class="u-countdown-item" :style="[itemStyle]" v-if="showMinutes">
|
||||
<view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}">
|
||||
{{ i }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="u-countdown-colon"
|
||||
:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
|
||||
v-if="showMinutes"
|
||||
>
|
||||
{{ separator == 'colon' ? ':' : '分' }}
|
||||
</view>
|
||||
<view class="u-countdown-item" :style="[itemStyle]" v-if="showSeconds">
|
||||
<view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}">
|
||||
{{ s }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="u-countdown-colon"
|
||||
:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
|
||||
v-if="showSeconds && separator == 'zh'"
|
||||
>
|
||||
秒
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* countDown 倒计时
|
||||
* @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
|
||||
* @tutorial https://www.uviewui.com/components/countDown.html
|
||||
* @property {String Number} timestamp 倒计时，单位为秒
|
||||
* @property {Boolean} autoplay 是否自动开始倒计时，如果为false，需手动调用开始方法。见官网说明（默认true）
|
||||
* @property {String} separator 分隔符，colon为英文冒号，zh为中文（默认colon）
|
||||
* @property {String Number} separator-size 分隔符的字体大小，单位rpx（默认30）
|
||||
* @property {String} separator-color 分隔符的颜色（默认#303133）
|
||||
* @property {String Number} font-size 倒计时字体大小，单位rpx（默认30）
|
||||
* @property {Boolean} show-border 是否显示倒计时数字的边框（默认false）
|
||||
* @property {String} border-color 数字边框的颜色（默认#303133）
|
||||
* @property {String} bg-color 倒计时数字的背景颜色（默认#ffffff）
|
||||
* @property {String} color 倒计时数字的颜色（默认#303133）
|
||||
* @property {String} height 数字高度值(宽度等同此值)，设置边框时看情况是否需要设置此值，单位rpx（默认auto）
|
||||
* @property {Boolean} show-days 是否显示倒计时的"天"部分（默认true）
|
||||
* @property {Boolean} show-hours 是否显示倒计时的"时"部分（默认true）
|
||||
* @property {Boolean} show-minutes 是否显示倒计时的"分"部分（默认true）
|
||||
* @property {Boolean} show-seconds 是否显示倒计时的"秒"部分（默认true）
|
||||
* @event {Function} end 倒计时结束
|
||||
* @event {Function} change 每秒触发一次，回调为当前剩余的倒计秒数
|
||||
* @example <u-count-down ref="uCountDown" :timestamp="86400" :autoplay="false"></u-count-down>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-count-down',
|
||||
props: {
|
||||
// 倒计时的时间，秒为单位
|
||||
timestamp: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 是否自动开始倒计时
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 用英文冒号(colon)或者中文(zh)当做分隔符，false的时候为中文，如："11:22"或"11时22秒"
|
||||
separator: {
|
||||
type: String,
|
||||
default: 'colon'
|
||||
},
|
||||
// 分隔符的大小，单位rpx
|
||||
separatorSize: {
|
||||
type: [Number, String],
|
||||
default: 30
|
||||
},
|
||||
// 分隔符颜色
|
||||
separatorColor: {
|
||||
type: String,
|
||||
default: "#303133"
|
||||
},
|
||||
// 字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#303133'
|
||||
},
|
||||
// 字体大小，单位rpx
|
||||
fontSize: {
|
||||
type: [Number, String],
|
||||
default: 30
|
||||
},
|
||||
// 背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
// 数字框高度，单位rpx
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 'auto'
|
||||
},
|
||||
// 是否显示数字框
|
||||
showBorder: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 边框颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#303133'
|
||||
},
|
||||
// 是否显示秒
|
||||
showSeconds: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示分钟
|
||||
showMinutes: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示小时
|
||||
showHours: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示“天”
|
||||
showDays: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 监听时间戳的变化
|
||||
timestamp(newVal, oldVal) {
|
||||
// 如果倒计时间发生变化，清除定时器，重新开始倒计时
|
||||
clearInterval(this.timer);
|
||||
this.start();
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
d: '00', // 天的默认值
|
||||
h: '00', // 小时的默认值
|
||||
i: '00', // 分钟的默认值
|
||||
s: '00', // 秒的默认值
|
||||
timer: null ,// 定时器
|
||||
seconds: 0, // 记录不停倒计过程中变化的秒数
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 倒计时item的样式，item为分别的时分秒部分的数字
|
||||
itemStyle() {
|
||||
let style = {};
|
||||
if(this.height) {
|
||||
style.height = this.height + 'rpx';
|
||||
style.width = this.height + 'rpx';
|
||||
}
|
||||
if(this.showBorder) {
|
||||
style.borderStyle = 'solid';
|
||||
style.borderColor = this.borderColor;
|
||||
style.borderWidth = '1px';
|
||||
}
|
||||
if(this.bgColor) {
|
||||
style.backgroundColor = this.bgColor;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
// 倒计时数字的样式
|
||||
letterStyle() {
|
||||
let style = {};
|
||||
if(this.fontSize) style.fontSize = this.fontSize + 'rpx';
|
||||
if(this.color) style.color = this.color;
|
||||
return style;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 如果自动倒计时
|
||||
this.autoplay && this.timestamp && this.start();
|
||||
},
|
||||
methods: {
|
||||
// 倒计时
|
||||
start() {
|
||||
if (this.timestamp <= 0) return;
|
||||
this.seconds = Number(this.timestamp);
|
||||
this.formatTime(this.seconds);
|
||||
this.timer = setInterval(() => {
|
||||
this.seconds--;
|
||||
// 发出change事件
|
||||
this.$emit('change', this.seconds);
|
||||
if (this.seconds < 0) {
|
||||
return this.end();
|
||||
}
|
||||
this.formatTime(this.seconds);
|
||||
}, 1000);
|
||||
},
|
||||
// 格式化时间
|
||||
formatTime(seconds) {
|
||||
// 小于等于0的话，结束倒计时
|
||||
seconds <= 0 && this.end();
|
||||
let [day, hour, minute, second] = [0, 0, 0, 0];
|
||||
day = Math.floor(seconds / (60 * 60 * 24));
|
||||
// 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中
|
||||
// hour为给后面计算秒和分等用的(基于显示天的前提下计算)
|
||||
hour = Math.floor(seconds / (60 * 60)) - day * 24;
|
||||
// showHour为需要显示的小时
|
||||
let showHour = null;
|
||||
if(this.showDays) {
|
||||
showHour = hour;
|
||||
} else {
|
||||
// 如果不显示天数，将“天”部分的时间折算到小时中去
|
||||
showHour = Math.floor(seconds / (60 * 60));
|
||||
}
|
||||
minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60;
|
||||
second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
|
||||
// 如果小于10，在前面补上一个"0"
|
||||
showHour = showHour < 10 ? '0' + showHour : showHour;
|
||||
minute = minute < 10 ? '0' + minute : minute;
|
||||
second = second < 10 ? '0' + second : second;
|
||||
this.d = day;
|
||||
this.h = showHour;
|
||||
this.i = minute;
|
||||
this.s = second;
|
||||
},
|
||||
// 停止倒计时
|
||||
end() {
|
||||
// 清除定时器
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
this.$emit('end', {});
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-countdown {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-countdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rpx;
|
||||
border-radius: 6rpx;
|
||||
white-space: nowrap;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.u-countdown-time {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.u-countdown-colon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 5rpx;
|
||||
line-height: 1;
|
||||
align-items: center;
|
||||
padding-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.u-countdown-scale {
|
||||
transform: scale(0.9);
|
||||
transform-origin: center center;
|
||||
}
|
||||
</style>
|
||||
237
node_modules/uview-ui/components/u-count-to/u-count-to.vue
generated
vendored
Normal file
237
node_modules/uview-ui/components/u-count-to/u-count-to.vue
generated
vendored
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<view
|
||||
class="u-count-num"
|
||||
:style="{
|
||||
fontSize: fontSize + 'rpx',
|
||||
fontWeight: bold ? 'bold' : 'normal',
|
||||
color: color
|
||||
}"
|
||||
>
|
||||
{{ displayValue }}
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* countTo 数字滚动
|
||||
* @description 该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
|
||||
* @tutorial https://www.uviewui.com/components/countTo.html
|
||||
* @property {String Number} start-val 开始值
|
||||
* @property {String Number} end-val 结束值
|
||||
* @property {String Number} duration 滚动过程所需的时间，单位ms（默认2000）
|
||||
* @property {Boolean} autoplay 是否自动开始滚动（默认true）
|
||||
* @property {String Number} decimals 要显示的小数位数，见官网说明（默认0）
|
||||
* @property {Boolean} use-easing 滚动结束时，是否缓动结尾，见官网说明（默认true）
|
||||
* @property {String} separator 千位分隔符，见官网说明
|
||||
* @property {String} color 字体颜色（默认#303133）
|
||||
* @property {String Number} font-size 字体大小，单位rpx（默认50）
|
||||
* @property {Boolean} bold 字体是否加粗（默认false）
|
||||
* @event {Function} end 数值滚动到目标值时触发
|
||||
* @example <u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-count-to',
|
||||
props: {
|
||||
// 开始的数值，默认从0增长到某一个数
|
||||
startVal: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 要滚动的目标数值，必须
|
||||
endVal: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
required: true
|
||||
},
|
||||
// 滚动到目标数值的动画持续时间，单位为毫秒（ms）
|
||||
duration: {
|
||||
type: [Number, String],
|
||||
default: 2000
|
||||
},
|
||||
// 设置数值后是否自动开始滚动
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 要显示的小数位数
|
||||
decimals: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 是否在即将到达目标数值的时候，使用缓慢滚动的效果
|
||||
useEasing: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 十进制分割
|
||||
decimal: {
|
||||
type: [Number, String],
|
||||
default: '.'
|
||||
},
|
||||
// 字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#303133'
|
||||
},
|
||||
// 字体大小
|
||||
fontSize: {
|
||||
type: [Number, String],
|
||||
default: 50
|
||||
},
|
||||
// 是否加粗字体
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 千位分隔符，类似金额的分割(￥23,321.05中的",")
|
||||
separator: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localStartVal: this.startVal,
|
||||
displayValue: this.formatNumber(this.startVal),
|
||||
printVal: null,
|
||||
paused: false, // 是否暂停
|
||||
localDuration: Number(this.duration),
|
||||
startTime: null, // 开始的时间
|
||||
timestamp: null, // 时间戳
|
||||
remaining: null, // 停留的时间
|
||||
rAF: null,
|
||||
lastTime: 0 // 上一次的时间
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
countDown() {
|
||||
return this.startVal > this.endVal;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
startVal() {
|
||||
this.autoplay && this.start();
|
||||
},
|
||||
endVal() {
|
||||
this.autoplay && this.start();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.autoplay && this.start();
|
||||
},
|
||||
methods: {
|
||||
easingFn(t, b, c, d) {
|
||||
return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
|
||||
},
|
||||
requestAnimationFrame(callback) {
|
||||
const currTime = new Date().getTime();
|
||||
// 为了使setTimteout的尽可能的接近每秒60帧的效果
|
||||
const timeToCall = Math.max(0, 16 - (currTime - this.lastTime));
|
||||
const id = setTimeout(() => {
|
||||
callback(currTime + timeToCall);
|
||||
}, timeToCall);
|
||||
this.lastTime = currTime + timeToCall;
|
||||
return id;
|
||||
},
|
||||
|
||||
cancelAnimationFrame(id) {
|
||||
clearTimeout(id);
|
||||
},
|
||||
// 开始滚动数字
|
||||
start() {
|
||||
this.localStartVal = this.startVal;
|
||||
this.startTime = null;
|
||||
this.localDuration = this.duration;
|
||||
this.paused = false;
|
||||
this.rAF = this.requestAnimationFrame(this.count);
|
||||
},
|
||||
// 暂定状态，重新再开始滚动；或者滚动状态下，暂停
|
||||
reStart() {
|
||||
if (this.paused) {
|
||||
this.resume();
|
||||
this.paused = false;
|
||||
} else {
|
||||
this.stop();
|
||||
this.paused = true;
|
||||
}
|
||||
},
|
||||
// 暂停
|
||||
stop() {
|
||||
this.cancelAnimationFrame(this.rAF);
|
||||
},
|
||||
// 重新开始(暂停的情况下)
|
||||
resume() {
|
||||
this.startTime = null;
|
||||
this.localDuration = this.remaining;
|
||||
this.localStartVal = this.printVal;
|
||||
this.requestAnimationFrame(this.count);
|
||||
},
|
||||
// 重置
|
||||
reset() {
|
||||
this.startTime = null;
|
||||
this.cancelAnimationFrame(this.rAF);
|
||||
this.displayValue = this.formatNumber(this.startVal);
|
||||
},
|
||||
count(timestamp) {
|
||||
if (!this.startTime) this.startTime = timestamp;
|
||||
this.timestamp = timestamp;
|
||||
const progress = timestamp - this.startTime;
|
||||
this.remaining = this.localDuration - progress;
|
||||
if (this.useEasing) {
|
||||
if (this.countDown) {
|
||||
this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration);
|
||||
} else {
|
||||
this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
|
||||
}
|
||||
} else {
|
||||
if (this.countDown) {
|
||||
this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration);
|
||||
} else {
|
||||
this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
|
||||
}
|
||||
}
|
||||
if (this.countDown) {
|
||||
this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
|
||||
} else {
|
||||
this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
|
||||
}
|
||||
this.displayValue = this.formatNumber(this.printVal);
|
||||
if (progress < this.localDuration) {
|
||||
this.rAF = this.requestAnimationFrame(this.count);
|
||||
} else {
|
||||
this.$emit('end');
|
||||
}
|
||||
},
|
||||
// 判断是否数字
|
||||
isNumber(val) {
|
||||
return !isNaN(parseFloat(val));
|
||||
},
|
||||
formatNumber(num) {
|
||||
// 将num转为Number类型，因为其值可能为字符串数值，调用toFixed会报错
|
||||
num = Number(num);
|
||||
num = num.toFixed(Number(this.decimals));
|
||||
num += '';
|
||||
const x = num.split('.');
|
||||
let x1 = x[0];
|
||||
const x2 = x.length > 1 ? this.decimal + x[1] : '';
|
||||
const rgx = /(\d+)(\d{3})/;
|
||||
if (this.separator && !this.isNumber(this.separator)) {
|
||||
while (rgx.test(x1)) {
|
||||
x1 = x1.replace(rgx, '$1' + this.separator + '$2');
|
||||
}
|
||||
}
|
||||
return x1 + x2;
|
||||
},
|
||||
destroyed() {
|
||||
this.cancelAnimationFrame(this.rAF);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-count-num {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
131
node_modules/uview-ui/components/u-divider/u-divider.vue
generated
vendored
Normal file
131
node_modules/uview-ui/components/u-divider/u-divider.vue
generated
vendored
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<view class="u-divider" :style="{
|
||||
height: height == 'auto' ? 'auto' : height + 'rpx',
|
||||
backgroundColor: bgColor,
|
||||
marginBottom: marginBottom + 'rpx',
|
||||
marginTop: marginTop + 'rpx'
|
||||
}" @tap="click">
|
||||
<view class="u-divider-line" :style="[lineStyle]"></view>
|
||||
<view v-if="useSlot" class="u-divider-text" :style="{
|
||||
color: color,
|
||||
fontSize: fontSize + 'rpx'
|
||||
}"><slot /></view>
|
||||
<view class="u-divider-line" :style="[lineStyle]"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* divider 分割线
|
||||
* @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
|
||||
* @tutorial https://www.uviewui.com/components/divider.html
|
||||
* @property {String Number} half-width 文字左或右边线条宽度，数值或百分比，数值时单位为rpx
|
||||
* @property {String} border-color 线条颜色，优先级高于type（默认#dcdfe6）
|
||||
* @property {String} color 文字颜色（默认#909399）
|
||||
* @property {String Number} fontSize 字体大小，单位rpx（默认26）
|
||||
* @property {String} bg-color 整个divider的背景颜色（默认呢#ffffff）
|
||||
* @property {String Number} height 整个divider的高度，单位rpx（默认40）
|
||||
* @property {String} type 将线条设置主题色（默认primary）
|
||||
* @property {Boolean} useSlot 是否使用slot传入内容，如果不传入，中间不会有空隙（默认true）
|
||||
* @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
|
||||
* @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
|
||||
* @event {Function} click divider组件被点击时触发
|
||||
* @example <u-divider color="#fa3534">长河落日圆</u-divider>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-divider',
|
||||
props: {
|
||||
// 单一边divider横线的宽度(数值)，单位rpx。或者百分比
|
||||
halfWidth: {
|
||||
type: [Number, String],
|
||||
default: 150
|
||||
},
|
||||
// divider横线的颜色，如设置，
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#dcdfe6'
|
||||
},
|
||||
// 主题色，可以是primary|info|success|warning|error之一值
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
// 文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#909399'
|
||||
},
|
||||
// 文字大小，单位rpx
|
||||
fontSize: {
|
||||
type: [Number, String],
|
||||
default: 26
|
||||
},
|
||||
// 整个divider的背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
// 整个divider的高度单位rpx
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 'auto'
|
||||
},
|
||||
// 上边距
|
||||
marginTop: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 下边距
|
||||
marginBottom: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 是否使用slot传入内容，如果不用slot传入内容，先的中间就不会有空隙
|
||||
useSlot: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lineStyle() {
|
||||
let style = {};
|
||||
if(String(this.halfWidth).indexOf('%') != -1) style.width = this.halfWidth;
|
||||
else style.width = this.halfWidth + 'rpx';
|
||||
// borderColor优先级高于type值
|
||||
if(this.borderColor) style.borderColor = this.borderColor;
|
||||
else style.borderColor = this.$u.color[this.type];
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-divider {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.u-divider-line {
|
||||
border-bottom: 1px solid $u-border-color;
|
||||
transform: scale(1, 0.5);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.u-divider-text {
|
||||
white-space: nowrap;
|
||||
padding: 0 16rpx;
|
||||
display: inline-flex;
|
||||
}
|
||||
</style>
|
||||
241
node_modules/uview-ui/components/u-dropdown-list/u-dropdown-list.vue
generated
vendored
Normal file
241
node_modules/uview-ui/components/u-dropdown-list/u-dropdown-list.vue
generated
vendored
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<view class="dropdown-list-wapper u-flex u-flex-1">
|
||||
<view
|
||||
v-for="(drop, index) in dropdownListFromFather"
|
||||
:key="drop.name"
|
||||
:show="drop.show"
|
||||
class="u-selected-class u-dropdown-list"
|
||||
:style="{ zIndex: zIndex + 1 }"
|
||||
>
|
||||
<slot name="selectionbox">
|
||||
<view
|
||||
:style="{ height: top + 'rpx' }"
|
||||
class="drop-item u-flex u-justify-center"
|
||||
@click="handleDropClick(drop)"
|
||||
>
|
||||
<text :style="{ color: drop.show ? activeColor : '#999' }">
|
||||
{{ getTitle(drop.options) }}
|
||||
</text>
|
||||
<view
|
||||
class="u-animation"
|
||||
:class="[drop.show ? 'u-animation-show' : '']"
|
||||
>
|
||||
<u-icon
|
||||
v-if="drop.show"
|
||||
name="arrow-up-fill"
|
||||
:size="18"
|
||||
:color="activeColor"
|
||||
></u-icon>
|
||||
<u-icon v-else name="arrow-down-fill" :size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
<view
|
||||
class="u-dropdown-view"
|
||||
:class="[drop.show ? 'u-dropdownlist-show' : '']"
|
||||
:style="{
|
||||
background: bgcolor,
|
||||
height: drop.show ? 'auto' : 0,
|
||||
top: top + 'rpx'
|
||||
}"
|
||||
>
|
||||
<slot name="dropdownbox">
|
||||
<view class="u-selected-list">
|
||||
<view
|
||||
class="select-item u-flex u-align-center u-border-bottom u-align-between"
|
||||
:style="{ color: select.select ? activeColor : '#666666' }"
|
||||
@tap="handleSelected(select, drop.options)"
|
||||
v-for="(select, n) in drop.options"
|
||||
:key="n"
|
||||
>
|
||||
<text>{{ select.text }}</text>
|
||||
<u-icon
|
||||
v-if="select.select"
|
||||
class="select-icon"
|
||||
:color="activeColor"
|
||||
size="35"
|
||||
name="checkmark"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
<u-mask
|
||||
duration="100"
|
||||
:show="dropdownShow"
|
||||
@click="closeMask"
|
||||
:z-index="zIndex"
|
||||
></u-mask>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const dropdownOption1 = [
|
||||
{ id: 0, text: '类型', value: '', select: false },
|
||||
{ id: 1, text: '全场券', value: 1, select: false },
|
||||
{ id: 2, text: '品类券', value: 2, select: false },
|
||||
{ id: 3, text: '单品券', value: 3, select: false },
|
||||
{ id: 4, text: '业务券', value: 4, select: false }
|
||||
]
|
||||
const dropdownOption2 = [
|
||||
{ id: 5, text: '状态', value: '', select: false },
|
||||
{ id: 6, text: '可使用', value: 1, select: false },
|
||||
{ id: 7, text: '已过期', value: 2, select: false }
|
||||
]
|
||||
const dropdownOption3 = [
|
||||
{ id: 8, text: '优惠力度', value: '', select: false },
|
||||
{ id: 9, text: '满100-20', value: 1, select: false },
|
||||
{ id: 10, text: '满100-50', value: 2, select: false }
|
||||
]
|
||||
|
||||
export default {
|
||||
props: {
|
||||
// 下拉框数据
|
||||
dropdownList: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ show: false, options: dropdownOption1 },
|
||||
{ show: false, options: dropdownOption2 },
|
||||
{ show: false, options: dropdownOption3 }
|
||||
],
|
||||
required: true,
|
||||
validator: value =>
|
||||
value.every(item => Array.isArray(item.options) && item.options.length)
|
||||
},
|
||||
//背景颜色
|
||||
bgcolor: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
//top rpx 选择框高度也用这个值
|
||||
top: {
|
||||
type: Number,
|
||||
default: 90
|
||||
},
|
||||
// 菜单标题和选项的选中态颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#e7141a'
|
||||
},
|
||||
// mask和下拉列表的z-index
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
default: 21
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dropdownShow: false,
|
||||
dropdownListFromFather: this.dropdownList
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
getTitle(item = []) {
|
||||
const obj = item.find(v => v.select) || {}
|
||||
if (obj.select) {
|
||||
return obj.text
|
||||
} else {
|
||||
if (item[0]) {
|
||||
item[0].select = true
|
||||
return item[0].text
|
||||
}
|
||||
}
|
||||
return ''
|
||||
},
|
||||
handleDropClick(item) {
|
||||
if (item.show) {
|
||||
item.show = false
|
||||
this.dropdownShow = false
|
||||
return
|
||||
}
|
||||
this.dropdownListFromFather.map(item => {
|
||||
item.show = false
|
||||
})
|
||||
const t = setTimeout(() => {
|
||||
item.show = true
|
||||
this.dropdownShow = true
|
||||
clearTimeout(t)
|
||||
}, 100)
|
||||
},
|
||||
closeMask() {
|
||||
this.dropdownShow = false
|
||||
this.dropdownListFromFather.map(item => {
|
||||
item.show = false
|
||||
})
|
||||
},
|
||||
handleSelected(select, options) {
|
||||
options.map(item => {
|
||||
item.select = false
|
||||
})
|
||||
select.select = true
|
||||
this.closeMask()
|
||||
// 返回选中对象和下拉列表数组
|
||||
this.$emit('change', select, options)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dropdownList: {
|
||||
handler(v) {
|
||||
this.dropdownListFromFather = v
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dropdown-list-wapper {
|
||||
position: relative;
|
||||
}
|
||||
.u-dropdown-view {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* opacity: 0; */
|
||||
visibility: hidden;
|
||||
transition: height 0.5s ease-in-out;
|
||||
.u-selected-list {
|
||||
background-color: #fff;
|
||||
.select-item {
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
padding: 30rpx 54rpx 30rpx 30rpx;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
.select-item.selectActive {
|
||||
color: #e7141a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-dropdownlist-show {
|
||||
/* opacity: 1; */
|
||||
visibility: visible;
|
||||
}
|
||||
.u-dropdown-list {
|
||||
flex: 1;
|
||||
// z-index: 22;
|
||||
background: #fff;
|
||||
position: static;
|
||||
}
|
||||
.drop-item {
|
||||
justify-content: center;
|
||||
color: #999999;
|
||||
font-size: 30rpx;
|
||||
> text {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
/deep/ {
|
||||
.uicon {
|
||||
position: relative;
|
||||
top: -2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
58
node_modules/uview-ui/components/u-empty/icon.js
generated
vendored
Normal file
58
node_modules/uview-ui/components/u-empty/icon.js
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
116
node_modules/uview-ui/components/u-empty/u-empty.vue
generated
vendored
Normal file
116
node_modules/uview-ui/components/u-empty/u-empty.vue
generated
vendored
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<view class="u-empty" v-if="show" :style="{
|
||||
marginTop: marginTop + 'rpx'
|
||||
}">
|
||||
<image class="u-image" :src="src ? src : icons[mode].image" mode="widthFix" :style="{
|
||||
width: imgWidth + 'rpx',
|
||||
height: imgHeight == 'auto' ? 'auto' : imgHeight + 'rpx'
|
||||
}"></image>
|
||||
<text :style="{
|
||||
color: color,
|
||||
fontSize: fontSize + 'rpx',
|
||||
}">
|
||||
{{text ? text : icons[mode].text}}
|
||||
</text>
|
||||
<view class="u-slot-wrap">
|
||||
<slot name="bottom"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icon from "./icon.js";
|
||||
/**
|
||||
* empty 内容为空
|
||||
* @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 {String Number} margin-top 组件距离上一个元素之间的距离（默认0）
|
||||
* @property {Boolean} show 是否显示组件（默认true）
|
||||
* @event {Function} click 点击组件时触发
|
||||
* @event {Function} close 点击关闭按钮时触发
|
||||
* @example <u-empty text="所谓伊人，在水一方" mode="list"></u-empty>
|
||||
*/
|
||||
export default {
|
||||
name: "u-empty",
|
||||
props: {
|
||||
// 图标路径
|
||||
src: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 提示文字
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#c0c4cc'
|
||||
},
|
||||
// 文字大小，单位rpx
|
||||
fontSize: {
|
||||
type: [String, Number],
|
||||
default: 26
|
||||
},
|
||||
// 选择预置的图标类型
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'data'
|
||||
},
|
||||
// 图标宽度，单位rpx
|
||||
imgWidth: {
|
||||
type: [String, Number],
|
||||
default: 240
|
||||
},
|
||||
// 图标高度，单位rpx
|
||||
imgHeight: {
|
||||
type: [String, Number],
|
||||
default: 'auto'
|
||||
},
|
||||
// 是否显示组件
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 组件距离上一个元素之间的距离
|
||||
marginTop: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: icon
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.u-image {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.u-slot-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
363
node_modules/uview-ui/components/u-field/u-field.vue
generated
vendored
Normal file
363
node_modules/uview-ui/components/u-field/u-field.vue
generated
vendored
Normal file
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<view class="u-field" :class="{'u-field-border': itemIndex > 0 }">
|
||||
<view class="u-field-inner" :class="[type == 'textarea' ? 'u-textarea-inner' : '', 'u-label-postion-' + labelPosition]">
|
||||
<view class="u-label" :class="[required ? 'u-required' : '']" :style="{
|
||||
justifyContent: justifyContent,
|
||||
flex: labelPosition == 'left' ? `0 0 ${labelWidth}rpx` : '1'
|
||||
}">
|
||||
<view class="u-icon-wrap" v-if="icon">
|
||||
<u-icon size="32" :name="icon" :color="iconColor" class="u-icon"></u-icon>
|
||||
</view>
|
||||
<slot name="icon"></slot>
|
||||
<text class="u-label-text" :class="[this.$slots.icon || icon ? 'u-label-left-gap' : '']">{{ label }}</text>
|
||||
</view>
|
||||
<view class="fild-body">
|
||||
<view class="u-flex-1 u-flex" :style="[inputWrapStyle]">
|
||||
<textarea v-if="type == 'textarea'" class="u-flex-1 u-textarea-class" :style="[fieldStyle]" :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
|
||||
v-else
|
||||
:style="[fieldStyle]"
|
||||
:type="type"
|
||||
class="u-flex-1 u-field__input-wrap"
|
||||
:value="value"
|
||||
:password="password || type === 'password'"
|
||||
:placeholder="placeholder"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
:disabled="disabled"
|
||||
:maxlength="inputMaxlength"
|
||||
:focus="focus"
|
||||
:confirmType="confirmType"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@input="onInput"
|
||||
@confirm="onConfirm"
|
||||
@tap="fieldClick"
|
||||
/>
|
||||
</view>
|
||||
<u-icon :size="clearSize" v-if="clearable && value && focused" name="close-circle-fill" color="#c0c4cc" class="u-clear-icon" @touchstart="onClear"/>
|
||||
<view class="u-button-wrap"><slot name="right" /></view>
|
||||
<u-icon v-if="rightIcon" @click="rightIconClick" :name="rightIcon" color="#c0c4cc" :style="[rightIconStyle]" size="26" class="u-arror-right" />
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="errorMessage !== false && errorMessage != ''" class="u-error-message" :style="{
|
||||
paddingLeft: labelWidth + 'rpx'
|
||||
}">{{ errorMessage }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* field 输入框
|
||||
* @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 输入框右边的图标名称，限uView的图标名称（默认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 {Object} field-style 自定义输入框的样式，对象形式
|
||||
* @property {Number | String} clear-size 清除图标的大小，单位rpx（默认30）
|
||||
* @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 {
|
||||
name:"u-field",
|
||||
props: {
|
||||
icon: String,
|
||||
rightIcon: String,
|
||||
// arrowDirection: {
|
||||
// type: String,
|
||||
// default: 'right'
|
||||
// },
|
||||
required: Boolean,
|
||||
label: String,
|
||||
password: Boolean,
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 左边标题的宽度单位rpx
|
||||
labelWidth: {
|
||||
type: [Number, String],
|
||||
default: 130
|
||||
},
|
||||
// 对齐方式，left|center|right
|
||||
labelAlign: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
inputAlign: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
autoHeight: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
errorMessage: {
|
||||
type: [String, Boolean],
|
||||
default: ''
|
||||
},
|
||||
placeholder: String,
|
||||
placeholderStyle: String,
|
||||
focus: Boolean,
|
||||
fixed: Boolean,
|
||||
value: [Number, String],
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
maxlength: {
|
||||
type: [Number, String],
|
||||
default: 140
|
||||
},
|
||||
confirmType: {
|
||||
type: String,
|
||||
default: 'done'
|
||||
},
|
||||
// lable的位置，可选为 left-左边，top-上边
|
||||
labelPosition: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
// 输入框的自定义样式
|
||||
fieldStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 清除按钮的大小
|
||||
clearSize: {
|
||||
type: [Number, String],
|
||||
default: 30
|
||||
}
|
||||
},
|
||||
inject: ['uCellGroup'],
|
||||
data() {
|
||||
return {
|
||||
focused: false,
|
||||
itemIndex: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if(this.uCellGroup) {
|
||||
this.itemIndex = this.uCellGroup.index++;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inputWrapStyle() {
|
||||
let style = {};
|
||||
style.textAlign = this.inputAlign;
|
||||
// 判断lable的位置，如果是left的话，让input左边两边有间隙
|
||||
if(this.labelPosition == 'left') {
|
||||
style.margin = `0 8rpx`;
|
||||
} else {
|
||||
// 如果lable是top的，input的左边就没必要有间隙了
|
||||
style.marginRight = `8rpx`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
rightIconStyle() {
|
||||
let style = {};
|
||||
if (this.arrowDirection == 'top') style.transform = 'roate(-90deg)';
|
||||
if (this.arrowDirection == 'bottom') style.transform = 'roate(90deg)';
|
||||
else style.transform = 'roate(0deg)';
|
||||
return style;
|
||||
},
|
||||
labelStyle() {
|
||||
let style = {};
|
||||
if(this.labelAlign == 'left') style.justifyContent = 'flext-start';
|
||||
if(this.labelAlign == 'center') style.justifyContent = 'center';
|
||||
if(this.labelAlign == 'right') style.justifyContent = 'flext-end';
|
||||
return style;
|
||||
},
|
||||
// uni不支持在computed中写style.justifyContent = 'center'的形式，故用此方法
|
||||
justifyContent() {
|
||||
if(this.labelAlign == 'left') return 'flex-start';
|
||||
if(this.labelAlign == 'center') return 'center';
|
||||
if(this.labelAlign == 'right') return 'flex-end';
|
||||
},
|
||||
// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值
|
||||
inputMaxlength() {
|
||||
return Number(this.maxlength)
|
||||
},
|
||||
// label的位置
|
||||
fieldInnerStyle() {
|
||||
let style = {};
|
||||
if(this.labelPosition == 'left') {
|
||||
style.flexDirection = 'row';
|
||||
} else {
|
||||
style.flexDirection = 'column';
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInput(event) {
|
||||
this.$emit('input', event.target.value);
|
||||
},
|
||||
onFocus(event) {
|
||||
this.focused = true;
|
||||
this.$emit('focus', event);
|
||||
},
|
||||
onBlur(event) {
|
||||
this.focused = false;
|
||||
this.$emit('blur', event);
|
||||
},
|
||||
onConfirm(e) {
|
||||
this.$emit('confirm', e.detail.value);
|
||||
},
|
||||
onClear(event) {
|
||||
this.$emit('input', '');
|
||||
},
|
||||
rightIconClick() {
|
||||
this.$emit('right-icon-click');
|
||||
this.$emit('click');
|
||||
},
|
||||
fieldClick() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-field {
|
||||
font-size: 28rpx;
|
||||
padding: 20rpx 28rpx;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
color: $u-main-color;
|
||||
}
|
||||
|
||||
.u-field-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-textarea-inner {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.u-textarea-class {
|
||||
min-height: 96rpx;
|
||||
width: auto;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.fild-body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-arror-right {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.u-label-text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.u-label-left-gap {
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
|
||||
.u-label-postion-top {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.u-label {
|
||||
width: 130rpx;
|
||||
flex: 1 1 130rpx;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-required::before {
|
||||
content: '*';
|
||||
position: absolute;
|
||||
left: -16rpx;
|
||||
font-size: 14px;
|
||||
color: $u-type-error;
|
||||
height: 9px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.u-field__input-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
height: 48rpx;
|
||||
flex: 1;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.u-clear-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-field-border:after {
|
||||
left: 32rpx!important;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
content: ' ';
|
||||
pointer-events: none;
|
||||
right: 0;
|
||||
top: 0;
|
||||
border-bottom: 1px solid $u-border-color;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.u-error-message {
|
||||
color: $u-type-error;
|
||||
font-size: 26rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.placeholder-style {
|
||||
color: rgb(150, 151, 153);
|
||||
}
|
||||
|
||||
.u-input-class {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
338
node_modules/uview-ui/components/u-form-item/u-form-item.vue
generated
vendored
Normal file
338
node_modules/uview-ui/components/u-form-item/u-form-item.vue
generated
vendored
Normal file
@@ -0,0 +1,338 @@
|
||||
<template>
|
||||
<view class="u-form-item" :class="{'u-border-bottom': borderBottom, 'u-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')}">
|
||||
<view class="u-form-item__body" :style="{
|
||||
flexDirection: labelPosition == 'left' ? 'row' : 'column'
|
||||
}">
|
||||
<view class="u-form-item--left" :style="{
|
||||
width: labelPosition == 'left' ? labelWidth + 'rpx' : '100%',
|
||||
flex: `0 0 ${labelPosition == 'left' ? labelWidth + 'rpx' : '100%'}`,
|
||||
marginBottom: labelPosition == 'left' ? 0 : '10rpx',
|
||||
|
||||
}">
|
||||
<!-- 为了块对齐 -->
|
||||
<view class="u-form-item--left__content">
|
||||
<!-- nvue不支持伪元素before -->
|
||||
<text v-if="isRequired" class="u-form-item--left__content--required">*</text>
|
||||
<view class="u-form-item--left__content__icon" v-if="leftIcon">
|
||||
<u-icon :name="leftIcon" :custom-style="leftIconStyle"></u-icon>
|
||||
</view>
|
||||
<view class="u-form-item--left__content__label" :style="[labelStyle, {
|
||||
'justify-content': labelAlign == 'left' ? 'flex-star' : labelAlign == 'center' ? 'center' : 'flex-end'
|
||||
}]">
|
||||
{{label}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-form-item--right u-flex">
|
||||
<view class="u-form-item--right__content">
|
||||
<view class="u-form-item--right__content__slot ">
|
||||
<slot />
|
||||
</view>
|
||||
<view class="u-form-item--right__content__icon u-flex" v-if="$slots.right || rightIcon">
|
||||
<u-icon :custom-style="rightIconStyle" v-if="rightIcon" :name="rightIcon"></u-icon>
|
||||
<slot name="right" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-form-item__message" v-if="validateState === 'error' && showError('message')" :style="{
|
||||
paddingLeft: labelPosition == 'left' ? `${labelWidth}rpx` : '0',
|
||||
}">{{validateMessage}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Emitter from '../../libs/util/emitter.js';
|
||||
import schema from '../../libs/util/async-validator';
|
||||
// 去除警告信息
|
||||
schema.warning = function(){};
|
||||
export default {
|
||||
name: 'u-form-item',
|
||||
mixins: [Emitter],
|
||||
inject: {
|
||||
uForm: {
|
||||
default() {
|
||||
return null
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
// input的label提示语
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 绑定的值
|
||||
prop: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否显示表单域的下划线边框
|
||||
borderBottom: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// label的位置，left-左边，top-上边
|
||||
labelPosition: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
// label的宽度，单位rpx
|
||||
labelWidth: {
|
||||
type: [String, Number],
|
||||
default: 90
|
||||
},
|
||||
// lable的样式，对象形式
|
||||
labelStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// lable字体的对齐方式
|
||||
labelAlign: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
// 右侧图标
|
||||
rightIcon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 左侧图标
|
||||
leftIcon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 左侧图标的样式
|
||||
leftIconStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 左侧图标的样式
|
||||
rightIconStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
initialValue: '', // 存储的默认值
|
||||
isRequired: false, // 是否必填
|
||||
validateState: '', // 是否校验成功
|
||||
validateMessage: '' ,// 校验失败的提示语
|
||||
// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，
|
||||
// border-bottom-下边框呈现红色，none-无提示
|
||||
errorType: ['message']
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
validateState(val) {
|
||||
this.broadcastInputError();
|
||||
},
|
||||
// 监听u-form组件的errorType的变化
|
||||
"uForm.errorType"(val) {
|
||||
this.errorType = val;
|
||||
this.broadcastInputError();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fieldValue() {
|
||||
return this.uForm.model[this.prop];
|
||||
},
|
||||
showError() {
|
||||
return type => {
|
||||
// 如果errorType数组中含有none，就不提示错误信息
|
||||
if(this.errorType.indexOf('none') >= 0) return false;
|
||||
else if(this.errorType.indexOf(type) >= 0) return true;
|
||||
else return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
broadcastInputError() {
|
||||
// 子组件发出事件，第三个参数为true或者false，true代表有错误
|
||||
this.broadcast('u-input', 'on-form-item-error', this.validateState === 'error' && this.showError('border'));
|
||||
},
|
||||
// 判断是否需要required校验
|
||||
setRules() {
|
||||
let that = this;
|
||||
// 从父组件u-form拿到当前u-form-item需要验证 的规则
|
||||
let rules = this.getRules();
|
||||
if (rules.length) {
|
||||
this.isRequired = rules.some(rule => {
|
||||
// 如果有必填项，就返回，没有的话，就是undefined
|
||||
return rule.required;
|
||||
});
|
||||
}
|
||||
|
||||
// blur事件
|
||||
this.$on('on-form-blur', that.onFieldBlur);
|
||||
// change事件
|
||||
this.$on('on-form-change', that.onFieldChange);
|
||||
},
|
||||
|
||||
// 从u-form的rules属性中，取出当前u-form-item的校验规则
|
||||
getRules() {
|
||||
// 父组件的所有规则
|
||||
let rules = this.uForm.rules;
|
||||
rules = rules ? rules[this.prop] : [];
|
||||
// 保证返回的是一个数组形式
|
||||
return [].concat(rules || []);
|
||||
},
|
||||
|
||||
// blur事件时进行表单校验
|
||||
onFieldBlur() {
|
||||
this.validation('blur');
|
||||
},
|
||||
|
||||
// change事件进行表单校验
|
||||
onFieldChange() {
|
||||
this.validation('change');
|
||||
},
|
||||
|
||||
// 过滤出符合要求的rule规则
|
||||
getFilteredRule(triggerType = '') {
|
||||
let rules = this.getRules();
|
||||
// 整体验证表单时，triggerType为空字符串，此时返回所有规则进行验证
|
||||
if(!triggerType) return rules;
|
||||
// 历遍判断规则是否有对应的事件，比如blur，change触发等的事件
|
||||
// return rules.filter(res => res.trigger == triggerType);
|
||||
// 使用indexOf判断，是因为某些时候设置的验证规则的trigger属性可能为多个，比如"blur,change"
|
||||
return rules.filter(res => !res.trigger || res.trigger.indexOf(triggerType) !== -1);
|
||||
},
|
||||
|
||||
// 校验数据
|
||||
validation(trigger, callback = () => {}) {
|
||||
// blur和change是否有当前方式的校验规则
|
||||
let rules = this.getFilteredRule(trigger);
|
||||
// 判断是否有验证规则，如果没有规则，也调用回调方法，否则父组件u-form会因为
|
||||
// 对count变量的统计错误而无法进入上一层的回调
|
||||
if (!rules || rules.length === 0) {
|
||||
return callback('');
|
||||
}
|
||||
// 设置当前的装填，标识为校验中
|
||||
this.validateState = 'validating';
|
||||
// 调用async-validator的方法
|
||||
let validator = new schema({ [this.prop]: rules });
|
||||
validator.validate({ [this.prop]: this.fieldValue }, { firstFields: true }, (errors, fields) => {
|
||||
// 记录状态和报错信息
|
||||
this.validateState = !errors ? 'success' : 'error';
|
||||
this.validateMessage = errors ? errors[0].message : '';
|
||||
// 调用回调方法
|
||||
callback(this.validateMessage);
|
||||
});
|
||||
},
|
||||
|
||||
// 清空当前的u-form-item
|
||||
resetField() {
|
||||
this.uForm.model[this.prop] = this.initialValue;
|
||||
// 设置为`success`状态，只是为了清空错误标记
|
||||
this.validateState = 'success';
|
||||
}
|
||||
},
|
||||
|
||||
// 组件创建完成时，将当前实例保存到u-form中
|
||||
mounted() {
|
||||
// 如果没有传入prop，或者uForm为空(如果u-form-input单独使用，就不会有uForm注入)，就不进行校验
|
||||
if (!this.prop || this.uForm === null) return;
|
||||
// 发出事件，让父组件将本实例加入到管理数组中
|
||||
this.dispatch('u-form', 'on-form-item-add', this);
|
||||
this.errorType = this.uForm.errorType;
|
||||
// 设置初始值
|
||||
this.initialValue = this.fieldValue;
|
||||
// 添加表单校验
|
||||
this.setRules();
|
||||
},
|
||||
|
||||
// 组件销毁前，将实例从 Form 的缓存中移除
|
||||
beforeDestroy() {
|
||||
this.dispatch('u-form', 'on-form-item-remove', this);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-form-item {
|
||||
display: flex;
|
||||
// align-items: flex-start;
|
||||
padding: 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: $u-main-color;
|
||||
box-sizing: border-box;
|
||||
line-height: $u-form-item-height;
|
||||
flex-direction: column;
|
||||
|
||||
&__border-bottom--error:after {
|
||||
border-color: $u-type-error;
|
||||
}
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&--left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 10rpx;
|
||||
flex: 1;
|
||||
|
||||
&__icon {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
&--required {
|
||||
position: absolute;
|
||||
left: -16rpx;
|
||||
vertical-align: middle;
|
||||
color: $u-type-error;
|
||||
padding-top: 6rpx;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--right {
|
||||
flex: 1;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
&__slot {
|
||||
flex: 1;
|
||||
/* #ifndef MP */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
&__icon {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__message {
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
color: $u-type-error;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
97
node_modules/uview-ui/components/u-form/u-form.vue
generated
vendored
Normal file
97
node_modules/uview-ui/components/u-form/u-form.vue
generated
vendored
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<view class="u-form"><slot /></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'u-form',
|
||||
props: {
|
||||
// 当前form的需要验证字段的集合
|
||||
model: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 验证规则
|
||||
// rules: {
|
||||
// type: [Object, Function, Array],
|
||||
// default() {
|
||||
// return {};
|
||||
// }
|
||||
// },
|
||||
// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，
|
||||
// border-bottom-下边框呈现红色，none-无提示
|
||||
errorType: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ['message']
|
||||
}
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
uForm: this
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 存储当前form下的所有u-form-item的实例
|
||||
// 不能定义在data中，否则微信小程序会造成循环引用而报错
|
||||
this.fields = [];
|
||||
// 存当前实例
|
||||
let that = this;
|
||||
// 监听on-form-item-add事件，将子组件添加到fields中
|
||||
this.$on('on-form-item-add', item => {
|
||||
if (item) {
|
||||
that.fields.push(item);
|
||||
}
|
||||
});
|
||||
// 删除当前有的实例
|
||||
this.$on('on-form-item-remove', item => {
|
||||
// 如果当前没有prop的话表示当前不要进行删除（因为没有注入）
|
||||
if (item.prop) {
|
||||
that.fields.splice(that.fields.indexOf(item), 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
setRules(rules) {
|
||||
this.rules = rules;
|
||||
},
|
||||
// 清空所有u-form-item组件的内容，本质上是调用了u-form-item组件中的resetField()方法
|
||||
resetFields() {
|
||||
this.fields.map(field => {
|
||||
field.resetField();
|
||||
});
|
||||
},
|
||||
// 校验全部数据
|
||||
validate(callback) {
|
||||
return new Promise(resolve => {
|
||||
// 对所有的u-form-item进行校验
|
||||
let valid = true; // 默认通过
|
||||
let count = 0; // 用于标记是否检查完毕
|
||||
this.fields.map(field => {
|
||||
// 调用每一个u-form-item实例的validation的校验方法
|
||||
field.validation('', error => {
|
||||
// 如果任意一个u-form-item校验不通过，就意味着整个表单不通过
|
||||
if (error) valid = false;
|
||||
// 当历遍了所有的u-form-item时，调用promise的then方法
|
||||
if (++count === this.fields.length) {
|
||||
resolve(valid); // 进入promise的then方法
|
||||
// 调用回调方法
|
||||
if (typeof callback == 'function') callback(valid);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
50
node_modules/uview-ui/components/u-full-screen/u-full-screen.vue
generated
vendored
Normal file
50
node_modules/uview-ui/components/u-full-screen/u-full-screen.vue
generated
vendored
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<u-modal v-model="show" :show-cancel-button="true" confirm-text="升级" title="发现新版本" @cancel="cancel" @confirm="confirm">
|
||||
<view class="u-update-content">
|
||||
<rich-text :nodes="content"></rich-text>
|
||||
</view>
|
||||
</u-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
content: `
|
||||
1. 修复badge组件的size参数无效问题<br>
|
||||
2. 新增Modal模态框组件<br>
|
||||
3. 新增压窗屏组件，可以在APP上以弹窗的形式遮盖导航栏和底部tabbar<br>
|
||||
4. 修复键盘组件在微信小程序上遮罩无效的问题
|
||||
`,
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.show = true;
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.closeModal();
|
||||
},
|
||||
confirm() {
|
||||
this.closeModal();
|
||||
},
|
||||
closeModal() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-full-content {
|
||||
background-color: #00C777;
|
||||
}
|
||||
|
||||
.u-update-content {
|
||||
font-size: 26rpx;
|
||||
color: $u-content-color;
|
||||
line-height: 1.7;
|
||||
padding: 30rpx;
|
||||
}
|
||||
</style>
|
||||
52
node_modules/uview-ui/components/u-gap/u-gap.vue
generated
vendored
Normal file
52
node_modules/uview-ui/components/u-gap/u-gap.vue
generated
vendored
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<view class="u-gap" :style="[gapStyle]"></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* gap 间隔槽
|
||||
* @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
|
||||
* @tutorial https://www.uviewui.com/components/gap.html
|
||||
* @property {String} bg-color 背景颜色（默认#f3f4f6）
|
||||
* @property {String Number} height 分割槽高度，单位rpx（默认30）
|
||||
* @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
|
||||
* @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
|
||||
* @example <u-gap height="80" bg-color="#bbb"></u-gap>
|
||||
*/
|
||||
export default {
|
||||
name: "u-gap",
|
||||
props: {
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: 'transparent ' // 背景透明
|
||||
},
|
||||
// 高度
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: 30
|
||||
},
|
||||
// 与上一个组件的距离
|
||||
marginTop: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 与下一个组件的距离
|
||||
marginBottom: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
gapStyle() {
|
||||
return {
|
||||
backgroundColor: this.bgColor,
|
||||
height: this.height + 'rpx',
|
||||
marginTop: this.marginTop + 'rpx',
|
||||
marginBottom: this.marginBottom + 'rpx'
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
111
node_modules/uview-ui/components/u-grid-item/u-grid-item.vue
generated
vendored
Normal file
111
node_modules/uview-ui/components/u-grid-item/u-grid-item.vue
generated
vendored
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view class="u-grid-item" :hover-class="hoverClass"
|
||||
:hover-stay-time="200" @tap="click" :style="{
|
||||
background: bgColor,
|
||||
width: width,
|
||||
}">
|
||||
<view class="u-grid-item-box" :class="[showBorder ? 'u-border-right u-border-bottom' : '']">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* gridItem 提示
|
||||
* @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: {
|
||||
// 背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
// 点击时返回的index
|
||||
index: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
// 父组件通过provide传递过来的整个this
|
||||
inject: ['uGrid'],
|
||||
data() {
|
||||
return {
|
||||
hoverClass: '', // 按下去的时候，是否显示背景灰色
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.hoverClass = this.uGrid.hoverClass;
|
||||
},
|
||||
computed: {
|
||||
// 小于2，显示2列；大于12，显示12列
|
||||
colNum() {
|
||||
return this.col < 2 ? 2 : this.col > 12 ? 12 : this.col;
|
||||
},
|
||||
// 每个grid-item的宽度
|
||||
width() {
|
||||
return 100 / Number(this.uGrid.col) + '%';
|
||||
},
|
||||
// 是否显示边框
|
||||
// 为了迎合演示的需要，从created生命周期移到此，以为演示中可能需要动态修改有无边框
|
||||
showBorder() {
|
||||
return this.uGrid.border;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
this.$emit('click', this.index);
|
||||
this.uGrid.click(this.index);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-grid-item {
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
|
||||
/* #ifdef MP */
|
||||
position: relative;
|
||||
float: left;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.u-grid-item-hover {
|
||||
background: #f7f7f7 !important;
|
||||
}
|
||||
|
||||
.u-grid-marker-box {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.u-grid-marker-wrap {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.u-grid-item-box {
|
||||
padding: 30rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
93
node_modules/uview-ui/components/u-grid/u-grid.vue
generated
vendored
Normal file
93
node_modules/uview-ui/components/u-grid/u-grid.vue
generated
vendored
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<view class="u-grid" :class="{'u-border-top u-border-left': border}" :style="[gridStyle]"><slot /></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* grid 宫格布局
|
||||
* @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
|
||||
* @tutorial https://www.uviewui.com/components/grid.html
|
||||
* @property {String Number} col 宫格的列数（默认3）
|
||||
* @property {Boolean} border 是否显示宫格的边框（默认true）
|
||||
* @property {Boolean} hover-class 点击宫格的时候，是否显示按下的灰色背景（默认false）
|
||||
* @event {Function} click 点击宫格触发
|
||||
* @example <u-grid :col="3" @click="click"></u-grid>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-grid',
|
||||
props: {
|
||||
// 分成几列
|
||||
col: {
|
||||
type: [Number, String],
|
||||
default: 3
|
||||
},
|
||||
// 是否显示边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右
|
||||
align: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
// 宫格按压时的样式类，"none"为无效果
|
||||
hoverClass: {
|
||||
type: String,
|
||||
default: 'u-hover-class'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
uGrid: this
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 宫格对齐方式
|
||||
gridStyle() {
|
||||
let style = {};
|
||||
switch(this.align) {
|
||||
case 'left':
|
||||
style.justifyContent = 'flex-start';
|
||||
break;
|
||||
case 'center':
|
||||
style.justifyContent = 'center';
|
||||
break;
|
||||
case 'right':
|
||||
style.justifyContent = 'flex-end';
|
||||
break;
|
||||
default: style.justifyContent = 'flex-start';
|
||||
};
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(index) {
|
||||
this.$emit('click', index);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-grid {
|
||||
width: 100%;
|
||||
/* #ifdef MP */
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef MP */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
174
node_modules/uview-ui/components/u-icon/u-icon.vue
generated
vendored
Normal file
174
node_modules/uview-ui/components/u-icon/u-icon.vue
generated
vendored
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<view :style="[customStyle]" class="u-icon" @tap="click" :class="[labelPos == 'bottom' ? 'u-flex-col u-row-center' : 'u-flex u-col-center']">
|
||||
<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]"></image>
|
||||
<text v-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass" @touchstart="touchstart"></text>
|
||||
<text v-if="label" class="u-icon__label" :style="{
|
||||
color: labelColor,
|
||||
fontSize: labelSize + 'rpx',
|
||||
marginLeft: labelPos == 'right' ? marginLeft + 'rpx' : 0,
|
||||
marginTop: labelPos == 'bottom' ? marginTop + 'rpx' : 0,
|
||||
}">{{label}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* icon 图标
|
||||
* @description 基于字体的图标集，包含了大多数常见场景的图标。
|
||||
* @tutorial https://www.uviewui.com/components/icon.html
|
||||
* @property {String} name 图标名称，见示例图标集
|
||||
* @property {String} color 图标颜色（默认inherit）
|
||||
* @property {String | Number} size 图标字体大小，单位rpx（默认32）
|
||||
* @property {String | Number} label-size label字体大小，单位rpx（默认28）
|
||||
* @property {String} label 图标右侧的label文字（默认28）
|
||||
* @property {String} label-pos label文字相对于图标的位置，只能right或bottom（默认right）
|
||||
* @property {String} label-color label字体颜色（默认#606266）
|
||||
* @property {String | Number} margin-left label在右侧时与图标的距离，单位rpx（默认6）
|
||||
* @property {String | Number} margin-top label在下方时与图标的距离，单位rpx（默认6）
|
||||
* @property {String} label-pos label相对于图标的位置，只能right或bottom（默认right）
|
||||
* @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 {
|
||||
name: 'u-icon',
|
||||
props: {
|
||||
// 图标类名
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 图标颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 字体大小，单位rpx
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 'inherit'
|
||||
},
|
||||
// 是否显示粗体
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
|
||||
index: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 触摸图标时的类名
|
||||
hoverClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 自定义扩展前缀，方便用户扩展自己的图标库
|
||||
customPrefix: {
|
||||
type: String,
|
||||
default: 'uicon'
|
||||
},
|
||||
// 图标右边或者下面的文字
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// label的位置，只能右边或者下边
|
||||
labelPos: {
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
// label的大小
|
||||
labelSize: {
|
||||
type: [String, Number],
|
||||
default: '28'
|
||||
},
|
||||
// label的颜色
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// label与图标的距离(横向排列)
|
||||
marginLeft: {
|
||||
type: [String, Number],
|
||||
default: '6'
|
||||
},
|
||||
// label与图标的距离(竖向排列)
|
||||
marginTop: {
|
||||
type: [String, Number],
|
||||
default: '6'
|
||||
},
|
||||
// 图片的mode
|
||||
imgMode: {
|
||||
type: String,
|
||||
default: 'widthFix'
|
||||
},
|
||||
// 自定义样式
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
customClass() {
|
||||
let classes = [];
|
||||
classes.push(this.customPrefix + '-' + this.name);
|
||||
// uView的自定义图标类名为u-iconfont
|
||||
if (this.customPrefix == 'uicon') classes.push('u-iconfont');
|
||||
else classes.push(this.customPrefix);
|
||||
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
|
||||
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
|
||||
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
|
||||
classes = classes.join(' ');
|
||||
//#endif
|
||||
return classes;
|
||||
},
|
||||
iconStyle() {
|
||||
let style = {};
|
||||
style = {
|
||||
fontSize: this.size == 'inherit' ? 'inherit' : this.size + 'rpx',
|
||||
fontWeight: this.bold ? 'bold' : 'normal'
|
||||
};
|
||||
if (this.color) style.color = this.color;
|
||||
return style;
|
||||
},
|
||||
// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
|
||||
isImg() {
|
||||
return this.name.indexOf('/') !== -1;
|
||||
},
|
||||
imgStyle() {
|
||||
let style = {};
|
||||
style.width = this.size + 'rpx';
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
this.$emit('click', this.index);
|
||||
},
|
||||
touchstart() {
|
||||
this.$emit('touchstart', this.index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../iconfont.css';
|
||||
|
||||
.u-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-icon__img {
|
||||
height: auto;
|
||||
will-change: transform;
|
||||
}
|
||||
</style>
|
||||
79
node_modules/uview-ui/components/u-index-anchor/u-index-anchor.vue
generated
vendored
Normal file
79
node_modules/uview-ui/components/u-index-anchor/u-index-anchor.vue
generated
vendored
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<view class="u-index-anchor-wrapper" :id="$u.guid()" :style="[wrapperStyle]">
|
||||
<view class="u-index-anchor " :class="[active ? 'u-index-anchor--active' : '']" :style="[customAnchorStyle]">
|
||||
<slot v-if="useSlot" />
|
||||
<block v-else>
|
||||
<text>{{ index }}</text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* indexAnchor 索引列表锚点
|
||||
* @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 {
|
||||
name: "u-index-anchor",
|
||||
props: {
|
||||
useSlot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
index: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: false,
|
||||
wrapperStyle: {},
|
||||
anchorStyle: {}
|
||||
}
|
||||
},
|
||||
inject: ['UIndexList'],
|
||||
mounted() {
|
||||
this.UIndexList.children.push(this);
|
||||
this.UIndexList.updateData();
|
||||
},
|
||||
computed: {
|
||||
customAnchorStyle() {
|
||||
return Object.assign(this.anchorStyle, this.customStyle);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-index-anchor {
|
||||
box-sizing: border-box;
|
||||
padding: 14rpx 24rpx;
|
||||
color: #606266;
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.2;
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
|
||||
.u-index-anchor--active {
|
||||
right: 0;
|
||||
left: 0;
|
||||
color: #2979ff;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
316
node_modules/uview-ui/components/u-index-list/u-index-list.vue
generated
vendored
Normal file
316
node_modules/uview-ui/components/u-index-list/u-index-list.vue
generated
vendored
Normal file
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<view class="u-index-bar">
|
||||
<slot />
|
||||
<view v-if="showSidebar" class="u-index-bar__sidebar" @touchstart.stop.prevent="onTouchMove" @touchmove.stop.prevent="onTouchMove"
|
||||
@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 : ''}"
|
||||
:data-index="index">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-indexed-list-alert" v-if="touchmove && indexList[touchmoveIndex]" :style="{
|
||||
zIndex: alertZIndex
|
||||
}">
|
||||
<text>{{indexList[touchmoveIndex]}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var indexList = function() {
|
||||
var indexList = [];
|
||||
var charCodeOfA = 'A'.charCodeAt(0);
|
||||
for (var i = 0; i < 26; i++) {
|
||||
indexList.push(String.fromCharCode(charCodeOfA + i));
|
||||
}
|
||||
return indexList;
|
||||
};
|
||||
|
||||
/**
|
||||
* indexList 索引列表
|
||||
* @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
|
||||
* @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props
|
||||
* @property {Number String} scroll-top 当前滚动高度，自定义组件无法获得滚动条事件，所以依赖接入方传入
|
||||
* @property {Array} 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>
|
||||
*/
|
||||
export default {
|
||||
name: "u-index-list",
|
||||
props: {
|
||||
sticky: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
scrollTop: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
offsetTop: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
indexList: {
|
||||
type: Array,
|
||||
default () {
|
||||
return indexList()
|
||||
}
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// #ifdef H5
|
||||
this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 44;
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 0;
|
||||
// #endif
|
||||
// 只能在created生命周期定义children，如果在data定义，会因为在子组件中通过provide/inject
|
||||
// 进行push时而导致的莫名其妙的错误
|
||||
this.children = [];
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
UIndexList: this
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeAnchorIndex: 0,
|
||||
showSidebar: true,
|
||||
// children: [],
|
||||
touchmove: false,
|
||||
touchmoveIndex: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
scrollTop() {
|
||||
this.updateData()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 弹出toast的z-index值
|
||||
alertZIndex() {
|
||||
return this.$u.zIndex.toast;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateData() {
|
||||
this.timer && clearTimeout(this.timer);
|
||||
this.timer = setTimeout(() => {
|
||||
this.showSidebar = !!this.children.length;
|
||||
this.setRect().then(() => {
|
||||
this.onScroll();
|
||||
});
|
||||
}, 0);
|
||||
},
|
||||
setRect() {
|
||||
return Promise.all([
|
||||
this.setAnchorsRect(),
|
||||
this.setListRect(),
|
||||
this.setSiderbarRect()
|
||||
]);
|
||||
},
|
||||
setAnchorsRect() {
|
||||
return Promise.all(this.children.map((anchor, index) => anchor
|
||||
.$uGetRect('.u-index-anchor-wrapper')
|
||||
.then((rect) => {
|
||||
Object.assign(anchor, {
|
||||
height: rect.height,
|
||||
top: rect.top
|
||||
});
|
||||
})));
|
||||
},
|
||||
setListRect() {
|
||||
return this.$uGetRect('.u-index-bar').then((rect) => {
|
||||
Object.assign(this, {
|
||||
height: rect.height,
|
||||
top: rect.top + this.scrollTop
|
||||
});
|
||||
});
|
||||
},
|
||||
setSiderbarRect() {
|
||||
return this.$uGetRect('.u-index-bar__sidebar').then(rect => {
|
||||
this.sidebar = {
|
||||
height: rect.height,
|
||||
top: rect.top
|
||||
};
|
||||
});
|
||||
},
|
||||
getActiveAnchorIndex() {
|
||||
const {
|
||||
children
|
||||
} = this;
|
||||
const {
|
||||
sticky
|
||||
} = this;
|
||||
for (let i = this.children.length - 1; i >= 0; i--) {
|
||||
const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
|
||||
const reachTop = sticky ? preAnchorHeight : 0;
|
||||
if (reachTop >= children[i].top) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
},
|
||||
onScroll() {
|
||||
const {
|
||||
children = []
|
||||
} = this;
|
||||
if (!children.length) {
|
||||
return;
|
||||
}
|
||||
const {
|
||||
sticky,
|
||||
stickyOffsetTop,
|
||||
zIndex,
|
||||
scrollTop,
|
||||
activeColor
|
||||
} = this;
|
||||
const active = this.getActiveAnchorIndex();
|
||||
this.activeAnchorIndex = active;
|
||||
if (sticky) {
|
||||
let isActiveAnchorSticky = false;
|
||||
if (active !== -1) {
|
||||
isActiveAnchorSticky =
|
||||
children[active].top <= 0;
|
||||
}
|
||||
children.forEach((item, index) => {
|
||||
if (index === active) {
|
||||
let wrapperStyle = '';
|
||||
let anchorStyle = {
|
||||
color: `${activeColor}`
|
||||
};
|
||||
if (isActiveAnchorSticky) {
|
||||
wrapperStyle = {
|
||||
height: `${children[index].height}px`
|
||||
};
|
||||
anchorStyle = {
|
||||
position: 'fixed',
|
||||
top: `${stickyOffsetTop}px`,
|
||||
zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`,
|
||||
color: `${activeColor}`
|
||||
};
|
||||
}
|
||||
item.active = active;
|
||||
item.wrapperStyle = wrapperStyle;
|
||||
item.anchorStyle = anchorStyle;
|
||||
} else if (index === active - 1) {
|
||||
const currentAnchor = children[index];
|
||||
const currentOffsetTop = currentAnchor.top;
|
||||
const targetOffsetTop = index === children.length - 1 ?
|
||||
this.top :
|
||||
children[index + 1].top;
|
||||
const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
|
||||
const translateY = parentOffsetHeight - currentAnchor.height;
|
||||
const anchorStyle = {
|
||||
position: 'relative',
|
||||
transform: `translate3d(0, ${translateY}px, 0)`,
|
||||
zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`,
|
||||
color: `${activeColor}`
|
||||
};
|
||||
item.active = active;
|
||||
item.anchorStyle = anchorStyle;
|
||||
} else {
|
||||
item.active = false;
|
||||
item.anchorStyle = '';
|
||||
item.wrapperStyle = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
onTouchMove(event) {
|
||||
this.touchmove = true;
|
||||
const sidebarLength = this.children.length;
|
||||
const touch = event.touches[0];
|
||||
const itemHeight = this.sidebar.height / sidebarLength;
|
||||
let clientY = 0;
|
||||
clientY = touch.clientY;
|
||||
let index = Math.floor((clientY - this.sidebar.top) / itemHeight);
|
||||
if (index < 0) {
|
||||
index = 0;
|
||||
} else if (index > sidebarLength - 1) {
|
||||
index = sidebarLength - 1;
|
||||
}
|
||||
this.touchmoveIndex = index;
|
||||
this.scrollToAnchor(index);
|
||||
},
|
||||
onTouchStop() {
|
||||
this.touchmove = false;
|
||||
this.scrollToAnchorIndex = null;
|
||||
},
|
||||
scrollToAnchor(index) {
|
||||
if (this.scrollToAnchorIndex === index) {
|
||||
return;
|
||||
}
|
||||
this.scrollToAnchorIndex = index;
|
||||
const anchor = this.children.find((item) => item.index === this.indexList[index]);
|
||||
if (anchor) {
|
||||
this.$emit('select', anchor.index);
|
||||
uni.pageScrollTo({
|
||||
duration: 0,
|
||||
scrollTop: anchor.top + this.scrollTop
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-index-bar {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.u-index-bar__sidebar {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
transform: translateY(-50%);
|
||||
user-select: none;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.u-index-bar__index {
|
||||
font-weight: 500;
|
||||
padding: 8rpx 18rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.u-indexed-list-alert {
|
||||
position: fixed;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
right: 90rpx;
|
||||
top: 50%;
|
||||
margin-top: -60rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 50rpx;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.65);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
z-index: 9999999;
|
||||
}
|
||||
|
||||
.u-indexed-list-alert text {
|
||||
line-height: 50rpx;
|
||||
}
|
||||
</style>
|
||||
319
node_modules/uview-ui/components/u-input/u-input.vue
generated
vendored
Normal file
319
node_modules/uview-ui/components/u-input/u-input.vue
generated
vendored
Normal file
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<view
|
||||
class="u-input"
|
||||
:class="{
|
||||
'u-input--border': border,
|
||||
'u-input--error': validateState
|
||||
}"
|
||||
:style="{
|
||||
padding: `0 ${border ? 20 : 0}rpx`,
|
||||
borderColor: borderColor,
|
||||
textAlign: inputAlign
|
||||
}"
|
||||
@tap.stop="inputClick"
|
||||
>
|
||||
<textarea
|
||||
v-if="type == 'textarea'"
|
||||
class="u-input__input u-input__textarea"
|
||||
:style="[getStyle]"
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
:disabled="disabled"
|
||||
:maxlength="inputMaxlength"
|
||||
:fixed="fixed"
|
||||
:focus="focus"
|
||||
:autoHeight="autoHeight"
|
||||
@input="handleInput"
|
||||
@blur="handleBlur"
|
||||
@focus="onFocus"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
class="u-input__input"
|
||||
:type="type == 'password' ? 'text' : type"
|
||||
:style="[getStyle]"
|
||||
:value="defaultValue"
|
||||
:password="type == 'password' && showPassword"
|
||||
:placeholder="placeholder"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
:disabled="disabled || type === 'select'"
|
||||
:maxlength="inputMaxlength"
|
||||
:focus="focus"
|
||||
:confirmType="confirmType"
|
||||
@focus="onFocus"
|
||||
@blur="handleBlur"
|
||||
@input="handleInput"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
<view class="u-input__right-icon u-flex">
|
||||
<view class="u-input__right-icon__clear u-input__right-icon__item" v-if="clearable && value && focused">
|
||||
<u-icon size="32" name="close-circle-fill" color="#c0c4cc" @touchstart="onClear"/>
|
||||
</view>
|
||||
<view class="u-input__right-icon__clear u-input__right-icon__item" v-if="passwordIcon && type == 'password'">
|
||||
<u-icon size="32" :name="showPassword ? 'eye' : 'eye-fill'" color="#c0c4cc" @click="showPassword = !showPassword"/>
|
||||
</view>
|
||||
<view class="u-input__right-icon--select u-input__right-icon__item" v-if="type == 'select'" :class="{
|
||||
'u-input__right-icon--select--reverse': selectOpen
|
||||
}">
|
||||
<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Emitter from '../../libs/util/emitter.js';
|
||||
export default {
|
||||
name: 'u-input',
|
||||
mixins: [Emitter],
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 输入框的类型，textarea，text，number
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
inputAlign: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入内容'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
maxlength: {
|
||||
type: [Number, String],
|
||||
default: 140
|
||||
},
|
||||
placeholderStyle: {
|
||||
type: String,
|
||||
default: 'color: #c0c4cc;'
|
||||
},
|
||||
confirmType: {
|
||||
type: String,
|
||||
default: 'done'
|
||||
},
|
||||
// 输入框的自定义样式
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否自动获得焦点
|
||||
focus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 密码类型时，是否显示右侧的密码图标
|
||||
passwordIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// input|textarea是否显示边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 输入框的边框颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#dcdfe6'
|
||||
},
|
||||
autoHeight: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// type=select时，旋转右侧的图标，标识当前处于打开还是关闭select的状态
|
||||
// open-打开，close-关闭
|
||||
selectOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 高度，单位rpx
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 是否可清空
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultValue: this.value,
|
||||
inputHeight: 70, // input的高度
|
||||
textareaHeight: 100, // textarea的高度
|
||||
validateState: false, // 当前input的验证状态，用于错误时，边框是否改为红色
|
||||
focused: false, // 当前是否处于获得焦点的状态
|
||||
showPassword: this.passwordIcon, // 是否预览密码
|
||||
marginRight: 0, // 输入框右边的距离，当获得焦点时各一个后面的距离，避免点击右边图标误触输入框
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(nVal, oVal) {
|
||||
this.defaultValue = nVal;
|
||||
// 当值发生变化，且为select类型时(此时input被设置为disabled，不会触发@input事件)，模拟触发@input事件
|
||||
if(nVal != oVal && this.type == 'select') this.handleInput({
|
||||
detail: {
|
||||
value: nVal
|
||||
}
|
||||
})
|
||||
},
|
||||
focused(nVal) {
|
||||
if(this.clearable && this.value) {
|
||||
this.getMarginRight();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值
|
||||
inputMaxlength() {
|
||||
return Number(this.maxlength);
|
||||
},
|
||||
getStyle() {
|
||||
let style = {};
|
||||
// 如果没有自定义高度，就根据type为input还是textare来分配一个默认的高度
|
||||
style.minHeight = this.height ? this.height + 'rpx' : this.type == 'textarea' ?
|
||||
this.textareaHeight + 'rpx' : this.inputHeight + 'rpx';
|
||||
style.marginRight = this.marginRight + 'px';
|
||||
style = Object.assign(style, this.customStyle);
|
||||
return style;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 监听u-form-item发出的错误事件，将输入框边框变红色
|
||||
this.$on('on-form-item-error', this.onFormItemError);
|
||||
},
|
||||
mounted() {
|
||||
this.getMarginRight();
|
||||
},
|
||||
methods: {
|
||||
// 计算输入框的右边距
|
||||
getMarginRight() {
|
||||
this.$nextTick(() => {
|
||||
this.$uGetRect('.u-input__right-icon').then(res => {
|
||||
// 此处20rpx为图标绝对定位右侧的“right”
|
||||
this.marginRight = res.width + uni.upx2px(20);
|
||||
})
|
||||
})
|
||||
},
|
||||
/**
|
||||
* change 事件
|
||||
* @param event
|
||||
*/
|
||||
handleInput(event) {
|
||||
// 当前model 赋值
|
||||
this.defaultValue = event.detail.value;
|
||||
// vue 原生的方法 return 出去
|
||||
this.$emit('input', event.detail.value);
|
||||
// 过一个生命周期再发送事件给u-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
|
||||
// 尚未更新到u-form-item，导致获取的值为空，从而校验混论
|
||||
this.$nextTick(() => {
|
||||
// 将当前的值发送到 u-form-item 进行校验
|
||||
this.dispatch('u-form-item', 'on-form-change', event.detail.value);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* blur 事件
|
||||
* @param event
|
||||
*/
|
||||
handleBlur(event) {
|
||||
this.focused = false;
|
||||
// vue 原生的方法 return 出去
|
||||
this.$emit('blur', event.detail.value);
|
||||
this.$nextTick(() => {
|
||||
// 将当前的值发送到 u-form-item 进行校验
|
||||
this.dispatch('u-form-item', 'on-form-blur', event.detail.value);
|
||||
});
|
||||
},
|
||||
onFormItemError(status) {
|
||||
this.validateState = status;
|
||||
},
|
||||
onFocus(event) {
|
||||
this.focused = true;
|
||||
this.$emit('focus');
|
||||
},
|
||||
onConfirm(e) {
|
||||
this.$emit('confirm', e.detail.value);
|
||||
},
|
||||
onClear(event) {
|
||||
this.$emit('input');
|
||||
},
|
||||
inputClick() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-input {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
&__input {
|
||||
//height: $u-form-item-height;
|
||||
font-size: 28rpx;
|
||||
color: $u-main-color;
|
||||
}
|
||||
|
||||
&__textarea {
|
||||
width: auto;
|
||||
font-size: 28rpx;
|
||||
color: $u-main-color;
|
||||
padding: 10rpx 0;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
&--border {
|
||||
border-radius: 6rpx;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $u-form-item-border-color;
|
||||
}
|
||||
|
||||
&--error {
|
||||
border-color: $u-type-error!important;
|
||||
}
|
||||
|
||||
&__right-icon {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
z-index: 3;
|
||||
transform: translateY(-50%);
|
||||
|
||||
&__item {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
&--select {
|
||||
transition: transform .4s;
|
||||
|
||||
&--reverse {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
203
node_modules/uview-ui/components/u-keyboard/u-keyboard.vue
generated
vendored
Normal file
203
node_modules/uview-ui/components/u-keyboard/u-keyboard.vue
generated
vendored
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<u-popup class="" :mask="mask" :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
|
||||
:safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose">
|
||||
<slot />
|
||||
<view class="u-tooltip" v-if="tooltip">
|
||||
<view class="u-tooltip-item u-tooltip-cancel" hover-class="u-tooltip-cancel-hover" @tap="onCancel">
|
||||
{{cancelBtn ? '取消' : ''}}
|
||||
</view>
|
||||
<view v-if="showTips" class="u-tooltip-item u-tooltip-tips">
|
||||
{{tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘'}}
|
||||
</view>
|
||||
<view v-if="confirmBtn" @tap="onConfirm" class="u-tooltip-item u-tooltips-submit" hover-class="u-tooltips-submit-hover">
|
||||
{{confirmBtn ? '完成' : ''}}
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="mode == 'number' || mode == 'card'">
|
||||
<u-number-keyboard :random="random" @backspace="backspace" @change="change" :mode="mode" :dotEnabled="dotEnabled"></u-number-keyboard>
|
||||
</block>
|
||||
<block v-else>
|
||||
<u-car-keyboard :random="random" @backspace="backspace" @change="change"></u-car-keyboard>
|
||||
</block>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* keyboard 键盘
|
||||
* @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 {
|
||||
name: "u-keyboard",
|
||||
props: {
|
||||
// 键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'number'
|
||||
},
|
||||
// 是否显示键盘的"."符号
|
||||
dotEnabled: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示顶部工具条
|
||||
tooltip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示工具条中间的提示
|
||||
showTips: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 工具条中间的提示文字
|
||||
tips: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否显示工具条左边的"取消"按钮
|
||||
cancelBtn: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示工具条右边的"完成"按钮
|
||||
confirmBtn: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否打乱键盘按键的顺序
|
||||
random: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否允许通过点击遮罩关闭键盘
|
||||
maskCloseAble: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 通过双向绑定控制键盘的弹出与收起
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示遮罩，某些时候数字键盘时，用户希望看到自己的数值，所以可能不想要遮罩
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// z-index值
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//show: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
uZIndex() {
|
||||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.$emit('change', e);
|
||||
},
|
||||
// 键盘关闭
|
||||
popupClose() {
|
||||
// 通过发送input这个特殊的事件名，可以修改父组件传给props的value的变量，也即双向绑定
|
||||
this.$emit('input', false);
|
||||
},
|
||||
// 输入完成
|
||||
onConfirm() {
|
||||
this.popupClose();
|
||||
this.$emit('confirm');
|
||||
},
|
||||
// 取消输入
|
||||
onCancel() {
|
||||
this.popupClose();
|
||||
this.$emit('cancel');
|
||||
},
|
||||
// 退格键
|
||||
backspace() {
|
||||
this.$emit('backspace');
|
||||
},
|
||||
// 关闭键盘
|
||||
// close() {
|
||||
// this.show = false;
|
||||
// },
|
||||
// // 打开键盘
|
||||
// open() {
|
||||
// this.show = true;
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-keyboard {
|
||||
position: relative;
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
.u-tooltip {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.u-tooltip-item {
|
||||
color: #333333;
|
||||
flex: 0 0 33.333333%;
|
||||
text-align: center;
|
||||
padding: 20rpx 10rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.u-tooltips-submit {
|
||||
text-align: right;
|
||||
flex-grow: 1;
|
||||
flex-wrap: 0;
|
||||
padding-right: 40rpx;
|
||||
color: $u-type-primary;
|
||||
}
|
||||
|
||||
.u-tooltip-cancel {
|
||||
text-align: left;
|
||||
flex-grow: 1;
|
||||
flex-wrap: 0;
|
||||
padding-left: 40rpx;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.u-tooltips-submit-hover {
|
||||
color: $u-type-success;
|
||||
}
|
||||
|
||||
.u-tooltip-cancel-hover {
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
225
node_modules/uview-ui/components/u-lazy-load/u-lazy-load.vue
generated
vendored
Normal file
225
node_modules/uview-ui/components/u-lazy-load/u-lazy-load.vue
generated
vendored
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<view class="u-wrap" :style="{
|
||||
opacity: Number(opacity),
|
||||
borderRadius: borderRadius + 'rpx',
|
||||
// 因为time值需要改变,所以不直接用duration值(不能改变父组件prop传过来的值)
|
||||
transition: `opacity ${time / 1000}s ease-in-out`
|
||||
}"
|
||||
:class="'u-lazy-item-' + elIndex">
|
||||
<view :class="'u-lazy-item-' + elIndex">
|
||||
<image :style="{borderRadius: borderRadius + 'rpx', height: imgHeight}" v-if="!isError" class="u-lazy-item"
|
||||
:src="isShow ? image : loadingImg" :mode="imgMode" @load="imgLoaded" @error="loadError" @tap="clickImg"></image>
|
||||
<image :style="{borderRadius: borderRadius + 'rpx', height: imgHeight}" class="u-lazy-item error" v-else :src="errorImg"
|
||||
:mode="imgMode" @load="errorImgLoaded" @tap="clickImg"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* lazyLoad 懒加载
|
||||
* @description 懒加载使用的场景为：页面有很多图片时，APP会同时加载所有的图片，导致页面卡顿，各个位置的图片出现前后不一致等.
|
||||
* @tutorial https://www.uviewui.com/components/lazyLoad.html
|
||||
* @property {String Number} index 用户自定义值，在事件触发时回调，用以区分是哪个图片
|
||||
* @property {String} image 图片路径
|
||||
* @property {String} loading-img 预加载时的占位图
|
||||
* @property {String} error-img 图片加载出错时的占位图
|
||||
* @property {String} threshold 触发加载时的位置，见上方说明，单位 rpx（默认300）
|
||||
* @property {String Number} duration 图片加载成功时，淡入淡出时间，单位ms（默认）
|
||||
* @property {String} effect 图片加载成功时，淡入淡出的css动画效果（默认ease-in-out）
|
||||
* @property {Boolean} is-effect 图片加载成功时，是否启用淡入淡出效果（默认true）
|
||||
* @property {String Number} border-radius 图片圆角值，单位rpx（默认0）
|
||||
* @property {String Number} height 图片高度，注意：实际高度可能受img-mode参数影响（默认450）
|
||||
* @property {String Number} mg-mode 图片的裁剪模式，详见image组件裁剪模式（默认widthFix）
|
||||
* @event {Function} click 点击图片时触发
|
||||
* @event {Function} load 图片加载成功时触发
|
||||
* @event {Function} error 图片加载失败时触发
|
||||
* @example <u-lazy-load :image="image" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-lazy-load',
|
||||
props: {
|
||||
index: {
|
||||
type: [Number, String]
|
||||
},
|
||||
// 要显示的图片
|
||||
image: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 图片裁剪模式
|
||||
imgMode: {
|
||||
type: String,
|
||||
default: 'widthFix'
|
||||
},
|
||||
// 占位图片路径
|
||||
loadingImg: {
|
||||
type: String,
|
||||
default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM0QjNBQjkyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM0QjNBQkEyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzRCM0FCNzJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzRCM0FCODJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtRHfPcAAAAzUExURZWVldfX18PDw62trZubm9zc3Li4uKGhoebm5tLS0uHh4c3Nzaenp729vcjIyLKysuvr6141L40AAAcXSURBVHja7NzZlqpGAEBR5lG0//9rIw7IJKJi4or7PGTdtN10wr5SVAEGf/qqArsAiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAg+nmQFMi5Jis+sIniED23jSzIgLTtg2D//iYme/8QBM/9lQ+CAEhbNLM3N9hEHAThX7GPCiBfAxK1b51kD+R7QMLjXg7iCsgWIPUh7pfVozG791oeBPngm48G583uW5GkBvI+SBaM2xXDn1oqum423bX/mgF5FySc2cv93Voug9TdZotsggnkBZB2NzbhrSY5HnoG07jei8dvzsJB/c3W60SALILE46+WCztsbhPR7R2VJq0ukEcT49nyy8QhaKcRa3fYHZD4+ufqOJAcgDz8/59vtw1I3QP5K6JsOG0vm3hce4I8LQp/BaRZGJC3AAn7IKOKXbC+7EdA5vdmmVwOLksgRThqOqiH4XEGsht+peoPUE8U/jJIO5OLH4GEwUslV5G0PTBG5Uiw/Y2jyigO3l9HAHKv9PYb82LloH74dZBoBUgar+l48NsNvtD0fkez9iwrAvIYZDRCl+Xs149Hm/KZmQ+QjUCiO1ei4ru7EsgnQYrkznlQb7thCuRfAzlOAPN72427P4VA/i2Q/DKT/Ls/VR8fvIBsDZIuz7TPF6TCbnk4GJkB2RokejTjuE7/unlgCuSTIO0Cy+Plp6vDfnQlBchy8QtjSHVd3EgmK1bHLm+H6+nXYbz2DuQRSPnqoL7vvq0u70on4zvxgCyWD3b9UyDVdW24PaWaiGTnFZJwPIQAebDpIKheBIm7n124ZthMJipAlkqHO+IZkP1tbfzOJark/A7MgKyvvl60fRqkvXfhuow+t9+q00+0/yyBrK8ZngOtBzldhw2X9tvpNGty0gvkmbPeJ0Cy/r09s/stbmfo0yMWkEdjevgKyOn2t2pxv7UXoibTdCDLje9/Ww1ymqzn87dbp92242ZmMRjI8hASvwKSLq4udqN6ksw8nxXN3tszD9L8Gkg+2mFrQYql5az4tvFj5xOx4VwnSdeBtGdyPwUytxK77pBVlNHdO7OK3rh/eTPUvdutT3fO52tuHMqD4N7llv8pyOQQ//w19YVDfX27+Sfuby9/6nau4pdA8vEdOZuChEH/quHt0Jg+IRJ/5+PrHwKZXfjbDiS73Zo7mu5UkzX7uTsXe0e/7nC3ePf1O69+BUg2XDfZCqSqOu7rGVf8cHBe8zhC2b61dtUHXv0OkGo6ZL4JkpbRYXdUaFevivx2M/1GIOctNh949TtAoumQ+TpIHMX54CJu+8BDd8FkE5BqcZh/59XvAClmTvKfB0nDqIlHo3T70SftyW1eX9dXtgQJqs1f/Q6QaOa/7wmQKtxH8eiGoCRuovODIO3VxOMmruZbHrLyD7z6DSDtGyT7ew1kf9hNn07c986JTovzzem0Id9wUG+Vk/IDr34DSNR7huZJkMFT6vEhqrPx/j5cnlZML8N6/PAzh9Y99Flm5Yde/c9BquDOkvkKkMP58dA4qi9vivE8JOvGz/j8FokfPpr288+pH2ZPOZrLmeGD+7KOh6dqYWJ48ki7yUg0tz0go/fv/LLddfV3sgOLJyaGPY/zrSlh1a36Arkzoue9CyG35ze6E6/dzO2Ga0EGHqdRJIkfn9/8OEjTW8Vq91ZWh39FeehWA7Nu9ft8CpUEk1WWOyDF0OPyEU2Pnzf/bZC0P6IPzmAvu7KauQBVrgKpJ0tG2arHzX8e5Pb3PezNs/PrX+3JMyCLn9XXf37tPFHvt09WfCDDjx+yyn1/p1V11j7GnB/q3leLuVva79S/tzed+db08YpF4uOZtmz/9oXWMq6BCAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiAALELvqt/BBgACqVeUBXxcCkAAAAASUVORK5CYII='
|
||||
},
|
||||
// 加载失败的错误占位图
|
||||
errorImg: {
|
||||
type: String,
|
||||
default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdDMjhENDYyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdDMjhENDcyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0MyOEQ0NDJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0MyOEQ0NTJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhLwhikAAAAzUExURZWVldfX162trcPDw5ubm7i4uNzc3Obm5s3NzaGhoeHh4cjIyKenp9LS0r29vbKysuvr67sDMEkAAAlpSURBVHja7NzpYqMgAIVRUVHc8/5PO66R1WAbOzX97q+ZtDEpR0AWTR7kVyWhCAAhgABCAAGEAAIIAQQQAggBBBACCCAEEEAIIIAQQAgggBBAACGAAEIAAYQAQgABhAACCAEEEAIIIAQQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIIAQQAAhgABCAAGEAEIAAYQAAggBBBACCCAEEAIIIAQQQAgggBBAACGAEEAAIYAAsqeX5QWHKIcs/Ptl03lfL4zDFPWfBGmSpPn+IZzSH5KkCL5B+n+oklwz6Iz//R2QzFOabzhEmiRirAmZt/bl0w/dpMbLqeeo4wEdpC7zR5WAPKziHKtO7ql+ReKvIa9BxgNaL5ZtEkpeAGIVp5jKJa09xVo9vgSSzQcszdYvmOqjQNSQ6pHK6rO1n1Xj32788miwHLaZz1Tl9i/yayDlYJ/60/+lp8GSY7OY1B8E4p55bWmfquFk22GLuUUxi78cX+m+BjL2GLkhMrV+/muS6Sfic0CEp5T1Yu2OQdTzsKV0MJV73KVjroyTffxfuv5Tf3fd6iLT9wz8YdVHgUzF2Is9/Xhi5sYJqP1w/GUpjOiHVbaI0w2L+pg3GZzvtokcgHxWDXHaiy78l3sPke01qphamT5c+dqyeAGSumdL/mkggauTam0e3L/mPEiqtzKDbl0Z1Wn8xOa4ySo8X/7TQIJnY/seEKWf12UmC72CKP9xYjr19RPT7NNA+oMO+R0gwmlotAry+C6I0f59ch8yXVQOr0BKYcXt1IUYRyCt+Ur9HGsrQKI79WY9sY9ARPKlzFOFdb41ioD8b5Bp+mqeeRKAxINkESBFGpOpKhgv9OuYpH8A8l4Qa3qp60Kl2/k+rG2sWafuuyCBafb2j4JkgZUob3nWcmicpkxEgmTLLGejTxnWSWCi8lPmsk6DlIHFJv24ojiYyYoGacwL8zXTLEAVaDI/Ybb3NIgKDSv2oXpmHkvNs+PTpMASEdlk7fOZeRk37fwJ6yGnQarQsGIfqqcvx43rTOXY6jf7uKXdRzdLDRPbjIrx1cIj3Kr4KyBFezzgUGuR5893qkOQ19fR2uVBaU+r16LphJNOiatK7PeBZK/Kb+tUn71rcQjSvARpghfH/yG/D2RetTuI3N5QrMWdP46brP7FmKZ//CGQ9At9SL01DLkzY/Vs8Z97fQZ7gelw7jHqCz+/Wile5J4g3Vc79eb5a6oLSue+Ve83gaSv2jp5PxCzjzwFUm9zw9MllSMil1kS4d2E9SaQ1xNo9wMxx0+nQNLnew/WDHvveMAHYm08mofl3TFI/8pD3Q6kMAv6DIi2jTCwRJUvNdDYrrJum9oHhusCbWALonwxBRk1vXMnEGWuT5wAmfYuVGUYpJ7fUZujCN92hvzwWlrFgxSfANKb10DxIMbShnfrynyZZV30imA7P43ArXXHbvBVkTCIuGy25AdBrHmNeBCpL214QdLp9LZarG3IMWrmW0ehtuO7F2PS09UcgqS3B7FKPhpknrStD0HGF/vQRne37LwLG8EbHT4WxN7/Fg0yD9Yr/3br4nnstA+0Il6QxzdBmg8A6a2/IRbkcK9h/uzV8zywF/oSkOyageCPglRWgcWClHnEzs9q/t/SENVXgFijlsq3VtXdCsRp4qObrLLLgjuzSq3fX89ZZW6AfxNIzF6X9FYgThN/fk093KkvHX/hbWd+DqS/FUhlf+G3gohEXzVs3g9iDluWoaW8fL73QhB34u+tIHIf19nLuF4Q98a09Eynnl56q+ePgEhnX+dbQOp6H5XnJ0ACd8dFgkwf12nTOTcEqd2pom+CFF02TIPw6dKmrLS5qOtBpo8b5quUtrwrSGbuqPkeSJqllTFHO02NPxdMrm+y5LKdWyWXjw4vA5nGEtnjuyCFyHqNYvEolzmASm3zK1Eg5zr13lhqV1tlksnVw8Pkwgri7O07AVKLJkutRYw87bPlRpBpNXE8xGb+fhBlvEGrGPLqViu5sILIx9dAmqF1705sxF4M8+R8P5dOdQwi12fMnATpjJ2JSt/POIvU9wPJEs/jduJAjLvU0yFT0i64Yb1bsVi79dA4pEy3TzoHMq2O7Re4vXm5O9+l290NpE4CU+YRIMNye2iaqbVS2AUnn2fsekthYKReVNutVedA5juttyIXrT38mOds+ps9DWhwL7GWc61/DVKPzVN9UHDarf1icU98IOU8tm6L031Iq63t1tKzj3fe/FCpO4F0/i0Z2+yvA1KeGBjqj1qYx8/zoxpKZ1Yl367I1k+sfcft/QPy9csXy/32qX1qLZsrryG5BGQaRj0vc/b7N54XXq293TCLB5HO42Fy517obW19b+qjl3CHp0fdLJcWvmdy1etESi/uAdJrs1hTaUklHuW8qSDdC3UfXVR5cnD3rAFSSqtFb7z7eapErx7rC739jCXfbK3aWiipjXo8UbmxXPa7QQq9R289j2Gr88N7Ag5AlHPRKc37pNZv0CZtX1tVMG6rm8qW1/KlCgQvcMss933ybwXZz3dReW5yce4ByZtHFIhwT9kmjxg8BzbKDUe1PB9edBJqSN7/KM1LmqyuMZ5BpeTUw1aD/uDI0relPfSHa/Wn8Pxq1BNfxy/h3IdwOJqIKumb9CHvTqMefyY82RoQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIIAQQAAhgABCAAGEAEIAAYQAAggBBBACCCAEEAIIIAQQQAgggBBAACGAEEAAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIIAQQAAhgABCAAGEAEIAAYQAAggBBBACCCAEEAIIIAQQQAgggBBAACGAEEAAIYAAQgABhAACCAGEAAIIAQQQAgggBBBACCAEEEAIIIAQQAAhgABCACGAAEIAAYQAAggBBBACCAEEEAIIIAQQQAggfyL/BBgA8PgLdH0TBtkAAAAASUVORK5CYII='
|
||||
},
|
||||
// 图片进入可见区域前多少像素时，单位rpx，开始加载图片
|
||||
// 负数为图片超出屏幕底部多少距离后触发懒加载，正数为图片顶部距离屏幕底部多少距离时触发(图片还没出现在屏幕上)
|
||||
threshold: {
|
||||
type: [Number, String],
|
||||
default: 100
|
||||
},
|
||||
// 淡入淡出动画的过渡时间
|
||||
duration: {
|
||||
type: [Number, String],
|
||||
default: 500
|
||||
},
|
||||
// 渡效果的速度曲线，各个之间差别不大，因为这是淡入淡出，且时间很短，不是那些变形或者移动的情况，会明显
|
||||
// linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
|
||||
effect: {
|
||||
type: String,
|
||||
default: 'ease-in-out'
|
||||
},
|
||||
// 是否使用过渡效果
|
||||
isEffect: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 圆角值
|
||||
borderRadius: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 图片高度，单位rpx
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: '450'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
opacity: 1,
|
||||
time: this.duration,
|
||||
loadStatus: '', // 默认是懒加载中的状态
|
||||
isError: false, // 图片加载失败
|
||||
elIndex: this.$u.guid()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 将threshold从rpx转为px
|
||||
getThreshold() {
|
||||
// 先取绝对值，因为threshold可能是负数，最后根据this.threshold是正数或者负数，重新还原
|
||||
let thresholdPx = uni.upx2px(Math.abs(this.threshold));
|
||||
return this.threshold < 0 ? -thresholdPx : thresholdPx;
|
||||
},
|
||||
// 计算图片的高度，可能为auto，带%，或者直接数值
|
||||
imgHeight() {
|
||||
return this.height == 'auto' ? 'auto' : String(this.height).indexOf('%') != -1 ? this.height : this.height + 'rpx';
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 由于一些特殊原因，不能将此变量放到data中定义
|
||||
this.observer = {};
|
||||
},
|
||||
watch: {
|
||||
isShow(nVal) {
|
||||
// 如果是不开启过渡效果，直接返回
|
||||
if (!this.isEffect) return;
|
||||
this.time = 0;
|
||||
// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明， 意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果
|
||||
this.opacity = 0;
|
||||
// 延时30ms，否则在浏览器H5，过渡效果无效
|
||||
setTimeout(() => {
|
||||
this.time = this.duration;
|
||||
this.opacity = 1;
|
||||
}, 30)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击图片触发的事件,loadlazy-还是懒加载中状态，loading-图片正在加载，loaded-图片加加载完成
|
||||
clickImg() {
|
||||
let whichImg = '';
|
||||
// 如果isShow为false，意味着图片还没开始加载，点击的只能是最开始的占位图
|
||||
if (this.isShow == false) whichImg = 'lazyImg';
|
||||
// 如果isError为true，意味着图片加载失败，这是只剩下错误的占位图，所以点击的只能是错误占位图
|
||||
// 当然，也可以给错误的占位图元素绑定点击事件，看你喜欢~
|
||||
else if (this.isError == true) whichImg = 'errorImg';
|
||||
// 总共三张图片，除了两个占位图，剩下的只能是正常的那张图片了
|
||||
else whichImg = 'realImg';
|
||||
// 只通知当前图片的index
|
||||
this.$emit('click', this.index);
|
||||
},
|
||||
// 图片加载完成事件，可能是加载占位图时触发，也可能是加载真正的图片完成时触发，通过isShow区分
|
||||
imgLoaded() {
|
||||
// 占位图加载完成
|
||||
if (this.loadStatus == '') {
|
||||
this.loadStatus = 'lazyed';
|
||||
}
|
||||
// 真正的图片加载完成
|
||||
else if (this.loadStatus == 'lazyed') {
|
||||
this.loadStatus = 'loaded';
|
||||
this.$emit('load', this.index);
|
||||
}
|
||||
},
|
||||
// 错误的图片加载完成
|
||||
errorImgLoaded() {
|
||||
this.$emit('error', this.index);
|
||||
},
|
||||
// 图片加载失败
|
||||
loadError() {
|
||||
this.isError = true;
|
||||
},
|
||||
disconnectObserver(observerName) {
|
||||
const observer = this[observerName];
|
||||
observer && observer.disconnect();
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 销毁页面时，可能还没触发某张很底部的懒加载图片，所以把这个事件给去掉
|
||||
//observer.disconnect();
|
||||
},
|
||||
mounted() {
|
||||
// 此uOnReachBottom事件由mixin.js发出，目的是让页面到底时，保证所有图片都进行加载，做到绝对稳定且可靠
|
||||
this.$nextTick(() => {
|
||||
uni.$once('uOnReachBottom', () => {
|
||||
if (!this.isShow) this.isShow = true;
|
||||
});
|
||||
})
|
||||
// mounted的时候，不一定挂载了这个元素，延时30ms，否则会报错或者不报错，但是也没有效果
|
||||
setTimeout(() => {
|
||||
// 这里是组件内获取布局状态，不能用uni.createIntersectionObserver，而必须用this.createIntersectionObserver
|
||||
this.disconnectObserver('contentObserver');
|
||||
const contentObserver = uni.createIntersectionObserver(this);
|
||||
// 要理解这里怎么计算的，请看这个：
|
||||
// https://blog.csdn.net/qq_25324335/article/details/83687695
|
||||
contentObserver.relativeToViewport({
|
||||
bottom: this.getThreshold,
|
||||
}).observe('.u-lazy-item-' + this.elIndex, (res) => {
|
||||
if (res.intersectionRatio > 0) {
|
||||
// 懒加载状态改变
|
||||
this.isShow = true;
|
||||
// 如果图片已经加载，去掉监听，减少性能的消耗
|
||||
this.disconnectObserver('contentObserver');
|
||||
}
|
||||
})
|
||||
this.contentObserver = contentObserver;
|
||||
}, 30)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-wrap {
|
||||
background-color: #eee;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-lazy-item {
|
||||
width: 100%;
|
||||
// 骗系统开启硬件加速
|
||||
transform: transition3d(0, 0, 0);
|
||||
// 防止图片加载“闪一下”
|
||||
will-change: transform;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
136
node_modules/uview-ui/components/u-line-progress/u-line-progress.vue
generated
vendored
Normal file
136
node_modules/uview-ui/components/u-line-progress/u-line-progress.vue
generated
vendored
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<view class="u-progress" :style="{
|
||||
borderRadius: round ? '100rpx' : 0,
|
||||
height: height + 'rpx',
|
||||
backgroundColor: inactiveColor
|
||||
}">
|
||||
<view :class="{'u-striped': striped, 'u-striped-active': striped && stripedActive}" class="u-active" :style="[progressStyle]">{{showPercent ? percent + '%' : ''}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* lineProgress 线型进度条
|
||||
* @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 {
|
||||
name: "u-line-progress",
|
||||
props: {
|
||||
// 两端是否显示半圆形
|
||||
round: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 主题颜色
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 激活部分的颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#19be6b'
|
||||
},
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: '#ececec'
|
||||
},
|
||||
// 进度百分比，数值
|
||||
percent: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 是否在进度条内部显示百分比的值
|
||||
showPercent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 进度条的高度，单位rpx
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 28
|
||||
},
|
||||
// 是否显示条纹
|
||||
striped: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 条纹是否显示活动状态
|
||||
stripedActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
progressStyle() {
|
||||
let style = {};
|
||||
style.width = this.percent + '%';
|
||||
if (['success', 'error', 'info', 'primary', 'warning'].indexOf(this.type) >= 0) style.backgroundColor = this.$u.color[
|
||||
this.type];
|
||||
else style.backgroundColor = this.activeColor;
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-progress {
|
||||
overflow: hidden;
|
||||
height: 15px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
|
||||
.u-active {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-items: flex-end;
|
||||
justify-content: space-around;
|
||||
font-size: 20rpx;
|
||||
color: #ffffff;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.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-size: 39px 39px;
|
||||
}
|
||||
|
||||
.u-striped-active {
|
||||
animation: progress-stripes 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes progress-stripes {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 39px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
73
node_modules/uview-ui/components/u-line/u-line.vue
generated
vendored
Normal file
73
node_modules/uview-ui/components/u-line/u-line.vue
generated
vendored
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view class="u-line" :style="[lineStyle]">
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* line 线条
|
||||
* @description 此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单
|
||||
* @tutorial https://www.uviewui.com/components/line.html
|
||||
* @property {String} color 线条的颜色(默认#e4e7ed)
|
||||
* @property {String} length 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等
|
||||
* @property {String} direction 线条的方向，row-横向，col-竖向(默认row)
|
||||
* @property {Boolean} hair-line 是否显示细线条(默认true)
|
||||
* @property {String} margin 线条与上下左右元素的间距，字符串形式，如"30rpx"
|
||||
* @example <u-line color="red"></u-line>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-line',
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: '#e4e7ed'
|
||||
},
|
||||
// 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等
|
||||
length: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
// 线条方向，col-竖向，row-横向
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'row'
|
||||
},
|
||||
// 是否显示细边框
|
||||
hairLine: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 线条与上下左右元素的间距，字符串形式，如"30rpx"、"20rpx 30rpx"
|
||||
margin: {
|
||||
type: String,
|
||||
default: '0'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lineStyle() {
|
||||
let style = {};
|
||||
style.backgroundColor = this.color;
|
||||
style.margin = this.margin;
|
||||
// 如果是水平线条，高度为1px，再通过transform缩小一半，就是0.5px了
|
||||
if(this.direction == 'row') {
|
||||
style.height = '1px';
|
||||
style.width = this.length;
|
||||
if(this.hairLine) style.transform = 'scaleY(0.5)';
|
||||
} else {
|
||||
// 如果是竖向线条，宽度为1px，再通过transform缩小一半，就是0.5px了
|
||||
style.width = '1px';
|
||||
style.height = this.length;
|
||||
if(this.hairLine) style.transform = 'scaleX(0.5)';
|
||||
}
|
||||
return style;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-line {
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
87
node_modules/uview-ui/components/u-link/u-link.vue
generated
vendored
Normal file
87
node_modules/uview-ui/components/u-link/u-link.vue
generated
vendored
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<text class="u-link" @tap.stop="openLink" :style="{
|
||||
color: color,
|
||||
fontSize: fontSize + 'rpx',
|
||||
borderBottom: underLine ? `1px solid ${lineColor ? lineColor : color}` : 'none',
|
||||
paddingBottom: underLine ? '0rpx' : '0'
|
||||
}">
|
||||
<slot></slot>
|
||||
</text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* link 超链接
|
||||
* @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 {
|
||||
name: "u-link",
|
||||
props: {
|
||||
// 文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 字体大小，单位rpx
|
||||
fontSize: {
|
||||
type: [String, Number],
|
||||
default: 28
|
||||
},
|
||||
// 是否显示下划线
|
||||
underLine: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 要跳转的链接
|
||||
href: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 小程序中复制到粘贴板的提示语
|
||||
mpTips: {
|
||||
type: String,
|
||||
default: '链接已复制，请在浏览器打开'
|
||||
},
|
||||
// 下划线颜色
|
||||
lineColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openLink() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.runtime.openURL(this.href)
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
window.open(this.href)
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
uni.setClipboardData({
|
||||
data: this.href,
|
||||
success() {
|
||||
uni.hideToast();
|
||||
}
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.$u.toast(this.mpTips);
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-link {
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
99
node_modules/uview-ui/components/u-loading/u-loading.vue
generated
vendored
Normal file
99
node_modules/uview-ui/components/u-loading/u-loading.vue
generated
vendored
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view v-if="show" class="u-loading" :class="mode == 'circle' ? 'u-loading-circle' : 'u-loading-flower'" :style="[cricleStyle]">
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* loading 加载动画
|
||||
* @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 {
|
||||
name: "u-loading",
|
||||
props: {
|
||||
// 动画的类型
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'circle'
|
||||
},
|
||||
// 动画的颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#c7c7c7'
|
||||
},
|
||||
// 加载图标的大小，单位rpx
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: '34'
|
||||
},
|
||||
// 是否显示动画
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 加载中圆圈动画的样式
|
||||
cricleStyle() {
|
||||
let style = {};
|
||||
style.width = this.size + 'rpx';
|
||||
style.height = this.size + 'rpx';
|
||||
if (this.mode == 'circle') style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${this.color ? this.color : '#c7c7c7'}`;
|
||||
return style;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-loading-circle {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
background: 0 0;
|
||||
border-radius: 50%;
|
||||
border: 2px solid;
|
||||
border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
|
||||
animation: u-circle 1s linear infinite;
|
||||
}
|
||||
|
||||
.u-loading-flower {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
-webkit-animation: a 1s steps(12) infinite;
|
||||
animation: u-flower 1s steps(12) infinite;
|
||||
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
@keyframes u-flower {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes u-circle {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
190
node_modules/uview-ui/components/u-loadmore/u-loadmore.vue
generated
vendored
Normal file
190
node_modules/uview-ui/components/u-loadmore/u-loadmore.vue
generated
vendored
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<view class="u-load-more-wrap" :style="{
|
||||
backgroundColor: bgColor,
|
||||
marginBottom: marginBottom + 'rpx',
|
||||
marginTop: marginTop + 'rpx'
|
||||
}">
|
||||
<!-- 加载中和没有更多的状态才显示两边的横线 -->
|
||||
<view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
|
||||
<u-loading class="u-loadmore-icon" :color="iconColor" :mode="iconType == 'circle' ? 'circle' : 'flower'" :show="status == 'loading' && icon"></u-loading>
|
||||
<!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
|
||||
<view :style="[loadTextStyle]" :class="[(status == 'nomore' && isDot == true) ? 'u-dot-text' : 'u-more-text']" @tap="loadMore">
|
||||
{{ showText }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* loadmore 加载更多
|
||||
* @description 此组件一般用于标识页面底部加载数据时的状态。
|
||||
* @tutorial https://www.uviewui.com/components/loadMore.html
|
||||
* @property {String} status 组件状态（默认loadmore）
|
||||
* @property {String} bg-color 组件背景颜色，在页面是非白色时会用到（默认#ffffff）
|
||||
* @property {Boolean} icon 加载中时是否显示图标（默认true）
|
||||
* @property {String} icon-type 加载中时的图标类型（默认circle）
|
||||
* @property {String} icon-color icon-type为circle时有效，加载中的动画图标的颜色（默认#b7b7b7）
|
||||
* @property {Boolean} is-dot status为nomore时，内容显示为一个"●"（默认false）
|
||||
* @property {String} color 字体颜色（默认#606266）
|
||||
* @property {String Number} font-size 字体大小，单位rpx（默认28）
|
||||
* @property {Object} load-text 自定义显示的文字，见上方说明示例
|
||||
* @event {Function} loadmore status为loadmore时，点击组件会发出此事件
|
||||
* @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
|
||||
*/
|
||||
export default {
|
||||
name: "u-loadmore",
|
||||
props: {
|
||||
//当前页面背景颜色，如果背景为非白色的时候，需要把此值设置为背景的颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
// 是否显示加载中的图标
|
||||
icon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 字体大小
|
||||
fontSize: {
|
||||
type: String,
|
||||
default: '28'
|
||||
},
|
||||
// 字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// 组件状态，loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
|
||||
status: {
|
||||
type: String,
|
||||
default: 'loadmore'
|
||||
},
|
||||
// 加载中状态的图标，flower-花朵状图标，circle-圆圈状图标
|
||||
iconType: {
|
||||
type: String,
|
||||
default: 'circle'
|
||||
},
|
||||
// 显示的文字
|
||||
loadText: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
loadmore: '加载更多',
|
||||
loading: '正在加载...',
|
||||
nomore: '没有更多了'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 在“没有更多”状态下，是否显示粗点
|
||||
isDot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 加载中显示圆圈动画时，动画的颜色
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: '#b7b7b7'
|
||||
},
|
||||
// 上边距
|
||||
marginTop: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 下边距
|
||||
marginBottom: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 粗点
|
||||
dotText: "●"
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 加载的文字显示的样式
|
||||
loadTextStyle() {
|
||||
return {
|
||||
color: this.color,
|
||||
fontSize: this.fontSize + 'rpx',
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
backgroundColor: this.bgColor,
|
||||
// 如果是加载中状态，动画和文字需要距离近一点
|
||||
padding: this.status == 'loading' ? '0 8px' : '0 12px',
|
||||
}
|
||||
},
|
||||
// 加载中圆圈动画的样式
|
||||
cricleStyle() {
|
||||
return {
|
||||
borderColor: `#e5e5e5 #e5e5e5 #e5e5e5 ${this.circleColor}`
|
||||
}
|
||||
},
|
||||
// 加载中花朵动画形式
|
||||
// 动画由base64图片生成，暂不支持修改
|
||||
flowerStyle() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
// 显示的提示文字
|
||||
showText() {
|
||||
let text = '';
|
||||
if(this.status == 'loadmore') text = this.loadText.loadmore;
|
||||
else if(this.status == 'loading') text = this.loadText.loading;
|
||||
else if(this.status == 'nomore' && this.isDot) text = this.dotText;
|
||||
else text = this.loadText.nomore;
|
||||
return text;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadMore() {
|
||||
// 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
|
||||
if(this.status == 'loadmore') this.$emit('loadmore');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-load-more-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-load-more-inner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-more {
|
||||
width: 60%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-more::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.u-dot-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.u-loadmore-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
98
node_modules/uview-ui/components/u-mask/u-mask.vue
generated
vendored
Normal file
98
node_modules/uview-ui/components/u-mask/u-mask.vue
generated
vendored
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view class="u-mask" :style="[maskStyle]" :class="[show ? 'u-mask-show' : '']" @tap="click" @touchmove.stop.prevent>
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* mask 遮罩
|
||||
* @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 {
|
||||
name: "u-mask",
|
||||
props: {
|
||||
// 是否显示遮罩
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 层级z-index
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 用户自定义样式
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放
|
||||
zoom: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 遮罩的过渡时间，单位为ms
|
||||
duration: {
|
||||
type: [Number, String],
|
||||
default: 300
|
||||
},
|
||||
// 是否可以通过点击遮罩进行关闭
|
||||
maskClickAble: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
maskStyle() {
|
||||
let style = {};
|
||||
style.backgroundColor = "rgba(0, 0, 0, 0.6)";
|
||||
if(this.show) style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.mask;
|
||||
else style.zIndex = -1;
|
||||
style.transition = `all ${this.duration / 1000}s ease-in-out`;
|
||||
// 缩放
|
||||
if (this.zoom == true) style.transform = 'scale(1.2, 1.2)';
|
||||
// 判断用户传递的对象是否为空
|
||||
if (Object.keys(this.customStyle).length) style = { ...style,
|
||||
...this.customStyle
|
||||
};
|
||||
// 合并自定义的样式
|
||||
//Object.assign(style, customStyle);
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
if (!this.maskClickAble) return;
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.u-mask-show {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
</style>
|
||||
302
node_modules/uview-ui/components/u-message-input/u-message-input.vue
generated
vendored
Normal file
302
node_modules/uview-ui/components/u-message-input/u-message-input.vue
generated
vendored
Normal file
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<view class="u-char-box">
|
||||
<view class="u-char-flex">
|
||||
<input :disabled="disabledKeyboard" :value="valueModel" type="number" :focus="focus" :maxlength="maxlength" class="u-input" @input="getVal"/>
|
||||
<view v-for="(item, index) in maxlength" :key="index">
|
||||
<view :class="[breathe && charArrLength == index ? 'u-breathe' : '', 'u-char-item',
|
||||
charArrLength === index && mode == 'box' ? 'u-box-active' : '',
|
||||
mode === 'box' ? 'u-box' : '']" :style="{
|
||||
fontWeight: bold ? 'bold' : 'normal',
|
||||
fontSize: fontSize + 'rpx',
|
||||
width: width + 'rpx',
|
||||
height: width + 'rpx',
|
||||
color: inactiveColor
|
||||
}">
|
||||
<view class="u-placeholder-line" :style="{
|
||||
display: charArrLength === index ? 'block' : 'none',
|
||||
height: width * 0.5 +'rpx'
|
||||
}"
|
||||
v-if="mode !== 'middleLine'"
|
||||
></view>
|
||||
<view v-if="mode === 'middleLine' && charArrLength <= index" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-middle-line-active' : '']"
|
||||
class="u-middle-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
|
||||
<view v-if="mode === 'bottomLine'" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-buttom-line-active' : '']"
|
||||
class="u-bottom-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
|
||||
<block v-if="!dotFill"> {{ charArr[index] ? charArr[index] : ''}}</block>
|
||||
<block v-else>
|
||||
<text class="u-dot">{{ charArr[index] ? '●' : ''}}</text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* messageInput 验证码输入框
|
||||
* @description 该组件一般用于验证用户短信验证码的场景，也可以结合uView的键盘组件使用
|
||||
* @tutorial https://www.uviewui.com/components/messageInput.html
|
||||
* @property {String Number} maxlength 输入字符个数（默认4）
|
||||
* @property {Boolean} dot-fill 是否用圆点填充（默认false）
|
||||
* @property {String} mode 模式选择，见上方"基本使用"说明（默认box）
|
||||
* @property {String Number} value 预置值
|
||||
* @property {Boolean} breathe 是否开启呼吸效果，见上方说明（默认true）
|
||||
* @property {Boolean} focus 是否自动获取焦点（默认false）
|
||||
* @property {Boolean} bold 字体和输入横线是否加粗（默认true）
|
||||
* @property {String Number} font-size 字体大小，单位rpx（默认60）
|
||||
* @property {String} active-color 当前激活输入框的样式（默认#2979ff）
|
||||
* @property {String} focus 非激活输入框的样式，文字颜色同此值（默认#606266）
|
||||
* @property {String | Number} width 输入框宽度，单位rpx，高等于宽（默认80）
|
||||
* @property {Boolean} disabled-keyboard 禁止点击输入框唤起系统键盘（默认false）
|
||||
* @event {Function} change 输入内容发生改变时触发，具体见官网说明
|
||||
* @event {Function} finish 输入字符个数达maxlength值时触发，见官网说明
|
||||
* @example <u-message-input mode="bottomLine"></u-message-input>
|
||||
*/
|
||||
export default {
|
||||
name: "u-message-input",
|
||||
props: {
|
||||
// 最大输入长度
|
||||
maxlength: {
|
||||
type: [Number, String],
|
||||
default: 4
|
||||
},
|
||||
// 是否用圆点填充
|
||||
dotFill: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 显示模式，box-盒子模式，bottomLine-横线在底部模式，middleLine-横线在中部模式
|
||||
mode: {
|
||||
type: String,
|
||||
default: "box"
|
||||
},
|
||||
// 预置值
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 当前激活输入item，是否带有呼吸效果
|
||||
breathe: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否自动获取焦点
|
||||
focus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 字体是否加粗
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 字体大小
|
||||
fontSize: {
|
||||
type: [String, Number],
|
||||
default: 60
|
||||
},
|
||||
// 激活样式
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 未激活的样式
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// 输入框的大小，单位rpx，宽等于高
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: '80'
|
||||
},
|
||||
// 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
|
||||
disabledKeyboard: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
maxlength: {
|
||||
// 此值设置为true，会在组件加载后无需maxlength变化就会执行一次本监听函数，无需再created生命周期中处理
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.maxlength = Number(val);
|
||||
}
|
||||
},
|
||||
value: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
// 转为字符串
|
||||
val = String(val);
|
||||
// 超出部分截掉
|
||||
this.valueModel = val.substring(0, this.maxlength);
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
valueModel: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 是否显示呼吸灯效果
|
||||
animationClass() {
|
||||
return (index) => {
|
||||
if (this.breathe && this.charArr.length == index) return 'u-breathe';
|
||||
else return '';
|
||||
}
|
||||
},
|
||||
// 用于显示字符
|
||||
charArr() {
|
||||
return this.valueModel.split('');
|
||||
},
|
||||
charArrLength() {
|
||||
return this.charArr.length;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getVal(e) {
|
||||
let {
|
||||
value
|
||||
} = e.detail
|
||||
this.valueModel = value;
|
||||
// 判断长度是否超出了maxlength值，理论上不会发生，因为input组件设置了maxlength属性值
|
||||
if (String(value).length > this.maxlength) return;
|
||||
// 未达到maxlength之前，发送change事件，达到后发送finish事件
|
||||
this.$emit('change', value);
|
||||
if (String(value).length == this.maxlength) {
|
||||
this.$emit('finish', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@keyframes breathe {
|
||||
0% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.u-char-box {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.u-char-flex {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
z-index: 9;
|
||||
opacity: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.u-char-item {
|
||||
position: relative;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
margin: 10rpx 10rpx;
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
color: $u-main-color;
|
||||
line-height: 90rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-middle-line {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.u-box {
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #cccccc;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.u-box-active {
|
||||
overflow: hidden;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-duration: 1500ms;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
border: 2rpx solid $u-type-primary;
|
||||
}
|
||||
|
||||
.u-middle-line-active {
|
||||
background: $u-type-primary;
|
||||
}
|
||||
|
||||
.u-breathe {
|
||||
animation: breathe 2s infinite ease;
|
||||
}
|
||||
|
||||
.u-placeholder-line {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 2rpx;
|
||||
height: 40rpx;
|
||||
background: #333333;
|
||||
animation: twinkling 1.5s infinite ease;
|
||||
}
|
||||
|
||||
.u-animation-breathe {
|
||||
animation-name: breathe;
|
||||
}
|
||||
|
||||
.u-dot {
|
||||
font-size: 34rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.u-middle-line {
|
||||
height: 4px;
|
||||
background: #000000;
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.u-buttom-line-active {
|
||||
background: $u-type-primary;
|
||||
}
|
||||
|
||||
.u-bottom-line {
|
||||
height: 4px;
|
||||
background: #000000;
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
</style>
|
||||
301
node_modules/uview-ui/components/u-modal/u-modal.vue
generated
vendored
Normal file
301
node_modules/uview-ui/components/u-modal/u-modal.vue
generated
vendored
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-popup :zoom="zoom"
|
||||
mode="center" :popup="false"
|
||||
:z-index="uZIndex" v-model="value"
|
||||
:length="width" :mask-close-able="maskCloseAble"
|
||||
:border-radius="borderRadius"
|
||||
@close="popupClose"
|
||||
>
|
||||
<view class="u-model">
|
||||
<view v-if="showTitle" class="u-model-title u-line-1" :style="[titleStyle]">{{ title }}</view>
|
||||
<view class="u-model-content">
|
||||
<view :style="[contentStyle]" v-if="$slots.default">
|
||||
<slot />
|
||||
</view>
|
||||
<view v-else class="u-model-content-message" :style="[contentStyle]">{{ content }}</view>
|
||||
</view>
|
||||
<view class="u-model-footer u-border-top">
|
||||
<view
|
||||
v-if="showCancelButton"
|
||||
:hover-stay-time="100"
|
||||
hover-class="btn-hover"
|
||||
class="u-model-footer-button"
|
||||
type="default"
|
||||
:style="[cancelBtnStyle]"
|
||||
@tap="cancel"
|
||||
>
|
||||
{{cancelText}}
|
||||
</view>
|
||||
<view
|
||||
v-if="showConfirmButton"
|
||||
:hover-stay-time="100"
|
||||
:hover-class="asyncClose ? 'none' : 'btn-hover'"
|
||||
class="u-model-footer-button hairline-left"
|
||||
:style="[confirmBtnStyle]"
|
||||
@tap="confirm"
|
||||
>
|
||||
<u-loading mode="circle" :color="confirmColor" v-if="loading"></u-loading>
|
||||
<block v-else>
|
||||
{{confirmText}}
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* modal 模态框
|
||||
* @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
|
||||
* @tutorial https://www.uviewui.com/components/modal.html
|
||||
* @property {Boolean} value 是否显示模态框
|
||||
* @property {String | Number} z-index 层级
|
||||
* @property {String} title 模态框标题（默认"提示"）
|
||||
* @property {String | Number} width 模态框宽度（默认600）
|
||||
* @property {String} content 模态框内容（默认"内容"）
|
||||
* @property {Boolean} show-title 是否显示标题（默认true）
|
||||
* @property {Boolean} async-close 是否异步关闭，只对确定按钮有效（默认false）
|
||||
* @property {Boolean} show-confirm-button 是否显示确认按钮（默认true）
|
||||
* @property {Boolean} show-cancel-button 是否显示取消按钮（默认false）
|
||||
* @property {Boolean} mask-close-able 是否允许点击遮罩关闭modal（默认false）
|
||||
* @property {String} confirm-text 确认按钮的文字内容（默认"确认"）
|
||||
* @property {String} cancel-text 取消按钮的文字内容（默认"取消"）
|
||||
* @property {String} cancel-color 取消按钮的颜色（默认"#606266"）
|
||||
* @property {String} confirm-color 确认按钮的文字内容（默认"#2979ff"）
|
||||
* @property {String | Number} border-radius 模态框圆角值，单位rpx（默认16）
|
||||
* @property {Object} title-style 自定义标题样式，对象形式
|
||||
* @property {Object} content-style 自定义内容样式，对象形式
|
||||
* @property {Object} cancel-style 自定义取消按钮样式，对象形式
|
||||
* @property {Object} confirm-style 自定义确认按钮样式，对象形式
|
||||
* @property {Boolean} zoom 是否开启缩放模式（默认true）
|
||||
* @event {Function} confirm 确认按钮被点击
|
||||
* @event {Function} cancel 取消按钮被点击
|
||||
* @example <u-modal :src="title" :content="content"></u-modal>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-modal',
|
||||
props: {
|
||||
// 是否显示Modal
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 层级z-index
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 标题
|
||||
title: {
|
||||
type: [String],
|
||||
default: '提示'
|
||||
},
|
||||
// 弹窗宽度，可以是数值(rpx)，百分比，auto等
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 600
|
||||
},
|
||||
// 弹窗内容
|
||||
content: {
|
||||
type: String,
|
||||
default: '内容'
|
||||
},
|
||||
// 是否显示标题
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示确认按钮
|
||||
showConfirmButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示取消按钮
|
||||
showCancelButton: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 确认文案
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确认'
|
||||
},
|
||||
// 取消文案
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
},
|
||||
// 确认按钮颜色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 取消文字颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// 圆角值
|
||||
borderRadius: {
|
||||
type: [Number, String],
|
||||
default: 16
|
||||
},
|
||||
// 标题的样式
|
||||
titleStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 内容的样式
|
||||
contentStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 取消按钮的样式
|
||||
cancelStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 确定按钮的样式
|
||||
confirmStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 是否开启缩放效果
|
||||
zoom: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否异步关闭，只对确定按钮有效
|
||||
asyncClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否允许点击遮罩关闭modal
|
||||
maskCloseAble: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, // 确认按钮是否正在加载中
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cancelBtnStyle() {
|
||||
return Object.assign({color: this.cancelColor}, this.cancelStyle);
|
||||
},
|
||||
confirmBtnStyle() {
|
||||
return Object.assign({color: this.confirmColor}, this.confirmStyle);
|
||||
},
|
||||
uZIndex() {
|
||||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 如果是异步关闭时，外部修改v-model的值为false时，重置内部的loading状态
|
||||
// 避免下次打开的时候，状态混乱
|
||||
value(n) {
|
||||
if(n === true) this.loading = false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm() {
|
||||
this.$emit('confirm');
|
||||
// 异步关闭
|
||||
if(this.asyncClose) {
|
||||
this.loading = true;
|
||||
} else {
|
||||
this.$emit('input', false);
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('cancel');
|
||||
this.$emit('input', false);
|
||||
// 目前popup弹窗关闭有一个延时操作，此处做一个延时
|
||||
// 避免确认按钮文字变成了"确定"字样，modal还没消失，造成视觉不好的效果
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 300);
|
||||
},
|
||||
// 点击遮罩关闭modal，设置v-model的值为false，否则无法第二次弹起modal
|
||||
popupClose() {
|
||||
this.$emit('input', false);
|
||||
},
|
||||
// 清除加载中的状态
|
||||
clearLoading() {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.btn-hover {
|
||||
background-color: rgb(230, 230, 230);
|
||||
}
|
||||
|
||||
.u-mask-show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.u-model {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
font-size: 32rpx;
|
||||
background-color: #fff;
|
||||
|
||||
&-title {
|
||||
padding-top: 48rpx;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
color: $u-main-color;
|
||||
}
|
||||
|
||||
&-content {
|
||||
&-message {
|
||||
padding: 48rpx;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
color: $u-content-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
display: flex;
|
||||
|
||||
&-button {
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
289
node_modules/uview-ui/components/u-navbar/u-navbar.vue
generated
vendored
Normal file
289
node_modules/uview-ui/components/u-navbar/u-navbar.vue
generated
vendored
Normal file
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="u-navbar" :style="[navbarStyle]" :class="{'u-navbar-fixed': isFixed, 'u-border-bottom': borderBottom}">
|
||||
<view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="u-navbar-inner" :style="[navbarInnerStyle]">
|
||||
<view class="u-back-wrap" v-if="isBack" @tap="goBack">
|
||||
<view class="u-icon-wrap">
|
||||
<u-icon :name="backIconName" :color="backIconColor" :size="backIconSize"></u-icon>
|
||||
</view>
|
||||
<view class="u-icon-wrap u-back-text u-line-1" v-if="backText" :style="[backTextStyle]">
|
||||
{{backText}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-navbar-content-title" v-if="title" :style="[titleStyle]">
|
||||
<view class="u-title u-line-1" :style="{
|
||||
color: titleColor,
|
||||
fontSize: titleSize + 'rpx'
|
||||
}">
|
||||
{{title}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-slot-content">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view class="u-slot-right">
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 解决fixed定位后导航栏塌陷的问题 -->
|
||||
<view class="u-navbar-placeholder" v-if="isFixed" :style="{width: '100%',height: Number(navbarHeight) + statusBarHeight + 'px'}">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 获取系统状态栏的高度
|
||||
let systemInfo = uni.getSystemInfoSync();
|
||||
let menuButtonInfo = {};
|
||||
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
|
||||
// #ifdef MP
|
||||
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
// #endif
|
||||
/**
|
||||
* navbar 自定义导航栏
|
||||
* @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uniapp自带的导航栏。
|
||||
* @tutorial https://www.uviewui.com/components/navbar.html
|
||||
* @property {String Number} height 导航栏高度(不包括状态栏高度在内，内部自动加上)，注意这里的单位是px（默认44）
|
||||
* @property {String} back-icon-color 左边返回图标的颜色（默认#606266）
|
||||
* @property {String} back-icon-name 左边返回图标的名称，只能为uView自带的图标（默认arrow-left）
|
||||
* @property {String Number} back-icon-size 左边返回图标的大小，单位rpx（默认30）
|
||||
* @property {String} back-text 返回图标右边的辅助提示文字
|
||||
* @property {Object} back-text-style 返回图标右边的辅助提示文字的样式，对象形式（默认{ color: '#606266' }）
|
||||
* @property {String} title 导航栏标题，如设置为空字符，将会隐藏标题占位区域
|
||||
* @property {String Number} title-width 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx（默认250）
|
||||
* @property {String} title-color 标题的颜色（默认#606266）
|
||||
* @property {String Number} title-size 导航栏标题字体大小，单位rpx（默认32）
|
||||
* @property {String Number} z-index 固定在顶部时的z-index值（默认980）
|
||||
* @property {Boolean} is-back 是否显示导航栏左边返回图标和辅助文字（默认true）
|
||||
* @property {Object} background 导航栏背景设置，见官网说明（默认{ background: '#ffffff' }）
|
||||
* @property {Boolean} is-fixed 导航栏是否固定在顶部（默认true）
|
||||
* @property {Boolean} border-bottom 导航栏底部是否显示下边框，如定义了较深的背景颜色，可取消此值（默认true）
|
||||
* @example <u-navbar back-text="返回" title="剑未配妥，出门已是江湖"></u-navbar>
|
||||
*/
|
||||
export default {
|
||||
name: "u-navbar",
|
||||
props: {
|
||||
// 导航栏高度，单位px，非rpx
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 返回箭头的颜色
|
||||
backIconColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// 左边返回的图标
|
||||
backIconName: {
|
||||
type: String,
|
||||
default: 'arrow-left'
|
||||
},
|
||||
// 左边返回图标的大小，rpx
|
||||
backIconSize: {
|
||||
type: [String, Number],
|
||||
default: '30'
|
||||
},
|
||||
// 返回的文字提示
|
||||
backText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 返回的文字的 样式
|
||||
backTextStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
color: '#606266'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 导航栏标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 标题的宽度，如果需要自定义右侧内容，且右侧内容很多时，可能需要减少这个宽度，单位rpx
|
||||
titleWidth: {
|
||||
type: [String, Number],
|
||||
default: '250'
|
||||
},
|
||||
// 标题的颜色
|
||||
titleColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// 标题的字体大小
|
||||
titleSize: {
|
||||
type: [String, Number],
|
||||
default: 32
|
||||
},
|
||||
isBack: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
// 对象形式，因为用户可能定义一个纯色，或者线性渐变的颜色
|
||||
background: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
background: '#ffffff'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 导航栏是否固定在顶部
|
||||
isFixed: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示导航栏的下边框
|
||||
borderBottom: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menuButtonInfo: menuButtonInfo,
|
||||
statusBarHeight: systemInfo.statusBarHeight
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 导航栏内部盒子的样式
|
||||
navbarInnerStyle() {
|
||||
let style = {};
|
||||
// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
|
||||
style.height = this.navbarHeight + 'px';
|
||||
// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
|
||||
// #ifdef MP
|
||||
let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
|
||||
style.marginRight = rightButtonWidth + 'px';
|
||||
// #endif
|
||||
return style;
|
||||
},
|
||||
// 整个导航栏的样式
|
||||
navbarStyle() {
|
||||
let style = {};
|
||||
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.navbar;
|
||||
// 合并用户传递的背景色对象
|
||||
Object.assign(style, this.background);
|
||||
return style;
|
||||
},
|
||||
// 导航中间的标题的样式
|
||||
titleStyle() {
|
||||
let style = {};
|
||||
// #ifndef MP
|
||||
style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
|
||||
style.right = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
// 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间，是通过绝对定位实现的
|
||||
let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
|
||||
style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
|
||||
style.right = rightButtonWidth - (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + rightButtonWidth + 'px';
|
||||
// #endif
|
||||
style.width = uni.upx2px(this.titleWidth) + 'px';
|
||||
return style;
|
||||
},
|
||||
// 转换字符数值为真正的数值
|
||||
navbarHeight() {
|
||||
// #ifdef APP-PLUS || H5
|
||||
return this.height ? this.height : 44;
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
|
||||
// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
|
||||
// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
|
||||
let height = systemInfo.platform == 'ios' ? 44 : 48;
|
||||
return this.height ? this.height : height;
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-navbar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.u-navbar-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 991;
|
||||
}
|
||||
|
||||
.u-status-bar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.u-navbar-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-back-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
flex-grow: 0;
|
||||
padding: 14rpx 14rpx 14rpx 24rpx;
|
||||
}
|
||||
|
||||
.u-back-text {
|
||||
padding-left: 4rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.u-navbar-content-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60rpx;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.u-navbar-centent-slot {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.u-title {
|
||||
line-height: 1;
|
||||
font-size: 32rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.u-navbar-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.u-slot-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
231
node_modules/uview-ui/components/u-no-network/u-no-network.vue
generated
vendored
Normal file
231
node_modules/uview-ui/components/u-no-network/u-no-network.vue
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
270
node_modules/uview-ui/components/u-notice-bar/u-notice-bar.vue
generated
vendored
Normal file
270
node_modules/uview-ui/components/u-notice-bar/u-notice-bar.vue
generated
vendored
Normal file
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<view class="u-notice-bar-wrap" v-if="isShow" :style="{
|
||||
borderRadius: borderRadius + 'rpx',
|
||||
}">
|
||||
<block v-if="mode == 'horizontal' && isCircular">
|
||||
<u-row-notice
|
||||
:type="type"
|
||||
:color="color"
|
||||
:bgColor="bgColor"
|
||||
:list="list"
|
||||
:volumeIcon="volumeIcon"
|
||||
:moreIcon="moreIcon"
|
||||
:volumeSize="volumeSize"
|
||||
:closeIcon="closeIcon"
|
||||
:mode="mode"
|
||||
:fontSize="fontSize"
|
||||
:speed="speed"
|
||||
:playState="playState"
|
||||
:padding="padding"
|
||||
@getMore="getMore"
|
||||
@close="close"
|
||||
@click="click"
|
||||
></u-row-notice>
|
||||
</block>
|
||||
<block v-if="mode == 'vertical' || (mode == 'horizontal' && !isCircular)">
|
||||
<u-column-notice
|
||||
:type="type"
|
||||
:color="color"
|
||||
:bgColor="bgColor"
|
||||
:list="list"
|
||||
:volumeIcon="volumeIcon"
|
||||
:moreIcon="moreIcon"
|
||||
:closeIcon="closeIcon"
|
||||
:mode="mode"
|
||||
:volumeSize="volumeSize"
|
||||
:disable-touch="disableTouch"
|
||||
:fontSize="fontSize"
|
||||
:duration="duration"
|
||||
:playState="playState"
|
||||
:padding="padding"
|
||||
@getMore="getMore"
|
||||
@close="close"
|
||||
@click="click"
|
||||
@end="end"
|
||||
></u-column-notice>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* noticeBar 滚动通知
|
||||
* @description 该组件用于滚动通告场景，有多种模式可供选择
|
||||
* @tutorial https://www.uviewui.com/components/noticeBar.html
|
||||
* @property {Array} list 滚动内容，数组形式，见上方说明
|
||||
* @property {String} type 显示的主题（默认warning）
|
||||
* @property {Boolean} volume-icon 是否显示小喇叭图标（默认true）
|
||||
* @property {Boolean} more-icon 是否显示右边的向右箭头（默认false）
|
||||
* @property {Boolean} close-icon 是否显示关闭图标（默认false）
|
||||
* @property {Boolean} autoplay 是否自动播放（默认true）
|
||||
* @property {String} color 文字颜色
|
||||
* @property {String Number} bg-color 背景颜色
|
||||
* @property {String} mode 滚动模式（默认horizontal）
|
||||
* @property {Boolean} show 是否显示（默认true）
|
||||
* @property {String Number} font-size 字体大小，单位rpx（默认28）
|
||||
* @property {String Number} volume-size 左边喇叭的大小（默认34）
|
||||
* @property {String Number} duration 滚动周期时长，只对步进模式有效，横向衔接模式无效，单位ms（默认2000）
|
||||
* @property {String Number} speed 水平滚动时的滚动速度，即每秒移动多少距离，只对水平衔接方式有效，单位rpx（默认160）
|
||||
* @property {String Number} font-size 字体大小，单位rpx（默认28）
|
||||
* @property {Boolean} is-circular mode为horizontal时，指明是否水平衔接滚动（默认true）
|
||||
* @property {String} play-state 播放状态，play - 播放，paused - 暂停（默认play）
|
||||
* @property {String Nubmer} border-radius 通知栏圆角（默认为0）
|
||||
* @property {String Nubmer} padding 内边距，字符串，与普通的内边距css写法一直（默认"18rpx 24rpx"）
|
||||
* @property {Boolean} no-list-hidden 列表为空时，是否显示组件（默认false）
|
||||
* @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 点击右侧关闭图标触发
|
||||
* @event {Function} getMore 点击右侧向右图标触发
|
||||
* @event {Function} end 列表的消息每次被播放一个周期时触发，只有mode = vertical，或者mode = horizontal且is-circular = false时有效
|
||||
* @example <u-notice-bar :more-icon="true" :list="list"></u-notice-bar>
|
||||
*/
|
||||
export default {
|
||||
name: "u-notice-bar",
|
||||
props: {
|
||||
// 显示的内容，数组
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 显示的主题，success|error|primary|info|warning
|
||||
type: {
|
||||
type: String,
|
||||
default: 'warning'
|
||||
},
|
||||
// 是否显示左侧的音量图标
|
||||
volumeIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 音量喇叭的大小
|
||||
volumeSize: {
|
||||
type: [Number, String],
|
||||
default: 34
|
||||
},
|
||||
// 是否显示右侧的右箭头图标
|
||||
moreIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示右侧的关闭图标
|
||||
closeIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否自动播放
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 文字颜色，各图标也会使用文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 滚动方向，horizontal-水平滚动，vertical-垂直滚动
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'horizontal'
|
||||
},
|
||||
// 是否显示
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 字体大小，单位rpx
|
||||
fontSize: {
|
||||
type: [Number, String],
|
||||
default: 28
|
||||
},
|
||||
// 滚动一个周期的时间长，单位ms
|
||||
duration: {
|
||||
type: [Number, String],
|
||||
default: 2000
|
||||
},
|
||||
// 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度
|
||||
speed: {
|
||||
type: [Number, String],
|
||||
default: 160
|
||||
},
|
||||
// 水平滚动时，是否采用衔接形式滚动
|
||||
// 水平衔接模式，采用的是swiper组件，水平滚动
|
||||
isCircular: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 播放状态，play-播放，paused-暂停
|
||||
playState: {
|
||||
type: String,
|
||||
default: 'play'
|
||||
},
|
||||
// 是否禁止用手滑动切换
|
||||
// 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
|
||||
disableTouch: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 滚动通知设置圆角
|
||||
borderRadius: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 通知的边距
|
||||
padding: {
|
||||
type: [Number, String],
|
||||
default: '18rpx 24rpx'
|
||||
},
|
||||
// list列表为空时，是否显示组件
|
||||
noListHidden: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 如果设置show为false，或者设置了noListHidden为true，且list长度又为零的话，隐藏组件
|
||||
isShow() {
|
||||
if(this.show == false || (this.noListHidden == true && this.list.length == 0)) return false;
|
||||
else return true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击通告栏
|
||||
click(index) {
|
||||
this.$emit('click', index);
|
||||
},
|
||||
// 点击关闭按钮
|
||||
close() {
|
||||
this.$emit('close');
|
||||
},
|
||||
// 点击更多箭头按钮
|
||||
getMore() {
|
||||
this.$emit('getMore');
|
||||
},
|
||||
// 滚动一个周期结束，只对垂直，或者水平步进形式有效
|
||||
end() {
|
||||
this.$emit('end');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-notice-bar-wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-notice-bar {
|
||||
padding: 18rpx 24rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-direction-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.u-left-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-notice-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.u-right-icon {
|
||||
margin-left: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-notice-content {
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
font-size: 26rpx;
|
||||
animation: u-loop-animation 10s linear infinite both;
|
||||
text-align: right;
|
||||
// 这一句很重要，为了能让滚动左右连接起来
|
||||
padding-left: 100%;
|
||||
}
|
||||
|
||||
@keyframes u-loop-animation {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
286
node_modules/uview-ui/components/u-number-box/u-number-box.vue
generated
vendored
Normal file
286
node_modules/uview-ui/components/u-number-box/u-number-box.vue
generated
vendored
Normal file
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<view class="u-numberbox">
|
||||
<view class="u-icon-minus" @tap.stop="minus" :class="{ 'u-icon-disabled': disabled || inputVal <= min }" :style="{
|
||||
background: bgColor,
|
||||
height: inputHeight + 'rpx',
|
||||
color: color
|
||||
}">
|
||||
<u-icon name="minus" :size="size"></u-icon>
|
||||
</view>
|
||||
<input :disabled="disabledInput || disabled" :cursor-spacing="getCursorSpacing" :class="{ 'u-input-disabled': disabled }" v-model="inputVal" class="u-number-input" @blur="onBlur"
|
||||
type="number" :style="{
|
||||
color: color,
|
||||
fontSize: size + 'rpx',
|
||||
background: bgColor,
|
||||
height: inputHeight + 'rpx',
|
||||
width: inputWidth + 'rpx'
|
||||
}" />
|
||||
<view class="u-icon-plus" @tap.stop="plus" :class="{ 'u-icon-disabled': disabled || inputVal >= max }" :style="{
|
||||
background: bgColor,
|
||||
height: inputHeight + 'rpx',
|
||||
color: color
|
||||
}">
|
||||
<u-icon name="plus" :size="size"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* numberBox 步进器
|
||||
* @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 {Boolean} disabled-input 是否禁止输入框手动输入值（默认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 事件回调时用以区分当前发生变化的是哪个输入框
|
||||
* @property {String | Number} cursor-spacing 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认200）
|
||||
* @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: {
|
||||
// 预显示的数字
|
||||
value: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#F2F3F5'
|
||||
},
|
||||
// 最小值
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 最大值
|
||||
max: {
|
||||
type: Number,
|
||||
default: 99999
|
||||
},
|
||||
// 步进值，每次加或减的值
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 是否禁用加减操作
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// input的字体大小，单位rpx
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 26
|
||||
},
|
||||
// 加减图标的颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#323233'
|
||||
},
|
||||
// input宽度，单位rpx
|
||||
inputWidth: {
|
||||
type: [Number, String],
|
||||
default: 80
|
||||
},
|
||||
// input高度，单位rpx
|
||||
inputHeight: {
|
||||
type: [Number, String],
|
||||
default: 50
|
||||
},
|
||||
// index索引，用于列表中使用，让用户知道是哪个numberbox发生了变化，一般使用for循环出来的index值即可
|
||||
index: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 是否禁用输入框，与disabled作用于输入框时，为OR的关系，即想要禁用输入框，又可以加减的话
|
||||
// 设置disabled为false，disabledInput为true即可
|
||||
disabledInput: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 输入框于键盘之间的距离
|
||||
cursorSpacing: {
|
||||
type: [Number, String],
|
||||
default: 100
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val, val1) {
|
||||
// 防止用户在change事件回调中将回调值赋值给valut变量，导致change事件触发两次
|
||||
if(Number(val) != this.inputVal) this.inputVal = Number(val);
|
||||
},
|
||||
inputVal(v1, v2) {
|
||||
// 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
|
||||
if (v1 == '') return;
|
||||
let value = 0;
|
||||
// 首先判断是否正整数，并且在min和max之间，如果不是，使用原来值
|
||||
let tmp = /(^\d+$)/.test(v1);
|
||||
if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
|
||||
else value = v2;
|
||||
this.handleChange(value, 'change');
|
||||
this.$nextTick(() => {
|
||||
this.inputVal = value;
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputVal: 0 // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.inputVal = Number(this.value);
|
||||
},
|
||||
computed: {
|
||||
getCursorSpacing() {
|
||||
// 先将值转为px单位，再转为数值
|
||||
return Number(uni.upx2px(this.cursorSpacing));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
minus() {
|
||||
this.computeVal('minus');
|
||||
},
|
||||
plus() {
|
||||
this.computeVal('plus');
|
||||
},
|
||||
// 为了保证小数相加减出现精度溢出的问题
|
||||
calcPlus(num1, num2) {
|
||||
let baseNum, baseNum1, baseNum2;
|
||||
try {
|
||||
baseNum1 = num1.toString().split('.')[1].length;
|
||||
} catch (e) {
|
||||
baseNum1 = 0;
|
||||
}
|
||||
try {
|
||||
baseNum2 = num2.toString().split('.')[1].length;
|
||||
} catch (e) {
|
||||
baseNum2 = 0;
|
||||
}
|
||||
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
|
||||
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2; //精度
|
||||
return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision);
|
||||
},
|
||||
// 为了保证小数相加减出现精度溢出的问题
|
||||
calcMinus(num1, num2) {
|
||||
let baseNum, baseNum1, baseNum2;
|
||||
try {
|
||||
baseNum1 = num1.toString().split('.')[1].length;
|
||||
} catch (e) {
|
||||
baseNum1 = 0;
|
||||
}
|
||||
try {
|
||||
baseNum2 = num2.toString().split('.')[1].length;
|
||||
} catch (e) {
|
||||
baseNum2 = 0;
|
||||
}
|
||||
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
|
||||
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
|
||||
return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
|
||||
},
|
||||
computeVal(type) {
|
||||
uni.hideKeyboard();
|
||||
if (this.disabled) return;
|
||||
let value = 0;
|
||||
// 减
|
||||
if (type === 'minus') {
|
||||
value = this.calcMinus(this.inputVal, this.step);
|
||||
} else if (type === 'plus') {
|
||||
value = this.calcPlus(this.inputVal, this.step);
|
||||
}
|
||||
// 判断是否小于最小值和大于最大值
|
||||
if (value < this.min || value > this.max) {
|
||||
return;
|
||||
}
|
||||
this.inputVal = value;
|
||||
this.handleChange(value, type);
|
||||
},
|
||||
// 处理用户手动输入的情况
|
||||
onBlur(event) {
|
||||
let val = 0;
|
||||
let value = event.detail.value;
|
||||
// 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
|
||||
// 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
|
||||
if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min;
|
||||
val = +value;
|
||||
if (val > this.max) {
|
||||
val = this.max;
|
||||
} else if (val < this.min) {
|
||||
val = this.min;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.inputVal = val;
|
||||
})
|
||||
this.handleChange(val, "blur");
|
||||
},
|
||||
handleChange(value, type) {
|
||||
if (this.disabled) return;
|
||||
// 发出input事件，修改通过v-model绑定的值，达到双向绑定的效果
|
||||
this.$emit('input', Number(value));
|
||||
this.$emit(type, {
|
||||
// 转为Number类型
|
||||
value: Number(value),
|
||||
index: this.index
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-numberbox {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-number-input {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-icon-plus,
|
||||
.u-icon-minus {
|
||||
width: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-icon-plus {
|
||||
border-radius: 0 8rpx 8rpx 0;
|
||||
}
|
||||
|
||||
.u-icon-minus {
|
||||
border-radius: 8rpx 0 0 8rpx;
|
||||
}
|
||||
|
||||
.u-icon-disabled {
|
||||
color: #c8c9cc !important;
|
||||
background: #f7f8fa !important;
|
||||
}
|
||||
|
||||
.u-input-disabled {
|
||||
color: #c8c9cc !important;
|
||||
background-color: #f2f3f5 !important;
|
||||
}
|
||||
</style>
|
||||
152
node_modules/uview-ui/components/u-number-keyboard/u-number-keyboard.vue
generated
vendored
Normal file
152
node_modules/uview-ui/components/u-number-keyboard/u-number-keyboard.vue
generated
vendored
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<view class="u-keyboard" @touchmove.stop.prevent>
|
||||
<view class="u-keyboard-grids">
|
||||
<view
|
||||
class="u-keyboard-grids-item"
|
||||
:class="[btnBgGray(index) ? 'u-bg-gray' : '', index <= 2 ? 'u-border-top' : '', index < 9 ? 'u-border-bottom' : '', (index + 1) % 3 != 0 ? 'u-border-right' : '']"
|
||||
:style="[itemStyle(index)]"
|
||||
v-for="(item, index) in numList"
|
||||
:key="index"
|
||||
:hover-class="hoverClass(index)"
|
||||
:hover-stay-time="100"
|
||||
@tap="keyboardClick(item)"
|
||||
>
|
||||
<view class="u-keyboard-grids-btn">{{ item }}</view>
|
||||
</view>
|
||||
<view class="u-keyboard-grids-item u-bg-gray" hover-class="u-hover-class" :hover-stay-time="100" @touchstart.stop="backspaceClick" @touchend="clearTimer">
|
||||
<view class="u-keyboard-back u-keyboard-grids-btn"><u-icon name="backspace" :size="38" :bold="true"></u-icon></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
// 键盘的类型，number-数字键盘，card-身份证键盘
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'number'
|
||||
},
|
||||
// 是否显示键盘的"."符号
|
||||
dotEnabled: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否打乱键盘按键的顺序
|
||||
random: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
backspace: 'backspace', // 退格键内容
|
||||
dot: '.', // 点
|
||||
timer: null, // 长按多次删除的事件监听
|
||||
cardX: 'X' // 身份证的X符号
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 键盘需要显示的内容
|
||||
numList() {
|
||||
let tmp = [];
|
||||
if (!this.dotEnabled && this.mode == 'number') {
|
||||
if (!this.random) {
|
||||
return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
|
||||
} else {
|
||||
return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
|
||||
}
|
||||
} else if (this.dotEnabled && this.mode == 'number') {
|
||||
if (!this.random) {
|
||||
return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0];
|
||||
} else {
|
||||
return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]);
|
||||
}
|
||||
} else if (this.mode == 'card') {
|
||||
if (!this.random) {
|
||||
return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0];
|
||||
} else {
|
||||
return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，按键占位两个空间
|
||||
itemStyle() {
|
||||
return index => {
|
||||
let style = {};
|
||||
if (this.mode == 'number' && !this.dotEnabled && index == 9) style.flex = '0 0 66.6666666666%';
|
||||
return style;
|
||||
};
|
||||
},
|
||||
// 是否让按键显示灰色，只在非乱序&&数字键盘&&且允许点按键的时候
|
||||
btnBgGray() {
|
||||
return index => {
|
||||
if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && this.dotEnabled))) return true;
|
||||
else return false;
|
||||
};
|
||||
},
|
||||
hoverClass() {
|
||||
return index => {
|
||||
if(!this.random && index == 9 && (this.mode == 'number' && this.dotEnabled || this.mode == 'card')) return 'u-hover-class';
|
||||
else return 'u-keyboard-hover';
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击退格键
|
||||
backspaceClick() {
|
||||
this.$emit('backspace');
|
||||
clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
|
||||
this.timer = setInterval(() => {
|
||||
this.$emit('backspace');
|
||||
}, 250);
|
||||
},
|
||||
clearTimer() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
// 获取键盘显示的内容
|
||||
keyboardClick(val) {
|
||||
// 允许键盘显示点模式和触发非点按键时，将内容转为数字类型
|
||||
if (this.dotEnabled && val != this.dot && val != this.cardX) val = Number(val);
|
||||
this.$emit('change', val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-keyboard {
|
||||
position: relative;
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
.u-keyboard-grids {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.u-keyboard-grids-item {
|
||||
flex: 0 0 33.3333333333%;
|
||||
text-align: center;
|
||||
font-size: 50rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 110rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.u-bg-gray {
|
||||
background-color: #e7e6eb;
|
||||
}
|
||||
|
||||
.u-keyboard-back {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.u-keyboard-hover {
|
||||
background-color: #e7e6eb;
|
||||
}
|
||||
</style>
|
||||
617
node_modules/uview-ui/components/u-picker/u-picker.vue
generated
vendored
Normal file
617
node_modules/uview-ui/components/u-picker/u-picker.vue
generated
vendored
Normal file
@@ -0,0 +1,617 @@
|
||||
<template>
|
||||
<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
|
||||
:safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
|
||||
<view class="u-datetime-picker" @tap.stop>
|
||||
<view class="u-picker-header" @touchmove.stop.prevent="stop" catchtouchmove="stop">
|
||||
<view class="u-btn-picker u-btn-picker--tips" :style="{ color: cancelColor }" hover-class="u-opacity" :hover-stay-time="150"
|
||||
@tap="getResult('cancel')">取消</view>
|
||||
<view class="u-btn-picker u-btn-picker--primary" :style="{ color: confirmColor }" hover-class="u-opacity" :hover-stay-time="150"
|
||||
@touchmove.stop="" @tap.stop="getResult('confirm')">确定</view>
|
||||
</view>
|
||||
<view class="u-picker-body">
|
||||
<picker-view v-if="mode == 'region'" :value="valueArr" @change="change" class="u-picker-view">
|
||||
<picker-view-column v-if="params.province">
|
||||
<view class="u-column-item" v-for="(item,index) in provinces" :key="index">
|
||||
<view class="u-line-1">
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="params.city">
|
||||
<view class="u-column-item" v-for="(item,index) in citys" :key="index">
|
||||
<view class="u-line-1">
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="params.area">
|
||||
<view class="u-column-item" v-for="(item,index) in areas" :key="index">
|
||||
<view class="u-line-1">
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<picker-view v-else-if="mode == 'time'" :value="valueArr" @change="change" class="u-picker-view">
|
||||
<picker-view-column v-if="!reset && params.year">
|
||||
<view class="u-column-item" v-for="(item,index) in years" :key="index">
|
||||
{{ item }}<text class="u-text" v-if="showTimeTag">年</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && params.month">
|
||||
<view class="u-column-item" v-for="(item,index) in months" :key="index">
|
||||
{{ formatNumber(item)}}<text class="u-text" v-if="showTimeTag">月</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && params.day">
|
||||
<view class="u-column-item" v-for="(item,index) in days" :key="index">
|
||||
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">日</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && params.hour">
|
||||
<view class="u-column-item" v-for="(item,index) in hours" :key="index">
|
||||
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">时</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && params.minute">
|
||||
<view class="u-column-item" v-for="(item,index) in minutes" :key="index">
|
||||
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">分</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && params.second">
|
||||
<view class="u-column-item" v-for="(item,index) in seconds" :key="index">
|
||||
{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">秒</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<picker-view v-else-if="mode == 'selector'" :value="defaultSelector" @change="change" class="u-picker-view">
|
||||
<picker-view-column>
|
||||
<view class="u-column-item" v-for="(item,index) in range" :key="index">
|
||||
<view class="u-line-1">
|
||||
{{getItemValue(item, 'selector')}}
|
||||
</view>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<picker-view v-else-if="mode == 'multiSelector'" :value="defaultSelector" @change="change" class="u-picker-view">
|
||||
<picker-view-column v-for="(item,index) in range" :key="index">
|
||||
<view class="u-column-item" v-for="(item1,index1) in item" :key="index1">
|
||||
<view class="u-line-1">
|
||||
{{getItemValue(item1, 'multiSelector')}}
|
||||
</view>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import provinces from '../../libs/util/province.js';
|
||||
import citys from '../../libs/util/city.js';
|
||||
import areas from '../../libs/util/area.js';
|
||||
|
||||
/**
|
||||
* picker picker弹出选择器
|
||||
* @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 {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示
|
||||
* @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）
|
||||
* @property {Array} default-selector 数组形式，其中每一项表示选择了range对应项中的第几个
|
||||
* @property {Array} range 自定义选择的数据，mode=selector或mode=multiSelector时有效
|
||||
* @property {String} range-key 当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容
|
||||
* @event {Function} confirm 点击确定按钮，返回当前选择的值
|
||||
* @event {Function} cancel 点击取消按钮，返回当前选择的值
|
||||
* @example <u-picker v-model="show" mode="time"></u-picker>
|
||||
*/
|
||||
export default {
|
||||
name: "u-picker",
|
||||
props: {
|
||||
// picker中需要显示的参数
|
||||
params: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
year: true,
|
||||
month: true,
|
||||
day: true,
|
||||
hour: false,
|
||||
minute: false,
|
||||
second: false,
|
||||
province: true,
|
||||
city: true,
|
||||
area: true
|
||||
}
|
||||
}
|
||||
},
|
||||
// 当mode=selector或者mode=multiSelector时，提供的数组
|
||||
range: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 当mode=selector或者mode=multiSelector时，提供的默认选中的下标
|
||||
defaultSelector: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [0]
|
||||
}
|
||||
},
|
||||
// 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
|
||||
rangeKey: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 模式选择，region-地区类型，time-时间类型，selector-单列模式，multiSelector-多列模式
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'time'
|
||||
},
|
||||
// 年份开始时间
|
||||
startYear: {
|
||||
type: [String, Number],
|
||||
default: 1950
|
||||
},
|
||||
// 年份结束时间
|
||||
endYear: {
|
||||
type: [String, Number],
|
||||
default: 2050
|
||||
},
|
||||
// "取消"按钮的颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// "确定"按钮的颜色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 默认显示的时间，2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02
|
||||
defaultTime: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
|
||||
defaultRegion: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 时间模式时，是否显示后面的年月日中文提示
|
||||
showTimeTag: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
|
||||
areaCode: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否允许通过点击遮罩关闭Picker
|
||||
maskCloseAble: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 通过双向绑定控制组件的弹出与收起
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 弹出的z-index值
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
years: [],
|
||||
months: [],
|
||||
days: [],
|
||||
hours: [],
|
||||
minutes: [],
|
||||
seconds: [],
|
||||
year: 0,
|
||||
month: 0,
|
||||
day: 0,
|
||||
hour: 0,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
valueArr: [],
|
||||
reset: false,
|
||||
provinces: provinces,
|
||||
citys: citys[0],
|
||||
areas: areas[0][0],
|
||||
province: 0,
|
||||
city: 0,
|
||||
area: 0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
computed: {
|
||||
propsChange() {
|
||||
// 引用这几个变量，是为了监听其变化
|
||||
return `${this.mode}-${this.defaultTime}-${this.startYear}-${this.endYear}-${this.defaultRegion}-${this.areaCode}`;
|
||||
},
|
||||
regionChange() {
|
||||
// 引用这几个变量，是为了监听其变化
|
||||
return `${this.province}-${this.city}`;
|
||||
},
|
||||
yearAndMonth() {
|
||||
return `${this.year}-${this.month}`;
|
||||
},
|
||||
uZIndex() {
|
||||
// 如果用户有传递z-index值，优先使用
|
||||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
propsChange() {
|
||||
this.reset = true;
|
||||
setTimeout(() => this.init(), 10);
|
||||
},
|
||||
// 如果地区发生变化，为了让picker联动起来，必须重置this.citys和this.areas
|
||||
regionChange(val) {
|
||||
this.citys = citys[this.province];
|
||||
this.areas = areas[this.province][this.city];
|
||||
},
|
||||
// watch监听月份的变化，实时变更日的天数，因为不同月份，天数不一样
|
||||
// 一个月可能有30，31天，甚至闰年2月的29天，平年2月28天
|
||||
yearAndMonth(val) {
|
||||
if (this.params.year) this.setDays();
|
||||
},
|
||||
// 微信和QQ小程序由于一些奇怪的原因(故同时对所有平台均初始化一遍)，需要重新初始化才能显示正确的值
|
||||
value(n) {
|
||||
if (n) {
|
||||
this.reset = true;
|
||||
setTimeout(() => this.init(), 10);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 对单列和多列形式的判断是否有传入变量的情况
|
||||
getItemValue(item, mode) {
|
||||
// 目前(2020-05-25)uni-app对微信小程序编译有错误，导致v-if为false中的内容也执行，错误导致
|
||||
// 单列模式或者多列模式中的getItemValue同时被执行，故在这里再加一层判断
|
||||
if(this.mode == mode) {
|
||||
return typeof item == 'object' ? item[this.rangeKey] : item
|
||||
}
|
||||
},
|
||||
// 小于10前面补0，用于月份，日期，时分秒等
|
||||
formatNumber(num) {
|
||||
return +num < 10 ? '0' + num : String(num);
|
||||
},
|
||||
// 生成递进的数组
|
||||
generateArray: function(start, end) {
|
||||
end = end > start ? end : start;
|
||||
// 生成数组，获取其中的索引，并剪出来
|
||||
return [...Array(end + 1).keys()].slice(start);
|
||||
},
|
||||
getIndex: function(arr, val) {
|
||||
let index = arr.indexOf(val);
|
||||
// 如果index为-1(即找不到index值)，~(-1)=-(-1)-1=0，导致条件不成立
|
||||
return ~index ? index : 0;
|
||||
},
|
||||
//日期时间处理
|
||||
initTimeValue() {
|
||||
// 格式化时间，在IE浏览器(uni不存在此情况)，无法识别日期间的"-"间隔符号
|
||||
let fdate = this.defaultTime.replace(/\-/g, '/');
|
||||
fdate = fdate && fdate.indexOf("/") == -1 ? `2020/01/01 ${fdate}` : fdate
|
||||
let time = null;
|
||||
if (fdate)
|
||||
time = new Date(fdate);
|
||||
else
|
||||
time = new Date();
|
||||
// 获取年日月时分秒
|
||||
this.year = time.getFullYear()
|
||||
this.month = Number(time.getMonth()) + 1;
|
||||
this.day = time.getDate();
|
||||
this.hour = time.getHours();
|
||||
this.minute = time.getMinutes();
|
||||
this.second = time.getSeconds();
|
||||
},
|
||||
init() {
|
||||
this.valueArr = [];
|
||||
this.reset = false;
|
||||
if (this.mode == 'time') {
|
||||
this.initTimeValue();
|
||||
if (this.params.year) {
|
||||
this.valueArr.push(0);
|
||||
this.setYears();
|
||||
}
|
||||
if (this.params.month) {
|
||||
this.valueArr.push(0);
|
||||
this.setMonths();
|
||||
}
|
||||
if (this.params.day) {
|
||||
this.valueArr.push(0);
|
||||
this.setDays();
|
||||
}
|
||||
if (this.params.hour) {
|
||||
this.valueArr.push(0);
|
||||
this.setHours();
|
||||
}
|
||||
if (this.params.minute) {
|
||||
this.valueArr.push(0);
|
||||
this.setMinutes();
|
||||
}
|
||||
if (this.params.second) {
|
||||
this.valueArr.push(0);
|
||||
this.setSeconds();
|
||||
}
|
||||
} else if(this.mode == 'region') {
|
||||
if (this.params.province) {
|
||||
this.valueArr.push(0);
|
||||
this.setProvinces();
|
||||
}
|
||||
if (this.params.city) {
|
||||
this.valueArr.push(0);
|
||||
this.setCitys();
|
||||
}
|
||||
if (this.params.area) {
|
||||
this.valueArr.push(0);
|
||||
this.setAreas();
|
||||
}
|
||||
} else if(this.mode == 'selector') {
|
||||
this.valueArr = this.defaultSelector;
|
||||
} else if(this.mode == 'multiSelector') {
|
||||
this.valueArr = this.defaultSelector;
|
||||
this.multiSelectorValue = this.defaultSelector;
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 设置picker的某一列值
|
||||
setYears() {
|
||||
// 获取年份集合
|
||||
this.years = this.generateArray(this.startYear, this.endYear);
|
||||
// 设置this.valueArr某一项的值，是为了让picker预选中某一个值
|
||||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.years, this.year));
|
||||
},
|
||||
setMonths() {
|
||||
this.months = this.generateArray(1, 12);
|
||||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.months, this.month));
|
||||
},
|
||||
setDays() {
|
||||
let totalDays = new Date(this.year, this.month, 0).getDate();
|
||||
this.days = this.generateArray(1, totalDays);
|
||||
let index = 0;
|
||||
// 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, xxx)做法
|
||||
// 因为this.month和this.year变化时，会触发watch中的this.setDays()，导致this.valueArr.length计算有误
|
||||
if (this.params.year && this.params.month) index = 2;
|
||||
else if (this.params.month) index = 1;
|
||||
else if (this.params.year) index = 1;
|
||||
else index = 0;
|
||||
this.valueArr.splice(index, 1, this.getIndex(this.days, this.day));
|
||||
},
|
||||
setHours() {
|
||||
this.hours = this.generateArray(0, 23);
|
||||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.hours, this.hour));
|
||||
},
|
||||
setMinutes() {
|
||||
this.minutes = this.generateArray(0, 59);
|
||||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.minutes, this.minute));
|
||||
},
|
||||
setSeconds() {
|
||||
this.seconds = this.generateArray(0, 59);
|
||||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.seconds, this.second));
|
||||
},
|
||||
setProvinces() {
|
||||
// 判断是否需要province参数
|
||||
if (!this.params.province) return;
|
||||
let tmp = '';
|
||||
let useCode = false;
|
||||
// 如果同时配置了defaultRegion和areaCode，优先使用areaCode参数
|
||||
if (this.areaCode.length) {
|
||||
tmp = this.areaCode[0];
|
||||
useCode = true;
|
||||
} else if (this.defaultRegion.length) tmp = this.defaultRegion[0];
|
||||
else tmp = 0;
|
||||
// 历遍省份数组匹配
|
||||
provinces.map((v, k) => {
|
||||
if (useCode ? v.value == tmp : v.label == tmp) {
|
||||
tmp = k;
|
||||
}
|
||||
})
|
||||
this.province = tmp;
|
||||
this.provinces = provinces;
|
||||
// 设置默认省份的值
|
||||
this.valueArr.splice(0, 1, this.province);
|
||||
},
|
||||
setCitys() {
|
||||
if (!this.params.city) return;
|
||||
let tmp = '';
|
||||
let useCode = false;
|
||||
if (this.areaCode.length) {
|
||||
tmp = this.areaCode[1];
|
||||
useCode = true;
|
||||
} else if (this.defaultRegion.length) tmp = this.defaultRegion[1];
|
||||
else tmp = 0;
|
||||
citys[this.province].map((v, k) => {
|
||||
if (useCode ? v.value == tmp : v.label == tmp) {
|
||||
tmp = k;
|
||||
}
|
||||
})
|
||||
this.city = tmp;
|
||||
this.citys = citys[this.province];
|
||||
this.valueArr.splice(1, 1, this.city);
|
||||
},
|
||||
setAreas() {
|
||||
if (!this.params.area) return;
|
||||
let tmp = '';
|
||||
let useCode = false;
|
||||
if (this.areaCode.length) {
|
||||
tmp = this.areaCode[2];
|
||||
useCode = true;
|
||||
} else if (this.defaultRegion.length) tmp = this.defaultRegion[2];
|
||||
else tmp = 0;
|
||||
areas[this.province][this.city].map((v, k) => {
|
||||
if (useCode ? v.value == tmp : v.label == tmp) {
|
||||
tmp = k;
|
||||
}
|
||||
})
|
||||
this.area = tmp;
|
||||
this.areas = areas[this.province][this.city];
|
||||
this.valueArr.splice(2, 1, this.area);
|
||||
},
|
||||
close() {
|
||||
this.$emit('input', false);
|
||||
},
|
||||
// 用户更改picker的列选项
|
||||
change(e) {
|
||||
this.valueArr = e.detail.value;
|
||||
let i = 0;
|
||||
if (this.mode == 'time') {
|
||||
// 这里使用i++，是因为this.valueArr数组的长度是不确定长度的，它根据this.params的值来配置长度
|
||||
// 进入if规则，i会加1，保证了能获取准确的值
|
||||
if (this.params.year) this.year = this.years[this.valueArr[i++]];
|
||||
if (this.params.month) this.month = this.months[this.valueArr[i++]];
|
||||
if (this.params.day) this.day = this.days[this.valueArr[i++]];
|
||||
if (this.params.hour) this.hour = this.hours[this.valueArr[i++]];
|
||||
if (this.params.minute) this.minute = this.minutes[this.valueArr[i++]];
|
||||
if (this.params.second) this.second = this.seconds[this.valueArr[i++]];
|
||||
} else if(this.mode == 'region') {
|
||||
if (this.params.province) this.province = this.valueArr[i++];
|
||||
if (this.params.city) this.city = this.valueArr[i++];
|
||||
if (this.params.area) this.area = this.valueArr[i++];
|
||||
} else if(this.mode == 'multiSelector') {
|
||||
let index = null;
|
||||
// 对比前后两个数组，寻找变更的是哪一列，如果某一个元素不同，即可判定该列发生了变化
|
||||
this.defaultSelector.map((val, idx) => {
|
||||
if(val != e.detail.value[idx]) index = idx;
|
||||
})
|
||||
// 为了让用户对多列变化时，对动态设置其他列的变更
|
||||
if(index != null) {
|
||||
this.$emit('columnchange', {
|
||||
column: index,
|
||||
index: e.detail.value[index]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 用户点击确定按钮
|
||||
getResult(event = null) {
|
||||
let result = {};
|
||||
// 只返回用户在this.params中配置了为true的字段
|
||||
if (this.mode == 'time') {
|
||||
if (this.params.year) result.year = this.formatNumber(this.year || 0);
|
||||
if (this.params.month) result.month = this.formatNumber(this.month || 0);
|
||||
if (this.params.day) result.day = this.formatNumber(this.day || 0);
|
||||
if (this.params.hour) result.hour = this.formatNumber(this.hour || 0);
|
||||
if (this.params.minute) result.minute = this.formatNumber(this.minute || 0);
|
||||
if (this.params.second) result.second = this.formatNumber(this.second || 0);
|
||||
} else if (this.mode == 'region') {
|
||||
if (this.params.province) result.province = provinces[this.province];
|
||||
if (this.params.city) result.city = citys[this.province][this.city];
|
||||
if (this.params.area) result.area = areas[this.province][this.city][this.area];
|
||||
} else if (this.mode == 'selector') {
|
||||
result = this.valueArr;
|
||||
} else if (this.mode == 'multiSelector') {
|
||||
result = this.valueArr;
|
||||
}
|
||||
if (event) this.$emit(event, result);
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-datetime-picker {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.u-picker-view {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.u-picker-header {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
padding: 0 40rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
font-size: 32rpx;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-picker-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1rpx solid #eaeef1;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.u-picker-body {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.u-column-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: $u-main-color;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.u-text {
|
||||
font-size: 24rpx;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
|
||||
.u-btn-picker {
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.u-opacity {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.u-btn-picker--primary {
|
||||
color: $u-type-primary;
|
||||
}
|
||||
|
||||
.u-btn-picker--tips {
|
||||
color: $u-tips-color;
|
||||
}
|
||||
</style>
|
||||
396
node_modules/uview-ui/components/u-popup/u-popup.vue
generated
vendored
Normal file
396
node_modules/uview-ui/components/u-popup/u-popup.vue
generated
vendored
Normal file
@@ -0,0 +1,396 @@
|
||||
<template>
|
||||
<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>
|
||||
<view
|
||||
class="u-drawer-content"
|
||||
@tap="modeCenterClose(mode)"
|
||||
:class="[
|
||||
safeAreaInsetBottom ? 'safe-area-inset-bottom' : '',
|
||||
'u-drawer-' + mode,
|
||||
showDrawer ? 'u-drawer-content-visible' : '',
|
||||
zoom && mode == 'center' ? 'u-animation-zoom' : ''
|
||||
]"
|
||||
@touchmove.stop.prevent
|
||||
@tap.stop.prevent
|
||||
:style="[style]"
|
||||
>
|
||||
<view class="u-mode-center-box" @tap.stop.prevent @touchmove.stop.prevent v-if="mode == 'center'" :style="[centerStyle]">
|
||||
<u-icon
|
||||
@click="close"
|
||||
v-if="closeable"
|
||||
class="u-close"
|
||||
:class="['u-close--' + closeIconPos]"
|
||||
:name="closeIcon"
|
||||
:color="closeIconColor"
|
||||
:size="closeIconSize"
|
||||
></u-icon>
|
||||
<slot />
|
||||
</view>
|
||||
<block v-else><slot /></block>
|
||||
<u-icon
|
||||
v-if="mode != 'center' && closeable"
|
||||
@click="close"
|
||||
class="u-close"
|
||||
:class="['u-close--' + closeIconPos]"
|
||||
:name="closeIcon"
|
||||
:color="closeIconColor"
|
||||
:size="closeIconSize"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* popup 弹窗
|
||||
* @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
|
||||
* @tutorial https://www.uviewui.com/components/popup.html
|
||||
* @property {String} mode 弹出方向（默认left）
|
||||
* @property {Boolean} mask 是否显示遮罩（默认true）
|
||||
* @property {Stringr | 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 {Numberr | String} border-radius 弹窗圆角值（默认0）
|
||||
* @property {Numberr | String} z-index 弹出内容的z-index值（默认1075）
|
||||
* @property {Boolean} closeable 是否显示关闭图标（默认false）
|
||||
* @property {String} close-icon 关闭图标的名称，只能uView的内置图标
|
||||
* @property {String} close-icon-pos 自定义关闭图标位置（默认top-right）
|
||||
* @property {String} close-icon-color 关闭图标的颜色（默认#909399）
|
||||
* @property {Number | String} close-icon-size 关闭图标的大小，单位rpx（默认30）
|
||||
* @event {Function} open 弹出层打开
|
||||
* @event {Function} close 弹出层收起
|
||||
* @example <u-popup v-model="show"><view>出淤泥而不染，濯清涟而不妖</view></u-popup>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-popup',
|
||||
props: {
|
||||
/**
|
||||
* 显示状态
|
||||
*/
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 弹出方向，left|right|top|bottom|center
|
||||
*/
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
/**
|
||||
* 是否显示遮罩
|
||||
*/
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto"
|
||||
// 或者百分比"50%"，表示由内容撑开高度或者宽度
|
||||
length: {
|
||||
type: [Number, String],
|
||||
default: 'auto'
|
||||
},
|
||||
// 是否开启缩放动画，只在mode=center时有效
|
||||
zoom: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否可以通过点击遮罩进行关闭
|
||||
maskCloseAble: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 用户自定义样式
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
|
||||
// 对v-model双向绑定多层调用造成报错不能修改props值的问题
|
||||
popup: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 显示显示弹窗的圆角，单位rpx
|
||||
borderRadius: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 是否显示关闭图标
|
||||
closeable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 关闭图标的名称，只能uView的内置图标
|
||||
closeIcon: {
|
||||
type: String,
|
||||
default: 'close'
|
||||
},
|
||||
// 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
|
||||
closeIconPos: {
|
||||
type: String,
|
||||
default: 'top-right'
|
||||
},
|
||||
// 关闭图标的颜色
|
||||
closeIconColor: {
|
||||
type: String,
|
||||
default: '#909399'
|
||||
},
|
||||
// 关闭图标的大小，单位rpx
|
||||
closeIconSize: {
|
||||
type: [String, Number],
|
||||
default: '30'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visibleSync: false,
|
||||
showDrawer: false,
|
||||
timer: null,
|
||||
style1: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
|
||||
style() {
|
||||
let style = {};
|
||||
let translate = '100%';
|
||||
// 判断是否是否百分比或者auto值，是的话，直接使用该值，否则默认为rpx单位的数值
|
||||
let length = /%$/.test(this.length) || this.length == 'auto' ? this.length : uni.upx2px(this.length) + 'px';
|
||||
// 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
|
||||
if (this.mode == 'left' || this.mode == 'top') translate = length == 'auto' ? '-100%' : '-' + length;
|
||||
if (this.mode == 'left' || this.mode == 'right') {
|
||||
style = {
|
||||
width: length,
|
||||
height: '100%',
|
||||
transform: `translate3D(${translate},0px,0px)`
|
||||
};
|
||||
} else if (this.mode == 'top' || this.mode == 'bottom') {
|
||||
style = {
|
||||
width: '100%',
|
||||
height: length,
|
||||
transform: `translate3D(0px,${translate},0px)`
|
||||
};
|
||||
}
|
||||
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.popup;
|
||||
// 如果用户设置了borderRadius值，添加弹窗的圆角
|
||||
if (this.borderRadius) {
|
||||
switch (this.mode) {
|
||||
case 'left':
|
||||
style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`;
|
||||
break;
|
||||
case 'top':
|
||||
style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`;
|
||||
break;
|
||||
case 'right':
|
||||
style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`;
|
||||
break;
|
||||
case 'bottom':
|
||||
style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`;
|
||||
break;
|
||||
default:
|
||||
}
|
||||
// 不加可能圆角无效
|
||||
style.overflow = 'hidden';
|
||||
}
|
||||
return style;
|
||||
},
|
||||
// 中部弹窗的特有样式
|
||||
centerStyle() {
|
||||
let style = {};
|
||||
let length = /%$/.test(this.length) || this.length == 'auto' ? this.length : uni.upx2px(this.length) + 'px';
|
||||
style.width = length;
|
||||
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.popup;
|
||||
if (this.borderRadius) {
|
||||
style.borderRadius = `${this.borderRadius}rpx`;
|
||||
// 不加可能圆角无效
|
||||
style.overflow = 'hidden';
|
||||
}
|
||||
return style;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
if (val) {
|
||||
this.open();
|
||||
} else {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 先让弹窗组件渲染，再改变遮罩和抽屉元素的样式，让其动画其起作用(必须要有延时，才会有效果)
|
||||
this.visibleSync = this.value;
|
||||
setTimeout(() => {
|
||||
this.showDrawer = this.value;
|
||||
}, 30);
|
||||
},
|
||||
methods: {
|
||||
// 遮罩被点击
|
||||
maskClick() {
|
||||
this.close();
|
||||
},
|
||||
close() {
|
||||
this.change('showDrawer', 'visibleSync', false);
|
||||
},
|
||||
// 中部弹出时，需要.u-drawer-content将居中内容，此元素会铺满屏幕，点击需要关闭弹窗
|
||||
// 让其只在mode=center时起作用
|
||||
modeCenterClose(mode) {
|
||||
if (mode != 'center' || !this.maskCloseAble) return;
|
||||
this.close();
|
||||
},
|
||||
open() {
|
||||
this.change('visibleSync', 'showDrawer', true);
|
||||
},
|
||||
// 此处的原理是，关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
|
||||
// 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
|
||||
change(param1, param2, status) {
|
||||
// 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件
|
||||
if (this.popup == true) this.$emit('input', status);
|
||||
this[param1] = status;
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
this.timer = setTimeout(() => {
|
||||
this[param2] = status;
|
||||
this.$emit(status ? 'open' : 'close');
|
||||
},
|
||||
status ? 30 : 300
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-drawer {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.u-drawer-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
z-index: 1003;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
|
||||
.u-drawer-left {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.u-drawer-right {
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.u-drawer-top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.u-drawer-bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.u-drawer-center {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* #endif */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.u-mode-center-box {
|
||||
min-width: 100rpx;
|
||||
min-height: 100rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.u-drawer-content-visible.u-drawer-center {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.u-animation-zoom {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.u-drawer-content-visible {
|
||||
transform: translate3D(0px, 0px, 0px) !important;
|
||||
}
|
||||
|
||||
.u-close {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.u-close--top-left {
|
||||
top: 30rpx;
|
||||
left: 30rpx;
|
||||
}
|
||||
|
||||
.u-close--top-right {
|
||||
top: 30rpx;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.u-close--bottom-left {
|
||||
bottom: 30rpx;
|
||||
left: 30rpx;
|
||||
}
|
||||
|
||||
.u-close--bottom-right {
|
||||
right: 30rpx;
|
||||
bottom: 30rpx;
|
||||
}
|
||||
</style>
|
||||
84
node_modules/uview-ui/components/u-radio-group/u-radio-group.vue
generated
vendored
Normal file
84
node_modules/uview-ui/components/u-radio-group/u-radio-group.vue
generated
vendored
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<view class="u-radio-group u-clearfix">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Emitter from '../../libs/util/emitter.js';
|
||||
/**
|
||||
* radioRroup 单选框父组件
|
||||
* @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状态发生变化时触发
|
||||
* @property {String} width 宽度，需带单位
|
||||
* @property {Boolean} wrap 是否每个radio都换行（默认false）
|
||||
* @example <u-radio-group v-model="value"></u-radio-group>
|
||||
*/
|
||||
export default {
|
||||
name: "u-radio-group",
|
||||
mixins: [Emitter],
|
||||
props: {
|
||||
// 是否禁用所有单选框
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 匹配某一个radio组件，如果某个radio的name值等于此值，那么这个radio就被会选中
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 选中状态下的颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 组件的整体大小
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: 34
|
||||
},
|
||||
// 每个checkbox占u-checkbox-group的宽度
|
||||
width: {
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
// 是否每个checkbox都换行
|
||||
wrap: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
radioGroup: this
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 该方法有子组件radio调用，当一个radio被选中的时候，给父组件设置value值(props传递的value)
|
||||
setValue(val) {
|
||||
// 通过emit事件，设置父组件通过v-model双向绑定的值
|
||||
this.$emit('input', val);
|
||||
// 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
|
||||
this.$nextTick(function() {
|
||||
this.$emit('change', this.value);
|
||||
// 发出事件，用于在表单组件中嵌入checkbox的情况，进行验证
|
||||
// 将当前的值发送到 u-form-item 进行校验
|
||||
this.dispatch('u-form-item', 'on-form-change', this.value);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-radio-group {
|
||||
/* #ifndef MP */
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
227
node_modules/uview-ui/components/u-radio/u-radio.vue
generated
vendored
Normal file
227
node_modules/uview-ui/components/u-radio/u-radio.vue
generated
vendored
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<view class="u-radio" :style="[radioStyle]">
|
||||
<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]" />
|
||||
</view>
|
||||
<view class="u-label-class u-radio__label" @tap="onClickLabel" :style="{
|
||||
fontSize: labelSize + 'rpx'
|
||||
}">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* radio 单选框
|
||||
* @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio-group使用
|
||||
* @tutorial https://www.uviewui.com/components/radio.html
|
||||
* @property {String Number} icon-size 图标大小，单位rpx（默认24）
|
||||
* @property {String Number} label-size label字体大小，单位rpx（默认28）
|
||||
* @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: {
|
||||
// radio的名称
|
||||
name: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 形状，square为方形，circle为原型
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'square'
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否禁止点击提示语选中复选框
|
||||
labelDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 选中状态下的颜色，如设置此值，将会覆盖radioGroup的activeColor值
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 图标的大小，单位rpx
|
||||
iconSize: {
|
||||
type: [String, Number],
|
||||
default: 20
|
||||
},
|
||||
// label的字体大小，rpx单位
|
||||
labelSize: {
|
||||
type: [String, Number],
|
||||
default: 28
|
||||
},
|
||||
},
|
||||
inject: ['radioGroup'],
|
||||
data() {
|
||||
return {
|
||||
parentDisabled: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.parentDisabled = this.radioGroup.disabled;
|
||||
},
|
||||
computed: {
|
||||
// 设置radio的状态，要求radio的name等于radioGroup的value时才为选中状态
|
||||
iconStyle() {
|
||||
let style = {};
|
||||
if (this.radioActiveColor && this.name == this.radioGroup.value && !this.disabled && !this.parentDisabled) {
|
||||
style.borderColor = this.radioActiveColor;
|
||||
style.backgroundColor = this.radioActiveColor;
|
||||
}
|
||||
style.width = this.radioGroup.size + 'rpx';
|
||||
style.height = this.radioGroup.size + 'rpx';
|
||||
return style;
|
||||
},
|
||||
iconColor() {
|
||||
return this.name == this.radioGroup.value ? '#ffffff' : 'transparent';
|
||||
},
|
||||
iconClass() {
|
||||
let classs = [];
|
||||
classs.push('u-radio__icon--' + this.shape);
|
||||
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.name == this.radioGroup.value && (this.disabled || this.parentDisabled)) classs.push(
|
||||
'u-radio__icon--disabled--checked');
|
||||
return classs;
|
||||
},
|
||||
// 激活的颜色，可能受radioGroup和本组件的activeColor影响
|
||||
// 本组件的activeColor值优先
|
||||
radioActiveColor() {
|
||||
return this.activeColor ? this.activeColor : this.radioGroup.activeColor;
|
||||
},
|
||||
radioStyle() {
|
||||
let style = {};
|
||||
if(this.radioGroup.width) {
|
||||
style.width = this.radioGroup.width;
|
||||
// #ifdef MP
|
||||
// 各家小程序因为它们特殊的编译结构，使用float布局
|
||||
style.float = 'left';
|
||||
// #endif
|
||||
// #ifndef MP
|
||||
// H5和APP使用flex布局
|
||||
style.flex = `0 0 ${this.radioGroup.width}`;
|
||||
// #endif
|
||||
}
|
||||
if(this.radioGroup.wrap) {
|
||||
style.width = '100%';
|
||||
// #ifndef MP
|
||||
// H5和APP使用flex布局，将宽度设置100%，即可自动换行
|
||||
style.flex = '0 0 100%';
|
||||
// #endif
|
||||
}
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickLabel() {
|
||||
if (!this.disabled && !this.labelDisabled && !this.parentDisabled) {
|
||||
this.radioGroup.setValue(this.name);
|
||||
this.emitEvent();
|
||||
}
|
||||
},
|
||||
toggle() {
|
||||
if (!this.disabled && !this.parentDisabled) {
|
||||
this.radioGroup.setValue(this.name);
|
||||
this.emitEvent();
|
||||
}
|
||||
},
|
||||
emitEvent() {
|
||||
this.$emit('change', this.name)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-radio {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.u-radio__icon-wrap,
|
||||
.u-radio__label {
|
||||
color: $u-content-color;
|
||||
}
|
||||
|
||||
.u-radio__icon-wrap {
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.u-radio__icon {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
color: transparent;
|
||||
text-align: center;
|
||||
transition-property: color, border-color, background-color;
|
||||
font-size: 20px;
|
||||
border: 1px solid #c8c9cc;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.u-radio__icon--circle {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.u-radio__icon--square {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.u-radio__icon--checked {
|
||||
color: #fff;
|
||||
background-color: #2979ff;
|
||||
border-color: #2979ff;
|
||||
}
|
||||
|
||||
.u-radio__icon--disabled {
|
||||
background-color: #ebedf0;
|
||||
border-color: #c8c9cc;
|
||||
}
|
||||
|
||||
.u-radio__icon--disabled--checked {
|
||||
color: #c8c9cc !important;
|
||||
}
|
||||
|
||||
.u-radio__label {
|
||||
word-wrap: break-word;
|
||||
margin-left: 10rpx;
|
||||
margin-right: 24rpx;
|
||||
color: $u-content-color;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.u-radio__label--disabled {
|
||||
color: #c8c9cc;
|
||||
}
|
||||
|
||||
.u-radio__label:empty {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
192
node_modules/uview-ui/components/u-rate/u-rate.vue
generated
vendored
Normal file
192
node_modules/uview-ui/components/u-rate/u-rate.vue
generated
vendored
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<view class="u-rate" :id="elId" @touchmove.stop.prevent="touchMove">
|
||||
<view class="u-star-wrap" v-for="(item, index) in count" :key="index" :class="[elClass]">
|
||||
<u-icon
|
||||
:name="activeIndex > index ? activeIcon : inactiveIcon"
|
||||
@click="click(index + 1, $event)"
|
||||
:color="activeIndex > index ? activeColor : inactiveColor"
|
||||
:style="{
|
||||
fontSize: size + 'rpx',
|
||||
padding: `0 ${gutter / 2 + 'rpx'}`
|
||||
}"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* rate 评分
|
||||
* @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} active-icon 选中时的图标名，只能为uView的内置图标（默认star-fill）
|
||||
* @property {String} inactive-icon 未选中时的图标名，只能为uView的内置图标（默认star）
|
||||
* @property {String} gutter 星星之间的距离（默认10）
|
||||
* @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 {
|
||||
name: 'u-rate',
|
||||
props: {
|
||||
// 要显示的星星数量
|
||||
count: {
|
||||
type: [Number, String],
|
||||
default: 5
|
||||
},
|
||||
// 当前需要默认选中的星星(选中的个数)
|
||||
current: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 是否不可选中
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 星星的大小，单位rpx
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 32
|
||||
},
|
||||
// 未选中时的颜色
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: '#b2b2b2'
|
||||
},
|
||||
// 选中的颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#FA3534'
|
||||
},
|
||||
// 星星之间的间距，单位rpx
|
||||
gutter: {
|
||||
type: [Number, String],
|
||||
default: 10
|
||||
},
|
||||
// 最少能选择的星星个数
|
||||
minCount: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 是否允许半星(功能尚未实现)
|
||||
allowHalf: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 选中时的图标(星星)
|
||||
activeIcon: {
|
||||
type: String,
|
||||
default: 'star-fill'
|
||||
},
|
||||
// 未选中时的图标(星星)
|
||||
inactiveIcon: {
|
||||
type: String,
|
||||
default: 'star'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 生成一个唯一id，否则一个页面多个评分组件，会造成冲突
|
||||
elId: this.$u.guid(),
|
||||
elClass: this.$u.guid(),
|
||||
starBoxLeft: 0, // 评分盒子左边到屏幕左边的距离，用于滑动选择时计算距离
|
||||
activeIndex: this.current, // 当前激活的星星的index
|
||||
starWidth: 0, // 每个星星的宽度
|
||||
starWidthArr: [] //每个星星最右边到组件盒子最左边的距离
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
current(val) {
|
||||
this.activeIndex = val;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取评分组件盒子的布局信息
|
||||
getElRectById() {
|
||||
// uView封装的获取节点的方法，详见文档
|
||||
this.$u.getRect('#' + this.elId).then(res => {
|
||||
this.starBoxLeft = res.left;
|
||||
})
|
||||
},
|
||||
// 获取单个星星的尺寸
|
||||
getElRectByClass() {
|
||||
// uView封装的获取节点的方法，详见文档
|
||||
this.$u.getRect('.' + this.elClass).then(res => {
|
||||
this.starWidth = res.width;
|
||||
// 把每个星星右边到组件盒子左边的距离放入数组中
|
||||
for (let i = 0; i < this.count; i++) {
|
||||
this.starWidthArr[i] = (i + 1) * this.starWidth;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 手指滑动
|
||||
touchMove(e) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
if (!e.changedTouches[0]) {
|
||||
return;
|
||||
}
|
||||
const movePageX = e.changedTouches[0].pageX;
|
||||
// 滑动点相对于评分盒子左边的距离
|
||||
const distance = movePageX - this.starBoxLeft;
|
||||
|
||||
// 如果滑动到了评分盒子的左边界，就设置为0星
|
||||
if (distance <= 0) {
|
||||
this.activeIndex = 0;
|
||||
}
|
||||
// 滑动的距离，相当于多少颗星星
|
||||
let index = Math.ceil(distance / this.starWidth);
|
||||
this.activeIndex = index > this.count ? this.count : index;
|
||||
// 对最少颗星星的限制
|
||||
if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
|
||||
this.$emit('change', this.activeIndex);
|
||||
},
|
||||
// 通过点击，直接选中
|
||||
click(index, e) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
// 半星选择，尚未实现
|
||||
if (this.allowHalf) {
|
||||
}
|
||||
// 对第一个星星特殊处理，只有一个的时候，点击可以取消，否则无法作0星评价
|
||||
if (index == 1) {
|
||||
if (this.activeIndex == 1) this.activeIndex = 0;
|
||||
else this.activeIndex = 1;
|
||||
} else {
|
||||
this.activeIndex = index;
|
||||
}
|
||||
// 对最少颗星星的限制
|
||||
if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
|
||||
this.$emit('change', this.activeIndex);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getElRectById();
|
||||
this.getElRectByClass();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-rate {
|
||||
display: -webkit-inline-flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
158
node_modules/uview-ui/components/u-read-more/u-read-more.vue
generated
vendored
Normal file
158
node_modules/uview-ui/components/u-read-more/u-read-more.vue
generated
vendored
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="u-content" :style="{ height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto' }">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view @tap="toggleReadMore" v-if="isLongContent" class="u-showmore-wrap"
|
||||
:class="{ 'u-show-more': showMore }"
|
||||
:style="[innerShadowStyle]"
|
||||
>
|
||||
<text class="u-readmore-btn" :style="{
|
||||
fontSize: fontSize + 'rpx',
|
||||
color: color
|
||||
}">
|
||||
{{ showMore ? openText : closeText }}
|
||||
</text>
|
||||
<u-icon :color="color" :size="fontSize" class="u-icon" :name="showMore ? 'arrow-up' : 'arrow-down'"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* readMore 阅读更多
|
||||
* @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: {
|
||||
// 默认的显示占位高度，单位为rpx
|
||||
showHeight: {
|
||||
type: [Number, String],
|
||||
default: 400
|
||||
},
|
||||
// 展开后是否显示"收起"按钮
|
||||
toggle: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 关闭时的提示文字
|
||||
closeText: {
|
||||
type: String,
|
||||
default: '展开阅读全文'
|
||||
},
|
||||
// 展开时的提示文字
|
||||
openText: {
|
||||
type: String,
|
||||
default: '收起'
|
||||
},
|
||||
// 提示的文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 提示文字的大小
|
||||
fontSize: {
|
||||
type: [String, Number],
|
||||
default: 28
|
||||
},
|
||||
// 是否显示阴影
|
||||
shadowStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
|
||||
paddingTop: "300rpx",
|
||||
marginTop: "-300rpx"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
paramsChange(val) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
paramsChange() {
|
||||
return `${this.toggle}-${this.showHeight}`;
|
||||
},
|
||||
// 展开后无需阴影，收起时才需要阴影样式
|
||||
innerShadowStyle() {
|
||||
if(this.showMore) return {};
|
||||
else return this.shadowStyle
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLongContent: false, // 是否需要隐藏一部分内容
|
||||
showMore: false, // 当前隐藏与显示的状态，true-显示，false-收起
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.$uGetRect('.u-content').then(res => {
|
||||
// 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
|
||||
if (res.height > uni.upx2px(this.showHeight)) {
|
||||
this.isLongContent = true;
|
||||
this.showMore = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 展开或者收起
|
||||
toggleReadMore() {
|
||||
this.showMore = !this.showMore;
|
||||
// 如果toggle为false，隐藏"收起"部分的内容
|
||||
if (this.toggle == false) this.isLongContent = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-content {
|
||||
font-size: 30rpx;
|
||||
color: $u-content-color;
|
||||
line-height: 1.8;
|
||||
text-align: left;
|
||||
text-indent: 2em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-showmore-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-show-more {
|
||||
padding-top: 0;
|
||||
background: none;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.u-readmore-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
</style>
|
||||
256
node_modules/uview-ui/components/u-row-notice/u-row-notice.vue
generated
vendored
Normal file
256
node_modules/uview-ui/components/u-row-notice/u-row-notice.vue
generated
vendored
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<view
|
||||
v-if="show"
|
||||
class="u-notice-bar"
|
||||
:style="{
|
||||
background: computeBgColor,
|
||||
padding: padding
|
||||
}"
|
||||
>
|
||||
<view class="u-direction-row">
|
||||
<view class="u-icon-wrap">
|
||||
<u-icon class="u-left-icon" v-if="volumeIcon" name="volume-fill" :size="volumeSize" :color="computeColor"></u-icon>
|
||||
</view>
|
||||
<view class="u-notice-box" id="u-notice-box">
|
||||
<view
|
||||
class="u-notice-content"
|
||||
id="u-notice-content"
|
||||
:style="{
|
||||
animationDuration: animationDuration,
|
||||
color: computeColor,
|
||||
animationPlayState: animationPlayState,
|
||||
}"
|
||||
>
|
||||
<text class="u-notice-text" @tap="click" :style="{
|
||||
fontSize: fontSize + 'rpx',
|
||||
}">{{showText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-icon-wrap">
|
||||
<u-icon @click="getMore" class="u-right-icon" v-if="moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon>
|
||||
<u-icon @click="close" class="u-right-icon" v-if="closeIcon" name="close" :size="24" :color="computeColor"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
// 显示的内容，数组
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 显示的主题，success|error|primary|info|warning|none
|
||||
// none主题默认为透明背景，黑色(contentColor)字体
|
||||
type: {
|
||||
type: String,
|
||||
default: 'warning'
|
||||
},
|
||||
// 是否显示左侧的音量图标
|
||||
volumeIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示右侧的右箭头图标
|
||||
moreIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示右侧的关闭图标
|
||||
closeIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否自动播放
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 文字颜色，各图标也会使用文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否显示
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 字体大小，单位rpx
|
||||
fontSize: {
|
||||
type: [Number, String],
|
||||
default: 26
|
||||
},
|
||||
// 音量喇叭的大小
|
||||
volumeSize: {
|
||||
type: [Number, String],
|
||||
default: 34
|
||||
},
|
||||
// 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度
|
||||
speed: {
|
||||
type: [Number, String],
|
||||
default: 160
|
||||
},
|
||||
// 播放状态，play-播放，paused-暂停
|
||||
playState: {
|
||||
type: String,
|
||||
default: 'play'
|
||||
},
|
||||
// 通知的边距
|
||||
padding: {
|
||||
type: [Number, String],
|
||||
default: '18rpx 24rpx'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
textWidth: 0, // 滚动的文字宽度
|
||||
boxWidth: 0, // 供文字滚动的父盒子的宽度，和前者一起为了计算滚动速度
|
||||
animationDuration: '10s', // 动画执行时间
|
||||
animationPlayState: 'paused', // 动画的开始和结束执行
|
||||
showText: '' // 显示的文本
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
list: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.showText = val.join('，');
|
||||
this.$nextTick(() => {
|
||||
this.initSize();
|
||||
});
|
||||
}
|
||||
},
|
||||
playState(val) {
|
||||
if(val == 'play') this.animationPlayState = 'running';
|
||||
else this.animationPlayState = 'paused';
|
||||
},
|
||||
speed(val) {
|
||||
this.initSize();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 计算字体颜色，如果没有自定义的，就用uview主题颜色
|
||||
computeColor() {
|
||||
if (this.color) return this.color;
|
||||
else if(this.type == 'none') return this.$u.color['contentColor'];
|
||||
else return this.$u.color[this.type];
|
||||
},
|
||||
// 计算背景颜色
|
||||
computeBgColor() {
|
||||
if (this.bgColor) return this.bgColor;
|
||||
else if(this.type == 'none') return 'transparent';
|
||||
else return this.$u.color[this.type + 'Light'];
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initSize();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initSize() {
|
||||
let query = [],
|
||||
boxWidth = 0,
|
||||
textWidth = 0;
|
||||
let textQuery = new Promise((resolve, reject) => {
|
||||
uni.createSelectorQuery()
|
||||
.in(this)
|
||||
.select(`#u-notice-content`)
|
||||
.boundingClientRect()
|
||||
.exec(ret => {
|
||||
this.textWidth = ret[0].width;
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
query.push(textQuery);
|
||||
Promise.all(query).then(() => {
|
||||
// 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
|
||||
// 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
|
||||
this.animationDuration = `${this.textWidth / uni.upx2px(this.speed)}s`;
|
||||
// 这里必须这样开始动画，否则在APP上动画速度不会改变(HX版本2.4.6，IOS13)
|
||||
this.animationPlayState = 'paused';
|
||||
setTimeout(() => {
|
||||
if(this.playState == 'play' && this.autoplay) this.animationPlayState = 'running';
|
||||
}, 10);
|
||||
});
|
||||
},
|
||||
// 点击通告栏
|
||||
click(index) {
|
||||
this.$emit('click');
|
||||
},
|
||||
// 点击关闭按钮
|
||||
close() {
|
||||
this.$emit('close');
|
||||
},
|
||||
// 点击更多箭头按钮
|
||||
getMore() {
|
||||
this.$emit('getMore');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-notice-bar {
|
||||
padding: 18rpx 24rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-direction-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.u-left-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-notice-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.u-right-icon {
|
||||
margin-left: 12rpx;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-notice-content {
|
||||
animation: u-loop-animation 10s linear infinite both;
|
||||
text-align: right;
|
||||
// 这一句很重要，为了能让滚动左右连接起来
|
||||
padding-left: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.u-notice-text {
|
||||
font-size: 26rpx;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
@keyframes u-loop-animation {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
node_modules/uview-ui/components/u-row/u-row.vue
generated
vendored
Normal file
76
node_modules/uview-ui/components/u-row/u-row.vue
generated
vendored
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<view class="u-row" :style="{
|
||||
marginLeft: `-${gutter/2 + 'rpx'}`,
|
||||
marginRight: `-${gutter/2 + 'rpx'}`,
|
||||
alignItems: uAlignItem,
|
||||
justifyContent: uJustify
|
||||
}">
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* row 行布局
|
||||
* @description 通过基础的 12 分栏，迅速简便地创建布局。
|
||||
* @tutorial https://www.uviewui.com/components/layout.html#row-props
|
||||
* @property {String Number} gutter 栅格间隔，左右各为此值的一半，单位rpx（默认0）
|
||||
* @property {String} justify 水平排列方式(微信小程序暂不支持)默认（start(或flex-start)）
|
||||
* @property {String} align 垂直排列方式（默认center）
|
||||
* @example <u-row gutter="16"></u-row>
|
||||
*/
|
||||
export default {
|
||||
name: "u-row",
|
||||
props: {
|
||||
// 给col添加间距，左右边距各占一半
|
||||
gutter: {
|
||||
type: [String, Number],
|
||||
default: 20
|
||||
},
|
||||
// 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
|
||||
justify: {
|
||||
type: String,
|
||||
default: 'start'
|
||||
},
|
||||
// 垂直对齐方式，可选值为top、center、bottom
|
||||
align: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
gutter: this.gutter
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
uJustify() {
|
||||
if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify;
|
||||
else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify;
|
||||
else return this.justify;
|
||||
},
|
||||
uAlignItem() {
|
||||
if (this.align == 'top') return 'flex-start';
|
||||
if (this.align == 'bottom') return 'flex-end';
|
||||
else return this.align;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-row {
|
||||
// 由于微信小程序编译后奇怪的页面结构，只能使用float布局实现，flex无法实现
|
||||
/* #ifndef MP-WEIXIN */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.u-row:after {
|
||||
/* #ifdef MP-WEIXIN */
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
319
node_modules/uview-ui/components/u-search/u-search.vue
generated
vendored
Normal file
319
node_modules/uview-ui/components/u-search/u-search.vue
generated
vendored
Normal file
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<view class="u-search" :style="{
|
||||
margin: margin,
|
||||
}">
|
||||
<view
|
||||
class="u-content"
|
||||
:style="{
|
||||
backgroundColor: bgColor,
|
||||
borderRadius: shape == 'round' ? '100rpx' : '10rpx',
|
||||
border: borderStyle,
|
||||
height: height + 'rpx'
|
||||
}"
|
||||
>
|
||||
<view class="u-icon-wrap"><u-icon class="u-clear-icon" :size="30" name="search" :color="searchIconColor ? searchIconColor : color"></u-icon></view>
|
||||
<input
|
||||
confirm-type="search"
|
||||
@blur="blur"
|
||||
:value="value"
|
||||
@confirm="search"
|
||||
@input="inputChange"
|
||||
:disabled="disabled"
|
||||
@focus="getFocus"
|
||||
:maxlength="getMaxlength"
|
||||
:focus="focus"
|
||||
placeholder-class="u-placeholder-class"
|
||||
:placeholder="placeholder"
|
||||
:placeholder-style="`color: ${placeholderColor}`"
|
||||
class="u-input"
|
||||
type="text"
|
||||
:style="[{
|
||||
textAlign: inputAlign,
|
||||
color: color
|
||||
}, inputStyle]"
|
||||
/>
|
||||
<view class="u-close-wrap" v-if="keyword && clearabled && focused" @touchstart="clear">
|
||||
<u-icon class="u-clear-icon" name="close-circle-fill" size="34" color="#c0c4cc"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="[actionStyle]" class="u-action"
|
||||
:class="[showActionBtn || show ? 'u-action-active' : '']"
|
||||
@touchstart.stop.prevent="custom"
|
||||
>{{ actionText }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* search 搜索框
|
||||
* @description 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。
|
||||
* @tutorial https://www.uviewui.com/components/search.html
|
||||
* @property {String} shape 搜索框形状，round-圆形，square-方形（默认round）
|
||||
* @property {String} bg-color 搜索框背景颜色（默认#f2f2f2）
|
||||
* @property {String} border-color 边框颜色，配置了颜色，才会有边框
|
||||
* @property {String} placeholder 占位文字内容（默认“请输入关键字”）
|
||||
* @property {Boolean} clearabled 是否启用清除控件（默认true）
|
||||
* @property {Boolean} focus 是否自动获得焦点（默认false）
|
||||
* @property {Boolean} show-action 是否显示右侧控件（默认true）
|
||||
* @property {String} action-text 右侧控件文字（默认“搜索”）
|
||||
* @property {Object} action-style 右侧控件的样式，对象形式
|
||||
* @property {String} input-align 输入框内容水平对齐方式（默认left）
|
||||
* @property {Boolean} disabled 是否启用输入框（默认false）
|
||||
* @property {String} search-icon-color 搜索图标的颜色，默认同输入框字体颜色
|
||||
* @property {String} color 输入框字体颜色（默认#606266）
|
||||
* @property {String} placeholder-color placeholder的颜色（默认#909399）
|
||||
* @property {String} margin 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"
|
||||
* @property {Boolean} animation 是否开启动画，见上方说明（默认false）
|
||||
* @property {String} value 输入框初始值
|
||||
* @property {String | Number} maxlength 输入框最大能输入的长度，-1为不限制长度
|
||||
* @property {Boolean} input-style input输入框的样式，可以定义文字颜色，大小等，对象形式
|
||||
* @property {String | Number} height 输入框高度，单位rpx（默认64）
|
||||
* @event {Function} change 输入框内容发生变化时触发
|
||||
* @event {Function} search 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发
|
||||
* @event {Function} custom 用户点击右侧控件时触发
|
||||
* @event {Function} clear 用户点击清除按钮时触发
|
||||
* @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
|
||||
*/
|
||||
export default {
|
||||
name: "u-search",
|
||||
props: {
|
||||
// 搜索框形状，round-圆形，square-方形
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'round'
|
||||
},
|
||||
// 搜索框背景色，默认值#f2f2f2
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#f2f2f2'
|
||||
},
|
||||
// 占位提示文字
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入关键字'
|
||||
},
|
||||
// 是否启用清除控件
|
||||
clearabled: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否自动聚焦
|
||||
focus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否在搜索框右侧显示取消按钮
|
||||
showAction: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 右边控件的样式
|
||||
actionStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 取消按钮文字
|
||||
actionText: {
|
||||
type: String,
|
||||
default: '搜索'
|
||||
},
|
||||
// 输入框内容对齐方式，可选值为 left|center|right
|
||||
inputAlign: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
// 是否启用输入框
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 开启showAction时，是否在input获取焦点时才显示
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 边框颜色，只要配置了颜色，才会有边框
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
// 输入框的初始化内容
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 搜索框高度，单位rpx
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 64
|
||||
},
|
||||
// input输入框的样式，可以定义文字颜色，大小等，对象形式
|
||||
inputStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 输入框最大能输入的长度，-1为不限制长度(来自uniapp文档)
|
||||
maxlength: {
|
||||
type: [Number, String],
|
||||
default: -1
|
||||
},
|
||||
// 搜索图标的颜色，默认同输入框字体颜色
|
||||
searchIconColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 输入框字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// placeholder的颜色
|
||||
placeholderColor: {
|
||||
type: String,
|
||||
default: '#909399'
|
||||
},
|
||||
// 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"、"30rpx 20rpx"等写法
|
||||
margin: {
|
||||
type: String,
|
||||
default: '0'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
showClear: false, // 是否显示右边的清除图标
|
||||
show: false,
|
||||
// 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
|
||||
focused: this.focus
|
||||
// 绑定输入框的值
|
||||
// inputValue: this.value
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
keyword(nVal) {
|
||||
// 双向绑定值，让v-model绑定的值双向变化
|
||||
this.$emit('input', nVal);
|
||||
// 触发change事件，事件效果和v-model双向绑定的效果一样，让用户多一个选择
|
||||
this.$emit('change', nVal);
|
||||
},
|
||||
value: {
|
||||
immediate: true,
|
||||
handler(nVal) {
|
||||
this.keyword = nVal;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showActionBtn() {
|
||||
if (!this.animation && this.showAction) return true;
|
||||
else return false;
|
||||
},
|
||||
// 样式，根据用户传入的颜色值生成，如果不传入，默认为none
|
||||
borderStyle() {
|
||||
if (this.borderColor) return `1px solid ${this.borderColor}`;
|
||||
else return 'none';
|
||||
},
|
||||
// 将maxlength转为数值
|
||||
getMaxlength() {
|
||||
return Number(this.maxlength);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 目前HX2.6.9 v-model双向绑定无效，故监听input事件获取输入框内容的变化
|
||||
inputChange(e) {
|
||||
this.keyword = e.detail.value;
|
||||
},
|
||||
// 清空输入
|
||||
// 也可以作为用户通过this.$refs形式调用清空输入框内容
|
||||
clear() {
|
||||
this.keyword = '';
|
||||
this.$emit('clear');
|
||||
},
|
||||
// 确定搜索
|
||||
search() {
|
||||
this.$emit('search', this.keyword);
|
||||
// 收起键盘
|
||||
uni.hideKeyboard();
|
||||
},
|
||||
// 点击右边自定义按钮的事件
|
||||
custom() {
|
||||
this.$emit('custom', this.keyword);
|
||||
// 收起键盘
|
||||
uni.hideKeyboard();
|
||||
},
|
||||
// 获取焦点
|
||||
getFocus() {
|
||||
this.focused = true;
|
||||
// 开启右侧搜索按钮展开的动画效果
|
||||
if (this.animation && this.showAction) this.show = true;
|
||||
this.$emit('focus', this.keyword);
|
||||
},
|
||||
// 失去焦点
|
||||
blur() {
|
||||
this.focused = false;
|
||||
this.show = false;
|
||||
this.$emit('blur', this.keyword);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.u-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 18rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.u-clear-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
margin: 0 10rpx;
|
||||
color: $u-tips-color;
|
||||
}
|
||||
|
||||
.u-close-wrap {
|
||||
width: 40rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.u-placeholder-class {
|
||||
color: $u-tips-color;
|
||||
}
|
||||
|
||||
.u-action {
|
||||
font-size: 28rpx;
|
||||
color: $u-main-color;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.u-action-active {
|
||||
width: 80rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
</style>
|
||||
129
node_modules/uview-ui/components/u-section/u-section.vue
generated
vendored
Normal file
129
node_modules/uview-ui/components/u-section/u-section.vue
generated
vendored
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<view class="u-section">
|
||||
<view class="u-section-title" :style="{
|
||||
fontWeight: bold ? 'bold' : 'normal',
|
||||
color: color,
|
||||
fontSize: fontSize + 'rpx',
|
||||
paddingLeft: showLine ? '10rpx' : 0
|
||||
}" :class="{
|
||||
'u-section--line': showLine
|
||||
}">
|
||||
{{title}}
|
||||
</view>
|
||||
<view class="u-right-info" v-if="right" :style="{
|
||||
color: subColor
|
||||
}" @tap="rightClick">
|
||||
{{subTitle}}
|
||||
<view class="u-icon-arrow">
|
||||
<u-icon name="arrow-right" size="24" :color="subColor"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* section 查看更多
|
||||
* @description 该组件一般用于分类信息有很多，但是限于篇幅只能列出一部分，让用户通过"查看更多"获得更多信息的场景，实际效果见演示。
|
||||
* @tutorial https://www.uviewui.com/components/section.html
|
||||
* @property {String} title 左边主标题
|
||||
* @property {String} sub-title 右边副标题（默认更多）
|
||||
* @property {Boolean} right 是否显示右边的内容（默认true）
|
||||
* @property {Boolean} showLine 是否显示左边的竖条（默认true）
|
||||
* @property {String Number} font-size 主标题的字体大小（默认28）
|
||||
* @property {Boolean} bold 主标题是否加粗（默认true）
|
||||
* @property {String} color 主标题颜色（默认#303133）
|
||||
* @event {Function} click 组件右侧的内容被点击时触发，用于跳转"更多"
|
||||
* @example <u-section title="今日热门" :right="false"></u-section>
|
||||
*/
|
||||
export default {
|
||||
name: "u-section",
|
||||
props: {
|
||||
// 标题信息
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 右边副标题内容
|
||||
subTitle: {
|
||||
type: String,
|
||||
default: '更多'
|
||||
},
|
||||
// 是否显示右边的内容
|
||||
right: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
fontSize: {
|
||||
type: [Number, String],
|
||||
default: 28
|
||||
},
|
||||
// 主标题是否加粗
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 主标题的颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#303133'
|
||||
},
|
||||
// 右边副标题的颜色
|
||||
subColor: {
|
||||
type: String,
|
||||
default: '#909399'
|
||||
},
|
||||
// 是否显示左边的竖条
|
||||
showLine: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
rightClick() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.u-section-title {
|
||||
position: relative;
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.u-section--line:after {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
content: '';
|
||||
left: 0;
|
||||
border-radius: 10px;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
.u-right-info {
|
||||
color: $u-tips-color;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-icon-arrow {
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
</style>
|
||||
319
node_modules/uview-ui/components/u-select/u-select.vue
generated
vendored
Normal file
319
node_modules/uview-ui/components/u-select/u-select.vue
generated
vendored
Normal file
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<view class="u-select">
|
||||
<!-- <view class="u-select__action" :class="{
|
||||
'u-select--border': border
|
||||
}" @tap.stop="selectHandler">
|
||||
<view class="u-select__action__icon" :class="{
|
||||
'u-select__action__icon--reverse': value == true
|
||||
}">
|
||||
<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
|
||||
</view>
|
||||
</view> -->
|
||||
<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
|
||||
<view class="u-select">
|
||||
<view class="u-select__header" @touchmove.stop.prevent="stop" catchtouchmove="stop">
|
||||
<view
|
||||
class="u-select__header__cancel u-select__header__btn"
|
||||
:style="{ color: cancelColor }"
|
||||
hover-class="u-hover-class"
|
||||
:hover-stay-time="150"
|
||||
@tap="getResult('cancel')"
|
||||
>
|
||||
取消
|
||||
</view>
|
||||
<view
|
||||
class="u-select__header__confirm u-select__header__btn"
|
||||
:style="{ color: confirmColor }"
|
||||
hover-class="u-hover-class"
|
||||
:hover-stay-time="150"
|
||||
@touchmove.stop=""
|
||||
@tap.stop="getResult('confirm')"
|
||||
>
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-select__body">
|
||||
<picker-view @change="columnChange" class="u-select__body__picker-view" :value="defaultSelector">
|
||||
<picker-view-column v-for="(item, index) in columnData" :key="index">
|
||||
<view class="u-select__body__picker-view__item" v-for="(item1, index1) in item" :key="index1">
|
||||
<view class="u-line-1">{{ item1.label }}</view>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
// 列数据
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 是否显示边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 通过双向绑定控制组件的弹出与收起
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// "取消"按钮的颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// "确定"按钮的颜色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 弹出的z-index值
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否允许通过点击遮罩关闭Picker
|
||||
maskCloseAble: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 提供的默认选中的下标
|
||||
defaultValue: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [0];
|
||||
}
|
||||
},
|
||||
// 模式选择，single-column-单列，mutil-column-多列，mutil-column-auto-多列联动
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'single-column'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 用于列改变时，保存当前的索引，下一次变化时比较得出是哪一列发生了变化
|
||||
defaultSelector: [0],
|
||||
// picker-view的数据
|
||||
columnData: [],
|
||||
// 每次队列发生变化时，保存选择的结果
|
||||
selectValue: [],
|
||||
// 上一次列变化时的index
|
||||
lastSelectIndex: [],
|
||||
// 列数
|
||||
columnNum: 0,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 在select弹起的时候，重新初始化所有数据
|
||||
value: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
if(val) setTimeout(() => this.init(), 10);
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
uZIndex() {
|
||||
// 如果用户有传递z-index值，优先使用
|
||||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.setColumnNum();
|
||||
this.setDefaultSelector();
|
||||
this.setColumnData();
|
||||
this.setSelectValue();
|
||||
},
|
||||
// 获取默认选中列下标
|
||||
setDefaultSelector() {
|
||||
// 如果没有传入默认选中的值，生成长度为columnNum，用0填充的数组
|
||||
this.defaultSelector = this.defaultValue.length == this.columnNum ? this.defaultValue : Array(this.columnNum).fill(0);
|
||||
this.lastSelectIndex = this.$u.deepClone(this.defaultSelector);
|
||||
},
|
||||
// 计算列数
|
||||
setColumnNum() {
|
||||
// 单列的列数为1
|
||||
if(this.mode == 'single-column') this.columnNum = 1;
|
||||
// 多列时，this.list数组长度就是列数
|
||||
else if(this.mode == 'mutil-column') this.columnNum = this.list.length;
|
||||
// 多列联动时，通过历遍this.list的第一个元素，得出有多少列
|
||||
else if(this.mode == 'mutil-column-auto') {
|
||||
let num = 1;
|
||||
let column = this.list;
|
||||
// 只要有元素并且第一个元素有children属性，继续历遍
|
||||
while(column[0].children) {
|
||||
column = column[0] ? column[0].children : {};
|
||||
num ++;
|
||||
}
|
||||
this.columnNum = num;
|
||||
}
|
||||
},
|
||||
// 获取需要展示在picker中的列数据
|
||||
setColumnData() {
|
||||
let data = [];
|
||||
this.selectValue = [];
|
||||
if(this.mode == 'mutil-column-auto') {
|
||||
// 获得所有数据中的第一个元素
|
||||
let column = this.list[this.defaultSelector.length ? this.defaultSelector[0] : 0];
|
||||
// 通过循环所有的列数，再根据设定列的数组，得出当前需要渲染的整个列数组
|
||||
for (let i = 0; i < this.columnNum; i++) {
|
||||
// 第一列默认为整个list数组
|
||||
if (i == 0) {
|
||||
data[i] = this.list;
|
||||
column = column.children;
|
||||
} else {
|
||||
// 大于第一列时，判断是否有默认选中的，如果没有就用该列的第一项
|
||||
data[i] = column;
|
||||
column = column[this.defaultSelector[i]].children;
|
||||
}
|
||||
}
|
||||
} else if(this.mode == 'single-column') {
|
||||
data[0] = this.list;
|
||||
} else {
|
||||
data = this.list;
|
||||
}
|
||||
this.columnData = data;
|
||||
},
|
||||
// 获取默认选中的值，如果没有设置defaultValue，就默认选中每列的第一个
|
||||
setSelectValue() {
|
||||
for(let i = 0; i < this.columnNum; i++) {
|
||||
this.selectValue.push({
|
||||
value: this.columnData[i][this.defaultSelector[i]].value,
|
||||
label: this.columnData[i][this.defaultSelector[i]].label,
|
||||
})
|
||||
}
|
||||
},
|
||||
// 列选项
|
||||
columnChange(e) {
|
||||
let index = null;
|
||||
let cloumnIndex = e.detail.value;
|
||||
// 由于后面是需要push进数组的，所以需要先清空数组
|
||||
this.selectValue = [];
|
||||
if(this.mode == 'mutil-column-auto') {
|
||||
// 对比前后两个数组，寻找变更的是哪一列，如果某一个元素不同，即可判定该列发生了变化
|
||||
this.lastSelectIndex.map((val, idx) => {
|
||||
if (val != cloumnIndex[idx]) index = idx;
|
||||
});
|
||||
this.defaultSelector = cloumnIndex;
|
||||
for (let i = index + 1; i < this.columnNum; i++) {
|
||||
// 当前变化列的下一列的数据，需要获取上一列的数据，同时需要指定是上一列的第几个的children，再往后的
|
||||
// 默认是队列的第一个为默认选项
|
||||
this.columnData[i] = this.columnData[i - 1][i - 1 == index ? cloumnIndex[index] : 0].children;
|
||||
// 改变的列之后的所有列，默认选中第一个
|
||||
this.defaultSelector[i] = 0;
|
||||
}
|
||||
// 在历遍的过程中，可能由于上一步修改this.columnData，导致产生连锁反应，程序触发columnChange，会有多次调用
|
||||
// 只有在最后一次数据稳定后的结果是正确的，此前的历遍中，可能会产生undefined，故需要判断
|
||||
cloumnIndex.map((item, index) => {
|
||||
let data = this.columnData[index][cloumnIndex[index]];
|
||||
this.selectValue.push({
|
||||
value: data ? data.value : null,
|
||||
label: data ? data.label : null
|
||||
})
|
||||
})
|
||||
// 保存这一次的结果，用于下次列发生变化时作比较
|
||||
this.lastSelectIndex = cloumnIndex;
|
||||
} else if(this.mode == 'single-column') {
|
||||
// 初始默认选中值
|
||||
this.selectValue.push({
|
||||
value: this.columnData[0][cloumnIndex[0]].value,
|
||||
label: this.columnData[0][cloumnIndex[0]].label,
|
||||
})
|
||||
} else if(this.mode == 'mutil-column') {
|
||||
// 初始默认选中值
|
||||
cloumnIndex.map((item, index) => {
|
||||
let data = this.columnData[index][cloumnIndex[index]];
|
||||
this.selectValue.push({
|
||||
value: data ? data.value : null,
|
||||
label: data ? data.label : null
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.$emit('input', false);
|
||||
},
|
||||
// 点击确定或者取消
|
||||
getResult(event = null) {
|
||||
if (event) this.$emit(event, this.selectValue);
|
||||
this.close();
|
||||
},
|
||||
selectHandler() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-select {
|
||||
&__action {
|
||||
position: relative;
|
||||
line-height: $u-form-item-height;
|
||||
height: $u-form-item-height;
|
||||
|
||||
&__icon {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
transition: transform .4s;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
|
||||
&--reverse {
|
||||
transform: rotate(-180deg) translateY(50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--border {
|
||||
border-radius: 6rpx;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $u-form-item-border-color;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80rpx;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
&__body {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
|
||||
&__picker-view {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: $u-main-color;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
165
node_modules/uview-ui/components/u-skeleton/u-skeleton.vue
generated
vendored
Normal file
165
node_modules/uview-ui/components/u-skeleton/u-skeleton.vue
generated
vendored
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<view v-if="loading" :style="{
|
||||
width: windowWinth + 'px',
|
||||
height: windowHeight + 'px',
|
||||
backgroundColor: bgColor,
|
||||
position: 'absolute',
|
||||
left: left + 'px',
|
||||
top: top + 'px',
|
||||
zIndex: 9998,
|
||||
overflow: 'hidden'
|
||||
}"
|
||||
@touchmove.stop.prevent>
|
||||
<view v-for="(item, index) in RectNodes" :key="$u.guid()" :class="[animation ? 'skeleton-fade' : '']" :style="{
|
||||
width: item.width + 'px',
|
||||
height: item.height + 'px',
|
||||
backgroundColor: elColor,
|
||||
position: 'absolute',
|
||||
left: (item.left - left) + 'px',
|
||||
top: (item.top - top) + 'px'
|
||||
}"></view>
|
||||
<view v-for="(item, index) in circleNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{
|
||||
width: item.width + 'px',
|
||||
height: item.height + 'px',
|
||||
backgroundColor: elColor,
|
||||
borderRadius: item.width/2 + 'px',
|
||||
position: 'absolute',
|
||||
left: (item.left - left) + 'px',
|
||||
top: (item.top - top) + 'px'
|
||||
}"></view>
|
||||
<view v-for="(item, index) in filletNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{
|
||||
width: item.width + 'px',
|
||||
height: item.height + 'px',
|
||||
backgroundColor: elColor,
|
||||
borderRadius: borderRadius + 'rpx',
|
||||
position: 'absolute',
|
||||
left: (item.left - left) + 'px',
|
||||
top: (item.top - top) + 'px'
|
||||
}"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* skeleton 骨架屏
|
||||
* @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 {
|
||||
name: "u-skeleton",
|
||||
props: {
|
||||
// 需要渲染的元素背景颜色，十六进制或者rgb等都可以
|
||||
elColor: {
|
||||
type: String,
|
||||
default: '#e5e5e5'
|
||||
},
|
||||
// 整个骨架屏页面的背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
// 是否显示加载动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 圆角值，只对类名为u-skeleton-fillet的元素生效，为数值，不带单位
|
||||
borderRadius: {
|
||||
type: [String, Number],
|
||||
default: "10"
|
||||
},
|
||||
// 是否显示骨架，true-显示，false-隐藏
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
windowWinth: 750, // 骨架屏宽度
|
||||
windowHeight: 1500, // 骨架屏高度
|
||||
filletNodes: [], // 圆角元素
|
||||
circleNodes: [], // 圆形元素
|
||||
RectNodes: [], // 矩形元素
|
||||
top: 0,
|
||||
left: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 查询各节点的信息
|
||||
selecterQueryInfo() {
|
||||
// 获取整个父组件容器的高度，当做骨架屏的高度
|
||||
uni.createSelectorQuery().selectAll('.u-skeleton').boundingClientRect().exec((res) => {
|
||||
this.windowHeight = res[0][0].height;
|
||||
this.windowWinth = res[0][0].width;
|
||||
this.top = res[0][0].bottom - res[0][0].height;
|
||||
this.left = res[0][0].left;
|
||||
});
|
||||
// 矩形骨架元素
|
||||
this.getRectEls();
|
||||
// 圆形骨架元素
|
||||
this.getCircleEls();
|
||||
// 圆角骨架元素
|
||||
this.getFilletEls();
|
||||
},
|
||||
// 矩形元素列表
|
||||
getRectEls() {
|
||||
uni.createSelectorQuery().selectAll('.u-skeleton-rect').boundingClientRect().exec((res) => {
|
||||
this.RectNodes = res[0];
|
||||
});
|
||||
},
|
||||
// 圆角元素列表
|
||||
getFilletEls() {
|
||||
uni.createSelectorQuery().selectAll('.u-skeleton-fillet').boundingClientRect().exec((res) => {
|
||||
this.filletNodes = res[0];
|
||||
});
|
||||
},
|
||||
// 圆形元素列表
|
||||
getCircleEls() {
|
||||
uni.createSelectorQuery().selectAll('.u-skeleton-circle').boundingClientRect().exec((res) => {
|
||||
this.circleNodes = res[0];
|
||||
});
|
||||
}
|
||||
},
|
||||
// 组件被挂载
|
||||
mounted() {
|
||||
// 获取系统信息
|
||||
let systemInfo = uni.getSystemInfoSync();
|
||||
this.windowHeight = systemInfo.windowHeight;
|
||||
this.windowWinth = systemInfo.windowWidth;
|
||||
this.selecterQueryInfo();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.skeleton-fade {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgb(194, 207, 214);
|
||||
animation-duration: 1.5s;
|
||||
animation-name: blink;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
252
node_modules/uview-ui/components/u-slider/u-slider.vue
generated
vendored
Normal file
252
node_modules/uview-ui/components/u-slider/u-slider.vue
generated
vendored
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<view class="u-slider" @tap="onClick" :class="[disabled ? 'u-slider--disabled' : '']" :style="{
|
||||
backgroundColor: inactiveColor
|
||||
}">
|
||||
<view
|
||||
class="u-slider__gap"
|
||||
:style="[
|
||||
barStyle,
|
||||
{
|
||||
height: height + 'rpx',
|
||||
backgroundColor: activeColor
|
||||
}
|
||||
]"
|
||||
>
|
||||
<view class="u-slider__button-wrap" @touchstart="onTouchStart"
|
||||
@touchmove="onTouchMove" @touchend="onTouchEnd"
|
||||
@touchcancel="onTouchEnd">
|
||||
<slot v-if="$slots.default"/>
|
||||
<view v-else class="u-slider__button" :style="[blockStyle, {
|
||||
height: blockWidth + 'rpx',
|
||||
width: blockWidth + 'rpx'
|
||||
}]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* slider 滑块选择器
|
||||
* @tutorial https://uviewui.com/components/slider.html
|
||||
* @property {Number | String} value 滑块默认值（默认0）
|
||||
* @property {Number | String} min 最小值（默认0）
|
||||
* @property {Number | String} max 最大值（默认100）
|
||||
* @property {Number | String} step 步长（默认1）
|
||||
* @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
|
||||
* @property {Number | String} height 滑块条高度，单位rpx（默认6）
|
||||
* @property {String} inactiveColor 底部条背景颜色（默认#c0c4cc）
|
||||
* @property {String} activeColor 底部选择部分的背景颜色（默认#2979ff）
|
||||
* @property {String} blockColor 滑块颜色（默认#ffffff）
|
||||
* @property {Object} blockStyle 给滑块自定义样式，对象形式
|
||||
* @property {Boolean} disabled 是否禁用滑块(默认为false)
|
||||
* @event {Function} start 滑动触发
|
||||
* @event {Function} moving 正在滑动中
|
||||
* @event {Function} end 滑动结束
|
||||
* @example <u-slider v-model="value" />
|
||||
*/
|
||||
export default {
|
||||
name: 'u-slider',
|
||||
props: {
|
||||
// 当前进度百分比值，范围0-100
|
||||
value: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 是否禁用滑块
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 滑块宽度，高等于宽，单位rpx
|
||||
blockWidth: {
|
||||
type: [Number, String],
|
||||
default: 30
|
||||
},
|
||||
// 最小值
|
||||
min: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 最大值
|
||||
max: {
|
||||
type: [Number, String],
|
||||
default: 100
|
||||
},
|
||||
// 步进值
|
||||
step: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
// 滑块条高度，单位rpx
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 6
|
||||
},
|
||||
// 进度条的激活部分颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 进度条的背景颜色
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: '#c0c4cc'
|
||||
},
|
||||
// 滑块的背景颜色
|
||||
blockColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
// 用户对滑块的自定义颜色
|
||||
blockStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
startX: 0,
|
||||
status: 'end',
|
||||
newValue: 0,
|
||||
distanceX: 0,
|
||||
startValue: 0,
|
||||
barStyle: {},
|
||||
sliderRect: {
|
||||
left: 0,
|
||||
width: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(n) {
|
||||
// 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
|
||||
if(this.status == 'end') this.updateValue(this.value, false);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.updateValue(this.value, false);
|
||||
},
|
||||
mounted() {
|
||||
// 获取滑块条的尺寸信息
|
||||
this.$uGetRect('.u-slider').then(rect => {
|
||||
this.sliderRect = rect;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onTouchStart(event) {
|
||||
if (this.disabled) return;
|
||||
this.startX = 0;
|
||||
// 触摸点集
|
||||
let touches = event.touches[0];
|
||||
// 触摸点到屏幕左边的距离
|
||||
this.startX = touches.clientX;
|
||||
// 此处的this.value虽为props值，但是通过$emit('input')进行了修改
|
||||
this.startValue = this.format(this.value);
|
||||
// 标示当前的状态为开始触摸滑动
|
||||
this.status = 'start';
|
||||
},
|
||||
onTouchMove(event) {
|
||||
if (this.disabled) return;
|
||||
// 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
|
||||
// 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
|
||||
if (this.status == 'start') this.$emit('start');
|
||||
let touches = event.touches[0];
|
||||
// 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
|
||||
this.distanceX = touches.clientX - this.sliderRect.left;
|
||||
// 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
|
||||
// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
|
||||
this.newValue = (this.distanceX / this.sliderRect.width) * 100;
|
||||
this.status = 'moving';
|
||||
// 发出moving事件
|
||||
this.$emit('moving');
|
||||
this.updateValue(this.newValue, true);
|
||||
},
|
||||
onTouchEnd() {
|
||||
if (this.disabled) return;
|
||||
if (this.status === 'moving') {
|
||||
this.updateValue(this.newValue, false);
|
||||
this.$emit('end');
|
||||
}
|
||||
this.status = 'end';
|
||||
},
|
||||
updateValue(value, drag) {
|
||||
// 去掉小数部分，同时也是对step步进的处理
|
||||
const width = this.format(value);
|
||||
// 设置移动的百分比值
|
||||
let barStyle = {
|
||||
width: width + '%'
|
||||
};
|
||||
// 移动期间无需过渡动画
|
||||
if (drag == true) {
|
||||
barStyle.transition = 'none';
|
||||
} else {
|
||||
// 非移动期间，删掉对过渡为空的声明，让css中的声明起效
|
||||
delete barStyle.transition;
|
||||
}
|
||||
// 修改value值
|
||||
this.$emit('input', width);
|
||||
this.barStyle = barStyle;
|
||||
},
|
||||
format(value) {
|
||||
// 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
|
||||
return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step;
|
||||
},
|
||||
onClick(event) {
|
||||
if (this.disabled) return;
|
||||
// 直接点击滑块的情况，计算方式与onTouchMove方法相同
|
||||
const value = ((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * 100;
|
||||
this.updateValue(value, false);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-slider {
|
||||
position: relative;
|
||||
border-radius: 999px;
|
||||
border-radius: 999px;
|
||||
background-color: #ebedf0;
|
||||
}
|
||||
|
||||
.u-slider:before {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
content: '';
|
||||
top: -8px;
|
||||
bottom: -8px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.u-slider__gap {
|
||||
position: relative;
|
||||
border-radius: inherit;
|
||||
transition: width 0.2s;
|
||||
transition: width 0.2s;
|
||||
background-color: #1989fa;
|
||||
}
|
||||
|
||||
.u-slider__button {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.u-slider__button-wrap {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translate3d(50%, -50%, 0);
|
||||
}
|
||||
|
||||
.u-slider--disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
140
node_modules/uview-ui/components/u-steps/u-steps.vue
generated
vendored
Normal file
140
node_modules/uview-ui/components/u-steps/u-steps.vue
generated
vendored
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="u-steps">
|
||||
<view class="u-steps-item" v-for="(item,index) in list" :key="index">
|
||||
<view class="u-steps-item-num" v-if="mode == 'number' && current < index">{{index+1}}</view>
|
||||
<view class="u-steps-item-dot" v-if="mode == 'dot'" :style="{backgroundColor: index <= current ? innerActiveColor : unActiveColor}"></view>
|
||||
<u-icon size="22" class="u-steps-item-checked" :style="{backgroundColor: index <= current ? innerActiveColor : unActiveColor}"
|
||||
v-if="mode == 'number' && current >= index" name="checkmark"></u-icon>
|
||||
<text :style="{color: index <= current ? innerActiveColor : unActiveColor}">{{item.name}}</text>
|
||||
<view class="u-steps-item-line" :style="{backgroundColor: index <= current ? innerActiveColor : unActiveColor, top: mode == 'dot' ? '24rpx' : '36rpx'}">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* steps 步骤条
|
||||
* @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: {
|
||||
type: String,
|
||||
default: 'dot'
|
||||
},
|
||||
// 步骤条的数据
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 主题类型, primary|success|info|warning|error
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
// 当前哪一步是激活的
|
||||
current: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 激活步骤的颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 未激活的颜色
|
||||
unActiveColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
innerActiveColor() {
|
||||
if (this.activeColor) return this.activeColor;
|
||||
else if (this.type) return this.$u.color[this.type];
|
||||
else return "#2979ff";
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-steps {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.u-steps-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
min-width: 100rpx;
|
||||
font-size: 26rpx;
|
||||
color: #8799a3;
|
||||
}
|
||||
|
||||
.u-steps-item .u-steps-item-line {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 2rpx;
|
||||
width: calc(100% - 80rpx);
|
||||
left: calc(0rpx - (100% - 80rpx) / 2);
|
||||
top: 36rpx;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.u-steps-item:first-child .u-steps-item-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.u-steps-item-num {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border: 1px solid #8799a3;
|
||||
border-radius: 50%;
|
||||
margin: 14rpx auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-steps-item-dot {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
display: flex;
|
||||
border-radius: 50%;
|
||||
margin: 14rpx auto;
|
||||
}
|
||||
|
||||
.u-steps-item-checked {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44rpx;
|
||||
color: #fff !important;
|
||||
height: 44rpx;
|
||||
border-radius: 50%;
|
||||
margin: 14rpx auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
150
node_modules/uview-ui/components/u-sticky/u-sticky.vue
generated
vendored
Normal file
150
node_modules/uview-ui/components/u-sticky/u-sticky.vue
generated
vendored
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="u-sticky-wrap" :class="[elClass]" :style="{
|
||||
height: fixed ? height + 'px' : 'auto',
|
||||
backgroundColor: bgColor
|
||||
}">
|
||||
<view class="u-sticky" :style="{
|
||||
position: fixed ? 'fixed' : 'static',
|
||||
top: stickyTop + 'px',
|
||||
left: left + 'px',
|
||||
width: width == 'auto' ? 'auto' : width + 'px',
|
||||
zIndex: uZIndex
|
||||
}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* sticky 吸顶
|
||||
* @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: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
//列表中的索引值
|
||||
index: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 是否开启吸顶功能
|
||||
enable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// h5顶部导航栏的高度
|
||||
h5NavHeight: {
|
||||
type: [Number, String],
|
||||
default: 44
|
||||
},
|
||||
// 吸顶区域的背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
// z-index值
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fixed: false,
|
||||
height: 'auto',
|
||||
stickyTop: 0,
|
||||
elClass: this.$u.guid(),
|
||||
left: 0,
|
||||
width: 'auto',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
offsetTop(val) {
|
||||
this.initObserver();
|
||||
},
|
||||
enable(val) {
|
||||
if (val == false) {
|
||||
this.fixed = false;
|
||||
this.disconnectObserver('contentObserver');
|
||||
} else {
|
||||
this.initObserver();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
uZIndex() {
|
||||
return this.zIndex ? this.zIndex : this.$u.zIndex.sticky;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initObserver();
|
||||
},
|
||||
methods: {
|
||||
initObserver() {
|
||||
if (!this.enable) return;
|
||||
// #ifdef H5
|
||||
this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) + this.h5NavHeight : this.h5NavHeight;
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) : 0;
|
||||
// #endif
|
||||
|
||||
this.disconnectObserver('contentObserver');
|
||||
this.$uGetRect('.' + this.elClass).then((res) => {
|
||||
this.height = res.height;
|
||||
this.left = res.left;
|
||||
this.width = res.width;
|
||||
this.$nextTick(() => {
|
||||
this.observeContent();
|
||||
});
|
||||
});
|
||||
},
|
||||
observeContent() {
|
||||
this.disconnectObserver('contentObserver');
|
||||
const contentObserver = this.createIntersectionObserver({
|
||||
thresholds: [0.95, 0.98, 1]
|
||||
});
|
||||
contentObserver.relativeToViewport({
|
||||
top: -this.stickyTop
|
||||
});
|
||||
contentObserver.observe('.' + this.elClass, res => {
|
||||
if (!this.enable) return;
|
||||
this.setFixed(res.boundingClientRect.top);
|
||||
});
|
||||
this.contentObserver = contentObserver;
|
||||
},
|
||||
setFixed(top) {
|
||||
const fixed = top < this.stickyTop;
|
||||
this.fixed = fixed;
|
||||
if (fixed) this.$emit('fixed', this.index);
|
||||
},
|
||||
disconnectObserver(observerName) {
|
||||
const observer = this[observerName];
|
||||
observer && observer.disconnect();
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-sticky {
|
||||
z-index: 9999999999;
|
||||
}
|
||||
</style>
|
||||
353
node_modules/uview-ui/components/u-subsection/u-subsection.vue
generated
vendored
Normal file
353
node_modules/uview-ui/components/u-subsection/u-subsection.vue
generated
vendored
Normal file
@@ -0,0 +1,353 @@
|
||||
<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 :style="[textStyle(index)]" class="u-item-text u-line-1">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="u-item-bg" :style="[itemBarStyle]"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* subsection 分段器
|
||||
* @description 该分段器一般用于用户从几个选项中选择某一个的场景
|
||||
* @tutorial https://www.uviewui.com/components/subsection.html
|
||||
* @property {Array} list 选项的数组，形式见上方"基本使用"
|
||||
* @property {String Number} current 初始化时默认选中的选项索引值（默认0）
|
||||
* @property {String} active-color 激活时的颜色，mode为subsection时固定为白色（默认#303133）
|
||||
* @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266）
|
||||
* @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 () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 当前活动的tab的index
|
||||
current: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 激活的颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#303133'
|
||||
},
|
||||
// 未激活的颜色
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'button'
|
||||
},
|
||||
// 字体大小，单位rpx
|
||||
fontSize: {
|
||||
type: [Number, String],
|
||||
default: 28
|
||||
},
|
||||
// 是否开启动画效果
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 组件的高度，单位rpx
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 70
|
||||
},
|
||||
// 激活tab的字体是否加粗
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// mode=button时，组件背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#eeeeef'
|
||||
},
|
||||
// mode = button时，滑块背景颜色
|
||||
buttonColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
// 在切换分段器的时候，是否让设备震一下
|
||||
vibrateShort: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
listInfo: [],
|
||||
itemBgStyle: {
|
||||
width: 0,
|
||||
left: 0,
|
||||
backgroundColor: '#ffffff',
|
||||
height: '100%',
|
||||
transition: ''
|
||||
},
|
||||
currentIndex: this.current,
|
||||
buttonPadding: 3, // mode = button 时，组件的内边距
|
||||
borderRadius: 5, // 圆角值
|
||||
firstTimeVibrateShort: true // 组件初始化时，会触发current变化，此时不应震动
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
current: {
|
||||
immediate: true,
|
||||
handler(nVal) {
|
||||
this.currentIndex = nVal;
|
||||
this.changeSectionStatus(nVal);
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 将list的数据，传入listInfo数组，因为不能修改props传递的list值
|
||||
// 可以接受直接数组形式，或者数组元素为对象的形式，如：['简介', '评论'],或者[{name: '简介'}, {name: '评论'}]
|
||||
this.listInfo = this.list.map((val, index) => {
|
||||
if (typeof val != 'object') {
|
||||
let obj = {
|
||||
width: 0,
|
||||
name: val
|
||||
};
|
||||
return obj;
|
||||
} else {
|
||||
val.width = 0;
|
||||
return val;
|
||||
}
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
// 设置mode=subsection时，滑块特有的样式
|
||||
noBorderRight() {
|
||||
return index => {
|
||||
if (this.mode != 'subsection') return;
|
||||
let classs = '';
|
||||
// 不显示右边的边框
|
||||
if (index < this.list.length - 1) classs += ' u-none-border-right';
|
||||
// 显示整个组件的左右边圆角
|
||||
if (index == 0) classs += ' u-item-first';
|
||||
if (index == this.list.length - 1) classs += ' u-item-last';
|
||||
return classs;
|
||||
};
|
||||
},
|
||||
// 文字的样式
|
||||
textStyle() {
|
||||
return index => {
|
||||
let style = {};
|
||||
// 设置字体颜色
|
||||
if (this.mode == 'subsection') {
|
||||
if (index == this.currentIndex) {
|
||||
style.color = '#ffffff';
|
||||
} else {
|
||||
style.color = this.activeColor;
|
||||
}
|
||||
} else {
|
||||
if (index == this.currentIndex) {
|
||||
style.color = this.activeColor;
|
||||
} else {
|
||||
style.color = this.inactiveColor;
|
||||
}
|
||||
}
|
||||
// 字体加粗
|
||||
if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
|
||||
// 文字大小
|
||||
style.fontSize = this.fontSize + 'rpx';
|
||||
return style;
|
||||
};
|
||||
},
|
||||
// 每个分段器item的样式
|
||||
itemStyle() {
|
||||
return index => {
|
||||
let style = {};
|
||||
if (this.mode == 'subsection') {
|
||||
// 设置border的样式
|
||||
style.borderColor = this.activeColor;
|
||||
style.borderWidth = '1px';
|
||||
style.borderStyle = 'solid';
|
||||
}
|
||||
return style;
|
||||
};
|
||||
},
|
||||
// mode=button时，外层view的样式
|
||||
subsectionStyle() {
|
||||
let style = {};
|
||||
style.height = uni.upx2px(this.height) + 'px';
|
||||
if (this.mode == 'button') {
|
||||
style.backgroundColor = this.bgColor;
|
||||
style.padding = `${this.buttonPadding}px`;
|
||||
style.borderRadius = `${this.borderRadius}px`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
// 滑块的样式
|
||||
itemBarStyle() {
|
||||
let style = {};
|
||||
style.backgroundColor = this.activeColor;
|
||||
style.zIndex = 1;
|
||||
if (this.mode == 'button') {
|
||||
style.backgroundColor = this.buttonColor;
|
||||
style.borderRadius = `${this.borderRadius}px`;
|
||||
style.bottom = `${this.buttonPadding}px`;
|
||||
style.height = uni.upx2px(this.height) - this.buttonPadding * 2 + 'px';
|
||||
style.zIndex = 0;
|
||||
}
|
||||
return Object.assign(this.itemBgStyle, style);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.getTabsInfo();
|
||||
}, 10);
|
||||
},
|
||||
methods: {
|
||||
// 改变滑块的样式
|
||||
changeSectionStatus(nVal) {
|
||||
if (this.mode == 'subsection') {
|
||||
// 根据滑块在最左边和最右边时，显示左边和右边的圆角
|
||||
if (nVal == this.list.length - 1) {
|
||||
this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`;
|
||||
}
|
||||
if (nVal == 0) {
|
||||
this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`;
|
||||
}
|
||||
if (nVal > 0 && nVal < this.list.length - 1) {
|
||||
this.itemBgStyle.borderRadius = '0';
|
||||
}
|
||||
}
|
||||
// 更新滑块的位置
|
||||
setTimeout(() => {
|
||||
this.itemBgLeft();
|
||||
}, 10);
|
||||
if (this.vibrateShort && !this.firstTimeVibrateShort) {
|
||||
// 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
|
||||
// #ifndef H5
|
||||
uni.vibrateShort();
|
||||
// #endif
|
||||
}
|
||||
// 第一次过后，设置firstTimeVibrateShort为false，让其下一次可以震动(如果允许震动的话)
|
||||
this.firstTimeVibrateShort = false;
|
||||
},
|
||||
click(index) {
|
||||
// 不允许点击当前激活选项
|
||||
if (index == this.currentIndex) return;
|
||||
this.currentIndex = index;
|
||||
this.changeSectionStatus(index);
|
||||
this.$emit('change', Number(index));
|
||||
},
|
||||
// 获取各个tab的节点信息
|
||||
getTabsInfo() {
|
||||
let view = uni.createSelectorQuery().in(this);
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
view.select('.u-item-' + i).boundingClientRect();
|
||||
}
|
||||
view.exec(res => {
|
||||
if (!res.length) {
|
||||
setTimeout(() => {
|
||||
this.getTabsInfo();
|
||||
return;
|
||||
}, 10);
|
||||
}
|
||||
// 将分段器每个item的宽度，放入listInfo数组
|
||||
res.map((val, index) => {
|
||||
this.listInfo[index].width = val.width;
|
||||
});
|
||||
// 初始化滑块的宽度
|
||||
if (this.mode == 'subsection') {
|
||||
this.itemBgStyle.width = this.listInfo[0].width + 'px';
|
||||
} else if (this.mode == 'button') {
|
||||
this.itemBgStyle.width = this.listInfo[0].width + 'px';
|
||||
}
|
||||
// 初始化滑块的位置
|
||||
this.itemBgLeft();
|
||||
});
|
||||
},
|
||||
itemBgLeft() {
|
||||
// 根据是否开启动画效果，
|
||||
if (this.animation) {
|
||||
this.itemBgStyle.transition = 'all 0.35s';
|
||||
} else {
|
||||
this.itemBgStyle.transition = 'all 0s';
|
||||
}
|
||||
let left = 0;
|
||||
// 计算当前活跃item到组件左边的距离
|
||||
this.listInfo.map((val, index) => {
|
||||
if (index < this.currentIndex) left += val.width;
|
||||
});
|
||||
// 根据mode不同模式，计算滑块需要移动的距离
|
||||
if (this.mode == 'subsection') {
|
||||
this.itemBgStyle.left = left + 'px';
|
||||
} else if (this.mode == 'button') {
|
||||
this.itemBgStyle.left = left + this.buttonPadding + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-subsection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $u-main-color;
|
||||
display: inline-flex;
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
|
||||
.u-item-bg {
|
||||
background-color: $u-type-primary;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.u-none-border-right {
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.u-item-first {
|
||||
border-top-left-radius: 8rpx;
|
||||
border-bottom-left-radius: 8rpx;
|
||||
}
|
||||
|
||||
.u-item-last {
|
||||
border-top-right-radius: 8rpx;
|
||||
border-bottom-right-radius: 8rpx;
|
||||
}
|
||||
|
||||
.u-item-text {
|
||||
transition: all 0.35s;
|
||||
color: $u-main-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
</style>
|
||||
251
node_modules/uview-ui/components/u-swipe-action/u-swipe-action.vue
generated
vendored
Normal file
251
node_modules/uview-ui/components/u-swipe-action/u-swipe-action.vue
generated
vendored
Normal file
@@ -0,0 +1,251 @@
|
||||
<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="{
|
||||
width: movableViewWidth ? movableViewWidth : '100%'
|
||||
}"
|
||||
>
|
||||
<view
|
||||
class="u-swipe-content"
|
||||
@tap.stop="contentClick"
|
||||
>
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view class="u-swipe-del" v-if="showBtn" @tap.stop="btnClick(index)" :style="[btnStyle(item.style)]" v-for="(item, index) in options" :key="index">
|
||||
<view class="u-btn-text">{{ item.text }}</view>
|
||||
</view>
|
||||
</movable-view>
|
||||
</movable-area>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* swipeAction 左滑单元格
|
||||
* @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。
|
||||
* @tutorial https://www.uviewui.com/components/swipeAction.html
|
||||
* @property {String} bg-color 整个组件背景颜色（默认#ffffff）
|
||||
* @property {Array} options 数组形式，可以配置背景颜色和文字
|
||||
* @property {String Number} index 标识符，点击时候用于区分点击了哪一个，用v-for循环时的index即可
|
||||
* @property {String Number} btn-width 按钮宽度，单位rpx（默认180）
|
||||
* @property {Boolean} disabled 是否禁止某个swipeAction滑动（默认false）
|
||||
* @property {Boolean} show 打开或者关闭某个组件（默认false）
|
||||
* @event {Function} click 点击组件时触发
|
||||
* @event {Function} close 组件触发关闭状态时
|
||||
* @event {Function} content-click 点击内容时触发
|
||||
* @event {Function} open 组件触发打开状态时
|
||||
* @example <u-swipe-action btn-text="收藏">...</u-swipe-action>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-swipe-action',
|
||||
props: {
|
||||
// index值，用于得知点击删除的是哪个按钮
|
||||
index: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 滑动按钮的宽度，单位为rpx
|
||||
btnWidth: {
|
||||
type: [String, Number],
|
||||
default: 180
|
||||
},
|
||||
// 是否禁止某个action滑动
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 打开或者关闭组件
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 组件背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
// 是否使手机发生短促震动，目前只在iOS的微信小程序有效(2020-05-06)
|
||||
vibrateShort: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 按钮操作参数
|
||||
options: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
if (nVal) {
|
||||
this.open();
|
||||
} else {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
moveX: 0, // movable-view元素在x轴上需要移动的目标移动距离，用于展开或收起滑动的按钮
|
||||
scrollX: 0, // movable-view移动过程中产生的change事件中的x轴移动值
|
||||
status: false, // 滑动的状态，表示当前是展开还是关闭按钮的状态
|
||||
movableAreaWidth: 0, // 滑动区域
|
||||
elId: this.$u.guid(), // id，用于通知另外组件关闭时的识别
|
||||
showBtn: false, // 刚开始渲染视图时不显示右边的按钮，避免视图闪动
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
movableViewWidth() {
|
||||
return this.movableAreaWidth + this.allBtnWidth + 'px';
|
||||
},
|
||||
innerBtnWidth() {
|
||||
return uni.upx2px(this.btnWidth);
|
||||
},
|
||||
allBtnWidth() {
|
||||
return uni.upx2px(this.btnWidth) * this.options.length;
|
||||
},
|
||||
btnStyle() {
|
||||
return style => {
|
||||
let css = {};
|
||||
style.width = this.btnWidth + 'rpx';
|
||||
return style;
|
||||
};
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getActionRect();
|
||||
// 等视图更新完后，再显示右边的可滑动按钮，防止这些按钮会"闪一下"
|
||||
setTimeout(() => {
|
||||
this.showBtn = true;
|
||||
}, 10);
|
||||
},
|
||||
methods: {
|
||||
// 点击按钮
|
||||
btnClick(index) {
|
||||
this.status = false;
|
||||
// this.index为点击的几个组件，index为点击某个组件的第几个按钮(options数组的索引)
|
||||
this.$emit('click', this.index, index);
|
||||
},
|
||||
// movable-view元素移动事件
|
||||
change(e) {
|
||||
this.scrollX = e.detail.x;
|
||||
},
|
||||
// 关闭按钮状态
|
||||
close() {
|
||||
this.moveX = 0;
|
||||
this.status = false;
|
||||
},
|
||||
// 打开按钮的状态
|
||||
open() {
|
||||
if (this.disabled) return;
|
||||
this.moveX = -this.allBtnWidth;
|
||||
this.status = true;
|
||||
},
|
||||
// 用户手指离开movable-view元素，停止触摸
|
||||
touchend() {
|
||||
this.moveX = this.scrollX;
|
||||
// 停止触摸时候，判断当前是展开还是关闭状态
|
||||
// 关闭状态
|
||||
// 这一步很重要，需要先给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) {
|
||||
// 关闭状态左滑，产生的x轴位移为负值，也就是说滑动的距离大于按钮的四分之一宽度，自动展开按钮
|
||||
if (this.scrollX <= -this.allBtnWidth / 4) {
|
||||
this.moveX = -this.allBtnWidth; // 按钮宽度的负值，即为展开状态movable-view元素左滑的距离
|
||||
this.status = true; // 标志当前为展开状态
|
||||
this.emitOpenEvent();
|
||||
// 产生震动效果
|
||||
if (this.vibrateShort) uni.vibrateShort();
|
||||
} else {
|
||||
this.moveX = 0; // 如果距离没有按钮宽度的四分之一，自动收起
|
||||
this.status = false;
|
||||
this.emitCloseEvent();
|
||||
}
|
||||
} else {
|
||||
// 如果在打开的状态下，右滑动的距离X轴偏移超过按钮的四分之一(负值反过来的四分之三)，自动收起按钮
|
||||
if (this.scrollX > (-this.allBtnWidth * 3) / 4) {
|
||||
this.moveX = 0;
|
||||
this.$nextTick(() => {
|
||||
this.moveX = 101;
|
||||
});
|
||||
this.status = false;
|
||||
this.emitCloseEvent();
|
||||
} else {
|
||||
this.moveX = -this.allBtnWidth;
|
||||
this.status = true;
|
||||
this.emitOpenEvent();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
emitOpenEvent() {
|
||||
this.$emit('open', this.index);
|
||||
},
|
||||
emitCloseEvent() {
|
||||
this.$emit('close', this.index);
|
||||
},
|
||||
// 开始触摸
|
||||
touchstart() {},
|
||||
getActionRect() {
|
||||
this.$uGetRect('.u-swipe-action').then(res => {
|
||||
this.movableAreaWidth = res.width;
|
||||
});
|
||||
},
|
||||
// 点击内容触发事件
|
||||
contentClick() {
|
||||
// 点击内容时，如果当前为打开状态，收起组件
|
||||
if (this.status == true) {
|
||||
this.status = 'close';
|
||||
this.moveX = 0;
|
||||
}
|
||||
this.$emit('content-click', this.index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.u-swipe-action {
|
||||
width: auto;
|
||||
height: initial;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-swipe-view {
|
||||
display: flex;
|
||||
height: initial;
|
||||
position: relative;
|
||||
/* 这一句很关键，覆盖默认的绝对定位 */
|
||||
}
|
||||
|
||||
.u-swipe-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.u-swipe-del {
|
||||
position: relative;
|
||||
font-size: 30rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.u-btn-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
312
node_modules/uview-ui/components/u-swiper/u-swiper.vue
generated
vendored
Normal file
312
node_modules/uview-ui/components/u-swiper/u-swiper.vue
generated
vendored
Normal file
@@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<view class="u-swiper-wrap" :style="{
|
||||
borderRadius: `${borderRadius}rpx`
|
||||
}">
|
||||
<swiper @change="change" @animationfinish="animationfinish" :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="{
|
||||
borderRadius: `${borderRadius}rpx`,
|
||||
transform: effect3d && current != index ? 'scaleY(0.9)' : 'scaleY(1)',
|
||||
margin: effect3d && current != index ? '0 20rpx' : 0,
|
||||
backgroundColor: bgColor
|
||||
}">
|
||||
<image class="u-swiper-image" :src="item[name]" :mode="imgMode"></image>
|
||||
<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="{
|
||||
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>
|
||||
</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>
|
||||
</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>
|
||||
</block>
|
||||
<block v-if="mode == 'number'">
|
||||
<view class="u-indicator-item-number">{{ current + 1 }}/{{ list.length }}</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* swiper 轮播图
|
||||
* @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} bg-color 背景颜色（默认#f3f4f6）
|
||||
* @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 () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 是否显示title标题
|
||||
title: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 用户自定义的指示器的样式
|
||||
indicator: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 圆角值
|
||||
borderRadius: {
|
||||
type: [Number, String],
|
||||
default: 8
|
||||
},
|
||||
// 隔多久自动切换
|
||||
interval: {
|
||||
type: [String, Number],
|
||||
default: 3000
|
||||
},
|
||||
// 指示器的模式，rect|dot|number|round
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'round'
|
||||
},
|
||||
// list的高度，单位rpx
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 250
|
||||
},
|
||||
// 指示器的位置，topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight
|
||||
indicatorPos: {
|
||||
type: String,
|
||||
default: 'bottomCenter'
|
||||
},
|
||||
// 是否开启缩放效果
|
||||
effect3d: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 3D模式的情况下，激活item与前后item之间的距离，单位rpx
|
||||
effect3dPreviousMargin: {
|
||||
type: [Number, String],
|
||||
default: 50
|
||||
},
|
||||
// 是否自动播放
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 自动轮播时间间隔，单位ms
|
||||
duration: {
|
||||
type: [Number, String],
|
||||
default: 500
|
||||
},
|
||||
// 是否衔接滑动，即到最后一张时接着滑动，是佛自动切换到第一张
|
||||
circular: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 图片的形式模式
|
||||
imgMode: {
|
||||
type: String,
|
||||
default: 'aspectFill'
|
||||
},
|
||||
// 从list数组中读取的图片的属性名
|
||||
name: {
|
||||
type: String,
|
||||
default: 'image'
|
||||
},
|
||||
// 背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#f3f4f6'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 如果外部的list发生变化，判断长度是否被修改，如果前后长度不一致，重置current值，避免溢出
|
||||
list(nVal, oVal) {
|
||||
if(nVal.length !== oVal.length) this.current = 0;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
current: 0 // 当前活跃的swiper-item的index
|
||||
};
|
||||
},
|
||||
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';
|
||||
},
|
||||
titlePaddingBottom() {
|
||||
let tmp = 0;
|
||||
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') {
|
||||
tmp = '40rpx';
|
||||
} else {
|
||||
tmp = '12rpx';
|
||||
}
|
||||
return tmp;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
listClick(index) {
|
||||
this.$emit('click', index);
|
||||
},
|
||||
change(e) {
|
||||
this.current = e.detail.current;
|
||||
},
|
||||
// 头条小程序不支持animationfinish事件，改由change事件
|
||||
// 暂不监听此事件，因为不再给swiper绑定current属性
|
||||
animationfinish(e) {
|
||||
// #ifndef MP-TOUTIAO
|
||||
// this.current = e.detail.current;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-swiper-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.u-swiper-image {
|
||||
width: 100%;
|
||||
will-change: transform;
|
||||
height: 100%;
|
||||
display: block;
|
||||
/* #ifdef H5 */
|
||||
pointer-events: none;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.u-swiper-indicator {
|
||||
padding: 0 24rpx;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.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 {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.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 {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 34rpx;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.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 {
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.u-list-image-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
transition: all 0.5s;
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-swiper-title {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.u-swiper-item {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
174
node_modules/uview-ui/components/u-switch/u-switch.vue
generated
vendored
Normal file
174
node_modules/uview-ui/components/u-switch/u-switch.vue
generated
vendored
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<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" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* switch 开关选择器
|
||||
* @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）
|
||||
* @property {Boolean | Number | String} active-value 打开选择器时通过change事件发出的值（默认true）
|
||||
* @property {Boolean | Number | String} inactive-value 关闭选择器时通过change事件发出的值（默认false）
|
||||
* @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: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否为禁用装填
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 开关尺寸，单位rpx
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 50
|
||||
},
|
||||
// 打开时的背景颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 关闭时的背景颜色
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
// 通过v-model双向绑定的值
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否使手机发生短促震动，目前只在iOS的微信小程序有效(2020-05-06)
|
||||
vibrateShort: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 打开选择器时的值
|
||||
activeValue: {
|
||||
type: [Number, String, Boolean],
|
||||
default: true
|
||||
},
|
||||
// 关闭选择器时的值
|
||||
inactiveValue: {
|
||||
type: [Number, String, Boolean],
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
switchStyle() {
|
||||
let style = {};
|
||||
style.fontSize = this.size + 'rpx';
|
||||
style.backgroundColor = this.value ? this.activeColor : this.inactiveColor;
|
||||
return style;
|
||||
},
|
||||
loadingColor() {
|
||||
return this.value ? this.activeColor : null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
if (!this.disabled && !this.loading) {
|
||||
// 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
|
||||
if(this.vibrateShort) uni.vibrateShort();
|
||||
this.$emit('input', !this.value);
|
||||
// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change', this.value ? this.activeValue : this.inactiveValue);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: initial;
|
||||
width: 2em;
|
||||
width: var(--switch-width, 2em);
|
||||
height: 1em;
|
||||
height: var(--switch-height, 1em);
|
||||
background-color: #fff;
|
||||
background-color: var(--switch-background-color, #fff);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: var(--switch-border, 1px solid rgba(0, 0, 0, 0.1));
|
||||
border-radius: 1em;
|
||||
border-radius: var(--switch-node-size, 1em);
|
||||
transition: background-color 0.3s;
|
||||
transition: background-color var(--switch-transition-duration, 0.3s);
|
||||
}
|
||||
|
||||
.u-switch__node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
z-index: var(--switch-node-z-index, 1);
|
||||
width: 1em;
|
||||
width: var(--switch-node-size, 1em);
|
||||
height: 1em;
|
||||
height: var(--switch-node-size, 1em);
|
||||
background-color: #fff;
|
||||
background-color: var(--switch-node-background-color, #fff);
|
||||
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
|
||||
box-shadow: var(--switch-node-box-shadow, 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05));
|
||||
transition: -webkit-transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
|
||||
transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
|
||||
transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05), -webkit-transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
|
||||
transition: -webkit-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);
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-switch--on {
|
||||
background-color: #1989fa;
|
||||
background-color: var(--switch-on-background-color, #1989fa);
|
||||
}
|
||||
|
||||
.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 {
|
||||
opacity: 0.4;
|
||||
opacity: var(--switch-disabled-opacity, 0.4);
|
||||
}
|
||||
</style>
|
||||
92
node_modules/uview-ui/components/u-table/u-table.vue
generated
vendored
Normal file
92
node_modules/uview-ui/components/u-table/u-table.vue
generated
vendored
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<view class="u-table" :style="[tableStyle]">
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* table 表格
|
||||
* @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,
|
||||
default: '#e4e7ed'
|
||||
},
|
||||
align: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// td的内边距
|
||||
padding: {
|
||||
type: String,
|
||||
default: '10rpx 6rpx'
|
||||
},
|
||||
// 字体大小
|
||||
fontSize: {
|
||||
type: [String, Number],
|
||||
default: 28
|
||||
},
|
||||
// 字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// th的自定义样式
|
||||
thStyle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// table的背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
uTable: this,
|
||||
uTd: this
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
tableStyle() {
|
||||
let style = {};
|
||||
style.borderLeft = `solid 1px ${this.borderColor}`;
|
||||
style.borderTop = `solid 1px ${this.borderColor}`;
|
||||
style.backgroundColor = this.bgColor;;
|
||||
return style;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-table {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.u-table /deep/ t-tr {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
473
node_modules/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue
generated
vendored
Normal file
473
node_modules/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue
generated
vendored
Normal file
@@ -0,0 +1,473 @@
|
||||
<template>
|
||||
<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="[tabItemStyle(index)]"
|
||||
v-for="(item, index) in getTabs" :key="index" :class="[preId + index]" @tap="emit(index)">
|
||||
{{ item[name] || item['name']}}
|
||||
</view>
|
||||
<view v-if="showBar" class="u-scroll-bar" :style="[tabBarStyle]"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import colorGradient from '../../libs/function/colorGradient';
|
||||
let color = colorGradient;
|
||||
const {
|
||||
windowWidth
|
||||
} = uni.getSystemInfoSync();
|
||||
const preId = 'UEl_';
|
||||
|
||||
/**
|
||||
* tabsSwiper 全屏选项卡
|
||||
* @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 {Object} bar-style 底部滑块的样式，对象形式
|
||||
* @property {Object} active-item-style 活动tabs item的样式，对象形式
|
||||
* @property {Boolean} show-bar 是否显示底部的滑块（默认true）
|
||||
* @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>
|
||||
*/
|
||||
export default {
|
||||
name: "u-tabs-swiper",
|
||||
props: {
|
||||
// 导航菜单是否需要滚动，如只有2或者3个的时候，就不需要滚动了，此时使用flex平分tab的宽度
|
||||
isScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//需循环的标签列表
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 当前活动tab的索引
|
||||
current: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 导航栏的高度和行高，单位rpx
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 80
|
||||
},
|
||||
// 字体大小，单位rpx
|
||||
fontSize: {
|
||||
type: [Number, String],
|
||||
default: 30
|
||||
},
|
||||
// 过渡动画时长, 单位s
|
||||
// duration: {
|
||||
// type: [Number, String],
|
||||
// default: 0.5
|
||||
// },
|
||||
swiperWidth: {
|
||||
//line3生效, 外部swiper的宽度, 单位rpx
|
||||
type: [String, Number],
|
||||
default: 750
|
||||
},
|
||||
// 选中项的主题颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 未选中项的颜色
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: '#303133'
|
||||
},
|
||||
// 菜单底部移动的bar的宽度，单位rpx
|
||||
barWidth: {
|
||||
type: [Number, String],
|
||||
default: 40
|
||||
},
|
||||
// 移动bar的高度
|
||||
barHeight: {
|
||||
type: [Number, String],
|
||||
default: 6
|
||||
},
|
||||
// 单个tab的左或右内边距（各占一半），单位rpx
|
||||
gutter: {
|
||||
type: [Number, String],
|
||||
default: 40
|
||||
},
|
||||
// 如果是绝对定位，添加z-index值
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
// 导航栏的背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
//滚动至中心目标类型
|
||||
autoCenterMode: {
|
||||
type: String,
|
||||
default: 'window'
|
||||
},
|
||||
// 读取传入的数组对象的属性
|
||||
name: {
|
||||
type: String,
|
||||
default: 'name'
|
||||
},
|
||||
// 活动tab字体是否加粗
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 当前活动tab item的样式
|
||||
activeItemStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 是否显示底部的滑块
|
||||
showBar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 底部滑块的自定义样式
|
||||
barStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollLeft: 0, // 滚动scroll-view的左边滚动距离
|
||||
tabQueryInfo: [], // 存放对tab菜单查询后的节点信息
|
||||
windowWidth: 0, // 屏幕宽度，单位为px
|
||||
//scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离
|
||||
animationFinishCurrent: this.current,
|
||||
componentsWidth: 0,
|
||||
line3AddDx: 0,
|
||||
line3Dx: 0,
|
||||
preId,
|
||||
sW: 0,
|
||||
tabsInfo: [],
|
||||
colorGradientArr: [],
|
||||
colorStep: 100 // 两个颜色之间的渐变等分
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 获取当前活跃的current值
|
||||
getCurrent() {
|
||||
const current = Number(this.current);
|
||||
// 判断是否超出边界
|
||||
if (current > this.getTabs.length - 1) {
|
||||
return this.getTabs.length - 1;
|
||||
}
|
||||
if (current < 0) return 0;
|
||||
return current;
|
||||
},
|
||||
getTabs() {
|
||||
return this.list;
|
||||
},
|
||||
// 滑块需要移动的距离
|
||||
scrollBarLeft() {
|
||||
return Number(this.line3Dx) + Number(this.line3AddDx);
|
||||
},
|
||||
// 滑块的宽度转为px单位
|
||||
barWidthPx() {
|
||||
return uni.upx2px(this.barWidth);
|
||||
},
|
||||
// tab的样式
|
||||
tabItemStyle() {
|
||||
return (index) => {
|
||||
let style = {
|
||||
height: this.height + 'rpx',
|
||||
lineHeight: this.height + 'rpx',
|
||||
padding: `0 ${this.gutter / 2}rpx`,
|
||||
color: this.tabsInfo.length > 0 ? (this.tabsInfo[index] ? this.tabsInfo[index].color : this.activeColor) : this.inactiveColor,
|
||||
fontSize: this.fontSize + 'rpx',
|
||||
zIndex: this.zIndex + 2,
|
||||
fontWeight: (index == this.getCurrent && this.bold) ? 'bold' : 'normal'
|
||||
};
|
||||
if(index == this.getCurrent) {
|
||||
// 给选中的tab item添加外部自定义的样式
|
||||
style = Object.assign(style, this.activeItemStyle);
|
||||
}
|
||||
return style;
|
||||
}
|
||||
},
|
||||
// 底部滑块的样式
|
||||
tabBarStyle() {
|
||||
let style = {
|
||||
width: this.barWidthPx + 'px',
|
||||
height: this.barHeight + 'rpx',
|
||||
borderRadius: '100px',
|
||||
backgroundColor: this.activeColor,
|
||||
left: this.scrollBarLeft + 'px'
|
||||
};
|
||||
return Object.assign(style, this.barStyle);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
current(n, o) {
|
||||
this.change(n);
|
||||
this.setFinishCurrent(n);
|
||||
},
|
||||
list() {
|
||||
this.$nextTick(() => {
|
||||
this.init();
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
this.countPx();
|
||||
await this.getTabsInfo();
|
||||
this.countLine3Dx();
|
||||
this.getQuery(() => {
|
||||
this.setScrollViewToCenter();
|
||||
});
|
||||
// 颜色渐变过程数组
|
||||
this.colorGradientArr = color.colorGradient(this.inactiveColor, this.activeColor, this.colorStep);
|
||||
},
|
||||
// 获取各个tab的节点信息
|
||||
getTabsInfo() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let view = uni.createSelectorQuery().in(this);
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
view.select('.' + preId + i).boundingClientRect();
|
||||
}
|
||||
view.exec(res => {
|
||||
const arr = [];
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
// 给每个tab添加其文字颜色属性
|
||||
res[i].color = this.inactiveColor;
|
||||
// 当前tab直接赋予activeColor
|
||||
if (i == this.getCurrent) res[i].color = this.activeColor;
|
||||
arr.push(res[i]);
|
||||
}
|
||||
this.tabsInfo = arr;
|
||||
resolve();
|
||||
});
|
||||
})
|
||||
},
|
||||
// 当swiper滑动结束，计算滑块最终要停留的位置
|
||||
countLine3Dx() {
|
||||
const tab = this.tabsInfo[this.animationFinishCurrent];
|
||||
// 让滑块中心点和当前tab中心重合
|
||||
if (tab) this.line3Dx = tab.left + tab.width / 2 - this.barWidthPx / 2 - this.tabsInfo[0].left;
|
||||
},
|
||||
countPx() {
|
||||
// swiper宽度由rpx转为px单位，因为dx等，都是px单位
|
||||
this.sW = uni.upx2px(Number(this.swiperWidth));
|
||||
},
|
||||
emit(index) {
|
||||
this.$emit('change', index);
|
||||
},
|
||||
change() {
|
||||
this.setScrollViewToCenter();
|
||||
},
|
||||
getQuery(cb) {
|
||||
try {
|
||||
let view = uni.createSelectorQuery().in(this).select('.u-tabs');
|
||||
view.fields({
|
||||
size: true
|
||||
},
|
||||
data => {
|
||||
if (data) {
|
||||
this.componentsWidth = data.width;
|
||||
if (cb && typeof cb === 'function') cb(data);
|
||||
} else {
|
||||
this.getQuery(cb);
|
||||
}
|
||||
}
|
||||
).exec();
|
||||
} catch (e) {
|
||||
this.componentsWidth = windowWidth;
|
||||
}
|
||||
},
|
||||
// 把活动tab移动到屏幕中心点
|
||||
setScrollViewToCenter() {
|
||||
let tab;
|
||||
tab = this.tabsInfo[this.animationFinishCurrent];
|
||||
if (tab) {
|
||||
let tabCenter = tab.left + tab.width / 2;
|
||||
let fatherWidth;
|
||||
// 活动tab移动到中心时，以屏幕还是tab组件为宽度为基准
|
||||
if (this.autoCenterMode === 'window') {
|
||||
fatherWidth = windowWidth;
|
||||
} else {
|
||||
fatherWidth = this.componentsWidth;
|
||||
}
|
||||
this.scrollLeft = tabCenter - fatherWidth / 2;
|
||||
}
|
||||
},
|
||||
setDx(dx) {
|
||||
let nextTabIndex = dx > 0 ? this.animationFinishCurrent + 1 : this.animationFinishCurrent - 1;
|
||||
// 判断索引是否超出边界
|
||||
nextTabIndex = nextTabIndex <= 0 ? 0 : nextTabIndex;
|
||||
nextTabIndex = nextTabIndex >= this.list.length ? this.list.length - 1 : nextTabIndex;
|
||||
const tab = this.tabsInfo[nextTabIndex];
|
||||
// 当前tab中心点x轴坐标
|
||||
let nowTab = this.tabsInfo[this.animationFinishCurrent];
|
||||
let nowTabX = nowTab.left + nowTab.width / 2;
|
||||
// 下一个tab
|
||||
let nextTab = this.tabsInfo[nextTabIndex];
|
||||
let nextTabX = nextTab.left + nextTab.width / 2;
|
||||
// 两个tab之间的距离，因为下一个tab可能在当前tab的左边或者右边，取绝对值即可
|
||||
let distanceX = Math.abs(nextTabX - nowTabX);
|
||||
this.line3AddDx = (dx / this.sW) * distanceX;
|
||||
this.setTabColor(this.animationFinishCurrent, nextTabIndex, dx);
|
||||
},
|
||||
// 设置tab的颜色
|
||||
setTabColor(nowTabIndex, nextTabIndex, dx) {
|
||||
let colorIndex = Math.abs(Math.ceil((dx / this.sW) * 100));
|
||||
let colorLength = this.colorGradientArr.length;
|
||||
// 处理超出索引边界的情况
|
||||
colorIndex = colorIndex >= colorLength ? colorLength - 1 : colorIndex <= 0 ? 0 : colorIndex;
|
||||
// 设置下一个tab的颜色
|
||||
this.tabsInfo[nextTabIndex].color = this.colorGradientArr[colorIndex];
|
||||
// 设置当前tab的颜色
|
||||
this.tabsInfo[nowTabIndex].color = this.colorGradientArr[colorLength - 1 - colorIndex];
|
||||
},
|
||||
// swiper结束滑动
|
||||
setFinishCurrent(current) {
|
||||
// 如果滑动的索引不一致，修改tab颜色变化，因为可能会有直接点击tab的情况
|
||||
if (current != this.animationFinishCurrent) {
|
||||
this.tabsInfo.map((val, index) => {
|
||||
if (current == index) val.color = this.activeColor;
|
||||
else val.color = this.inactiveColor;
|
||||
return val;
|
||||
});
|
||||
}
|
||||
this.line3AddDx = 0;
|
||||
this.animationFinishCurrent = current;
|
||||
this.countLine3Dx();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
view,
|
||||
scroll-view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.u-tabs {
|
||||
width: 100%;
|
||||
transition-property: background-color, color;
|
||||
}
|
||||
|
||||
::-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 {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.u-scroll-view {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-tabs-scroll-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-tabs-scorll-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.u-tabs-scorll-flex .u-tabs-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.u-tabs-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
transition-property: background-color, color, font-weight;
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.boxStyle {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
transition-property: all;
|
||||
}
|
||||
|
||||
.boxStyle2 {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transition-property: all;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.itemBackgroundBox {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition-property: left, background-color;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.itemBackground {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition-property: all;
|
||||
}
|
||||
|
||||
.u-scroll-bar {
|
||||
position: absolute;
|
||||
bottom: 4rpx;
|
||||
}
|
||||
</style>
|
||||
335
node_modules/uview-ui/components/u-tabs/u-tabs.vue
generated
vendored
Normal file
335
node_modules/uview-ui/components/u-tabs/u-tabs.vue
generated
vendored
Normal file
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<view class="u-tabs" :id="id" :style="{
|
||||
background: bgColor
|
||||
}">
|
||||
<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)]">
|
||||
{{ item[name] || item['name']}}
|
||||
</view>
|
||||
<view v-if="showBar" class="u-tab-bar" :style="[tabBarStyle]"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* tabs 标签
|
||||
* @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 {Object} active-item-style 活动tabs item的样式，对象形式
|
||||
* @property {Object} bar-style 底部滑块的样式，对象形式
|
||||
* @property {Boolean} show-bar 是否显示底部的滑块（默认true）
|
||||
* @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: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//需循环的标签列表
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 当前活动tab的索引
|
||||
current: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 导航栏的高度和行高
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: 80
|
||||
},
|
||||
// 字体大小
|
||||
fontSize: {
|
||||
type: [String, Number],
|
||||
default: 30
|
||||
},
|
||||
// 过渡动画时长, 单位ms
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: 0.5
|
||||
},
|
||||
// 选中项的主题颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 未选中项的颜色
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: '#303133'
|
||||
},
|
||||
// 菜单底部移动的bar的宽度，单位rpx
|
||||
barWidth: {
|
||||
type: [String, Number],
|
||||
default: 40
|
||||
},
|
||||
// 移动bar的高度
|
||||
barHeight: {
|
||||
type: [String, Number],
|
||||
default: 6
|
||||
},
|
||||
// 单个tab的左或有内边距（左右相同）
|
||||
gutter: {
|
||||
type: [String, Number],
|
||||
default: 30
|
||||
},
|
||||
// 导航栏的背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
// 读取传入的数组对象的属性
|
||||
name: {
|
||||
type: String,
|
||||
default: 'name'
|
||||
},
|
||||
// 活动tab字体是否加粗
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 当前活动tab item的样式
|
||||
activeItemStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 是否显示底部的滑块
|
||||
showBar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 底部滑块的自定义样式
|
||||
barStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollLeft: 0, // 滚动scroll-view的左边滚动距离
|
||||
tabQueryInfo: [], // 存放对tab菜单查询后的节点信息
|
||||
componentWidth: 0, // 屏幕宽度，单位为px
|
||||
scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离
|
||||
parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离
|
||||
id: this.$u.guid(), // id值
|
||||
currentIndex: this.current,
|
||||
barFirstTimeMove: true, // 滑块第一次移动时(页面刚生成时)，无需动画，否则给人怪异的感觉
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听tab的变化，重新计算tab菜单的布局信息，因为实际使用中菜单可能是通过
|
||||
// 后台获取的（如新闻app顶部的菜单），获取返回需要一定时间，所以list变化时，重新获取布局信息
|
||||
list(n, o) {
|
||||
// list变动时，重制内部索引，否则可能导致超出数组边界的情况
|
||||
if(n.length !== o.length) this.currentIndex = 0;
|
||||
// 用$nextTick等待视图更新完毕后再计算tab的局部信息，否则可能因为tab还没生成就获取，就会有问题
|
||||
this.$nextTick(() => {
|
||||
this.init();
|
||||
});
|
||||
},
|
||||
current: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
// 视图更新后再执行移动操作
|
||||
this.$nextTick(() => {
|
||||
this.currentIndex = nVal;
|
||||
this.scrollByIndex();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
// 移动bar的样式
|
||||
tabBarStyle() {
|
||||
let style = {
|
||||
width: this.barWidth + 'rpx',
|
||||
transform: `translate(${this.scrollBarLeft}px, -100%)`,
|
||||
// 滑块在页面渲染后第一次滑动时，无需动画效果
|
||||
'transition-duration': `${this.barFirstTimeMove ? 0 : this.duration }s`,
|
||||
'background-color': this.activeColor,
|
||||
height: this.barHeight + 'rpx',
|
||||
// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现
|
||||
'border-radius': `${this.barHeight / 2}px`
|
||||
};
|
||||
Object.assign(style, this.barStyle);
|
||||
return style;
|
||||
},
|
||||
// tab的样式
|
||||
tabItemStyle() {
|
||||
return (index) => {
|
||||
let style = {
|
||||
height: this.height + 'rpx',
|
||||
'line-height': this.height + 'rpx',
|
||||
'font-size': this.fontSize + 'rpx',
|
||||
'transition-duration': `${this.duration}s`,
|
||||
padding: this.isScroll ? `0 ${this.gutter}rpx` : '',
|
||||
flex: this.isScroll ? 'auto' : '1'
|
||||
};
|
||||
// 字体加粗
|
||||
if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
|
||||
if (index == this.currentIndex) {
|
||||
style.color = this.activeColor;
|
||||
// 给选中的tab item添加外部自定义的样式
|
||||
style = Object.assign(style, this.activeItemStyle);
|
||||
} else {
|
||||
style.color = this.inactiveColor;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 设置一个init方法，方便多处调用
|
||||
async init() {
|
||||
// 获取tabs组件的尺寸信息
|
||||
let tabRect = await this.$uGetRect('#' + this.id);
|
||||
// tabs组件距离屏幕左边的宽度
|
||||
this.parentLeft = tabRect.left;
|
||||
// tabs组件的宽度
|
||||
this.componentWidth = tabRect.width;
|
||||
this.getTabRect();
|
||||
},
|
||||
// 点击某一个tab菜单
|
||||
clickTab(index) {
|
||||
// 点击当前活动tab，不触发事件
|
||||
if(index == this.currentIndex) return ;
|
||||
// 发送事件给父组件
|
||||
this.$emit('change', index);
|
||||
},
|
||||
// 查询tab的布局信息
|
||||
getTabRect() {
|
||||
// 创建节点查询
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
// 历遍所有tab，这里是执行了查询，最终使用exec()会一次性返回查询的数组结果
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
// 只要size和rect两个参数
|
||||
query.select(`#u-tab-item-${i}`).fields({
|
||||
size: true,
|
||||
rect: true
|
||||
});
|
||||
}
|
||||
// 执行查询，一次性获取多个结果
|
||||
query.exec(
|
||||
function(res) {
|
||||
this.tabQueryInfo = res;
|
||||
// 初始化滚动条和移动bar的位置
|
||||
this.scrollByIndex();
|
||||
}.bind(this)
|
||||
);
|
||||
},
|
||||
// 滚动scroll-view，让活动的tab处于屏幕的中间位置
|
||||
scrollByIndex() {
|
||||
// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
|
||||
let tabInfo = this.tabQueryInfo[this.currentIndex];
|
||||
if (!tabInfo) return;
|
||||
// 活动tab的宽度
|
||||
let tabWidth = tabInfo.width;
|
||||
// 活动item的左边到tabs组件左边的距离，用item的left减去tabs的left
|
||||
let offsetLeft = tabInfo.left - this.parentLeft;
|
||||
// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
|
||||
let scrollLeft = offsetLeft - (this.componentWidth - tabWidth) / 2;
|
||||
this.scrollLeft = scrollLeft < 0 ? 0 : scrollLeft;
|
||||
// 当前活动item的中点点到左边的距离减去滑块宽度的一半，即可得到滑块所需的移动距离
|
||||
let left = tabInfo.left + tabInfo.width / 2 - this.parentLeft;
|
||||
// 计算当前活跃item到组件左边的距离
|
||||
this.scrollBarLeft = left - uni.upx2px(this.barWidth) / 2;
|
||||
// 第一次移动滑块的时候，barFirstTimeMove为true，放到延时中将其设置false
|
||||
// 延时是因为scrollBarLeft作用于computed计算时，需要一个过程需，否则导致出错
|
||||
if(this.barFirstTimeMove == true) {
|
||||
setTimeout(() => {
|
||||
this.barFirstTimeMove = false;
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
view,
|
||||
scroll-view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar,
|
||||
::-webkit-scrollbar,
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.u-scroll-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* #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 {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-tab-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
transition-property: background-color, color;
|
||||
}
|
||||
|
||||
.u-tab-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.u-tabs-scorll-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
278
node_modules/uview-ui/components/u-tag/u-tag.vue
generated
vendored
Normal file
278
node_modules/uview-ui/components/u-tag/u-tag.vue
generated
vendored
Normal file
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<view v-if="show" :class="[
|
||||
disabled ? 'u-disabled' : '',
|
||||
'u-size-' + size,
|
||||
'u-shape-' + shape,
|
||||
'u-mode-' + mode + '-' + type
|
||||
]"
|
||||
class="u-tag" :style="[customStyle]" @tap="clickTag">
|
||||
{{text}}
|
||||
<view class="u-icon-wrap" @tap.stop>
|
||||
<u-icon @click="close" size="22" v-if="closeable" name="close" class="u-close-icon" :style="[iconStyle]"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* tag 提示
|
||||
* @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
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
disabled: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
// 标签的大小，分为default（默认），mini（较小）
|
||||
size: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
// tag的形状，circle（两边半圆形）, square（方形，带圆角），circleLeft（左边是半圆），circleRight（右边是半圆）
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'square'
|
||||
},
|
||||
// 标签文字
|
||||
text: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 背景颜色，默认为空字符串，即不处理
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 标签字体颜色，默认为空字符串，即不处理
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 镂空形式标签的边框颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 关闭按钮图标的颜色
|
||||
closeColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 点击时返回的索引值，用于区分例遍的数组哪个元素被点击了
|
||||
index: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 模式选择，dark|light|plain
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'light'
|
||||
},
|
||||
// 是否可关闭
|
||||
closeable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
customStyle() {
|
||||
let style = {};
|
||||
// 文字颜色（如果有此值，会覆盖type值的颜色）
|
||||
if(this.color) style.color = this.color+"!important";
|
||||
// tag的背景颜色（如果有此值，会覆盖type值的颜色）
|
||||
if(this.bgColor) style.backgroundColor = this.bgColor+"!important";
|
||||
// 如果是镂空型tag，没有传递边框颜色（borderColor）的话，使用文字的颜色（color属性）
|
||||
if(this.mode == 'plain' && this.color && !this.borderColor) style.borderColor = this.color;
|
||||
else style.borderColor = this.borderColor;
|
||||
return style;
|
||||
},
|
||||
iconStyle() {
|
||||
if(!this.closeable) return ;
|
||||
let style = {};
|
||||
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;
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 标签被点击
|
||||
clickTag() {
|
||||
// 如果是disabled状态，不发送点击事件
|
||||
if(this.disabled) return ;
|
||||
this.$emit('click', this.index);
|
||||
},
|
||||
// 点击标签关闭按钮
|
||||
close() {
|
||||
this.$emit('close', this.index);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-tag {
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
border-radius: 6rpx;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.u-size-default {
|
||||
font-size: 22rpx;
|
||||
padding: 12rpx 22rpx;
|
||||
}
|
||||
|
||||
.u-size-mini {
|
||||
font-size: 20rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
}
|
||||
|
||||
.u-mode-light-primary {
|
||||
background-color: $u-type-primary-light;
|
||||
color: $u-type-primary;
|
||||
border: 1px solid rgb(215, 234, 254);
|
||||
}
|
||||
|
||||
.u-mode-light-success {
|
||||
background-color: $u-type-success-light;
|
||||
color: $u-type-success;
|
||||
border: 1px solid #BEF5C8;
|
||||
}
|
||||
|
||||
.u-mode-light-error {
|
||||
background-color: $u-type-error-light;
|
||||
color: $u-type-error;
|
||||
border: 1px solid #fde2e2;
|
||||
}
|
||||
|
||||
.u-mode-light-warning {
|
||||
background-color: $u-type-warning-light;
|
||||
color: $u-type-warning;
|
||||
border: 1px solid #faecd8;
|
||||
}
|
||||
|
||||
.u-mode-light-info {
|
||||
background-color: $u-type-info-light;
|
||||
color: $u-type-info;
|
||||
border: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.u-mode-dark-primary {
|
||||
background-color: $u-type-primary;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.u-mode-dark-success {
|
||||
background-color: $u-type-success;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.u-mode-dark-error {
|
||||
background-color: $u-type-error;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.u-mode-dark-warning {
|
||||
background-color: $u-type-warning;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.u-mode-dark-info {
|
||||
background-color: $u-type-info;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.u-mode-plain-primary {
|
||||
background-color: #FFFFFF;
|
||||
color: $u-type-primary;
|
||||
border: 1px solid $u-type-primary;
|
||||
}
|
||||
|
||||
.u-mode-plain-success {
|
||||
background-color: #FFFFFF;
|
||||
color: $u-type-success;
|
||||
border: 1px solid $u-type-success;
|
||||
}
|
||||
|
||||
.u-mode-plain-error {
|
||||
background-color: #FFFFFF;
|
||||
color: $u-type-error;
|
||||
border: 1px solid $u-type-error;
|
||||
}
|
||||
|
||||
.u-mode-plain-warning {
|
||||
background-color: #FFFFFF;
|
||||
color: $u-type-warning;
|
||||
border: 1px solid $u-type-warning;
|
||||
}
|
||||
|
||||
.u-mode-plain-info {
|
||||
background-color: #FFFFFF;
|
||||
color: $u-type-info;
|
||||
border: 1px solid $u-type-info;
|
||||
}
|
||||
|
||||
.u-disabled {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.u-shape-circle {
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
|
||||
.u-shape-circleRight {
|
||||
border-radius: 0 100rpx 100rpx 0;
|
||||
}
|
||||
|
||||
.u-shape-circleLeft {
|
||||
border-radius: 100rpx 0 0 100rpx;
|
||||
}
|
||||
|
||||
.u-close-icon {
|
||||
margin-left: 14rpx;
|
||||
font-size: 22rpx;
|
||||
color: $u-type-success;
|
||||
}
|
||||
|
||||
.u-icon-wrap {
|
||||
display: inline-flex;
|
||||
transform: scale(0.86);
|
||||
}
|
||||
</style>
|
||||
113
node_modules/uview-ui/components/u-td/u-td.vue
generated
vendored
Normal file
113
node_modules/uview-ui/components/u-td/u-td.vue
generated
vendored
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<view class="u-td" :style="[tdStyle]">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* td td单元格
|
||||
* @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: {
|
||||
type: [Number, String],
|
||||
default: 'auto'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tr: []
|
||||
};
|
||||
},
|
||||
inject: ['uTable', 'uTr'],
|
||||
provide() {
|
||||
return {
|
||||
uTd: this
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
tdStyle() {
|
||||
let style = {};
|
||||
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;
|
||||
style.borderRight = this.tr.length == 0 ? `solid 1px ${this.uTable.borderColor}` : 0;
|
||||
style.fontSize = this.uTable.fontSize + 'rpx';
|
||||
style.color = this.uTable.color;
|
||||
return style;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-td {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: $u-content-color;
|
||||
align-self: stretch;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.u-col-1 {
|
||||
flex: 0 0 calc(100%/12);
|
||||
}
|
||||
|
||||
.u-col-2 {
|
||||
flex: 0 0 calc(100%/12 * 2);
|
||||
}
|
||||
|
||||
.u-col-3 {
|
||||
flex: 0 0 calc(100%/12 * 3);
|
||||
}
|
||||
|
||||
.u-col-4 {
|
||||
flex: 0 0 calc(100%/12 * 4);
|
||||
}
|
||||
|
||||
.u-col-5 {
|
||||
flex: 0 0 calc(100%/12 * 5);
|
||||
}
|
||||
|
||||
.u-col-6 {
|
||||
flex: 0 0 calc(100%/12 * 6);
|
||||
}
|
||||
|
||||
.u-col-7 {
|
||||
flex: 0 0 calc(100%/12 * 7);
|
||||
}
|
||||
|
||||
.u-col-8 {
|
||||
flex: 0 0 calc(100%/12 * 8);
|
||||
}
|
||||
|
||||
.u-col-9 {
|
||||
flex: 0 0 calc(100%/12 * 9);
|
||||
}
|
||||
|
||||
.u-col-10 {
|
||||
flex: 0 0 calc(100%/12 * 10);
|
||||
}
|
||||
|
||||
.u-col-11 {
|
||||
flex: 0 0 calc(100%/12 * 11);
|
||||
}
|
||||
|
||||
.u-col-12 {
|
||||
flex: 0 0 calc(100%/12 * 12);
|
||||
}
|
||||
</style>
|
||||
56
node_modules/uview-ui/components/u-th/u-th.vue
generated
vendored
Normal file
56
node_modules/uview-ui/components/u-th/u-th.vue
generated
vendored
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<view class="u-th" :style="[thStyle]">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* th th单元格
|
||||
* @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: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
inject: ['uTable'],
|
||||
computed: {
|
||||
thStyle() {
|
||||
let style = {};
|
||||
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}`;
|
||||
style.borderRight = `solid 1px ${this.uTable.borderColor}`;
|
||||
Object.assign(style, this.uTable.thStyle);
|
||||
return style;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-th {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: $u-main-color;
|
||||
font-weight: bold;
|
||||
background-color: rgb(245, 246, 248);
|
||||
}
|
||||
</style>
|
||||
81
node_modules/uview-ui/components/u-time-line-item/u-time-line-item.vue
generated
vendored
Normal file
81
node_modules/uview-ui/components/u-time-line-item/u-time-line-item.vue
generated
vendored
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view class="u-time-axis-item">
|
||||
<slot name="content" />
|
||||
<view class="u-time-axis-node" :style="[nodeStyle]">
|
||||
<slot name="node">
|
||||
<view class="u-dot">
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* timeLineItem 时间轴Item
|
||||
* @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: {
|
||||
type: String,
|
||||
default: "#ffffff"
|
||||
},
|
||||
// 节点左边图标绝对定位的top值
|
||||
nodeTop: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
nodeStyle() {
|
||||
let style = {
|
||||
backgroundColor: this.bgColor,
|
||||
};
|
||||
if (this.nodeTop != "") style.top = this.nodeTop + 'rpx';
|
||||
return style;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-time-axis-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.u-time-axis-node {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
left: -40rpx;
|
||||
transform-origin: 0;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.u-dot {
|
||||
height: 16rpx;
|
||||
width: 16rpx;
|
||||
border-radius: 100rpx;
|
||||
background: #ddd;
|
||||
}
|
||||
</style>
|
||||
41
node_modules/uview-ui/components/u-time-line/u-time-line.vue
generated
vendored
Normal file
41
node_modules/uview-ui/components/u-time-line/u-time-line.vue
generated
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<view class="u-time-axis">
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* timeLine 时间轴
|
||||
* @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。
|
||||
* @tutorial https://www.uviewui.com/components/timeLine.html
|
||||
* @example <u-time-line></u-time-line>
|
||||
*/
|
||||
export default {
|
||||
name: "u-time-line",
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-time-axis {
|
||||
padding-left: 40rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-time-axis::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 12rpx;
|
||||
width: 1px;
|
||||
bottom: 0;
|
||||
border-left: 1px solid #ddd;
|
||||
transform-origin: 0 0;
|
||||
transform: scaleX(0.5);
|
||||
}
|
||||
</style>
|
||||
211
node_modules/uview-ui/components/u-toast/u-toast.vue
generated
vendored
Normal file
211
node_modules/uview-ui/components/u-toast/u-toast.vue
generated
vendored
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<view class="u-toast" :class="[isShow ? 'u-show' : '', 'u-type-' + config.type, 'u-position-' + config.position]" :style="{
|
||||
zIndex: uZIndex
|
||||
}">
|
||||
<view class="u-icon-wrap">
|
||||
<u-icon v-if="config.icon" class="u-icon" :name="iconName" :size="30" :color="$u.color[config.type]"></u-icon>
|
||||
</view>
|
||||
<text class="u-text">{{config.title}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* toast 消息提示
|
||||
* @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: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
timer: null, // 定时器
|
||||
config: {
|
||||
params: {}, // URL跳转的参数，对象
|
||||
title: '', // 显示文本
|
||||
type: '', // 主题类型，primary，success，error，warning，black
|
||||
duration: 2000, // 显示的时间，毫秒
|
||||
isTab: false, // 是否跳转tab页面
|
||||
url: '', // toast消失后是否跳转页面，有则跳转
|
||||
icon: true, // 显示的图标
|
||||
position: 'center', // toast出现的位置
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
iconName() {
|
||||
// 只有不为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;
|
||||
}
|
||||
},
|
||||
uZIndex() {
|
||||
// 显示toast时候，如果用户有传递z-index值，有限使用
|
||||
return this.isShow ? (this.zIndex ? this.zIndex : this.$u.zIndex.toast) : '999999';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 显示toast组件，由父组件通过this.$refs.xxx.show(options)形式调用
|
||||
show(options) {
|
||||
this.config = Object.assign(this.config, options);
|
||||
if (this.timer) {
|
||||
// 清除定时器
|
||||
clearTimeout(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
this.isShow = true;
|
||||
this.timer = setTimeout(() => {
|
||||
// 倒计时结束，清除定时器，隐藏toast组件
|
||||
this.isShow = false;
|
||||
clearTimeout(this.timer);
|
||||
this.timer = null;
|
||||
this.timeEnd();
|
||||
}, this.config.duration);
|
||||
},
|
||||
// 隐藏toast组件，由父组件通过this.$refs.xxx.hide()形式调用
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
if (this.timer) {
|
||||
// 清除定时器
|
||||
clearTimeout(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
},
|
||||
// 倒计时结束之后，进行的一些操作
|
||||
timeEnd() {
|
||||
// 如果带有url值，根据isTab为true或者false进行跳转
|
||||
if (this.config.url) {
|
||||
// 如果url没有"/"开头，添加上，因为uni的路由跳转需要"/"开头
|
||||
if (this.config.url[0] != '/') this.config.url = '/' + this.config.url;
|
||||
// 判断是否有传递显式的参数
|
||||
if (Object.keys(this.config.params).length) {
|
||||
// 判断用户传递的url中，是否带有参数
|
||||
// 使用正则匹配，主要依据是判断是否有"/","?","="等，如“/page/index/index?name=mary"
|
||||
// 如果有params参数，转换后无需带上"?"
|
||||
let query = '';
|
||||
if (/.*\/.*\?.*=.*/.test(this.config.url)) {
|
||||
// object对象转为get类型的参数
|
||||
query = this.$u.queryParams(this.config.params, false);
|
||||
this.config.url = this.config.url + "&" + query;
|
||||
} else {
|
||||
query = this.$u.queryParams(this.config.params);
|
||||
this.config.url += query;
|
||||
}
|
||||
}
|
||||
// 如果是跳转tab页面，就使用uni.switchTab
|
||||
if (this.config.isTab) {
|
||||
uni.switchTab({
|
||||
url: this.config.url
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: this.config.url
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-toast {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
transition: opacity 0.3s;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 8rpx;
|
||||
background: #585858;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
padding:0 40rpx;
|
||||
}
|
||||
|
||||
.u-toast.u-show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.u-text {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
margin-right: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.u-position-center {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.u-position-top {
|
||||
left: 50%;
|
||||
top: 20%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.u-position-bottom {
|
||||
left: 50%;
|
||||
bottom: 20%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.u-type-primary {
|
||||
color: $u-type-primary;
|
||||
background-color: $u-type-primary-light;
|
||||
border: 1px solid rgb(215, 234, 254);
|
||||
}
|
||||
|
||||
.u-type-success {
|
||||
color: $u-type-success;
|
||||
background-color: $u-type-success-light;
|
||||
border: 1px solid #BEF5C8;
|
||||
}
|
||||
|
||||
.u-type-error {
|
||||
color: $u-type-error;
|
||||
background-color: $u-type-error-light;
|
||||
border: 1px solid #fde2e2;
|
||||
}
|
||||
|
||||
.u-type-warning {
|
||||
color: $u-type-warning;
|
||||
background-color: $u-type-warning-light;
|
||||
border: 1px solid #faecd8;
|
||||
}
|
||||
|
||||
.u-type-info {
|
||||
color: $u-type-info;
|
||||
background-color: $u-type-info-light;
|
||||
border: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.u-type-default {
|
||||
color: #fff;
|
||||
background-color: #585858;
|
||||
}
|
||||
</style>
|
||||
119
node_modules/uview-ui/components/u-top-tips/u-top-tips.vue
generated
vendored
Normal file
119
node_modules/uview-ui/components/u-top-tips/u-top-tips.vue
generated
vendored
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<view class="u-tips" :class="['u-' + type, isShow ? 'u-tip-show' : '']" :style="{
|
||||
top: navbarHeight + 'px',
|
||||
zIndex: uZIndex
|
||||
}">{{ title }}</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* topTips 顶部提示
|
||||
* @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"></u-top-tips>
|
||||
*/
|
||||
export default {
|
||||
name: "u-top-tips",
|
||||
props: {
|
||||
// 导航栏高度，用于提示的初始化
|
||||
navbarHeight: {
|
||||
type: [Number, String],
|
||||
// #ifndef H5
|
||||
default: 0,
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
default: 44,
|
||||
// #endif
|
||||
},
|
||||
// z-index值
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null, // 定时器
|
||||
isShow: false, // 是否显示消息组件
|
||||
title: '', // 组件中显示的消息内容
|
||||
type: 'primary', // 消息的类型（颜色不同），primary，success，error，warning，info
|
||||
duration: 2000, // 组件显示的时间，单位为毫秒
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
uZIndex() {
|
||||
return this.zIndex ? this.zIndex : this.$u.zIndex.topTips;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show(config = {}) {
|
||||
// 先清除定时器（可能是上一次定义的，需要清除了再开始新的）
|
||||
clearTimeout(this.timer);
|
||||
// 时间，内容，类型主题(type)等参数
|
||||
if (config.duration) this.duration = config.duration;
|
||||
if (config.type) this.type = config.type;
|
||||
this.title = config.title;
|
||||
this.isShow = true;
|
||||
// 倒计时
|
||||
this.timer = setTimeout(() => {
|
||||
this.isShow = false;
|
||||
clearTimeout(this.timer);
|
||||
this.timer = null;
|
||||
}, this.duration);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 顶部弹出类型样式
|
||||
.u-tips {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
padding: 20rpx 30rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
// 此处为最核心点，translateY(-100%)意味着将其从Y轴隐藏（隐藏到顶部(h5)或者说导航栏(app)下面）
|
||||
transform: translateY(-100%);
|
||||
transition: all 0.35s linear;
|
||||
}
|
||||
|
||||
.u-tip-show {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.u-primary {
|
||||
background: $u-type-primary;
|
||||
}
|
||||
|
||||
.u-success {
|
||||
background: $u-type-success;
|
||||
}
|
||||
|
||||
.u-warning {
|
||||
background: $u-type-warning;
|
||||
}
|
||||
|
||||
.u-error {
|
||||
background: $u-type-error;
|
||||
}
|
||||
|
||||
.u-info {
|
||||
background: $u-type-info;
|
||||
}
|
||||
</style>
|
||||
34
node_modules/uview-ui/components/u-tr/u-tr.vue
generated
vendored
Normal file
34
node_modules/uview-ui/components/u-tr/u-tr.vue
generated
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<view class="u-tr">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* tr 表格行标签
|
||||
* @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 {
|
||||
uTr: this,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.uTd && this.uTd.tr) {
|
||||
this.uTd.tr.push(this);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-tr {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
509
node_modules/uview-ui/components/u-upload/u-upload.vue
generated
vendored
Normal file
509
node_modules/uview-ui/components/u-upload/u-upload.vue
generated
vendored
Normal file
@@ -0,0 +1,509 @@
|
||||
<template>
|
||||
<view class="u-upload" v-if="!disabled">
|
||||
<view v-if="showUploadList" class="u-list-item u-preview-wrap" v-for="(item, index) in lists" :key="index" :style="{
|
||||
width: width + 'rpx',
|
||||
height: width + 'rpx'
|
||||
}">
|
||||
<view v-if="deletable" class="u-delete-icon" @tap.stop="deleteItem(index)" :style="{
|
||||
background: delBgColor
|
||||
}">
|
||||
<u-icon class="u-icon" :name="delIcon" size="20" :color="delColor"></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>
|
||||
<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>
|
||||
</view>
|
||||
<slot name="file" :file="lists"></slot>
|
||||
<view style="display: inline-block;" @tap="selectFile" v-if="maxCount > lists.length">
|
||||
<slot name="addBtn"></slot>
|
||||
<view v-if="!customBtn" class="u-list-item u-add-wrap" hover-class="u-add-wrap__hover" hover-stay-time="150" :style="{
|
||||
width: width + 'rpx',
|
||||
height: width + 'rpx'
|
||||
}">
|
||||
<u-icon name="plus" class="u-add-btn" size="40" @click="selectFile"></u-icon>
|
||||
<view class="u-add-tips">{{uploadText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* upload 图片上传
|
||||
* @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 {String} del-icon 右上角删除图标名称，只能为uView内置图标
|
||||
* @property {String} del-bg-color 右上角关闭按钮的背景颜色
|
||||
* @property {String} del-color 右上角关闭按钮图标的颜色
|
||||
* @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: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 后端地址
|
||||
action: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 最大上传数量
|
||||
maxCount: {
|
||||
type: [String, Number],
|
||||
default: 52
|
||||
},
|
||||
// 是否显示进度条
|
||||
showProgress: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否启用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 预览上传的图片时的裁剪模式，和image组件mode属性一致
|
||||
imageMode: {
|
||||
type: String,
|
||||
default: 'aspectFill'
|
||||
},
|
||||
// 头部信息
|
||||
header: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 额外携带的参数
|
||||
formData: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 上传的文件字段名
|
||||
name: {
|
||||
type: String,
|
||||
default: 'file'
|
||||
},
|
||||
// 所选的图片的尺寸, 可选值为original compressed
|
||||
sizeType: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['original', 'compressed']
|
||||
}
|
||||
},
|
||||
sourceType: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['album', 'camera']
|
||||
}
|
||||
},
|
||||
// 是否在点击预览图后展示全屏图片预览
|
||||
previewFullImage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否开启图片多选，部分安卓机型不支持
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否展示删除按钮
|
||||
deletable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 文件大小限制，单位为byte
|
||||
maxSize: {
|
||||
type: [String, Number],
|
||||
default: Number.MAX_VALUE
|
||||
},
|
||||
// 显示已上传的文件列表
|
||||
fileList: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 上传区域的提示文字
|
||||
uploadText: {
|
||||
type: String,
|
||||
default: '选择图片'
|
||||
},
|
||||
// 是否自动上传
|
||||
autoUpload: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示toast消息提示
|
||||
showTips: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否通过slot自定义传入选择图标的按钮
|
||||
customBtn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 内部预览图片区域和选择图片按钮的区域宽度，高等于宽
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: 200
|
||||
},
|
||||
// 右上角关闭按钮的背景颜色
|
||||
delBgColor: {
|
||||
type: String,
|
||||
default: '#fa3534'
|
||||
},
|
||||
// 右上角关闭按钮的叉号图标的颜色
|
||||
delColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
// 右上角删除图标名称，只能为uView内置图标
|
||||
delIcon: {
|
||||
type: String,
|
||||
default: 'close'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lists: [],
|
||||
isInCount: true,
|
||||
uploading: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
fileList: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
val.map(value => {
|
||||
this.lists.push({url: value.url, error: false, progress: 100});
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 清除列表
|
||||
clear() {
|
||||
this.lists = [];
|
||||
// 如果是清空形式的话，发出"on-list-change"事件
|
||||
this.$emit('on-list-change', this.lists);
|
||||
},
|
||||
// 重新上传队列中上传失败的所有文件
|
||||
reUpload() {
|
||||
this.uploadFile();
|
||||
},
|
||||
// 选择图片
|
||||
selectFile() {
|
||||
if (this.disabled) return;
|
||||
const {
|
||||
name = '', maxCount, multiple, maxSize, sizeType, lists, camera, compressed, maxDuration, sourceType
|
||||
} = this;
|
||||
let chooseFile = null;
|
||||
const newMaxCount = maxCount - lists.length;
|
||||
// 设置为只选择图片的时候使用 chooseImage 来实现
|
||||
chooseFile = new Promise((resolve, reject) => {
|
||||
uni.chooseImage({
|
||||
count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
|
||||
sourceType: sourceType,
|
||||
sizeType,
|
||||
success: resolve,
|
||||
fail: reject
|
||||
});
|
||||
});
|
||||
chooseFile
|
||||
.then((res) => {
|
||||
let file = null;
|
||||
let listOldLength = this.lists.length;
|
||||
res.tempFiles.map((val, index) => {
|
||||
// 如果是非多选，index大于等于1或者超出最大限制数量时，不处理
|
||||
if (!multiple && index >= 1) return;
|
||||
if (val.size > maxSize) {
|
||||
this.$emit('on-oversize', val, this.lists);
|
||||
this.showToast('超出允许的文件大小');
|
||||
} else {
|
||||
if(maxCount <= lists.length) {
|
||||
this.$emit('on-exceed', val, this.lists);
|
||||
this.showToast('超出最大允许的文件个数');
|
||||
return ;
|
||||
}
|
||||
lists.push({
|
||||
url: val.path,
|
||||
progress: 0,
|
||||
error: false
|
||||
});
|
||||
// 列表发生改变，发出事件，第二个参数为当前发生变化的项的索引
|
||||
this.$emit('on-list-change', this.lists);
|
||||
}
|
||||
})
|
||||
// 每次图片选择完，抛出一个事件，并将当前内部选择的图片数组抛出去
|
||||
this.$emit('on-choose-complete', this.lists);
|
||||
if(this.autoUpload) this.uploadFile(listOldLength);
|
||||
})
|
||||
.catch(error => {
|
||||
// this.$emit('on-error', error);
|
||||
});
|
||||
},
|
||||
// 提示用户消息
|
||||
showToast(message, force = false) {
|
||||
if(this.showTips || force) {
|
||||
uni.showToast({
|
||||
title: message,
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
},
|
||||
// 该方法供用户通过ref调用，手动上传
|
||||
upload() {
|
||||
this.uploadFile();
|
||||
},
|
||||
// 对失败的图片重新上传
|
||||
retry(index) {
|
||||
this.lists[index].progress = 0;
|
||||
this.lists[index].error = false;
|
||||
this.lists[index].response = null;
|
||||
uni.showLoading({
|
||||
title: '重新上传'
|
||||
});
|
||||
this.uploadFile(index);
|
||||
},
|
||||
// 上传图片
|
||||
uploadFile(index = 0) {
|
||||
if (this.disabled) return;
|
||||
if(this.uploading) return ;
|
||||
// 全部上传完成
|
||||
if (index >= this.lists.length) {
|
||||
this.$emit('on-uploaded', this.lists);
|
||||
return ;
|
||||
}
|
||||
// 检查上传地址
|
||||
if (!this.action) {
|
||||
this.showToast('请配置上传地址', true);
|
||||
return;
|
||||
}
|
||||
// 检查是否是已上传或者正在上传中
|
||||
if (this.lists[index].progress == 100) {
|
||||
if(this.autoUpload == false) this.uploadFile(index + 1);
|
||||
return;
|
||||
}
|
||||
this.lists[index].error = false;
|
||||
this.uploading = true;
|
||||
// 创建上传对象
|
||||
const task = uni.uploadFile({
|
||||
url: this.action,
|
||||
filePath: this.lists[index].url,
|
||||
name: this.name,
|
||||
formData: this.formData,
|
||||
header: this.header,
|
||||
success: (res) => {
|
||||
if (![200,201].includes(res.statusCode)) {
|
||||
this.uploadError(index, res.data);
|
||||
} else {
|
||||
// 上传成功
|
||||
this.lists[index].response = res.data;
|
||||
this.lists[index].progress = 100;
|
||||
this.lists[index].error = false;
|
||||
this.$emit('on-success', res.data, index, this.lists);
|
||||
}
|
||||
},
|
||||
fail: (e) => {
|
||||
this.uploadError(index, e);
|
||||
},
|
||||
complete: (res) => {
|
||||
uni.hideLoading();
|
||||
this.uploading = false;
|
||||
this.uploadFile(index + 1);
|
||||
this.$emit('on-change', res, index, this.lists);
|
||||
}
|
||||
});
|
||||
task.onProgressUpdate((res) => {
|
||||
if (res.progress > 0) {
|
||||
this.lists[index].progress = res.progress;
|
||||
this.$emit('on-progress', res, index, this.lists);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 上传失败
|
||||
uploadError(index, err) {
|
||||
this.lists[index].progress = 0;
|
||||
this.lists[index].error = true;
|
||||
this.lists[index].response = null;
|
||||
this.$emit('on-error', err, index, this.lists);
|
||||
this.showToast('上传失败，请重试');
|
||||
},
|
||||
// 删除一个图片
|
||||
deleteItem(index) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您确定要删除此项吗？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
if (this.lists[index].process < 100 && this.lists[index].process > 0) {
|
||||
typeof this.lists[index].uploadTask != 'undefined' && this.lists[index].uploadTask.abort();
|
||||
}
|
||||
this.lists.splice(index, 1);
|
||||
this.$forceUpdate();
|
||||
this.$emit('on-remove', index, this.lists);
|
||||
this.showToast('移除成功');
|
||||
// 列表发生改变，发出事件
|
||||
this.$emit('on-list-change', this.lists);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 用户通过ref手动的形式，移除一张图片
|
||||
remove(index) {
|
||||
// 判断索引的合法范围
|
||||
if(index >= 0 && index < this.lists.length) {
|
||||
this.lists.splice(index, 1);
|
||||
this.$emit('on-list-change', this.lists);
|
||||
}
|
||||
},
|
||||
// 预览图片
|
||||
doPreviewImage(url, index) {
|
||||
if (!this.previewFullImage)
|
||||
return;
|
||||
const images = this.lists.map(item => item.url || item.path);
|
||||
uni.previewImage({
|
||||
urls: images,
|
||||
current: url,
|
||||
success: () => {
|
||||
this.$emit('on-preview', url, this.lists);
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '预览图片失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-upload {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-list-item {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
overflow: hidden;
|
||||
margin: 10rpx;
|
||||
background: rgb(244, 245, 246);
|
||||
position: relative;
|
||||
border-radius: 10rpx;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-preview-wrap {
|
||||
border: 1px solid rgb(235, 236, 238);
|
||||
}
|
||||
|
||||
.u-add-wrap {
|
||||
flex-direction: column;
|
||||
color: $u-content-color;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.u-add-tips {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.u-add-wrap__hover {
|
||||
background-color: rgb(235, 236, 238);
|
||||
}
|
||||
|
||||
.u-preview-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.u-delete-icon {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
z-index: 10;
|
||||
background-color: $u-type-error;
|
||||
border-radius: 100rpx;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-progress {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
left: 8rpx;
|
||||
right: 8rpx;
|
||||
z-index: 9;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.u-error-btn {
|
||||
color: #FFFFFF;
|
||||
background-color: $u-type-error;
|
||||
font-size: 20rpx;
|
||||
padding: 4px 0;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
157
node_modules/uview-ui/components/u-verification-code/u-verification-code.vue
generated
vendored
Normal file
157
node_modules/uview-ui/components/u-verification-code/u-verification-code.vue
generated
vendored
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view class="u-code-wrap">
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* verificationCode 验证码输入框
|
||||
* @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 倒计结束的提示语，见官网说明（默认重新获取）
|
||||
* @property {Boolean} keep-running 是否在H5刷新或各端返回再进入时继续倒计时（默认false）
|
||||
* @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: {
|
||||
type: [String, Number],
|
||||
default: 60
|
||||
},
|
||||
// 尚未开始时提示
|
||||
startText: {
|
||||
type: String,
|
||||
default: '获取验证码'
|
||||
},
|
||||
// 正在倒计时中的提示
|
||||
changeText: {
|
||||
type: String,
|
||||
default: 'X秒重新获取'
|
||||
},
|
||||
// 倒计时结束时的提示
|
||||
endText: {
|
||||
type: String,
|
||||
default: '重新获取'
|
||||
},
|
||||
// 是否在H5刷新或各端返回再进入时继续倒计时
|
||||
keepRunning: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
secNum: this.seconds,
|
||||
timer: null,
|
||||
canGetCode: true, // 是否可以执行验证码操作
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.checkKeepRunning();
|
||||
},
|
||||
watch: {
|
||||
seconds: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.secNum = n;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkKeepRunning() {
|
||||
// 获取上一次退出页面(H5还包括刷新)时的时间戳，如果没有上次的保存，此值可能为空
|
||||
let lastTimestamp = Number(uni.getStorageSync('$uCountDownTimestamp'));
|
||||
// 当前秒的时间戳
|
||||
let nowTimestamp = Math.floor((+ new Date()) / 1000);
|
||||
// 判断当前的时间戳，是否小于上一次的本该按设定结束，却提前结束的时间戳
|
||||
if(this.keepRunning && lastTimestamp && lastTimestamp > nowTimestamp) {
|
||||
// 剩余尚未执行完的倒计秒数
|
||||
this.secNum = lastTimestamp - nowTimestamp;
|
||||
// 清除本地保存的变量
|
||||
uni.setStorageSync('$uCountDownTimestamp', 0);
|
||||
// 开始倒计时
|
||||
this.start();
|
||||
} else {
|
||||
// 如果不存在需要继续上一次的倒计时，执行正常的逻辑
|
||||
this.changeEvent(this.startText);
|
||||
}
|
||||
},
|
||||
// 开始倒计时
|
||||
start() {
|
||||
// 防止快速点击获取验证码的按钮而导致内部产生多个定时器导致混乱
|
||||
if(this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
//this.secNum = this.seconds;
|
||||
this.$emit('start');
|
||||
this.canGetCode = false;
|
||||
// 这里放这句，是为了一开始时就提示，否则要等setInterval的1秒后才会有提示
|
||||
this.changeEvent(this.changeText.replace(/x|X/, this.secNum));
|
||||
this.timer = setInterval(() => {
|
||||
if (--this.secNum) {
|
||||
// 用当前倒计时的秒数替换提示字符串中的"x"字母
|
||||
this.changeEvent(this.changeText.replace(/x|X/, this.secNum));
|
||||
} else {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
this.changeEvent(this.endText);
|
||||
this.secNum = this.seconds;
|
||||
this.$emit('end');
|
||||
this.canGetCode = true;
|
||||
}
|
||||
this.setTimeToStorage();
|
||||
}, 1000);
|
||||
},
|
||||
// 重置，可以让用户再次获取验证码
|
||||
reset() {
|
||||
this.canGetCode = true;
|
||||
clearInterval(this.timer);
|
||||
this.secNum = this.seconds;
|
||||
this.changeEvent(this.endText);
|
||||
},
|
||||
changeEvent(text) {
|
||||
this.$emit('change', text);
|
||||
},
|
||||
// 保存时间戳，为了防止倒计时尚未结束，H5刷新或者各端的右上角返回上一页再进来
|
||||
setTimeToStorage() {
|
||||
if(!this.keepRunning) return ;
|
||||
// 记录当前的时间戳，为了下次进入页面，如果还在倒计时内的话，继续倒计时
|
||||
// 倒计时尚未结束，结果大于0；倒计时已经开始，就会小于初始值，如果等于初始值，说明没有开始倒计时，无需处理
|
||||
if(this.secNum > 0 && this.secNum < this.seconds) {
|
||||
// 获取当前时间戳(+ new Date()为特殊写法)，除以1000变成秒，再去除小数部分
|
||||
let nowTimestamp = Math.floor((+ new Date()) / 1000);
|
||||
// 将本该结束时候的时间戳保存起来 => 当前时间戳 + 剩余的秒数
|
||||
uni.setStorage({
|
||||
key: '$uCountDownTimestamp',
|
||||
data: nowTimestamp + this.secNum
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 组件销毁的时候，清除定时器，否则定时器会继续存在，系统不会自动清除
|
||||
beforeDestroy() {
|
||||
clearTimeout(this.timer);
|
||||
this.timer = null;
|
||||
this.setTimeToStorage();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-code-wrap {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
178
node_modules/uview-ui/components/u-waterfall/u-waterfall.vue
generated
vendored
Normal file
178
node_modules/uview-ui/components/u-waterfall/u-waterfall.vue
generated
vendored
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<view class="u-waterfall">
|
||||
<view id="u-left-cloumn" class="u-cloumn"><slot name="left" :leftList="leftList"></slot></view>
|
||||
<view id="u-right-cloumn" class="u-cloumn"><slot name="right" :rightList="rightList"></slot></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* waterfall 瀑布流
|
||||
* @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: {
|
||||
value: {
|
||||
// 瀑布流数据
|
||||
type: Array,
|
||||
required: true,
|
||||
default: function() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 每次向结构插入数据的时间间隔，间隔越长，越能保证两列高度相近，但是对用户体验越不好
|
||||
// 单位ms
|
||||
addTime: {
|
||||
type: [Number, String],
|
||||
default: 200
|
||||
},
|
||||
// id值，用于清除某一条数据时，根据此idKey名称找到并移除，如数据为{idx: 22, name: 'lisa'}
|
||||
// 那么该把idKey设置为idx
|
||||
idKey: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
uWaterfall: this
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
leftList: [],
|
||||
rightList: [],
|
||||
tempList: [],
|
||||
children: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
copyFlowList(nVal, oVal) {
|
||||
// 取差值，即这一次数组变化新增的部分
|
||||
let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
|
||||
// 拼接上原有数据
|
||||
this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
|
||||
this.splitData();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.tempList = this.cloneData(this.copyFlowList);
|
||||
this.splitData();
|
||||
},
|
||||
computed: {
|
||||
// 破坏flowList变量的引用，否则watch的结果新旧值是一样的
|
||||
copyFlowList() {
|
||||
return this.cloneData(this.value);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async splitData() {
|
||||
if (!this.tempList.length) return;
|
||||
let leftRect = await this.$uGetRect('#u-left-cloumn');
|
||||
let rightRect = await this.$uGetRect('#u-right-cloumn');
|
||||
// 如果左边小于或等于右边，就添加到左边，否则添加到右边
|
||||
let item = this.tempList[0];
|
||||
// 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰
|
||||
// 数组可能变成[]，导致此item值可能为undefined
|
||||
if(!item) return ;
|
||||
if (leftRect.height < rightRect.height) {
|
||||
this.leftList.push(item);
|
||||
} else if (leftRect.height > rightRect.height) {
|
||||
this.rightList.push(item);
|
||||
} else {
|
||||
// 这里是为了保证第一和第二张添加时，左右都能有内容
|
||||
// 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
|
||||
if (this.leftList.length <= this.rightList.length) {
|
||||
this.leftList.push(item);
|
||||
} else {
|
||||
this.rightList.push(item);
|
||||
}
|
||||
}
|
||||
// 移除临时列表的第一项
|
||||
this.tempList.splice(0, 1);
|
||||
// 如果临时数组还有数据，继续循环
|
||||
if (this.tempList.length) {
|
||||
setTimeout(() => {
|
||||
this.splitData();
|
||||
}, this.addTime)
|
||||
}
|
||||
},
|
||||
// 复制而不是引用对象和数组
|
||||
cloneData(data) {
|
||||
return JSON.parse(JSON.stringify(data));
|
||||
},
|
||||
// 清空数据列表
|
||||
clear() {
|
||||
this.leftList = [];
|
||||
this.rightList = [];
|
||||
// 同时清除父组件列表中的数据
|
||||
this.$emit('input', []);
|
||||
},
|
||||
// 清除某一条指定的数据，根据id实现
|
||||
remove(id) {
|
||||
// 如果findIndex找不到合适的条件，就会返回-1
|
||||
let index = -1;
|
||||
index = this.leftList.findIndex(val => val[this.idKey] == id);
|
||||
if(index != -1) {
|
||||
// 如果index不等于-1，说明已经找到了要找的id，根据index索引删除这一条数据
|
||||
this.leftList.splice(index, 1);
|
||||
} else {
|
||||
// 同理于上方面的方法
|
||||
index = this.rightList.findIndex(val => val[this.idKey] == id);
|
||||
if(index != -1) this.rightList.splice(index, 1);
|
||||
}
|
||||
// 同时清除父组件的数据中的对应id的条目
|
||||
index = this.value.findIndex(val => val[this.idKey] == id);
|
||||
if(index != -1) this.$emit('input', this.value.splice(index, 1));
|
||||
},
|
||||
// 修改某条数据的某个属性
|
||||
modify(id, key, value) {
|
||||
// 如果findIndex找不到合适的条件，就会返回-1
|
||||
let index = -1;
|
||||
index = this.leftList.findIndex(val => val[this.idKey] == id);
|
||||
if(index != -1) {
|
||||
// 如果index不等于-1，说明已经找到了要找的id，修改对应key的值
|
||||
this.leftList[key] = value;
|
||||
} else {
|
||||
// 同理于上方面的方法
|
||||
index = this.rightList.findIndex(val => val[this.idKey] == id);
|
||||
if(index != -1) this.leftList[key] = value;
|
||||
}
|
||||
// 修改父组件的数据中的对应id的条目
|
||||
index = this.value.findIndex(val => val[this.idKey] == id);
|
||||
if(index != -1) {
|
||||
// 首先复制一份value的数据
|
||||
let data = this.cloneData(this.value);
|
||||
// 修改对应索引的key属性的值为value
|
||||
data[index][key] = value;
|
||||
// 修改父组件通过v-model绑定的变量的值
|
||||
this.$emit('input', data);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-waterfall {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.u-cloumn {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.u-image {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user