Commit 9b81b9b4 authored by wlxuqu's avatar wlxuqu

1. 【新增】新增u-reset-button样式类,用于清除button自带的样式,同时具备button在小程序上的各项能力

2. 【修复】修复picker组件设置默认值无效的问题
3. 【新增】新增轻巧精致的dropdown下拉菜单组件
4. 【修复】number-box的blur事件无效的问题
5. 【修复】修复slider的max值大于100时,滑动按钮可能会溢出边界的问题
6. 【优化】移除http请求中,出错时弹出的modal
7. 【新增】新增$u.test.code(value, length)判断是否验证码
8. 【优化】优化button组件在某些场景下,某个边框可能会被裁剪的问题
parent 11aab1b9
......@@ -130,7 +130,7 @@
},
"optimization" : {
"treeShaking" : {
"enable" : true
"enable" : false
}
},
"title" : "uView UI"
......
......@@ -2,14 +2,14 @@
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"condition": { //模式配置,仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "test", //模式名称
"path": "pages/componentsB/dropdown/index", //启动页面,必选
"query": "id=1&name=2" //启动参数,在页面的onLoad函数里面得到
}]
},
// "condition": { //模式配置,仅开发期间生效
// "current": 0, //当前激活的模式(list 的索引项)
// "list": [{
// "name": "test", //模式名称
// "path": "pages/componentsC/test/index", //启动页面,必选
// "query": "id=1&name=2" //启动参数,在页面的onLoad函数里面得到
// }]
// },
"pages": [
// 演示-组件
{
......
<template>
<view class="">
<view class="">
<view class="u-demo-title">演示效果</view>
<view class="u-m-t-50">
<view class="u-demo-area u-flex u-row-center">
<u-dropdown ref="uDropdown">
<u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item>
<u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item>
<u-dropdown :close-on-click-mask="mask" ref="uDropdown" :activeColor="activeColor" :borderBottom="borderBottom">
<u-dropdown-item @change="change" v-model="value1" title="距离" :options="options1"></u-dropdown-item>
<u-dropdown-item @change="change" v-model="value2" title="温度" :options="options2"></u-dropdown-item>
<u-dropdown-item title="属性">
<view class="slot-content">
<view class="item-box">
<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick(index)" v-for="(item, index) in list" :key="index">
{{item.text}}
{{item.label}}
</view>
</view>
<u-button type="primary" @click="closeDropdown">确定</u-button>
......@@ -22,24 +20,20 @@
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置时
</view>
<!-- <view class="u-config-item">
<view class="u-item-title">颜色</view>
<u-subsection vibrateShort :list="['primary', 'success', 'warning', 'error', 'info']" @change="colorChange"></u-subsection>
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">线条类型</view>
<u-subsection vibrateShort :list="['实线', '方形虚线', '圆点虚线']" @change="borderStyleChange"></u-subsection>
<view class="u-item-title">下边框</view>
<u-subsection vibrateShort current="1" :list="['有', '无']" @change="borderChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">细边</view>
<u-subsection vibrateShort :list="['是', '否']" @change="hairLineChange"></u-subsection>
<view class="u-item-title">激活颜色</view>
<u-subsection vibrateShort :list="['#2979ff', '#ff9900', '#19be6b']" @change="activeColorChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">方向</view>
<u-subsection vibrateShort :list="['水平', '垂直']" @change="directionChange"></u-subsection>
</view> -->
<view class="u-item-title">遮罩是否可点击</view>
<u-subsection vibrateShort :list="['是', '否']" @change="maskChange"></u-subsection>
</view>
</view>
</view>
</template>
......@@ -50,105 +44,92 @@
return {
value1: '',
value2: '2',
value3: '',
mask: true,
options1: [{
text: '默认排序',
label: '默认排序',
value: 1,
icon: 'map'
},
{
text: '距离优先',
label: '距离优先',
value: 2,
icon: 'map'
},
{
text: '价格优先',
label: '价格优先',
value: 3,
icon: 'map'
}
],
options2: [{
text: '去冰',
label: '去冰',
value: 1,
icon: 'map'
},
{
text: '加冰',
label: '加冰',
value: 2,
icon: 'map'
},
{
text: '正常温',
label: '正常温',
value: 3,
icon: 'map'
},
{
text: '加热',
label: '加热',
value: 4,
icon: 'map'
},
{
text: '极寒风暴',
label: '极寒风暴',
value: 5,
icon: 'map'
}
],
list: [{
text: '琪花瑶草',
label: '琪花瑶草',
active: true,
},
{
text: '清词丽句',
label: '清词丽句',
active: false,
},
{
text: '宛转蛾眉',
label: '宛转蛾眉',
active: false,
},
{
text: '煦色韶光',
label: '煦色韶光',
active: false,
},
{
text: '鱼沉雁落',
label: '鱼沉雁落',
active: false,
},
{
text: '章台杨柳',
label: '章台杨柳',
active: false,
},
{
text: '霞光万道',
label: '霞光万道',
active: false,
}
],
direction: 'row',
hairLine: true,
length: '100%',
color: this.$u.color['primary'],
borderStyle: 'solid'
borderBottom: false,
activeColor: '#2979ff'
}
},
methods: {
colorChange(index) {
this.color = this.$u.color[['primary', 'success', 'warning', 'error', 'info'][index]];
borderChange(index) {
this.borderBottom = !index;
},
hairLineChange(index) {
this.hairLine = !index;
activeColorChange(index) {
this.activeColor = ['#2979ff', '#ff9900', '#19be6b'][index];
},
directionChange(index) {
this.direction = index == 0 ? 'row' : 'col';
if (index == 0) this.length = '100%';
else this.length = '50rpx';
change(index) {
this.$u.toast(`点击了第${index}项`);
},
borderStyleChange(index) {
this.borderStyle = ['solid', 'dashed', 'dotted'][index];
closeDropdown() {
this.$refs.uDropdown.close();
},
tagClick(index) {
this.list[index].active = !this.list[index].active;
},
closeDropdown() {
this.$refs.uDropdown.close();
maskChange(index) {
this.mask = !index;
}
}
}
......
<template>
<view class="">
<u-modal v-model="show" content="点击确定进行授权">
<button open-type="getUserInfo" class="u-reset-button" slot="confirm-button" @getuserinfo="getuserinfo">确定</button>
</u-modal>
<u-button @click="show = true">打开modal</u-button>
<view class="wrap">
<view class="pre-box" v-if="!showUploadList">
<view class="pre-item" v-for="(item, index) in lists" :key="index">
<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
</view>
</view>
<u-upload :custom-btn="true" ref="uUpload" :show-upload-list="showUploadList" :action="action">
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
</view>
</u-upload>
</view>
</template>
......@@ -11,13 +17,58 @@
export default {
data() {
return {
show: true
action: 'http://192.168.100.17/index.php/index/index/upload', // 演示地址
showUploadList: false,
// 如果将某个ref的组件实例赋值给data中的变量,在小程序中会因为循环引用而报错
// 这里直接获取内部的lists变量即可
lists: []
}
},
methods: {
getuserinfo(res) {
console.log(res);
}
// 只有onReady生命周期才能调用refs操作组件
onReady() {
// 得到整个组件对象,内部图片列表变量为"lists"
this.lists = this.$refs.uUpload.lists;
}
}
</script>
<style lang="scss">
.wrap {
padding: 24rpx;
}
.slot-btn {
width: 341rpx;
height: 140rpx;
display: flex;
justify-content: center;
align-items: center;
background: rgb(244, 245, 246);
border-radius: 10rpx;
}
.slot-btn__hover {
background-color: rgb(235, 236, 238);
}
.pre-box {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.pre-item {
flex: 0 0 48.5%;
border-radius: 10rpx;
height: 140rpx;
overflow: hidden;
position: relative;
margin-bottom: 20rpx;
}
.pre-item-image {
width: 100%;
height: 140rpx;
}
</style>
\ No newline at end of file
......@@ -339,7 +339,8 @@ export default {
border: 0;
//border-radius: 10rpx;
display: inline-block;
overflow: hidden;
// 避免边框某些场景可能被“裁剪”,不能设置为hidden
overflow: visible;
line-height: 1;
display: flex;
align-items: center;
......
......@@ -2,7 +2,7 @@
<view class="u-dropdown-item" v-if="active" @touchmove.stop.prevent @tap.stop.prevent>
<view class="u-dropdown-item__options" v-if="!$slots.default">
<u-cell-group>
<u-cell-item @click="cellClick(item.value)" :arrow="false" :title="item.text" v-for="(item, index) in options" :key="index" :title-style="{
<u-cell-item @click="cellClick(item.value)" :arrow="false" :title="item.label" v-for="(item, index) in options" :key="index" :title-style="{
color: value == item.value ? activeColor : inactiveColor
}">
<u-icon v-if="value == item.value" name="checkbox-mark" :color="activeColor" size="32"></u-icon>
......@@ -39,13 +39,6 @@
type: Boolean,
default: false
},
// 标题自定义样式,对象形式
titleStyle: {
type: Object,
default () {
return {}
}
},
},
data() {
return {
......@@ -81,7 +74,10 @@
parent.children.push(this);
if(parent.children.length == 1) this.active = true;
// 父组件无法监听children的变化,故将子组件的title,传入父组件的menuList数组中
parent.menuList.push(this.title);
parent.menuList.push({
title: this.title,
disabled: this.disabled
});
}
}
}
......
<template>
<view class="u-dropdown" @touchmove.stop.prevent>
<view class="u-dropdown__menu">
<view class="u-dropdown__menu" :style="{
height: $u.addUnit(height)
}" :class="{
'u-border-bottom': borderBottom
}">
<view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
<view class="u-flex">
<text class="u-dropdown__menu__item__text" :style="{
color: index === current ? activeColor : '#606266'
}">{{item}}</text>
<view class="u-dropdown__menu__item__arrow">
<u-icon :name="index === current ? 'arrow-up' : 'arrow-down'" size="26" :color="index === current ? activeColor : '#c0c4cc'"></u-icon>
color: item.disabled ? '#c0c4cc' : index === current ? activeColor : inactiveColor,
fontSize: $u.addUnit(titleSize)
}">{{item.title}}</text>
<view class="u-dropdown__menu__item__arrow" :class="{
'u-dropdown__menu__item__arrow--rotate': index === current
}">
<u-icon :custom-style="{display: 'flex'}" name="arrow-down" size="26" :color="index === current ? activeColor : '#c0c4cc'"></u-icon>
</view>
</view>
</view>
</view>
<view class="u-dropdown__content" :style="[contentStyle, {
transition: `all ${duration / 1000}s linear`
}]" @tap="menuClick(current)">
transition: `opacity ${duration / 1000}s linear`
}]" @tap="maskClick">
<view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
<slot></slot>
</view>
......@@ -36,16 +43,6 @@
type: String,
default: '#606266'
},
// 菜单展开方向,bottom-向上展开,top-向下展开
direction: {
type: String,
default: 'top'
},
// 是否展示遮罩
mask: {
type: Boolean,
default: false
},
// 点击遮罩是否关闭菜单
closeOnClickMask: {
type: Boolean,
......@@ -60,6 +57,21 @@
duration: {
type: [Number, String],
default: 300
},
// 标题菜单的高度,单位任意,数值默认为rpx单位
height: {
type: [Number, String],
default: 80
},
// 是否显示下边框
borderBottom: {
type: Boolean,
default: false
},
// 标题的字体大小
titleSize: {
type: [Number, String],
default: 28
}
},
data() {
......@@ -91,8 +103,10 @@
methods: {
// 点击菜单
menuClick(index) {
// 判断是否被禁用
if(this.menuList[index].disabled) return ;
// 如果点击时的索引和当前激活项索引相同,意味着点击了激活项,需要收起下拉菜单
if (index === this.current) {
if (index === this.current && this.closeOnClickSelf) {
this.close();
// 等动画结束后,再移除下拉菜单中的内容,否则直接移除,也就没有下拉菜单收起的效果了
setTimeout(() => {
......@@ -124,6 +138,12 @@
zIndex: -1,
opacity: 0
}
},
// 点击遮罩
maskClick() {
// 如果不允许点击遮罩,直接返回
if(!this.closeOnClickMask) return;
this.close();
}
}
}
......@@ -134,6 +154,7 @@
.u-dropdown {
flex: 1;
width: 100%;
&__menu {
display: flex;
......@@ -148,7 +169,7 @@
align-items: center;
&__text {
font-size: 26rpx;
font-size: 28rpx;
color: $u-content-color;
}
......@@ -156,6 +177,11 @@
margin-left: 6rpx;
transition: transform .3s;
align-items: center;
display: flex;
&--rotate {
transform: rotate(180deg);
}
}
}
}
......
......@@ -80,7 +80,7 @@ export default {
},
// 图标右边或者下面的文字
label: {
type: String,
type: [String, Number],
default: ''
},
// label的位置,只能右边或者下边
......
......@@ -285,6 +285,7 @@
this.$nextTick(() => {
this.inputVal = val;
})
this.handleChange(val, 'blur');
},
handleChange(value, type) {
if (this.disabled) return;
......
......@@ -22,54 +22,54 @@
</view>
<view class="u-picker-body">
<picker-view v-if="mode == 'region'" :value="valueArr" @change="change" class="u-picker-view" @pickstart="pickstart" @pickend="pickend">
<picker-view-column v-if="params.province">
<picker-view-column v-if="!reset && 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">
<picker-view-column v-if="!reset && 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">
<picker-view-column v-if="!reset && 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" @pickstart="pickstart" @pickend="pickend">
<picker-view-column v-if="params.year">
<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="params.month">
<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="params.day">
<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="params.hour">
<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="params.minute">
<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="params.second">
<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>
......@@ -77,14 +77,14 @@
</picker-view-column>
</picker-view>
<picker-view v-else-if="mode == 'selector'" :value="valueArr" @change="change" class="u-picker-view" @pickstart="pickstart" @pickend="pickend">
<picker-view-column>
<picker-view-column v-if="!reset">
<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="valueArr" @change="change" class="u-picker-view" @pickstart="pickstart" @pickend="pickend">
<picker-view-column v-for="(item, index) in range" :key="index">
<picker-view-column v-if="!reset" 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>
......@@ -264,6 +264,7 @@ export default {
hour: 0,
minute: 0,
second: 0,
reset: false,
startDate: '',
endDate: '',
valueArr: [],
......@@ -298,6 +299,7 @@ export default {
},
watch: {
propsChange() {
this.reset = true;
setTimeout(() => this.init(), 10);
},
// 如果地区发生变化,为了让picker联动起来,必须重置this.citys和this.areas
......@@ -313,6 +315,7 @@ export default {
// 微信和QQ小程序由于一些奇怪的原因(故同时对所有平台均初始化一遍),需要重新初始化才能显示正确的值
value(n) {
if (n) {
this.reset = true;
setTimeout(() => this.init(), 10);
}
}
......@@ -374,6 +377,7 @@ export default {
},
init() {
this.valueArr = [];
this.reset = false;
if (this.mode == 'time') {
this.initTimeValue();
if (this.params.year) {
......
......@@ -176,6 +176,8 @@ export default {
updateValue(value, drag) {
// 去掉小数部分,同时也是对step步进的处理
const width = this.format(value);
// 不允许滑动的值超过max最大值,百分比也不能超过100
if(width > this.max || width > 100) return;
// 设置移动的百分比值
let barStyle = {
width: width + '%'
......
......@@ -28,7 +28,7 @@
<view class="u-steps__item__dot" v-if="mode == 'dot'" :style="{
backgroundColor: index <= current ? activeColor : unActiveColor
}"></view>
<text :style="{
<text class="u-line-1" :style="{
color: index <= current ? activeColor : unActiveColor,
}" :class="['u-steps__item__text--' + direction]">
{{ item.name }}
......
......@@ -321,7 +321,8 @@ export default {
lists.push({
url: val.path,
progress: 0,
error: false
error: false,
file: val
});
}
});
......@@ -544,7 +545,7 @@ export default {
.u-add-wrap {
flex-direction: column;
color: $u-content-color;
font-size: 28rpx;
font-size: 26rpx;
}
.u-add-tips {
......
......@@ -29,6 +29,10 @@ u-switch {
display: inline-flex;
align-items: center;
}
u-dropdown {
flex: 1;
}
/* #endif */
/* end-微信小程序编译后页面有组件名的元素,特别处理--end */
......
......@@ -191,7 +191,6 @@ function array(value) {
}
}
/**
* 是否对象
*/
......@@ -199,6 +198,13 @@ function object(value) {
return Object.prototype.toString.call(value) === '[object Object]';
}
/**
* 是否短信验证码
*/
function code(value, len = 6) {
return new RegExp(`^\\d{${len}}$`).test(value);
}
export default {
email,
......@@ -222,5 +228,6 @@ export default {
jsonString,
landline,
object,
array
array,
code
}
......@@ -64,11 +64,11 @@ class Request {
}
} else {
// 不返回原始数据的情况下,服务器状态码不为200,modal弹框提示
if(response.errMsg) {
uni.showModal({
title: response.errMsg
});
}
// if(response.errMsg) {
// uni.showModal({
// title: response.errMsg
// });
// }
reject(response)
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment