Commit bb453ec0 authored by wlxuqu's avatar wlxuqu

Merge branch 'yiruiwen' into dev

parents 4f8c388d 7d463c81
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"name" : "uView", "name" : "uView",
"appid" : "__UNI__60F4B81", "appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架", "description" : "多平台快速开发的UI框架",
"versionName" : "1.5.5", "versionName" : "1.5.6",
"versionCode" : "100", "versionCode" : "100",
"transformPx" : false, "transformPx" : false,
"app-plus" : { "app-plus" : {
......
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
"easycom": { "easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}, },
// "condition": { //模式配置,仅开发期间生效 "condition": { //模式配置,仅开发期间生效
// "current": 0, //当前激活的模式(list 的索引项) "current": 0, //当前激活的模式(list 的索引项)
// "list": [{ "list": [{
// "name": "test", //模式名称 "name": "test", //模式名称
// "path": "pages/componentsB/table/index", //启动页面,必选 "path": "pages/componentsA/avatar/index", //启动页面,必选
// "query": "id=1&name=2" //启动参数,在页面的onLoad函数里面得到 "query": "id=1&name=2" //启动参数,在页面的onLoad函数里面得到
// }] }]
// }, },
"pages": [ "pages": [
// 演示-组件 // 演示-组件
{ {
...@@ -828,22 +828,22 @@ ...@@ -828,22 +828,22 @@
"backgroundColor": "#FFFFFF", "backgroundColor": "#FFFFFF",
"borderStyle": "black", "borderStyle": "black",
"list": [{ "list": [{
"pagePath": "pages/example/components", "pagePath": "pages/example/components"
"iconPath": "static/uview/example/component.png", // "iconPath": "static/uview/example/component.png",
"selectedIconPath": "static/uview/example/component_select.png", // "selectedIconPath": "static/uview/example/component_select.png",
"text": "组件" // "text": "组件"
}, },
{ {
"pagePath": "pages/example/js", "pagePath": "pages/example/js"
"iconPath": "static/uview/example/js.png", // "iconPath": "static/uview/example/js.png",
"selectedIconPath": "static/uview/example/js_select.png", // "selectedIconPath": "static/uview/example/js_select.png",
"text": "工具" // "text": "工具"
}, },
{ {
"pagePath": "pages/example/template", "pagePath": "pages/example/template"
"iconPath": "static/uview/example/template.png", // "iconPath": "static/uview/example/template.png",
"selectedIconPath": "static/uview/example/template_select.png", // "selectedIconPath": "static/uview/example/template_select.png",
"text": "模板" // "text": "模板"
} }
] ]
} }
......
...@@ -3,8 +3,16 @@ ...@@ -3,8 +3,16 @@
<view class="u-demo-wrap"> <view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <view class="u-demo-area">
<u-avatar :mode="mode" :size="size" :src="src" :text="text"> <u-avatar
</u-avatar> :mode="mode"
:size="size"
:src="src"
:text="text"
:showLevel="showLevel"
:showSex="showSex"
:sexIcon="sexIcon"
:bgColor='bgColor'
></u-avatar>
</view> </view>
</view> </view>
<view class="u-config-wrap"> <view class="u-config-wrap">
...@@ -15,9 +23,17 @@ ...@@ -15,9 +23,17 @@
<view class="u-item-title">模式选择</view> <view class="u-item-title">模式选择</view>
<u-subsection vibrateShort :list="['圆形', '圆角方形']" @change="modeChange"></u-subsection> <u-subsection vibrateShort :list="['圆形', '圆角方形']" @change="modeChange"></u-subsection>
</view> </view>
<view class="u-config-item">
<view class="u-item-title">性别选择</view>
<u-subsection vibrateShort :list="['男', '女', '不显示']" @change="sexChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">等级</view>
<u-subsection vibrateShort :list="['显示', '不显示']" @change="levelChange"></u-subsection>
</view>
<view class="u-config-item"> <view class="u-config-item">
<view class="u-item-title">自定义内容</view> <view class="u-item-title">自定义内容</view>
<u-subsection vibrateShort current="1" :list="['默认', '图片', '文字']" @change="styleChange"></u-subsection> <u-subsection vibrateShort current="0" :list="['图片', '文字']" @change="styleChange"></u-subsection>
</view> </view>
<view class="u-config-item"> <view class="u-config-item">
<view class="u-item-title">尺寸</view> <view class="u-item-title">尺寸</view>
...@@ -34,7 +50,11 @@ ...@@ -34,7 +50,11 @@
mode: 'circle', mode: 'circle',
src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg', src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
text: '', // 优先级比src高 text: '', // 优先级比src高
size: '90' size: '90',
showLevel: true,
showSex: true,
sexIcon: 'man',
bgColor: '#fcbd71'
} }
}, },
methods: { methods: {
...@@ -43,9 +63,6 @@ ...@@ -43,9 +63,6 @@
}, },
styleChange(index) { styleChange(index) {
if(index == 0) { if(index == 0) {
this.src = '';
this.text = '';
} else if(index == 1) {
this.text = ''; this.text = '';
this.src = 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'; this.src = 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg';
} else { } else {
...@@ -54,8 +71,16 @@ ...@@ -54,8 +71,16 @@
}, },
sizeChange(index) { sizeChange(index) {
this.size = index == 0 ? 'large' : index == 1 ? 'default' : index == 2 ? 'mini' : 160; this.size = index == 0 ? 'large' : index == 1 ? 'default' : index == 2 ? 'mini' : 160;
},
sexChange(index) {
this.showSex = true;
if(index == 0) this.sexIcon = 'man';
if(index == 1) this.sexIcon = 'woman';
if(index == 2) this.showSex = false;
},
levelChange(index) {
this.showLevel = !index;
} }
} }
} }
</script> </script>
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <view class="u-demo-area">
<u-toast ref="uToast"></u-toast> <u-toast ref="uToast"></u-toast>
<u-sticky :offset-top="offsetTop" :enable="enable" @fixed="fixed"> <u-sticky :offset-top="offsetTop" :enable="enable" @fixed="fixed" @unfixed="unfixed">
<view class="sticky"> <view class="sticky">
宝剑锋从磨砺出,梅花香自苦寒来 宝剑锋从磨砺出,梅花香自苦寒来
</view> </view>
...@@ -51,6 +51,12 @@ ...@@ -51,6 +51,12 @@
type: 'warning', type: 'warning',
title: '触发吸顶' title: '触发吸顶'
}) })
},
unfixed() {
this.$refs.uToast.show({
type: 'success',
title: '取消吸顶'
})
} }
} }
} }
......
...@@ -18,7 +18,9 @@ ...@@ -18,7 +18,9 @@
</view> </view>
<view class="demo-shop">{{ item.shop }}</view> <view class="demo-shop">{{ item.shop }}</view>
<!-- 微信小程序无效,因为它不支持在template中引入组件 --> <!-- 微信小程序无效,因为它不支持在template中引入组件 -->
<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> <view class="u-close">
<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
</view>
</view> </view>
</template> </template>
<template v-slot:right="{ rightList }"> <template v-slot:right="{ rightList }">
...@@ -37,7 +39,9 @@ ...@@ -37,7 +39,9 @@
</view> </view>
<view class="demo-shop">{{ item.shop }}</view> <view class="demo-shop">{{ item.shop }}</view>
<!-- 微信小程序无效,因为它不支持在template中引入组件 --> <!-- 微信小程序无效,因为它不支持在template中引入组件 -->
<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> <view class="u-close">
<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
</view>
</view> </view>
</template> </template>
</u-waterfall> </u-waterfall>
......
...@@ -32,7 +32,8 @@ ...@@ -32,7 +32,8 @@
list: [{ list: [{
text: '最是人间留不住', text: '最是人间留不住',
}, { }, {
text: '朱颜辞镜花辞树' text: '朱颜辞镜花辞树',
disabled: true
}, { }, {
text: '正是江南好风景' text: '正是江南好风景'
}, { }, {
......
<template> <template>
<view class="u-content"> <view>
<u-dropdown-list></u-dropdown-list> <u-popup v-model="show" @close="close">
<view>出淤泥而不染,濯清涟而不妖</view>
</u-popup>
<u-button @click="show = true">打开</u-button>
</view> </view>
</template> </template>
...@@ -8,25 +11,13 @@ ...@@ -8,25 +11,13 @@
export default { export default {
data() { data() {
return { return {
content: ` show: false
<p>露从今夜白,月是故乡明</p>
<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
`
} }
}, },
methods: {
close() {
console.log('close');
} }
</script>
<style lang="scss" scoped>
.u-content {
margin-top: 100rpx;
color: $u-content-color;
font-size: 32rpx;
line-height: 1.8;
// 标签形式无效
p {
color: $u-tips-color;
} }
} }
</style> </script>
\ No newline at end of file
...@@ -198,13 +198,11 @@ export default [{ ...@@ -198,13 +198,11 @@ export default [{
icon: 'sticky', icon: 'sticky',
title: 'Sticky 吸顶', title: 'Sticky 吸顶',
}, },
// #ifndef MP-ALIPAY
{ {
path: '/pages/componentsB/waterfall/index', path: '/pages/componentsB/waterfall/index',
icon: 'waterfall', icon: 'waterfall',
title: 'Waterfall 瀑布流', title: 'Waterfall 瀑布流',
}, },
// #endif
{ {
path: '/pages/componentsB/divider/index', path: '/pages/componentsB/divider/index',
icon: 'divider', icon: 'divider',
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
</u-cell-group> </u-cell-group>
</view> </view>
<u-gap height="70"></u-gap> <u-gap height="70"></u-gap>
<u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar>
</view> </view>
</template> </template>
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
</u-cell-group> </u-cell-group>
</view> </view>
<u-gap height="70"></u-gap> <u-gap height="70"></u-gap>
<u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar>
</view> </view>
</template> </template>
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
</u-cell-group> </u-cell-group>
</view> </view>
<u-gap height="70"></u-gap> <u-gap height="70"></u-gap>
<u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar>
</view> </view>
</template> </template>
......
static/uview/example/js.png

3.14 KB | W: | H:

static/uview/example/js.png

4.14 KB | W: | H:

static/uview/example/js.png
static/uview/example/js.png
static/uview/example/js.png
static/uview/example/js.png
  • 2-up
  • Swipe
  • Onion skin
static/uview/example/js_select.png

2.2 KB | W: | H:

static/uview/example/js_select.png

4.18 KB | W: | H:

static/uview/example/js_select.png
static/uview/example/js_select.png
static/uview/example/js_select.png
static/uview/example/js_select.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -36,6 +36,27 @@ const store = new Vuex.Store({ ...@@ -36,6 +36,27 @@ const store = new Vuex.Store({
// 如果vuex_version无需保存到本地永久存储,无需lifeData.vuex_version方式 // 如果vuex_version无需保存到本地永久存储,无需lifeData.vuex_version方式
vuex_version: '1.0.1', vuex_version: '1.0.1',
vuex_demo: '绛紫', vuex_demo: '绛紫',
// 自定义tabbar数据
vuex_tabbar: [{
iconPath: "/static/uview/example/component.png",
selectedIconPath: "/static/uview/example/component_select.png",
text: '组件',
pagePath: '/pages/example/components'
},
{
iconPath: "/static/uview/example/js.png",
selectedIconPath: "/static/uview/example/js_select.png",
text: '工具',
midButton: true,
pagePath: '/pages/example/js'
},
{
iconPath: "/static/uview/example/template.png",
selectedIconPath: "/static/uview/example/template_select.png",
text: '模板',
pagePath: '/pages/example/template'
}
]
}, },
mutations: { mutations: {
$uStore(state, payload) { $uStore(state, payload) {
......
...@@ -5,8 +5,14 @@ ...@@ -5,8 +5,14 @@
{{tips.text}} {{tips.text}}
</view> </view>
<block v-for="(item, index) in list" :key="index"> <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' : '']" <view
hover-class="u-hover-class" :hover-stay-time="150"> @touchmove.stop.prevent
@tap="itemClick(index)"
:style="[itemStyle(index)]"
class="u-action-sheet-item"
:class="[index < list.length - 1 ? 'u-border-bottom' : '']"
:hover-stay-time="150"
>
{{item.text}} {{item.text}}
</view> </view>
</block> </block>
...@@ -112,6 +118,8 @@ ...@@ -112,6 +118,8 @@
let style = {}; let style = {};
if (this.list[index].color) style.color = this.list[index].color; if (this.list[index].color) style.color = this.list[index].color;
if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + 'rpx'; if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + 'rpx';
// 选项被禁用的样式
if (this.list[index].disabled) style.color = '#c0c4cc';
return style; return style;
} }
}, },
...@@ -132,8 +140,10 @@ ...@@ -132,8 +140,10 @@
popupClose() { popupClose() {
this.$emit('input', false); this.$emit('input', false);
}, },
// 点击某一个itemif (!this.show) return; // 点击某一个item
itemClick(index) { itemClick(index) {
// disabled的项禁止点击
if(this.list[index].disabled) return;
this.$emit('click', index); this.$emit('click', index);
this.$emit('input', false); this.$emit('input', false);
} }
......
...@@ -3,13 +3,21 @@ ...@@ -3,13 +3,21 @@
<image <image
@error="loadError" @error="loadError"
:style="[imgStyle]" :style="[imgStyle]"
class="u-avatar-img" class="u-avatar__img"
v-if="!text && avatar" v-if="!uText && avatar"
:src="avatar" :src="avatar"
:mode="mode" :mode="mode"
></image> ></image>
<text class="u-line-1" v-else-if="text">{{text}}</text> <text class="u-line-1" v-else-if="uText" :style="{
fontSize: '38rpx'
}">{{uText}}</text>
<slot v-else></slot> <slot v-else></slot>
<view class="u-avatar__sex" v-if="showSex" :class="['u-avatar__sex--' + sexIcon]" :style="[uSexStyle]">
<u-icon :name="sexIcon" size="20"></u-icon>
</view>
<view class="u-avatar__level" v-if="showLevel" :style="[uLevelStyle]">
<u-icon :name="levelIcon" size="20"></u-icon>
</view>
</view> </view>
</template> </template>
...@@ -23,7 +31,12 @@ ...@@ -23,7 +31,12 @@
* @property {String} src 头像路径,如加载失败,将会显示默认头像 * @property {String} src 头像路径,如加载失败,将会显示默认头像
* @property {String Number} size 头像尺寸,可以为指定字符串(large, default, mini),或者数值,单位rpx(默认default) * @property {String Number} size 头像尺寸,可以为指定字符串(large, default, mini),或者数值,单位rpx(默认default)
* @property {String} mode 显示类型,见上方说明(默认circle) * @property {String} mode 显示类型,见上方说明(默认circle)
* @property {String} text 用文字替代图片,级别优先于src * @property {String} sex-icon 性别图标,man-男,woman-女(默认man)
* @property {String} level-icon 等级图标(默认level)
* @property {String} sex-bg-color 性别图标背景颜色
* @property {String} level-bg-color 等级图标背景颜色
* @property {String} show-sex 是否显示性别图标(默认false)
* @property {String} show-level 是否显示等级图标(默认false)
* @property {String} img-mode 头像图片的裁剪类型,与uni的image组件的mode参数一致,如效果达不到需求,可尝试传widthFix值(默认aspectFill) * @property {String} img-mode 头像图片的裁剪类型,与uni的image组件的mode参数一致,如效果达不到需求,可尝试传widthFix值(默认aspectFill)
* @property {String} index 用户传递的标识符值,如果是列表循环,可穿v-for的index值 * @property {String} index 用户传递的标识符值,如果是列表循环,可穿v-for的index值
* @event {Function} click 头像被点击 * @event {Function} click 头像被点击
...@@ -67,6 +80,36 @@ ...@@ -67,6 +80,36 @@
index: { index: {
type: [String, Number], type: [String, Number],
default: '' default: ''
},
// 右上角性别角标,man-男,woman-女
sexIcon: {
type: String,
default: 'man'
},
// 右下角的等级图标
levelIcon: {
type: String,
default: 'level'
},
// 右下角等级图标背景颜色
levelBgColor: {
type: String,
default: ''
},
// 右上角性别图标的背景颜色
sexBgColor: {
type: String,
default: ''
},
// 是否显示性别图标
showSex: {
type: Boolean,
default: false
},
// 是否显示等级图标
showLevel: {
type: Boolean,
default: false
} }
}, },
data() { data() {
...@@ -99,6 +142,22 @@ ...@@ -99,6 +142,22 @@
style.borderRadius = this.mode == 'circle' ? '500px' : '5px'; style.borderRadius = this.mode == 'circle' ? '500px' : '5px';
return style; return style;
}, },
// 取字符串的第一个字符
uText() {
return String(this.text)[0];
},
// 性别图标的自定义样式
uSexStyle() {
let style = {};
if(this.sexBgColor) style.backgroundColor = this.sexBgColor;
return style;
},
// 等级图标的自定义样式
uLevelStyle() {
let style = {};
if(this.levelBgColor) style.backgroundColor = this.levelBgColor;
return style;
}
}, },
methods: { methods: {
// 图片加载错误时,显示默认头像 // 图片加载错误时,显示默认头像
...@@ -123,11 +182,54 @@ ...@@ -123,11 +182,54 @@
font-size: 28rpx; font-size: 28rpx;
color: $u-content-color; color: $u-content-color;
border-radius: 10px; border-radius: 10px;
overflow: hidden; position: relative;
}
.u-avatar-img { &__img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
&__sex {
position: absolute;
width: 32rpx;
color: #ffffff;
height: 32rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100rpx;
top: 5%;
z-index: 1;
right: -7%;
border: 1px #ffffff solid;
&--man {
background-color: $u-type-primary;
}
&--woman {
background-color: $u-type-error;
}
&--none {
background-color: $u-type-warning;
}
}
&__level {
position: absolute;
width: 32rpx;
color: #ffffff;
height: 32rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100rpx;
bottom: 5%;
z-index: 1;
right: -7%;
border: 1px #ffffff solid;
background-color: $u-type-warning;
}
}
</style> </style>
...@@ -66,6 +66,7 @@ ...@@ -66,6 +66,7 @@
* @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台,在 ios 上为雪花,Android上为圆圈) * @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台,在 ios 上为雪花,Android上为圆圈)
* @property {String} form-type 用于 <form> 组件,点击分别会触发 <form> 组件的 submit/reset 事件 * @property {String} form-type 用于 <form> 组件,点击分别会触发 <form> 组件的 submit/reset 事件
* @property {String} open-type 开放能力 * @property {String} open-type 开放能力
* @property {String} data-name 额外传参参数,用于小程序的data-xxx属性,通过target.dataset.name获取
* @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果(App-nvue 平台暂不支持) * @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果(App-nvue 平台暂不支持)
* @property {Number} hover-start-time 按住后多久出现点击态,单位毫秒 * @property {Number} hover-start-time 按住后多久出现点击态,单位毫秒
* @property {Number} hover-stay-time 手指松开后点击态保留时间,单位毫秒 * @property {Number} hover-stay-time 手指松开后点击态保留时间,单位毫秒
...@@ -245,7 +246,7 @@ export default { ...@@ -245,7 +246,7 @@ export default {
this.getWaveQuery(e); this.getWaveQuery(e);
}); });
} }
this.$emit('click'); this.$emit('click', e);
}, },
// 查询按钮的节点信息 // 查询按钮的节点信息
getWaveQuery(e) { getWaveQuery(e) {
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
flex: `0 0 ${100 / 12 * span}%`, flex: `0 0 ${100 / 12 * span}%`,
alignItems: uAlignItem, alignItems: uAlignItem,
justifyContent: uJustify, justifyContent: uJustify,
textAlign: this.textAlign textAlign: textAlign
}" @tap.stop.prevent="click"> }" @tap.stop.prevent="click">
<slot></slot> <slot></slot>
</view> </view>
......
...@@ -34,6 +34,9 @@ ...@@ -34,6 +34,9 @@
* @property {String} label-pos label相对于图标的位置,只能right或bottom(默认right) * @property {String} label-pos label相对于图标的位置,只能right或bottom(默认right)
* @property {String} index 一个用于区分多个图标的值,点击图标时通过click事件传出 * @property {String} index 一个用于区分多个图标的值,点击图标时通过click事件传出
* @property {String} hover-class 图标按下去的样式类,用法同uni的view组件的hover-class参数,详情见官网 * @property {String} hover-class 图标按下去的样式类,用法同uni的view组件的hover-class参数,详情见官网
* @property {String} width 显示图片小图标时的宽度
* @property {String} height 显示图片小图标时的高度
* @property {String} top 图标在垂直方向上的定位
* @event {Function} click 点击图标时触发 * @event {Function} click 点击图标时触发
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon> * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
*/ */
...@@ -127,6 +130,21 @@ export default { ...@@ -127,6 +130,21 @@ export default {
return {} return {}
} }
}, },
// 用于显示图片小图标时,图片的宽度
width: {
type: [String, Number],
default: ''
},
// 用于显示图片小图标时,图片的高度
height: {
type: [String, Number],
default: ''
},
// 用于解决某些情况下,让图标垂直居中的用途
top: {
type: [String, Number],
default: ''
}
}, },
computed: { computed: {
customClass() { customClass() {
...@@ -148,7 +166,9 @@ export default { ...@@ -148,7 +166,9 @@ export default {
let style = {}; let style = {};
style = { style = {
fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size), fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size),
fontWeight: this.bold ? 'bold' : 'normal' fontWeight: this.bold ? 'bold' : 'normal',
// 安卓和iOS各需要设置一个到顶部的距离,才能更好的垂直居中
top: this.top === '' ? (this.$u.os == 'ios' ? '2rpx' : '4rpx') : 0
}; };
// 非主题色值时,才当作颜色值 // 非主题色值时,才当作颜色值
if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color; if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color;
...@@ -160,8 +180,9 @@ export default { ...@@ -160,8 +180,9 @@ export default {
}, },
imgStyle() { imgStyle() {
let style = {}; let style = {};
style.width = this.$u.addUnit(this.size); // 如果设置width和height属性,则优先使用,否则使用size属性
style.height = this.$u.addUnit(this.size); style.width = this.width ? this.$u.addUnit(this.width) : this.$u.addUnit(this.size);
style.height = this.height ? this.$u.addUnit(this.height) : this.$u.addUnit(this.size);
return style; return style;
} }
}, },
...@@ -205,6 +226,8 @@ export default { ...@@ -205,6 +226,8 @@ export default {
} }
&__icon { &__icon {
position: relative;
&--primary { &--primary {
color: $u-type-primary; color: $u-type-primary;
} }
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
}" }"
> >
<slot v-if="$slots.loading" name="loading" /> <slot v-if="$slots.loading" name="loading" />
<u-icon v-else :name="loadingIcon"></u-icon> <u-icon v-else :name="loadingIcon" :width="width" :height="height"></u-icon>
</view> </view>
<view <view
v-if="showError && isError && !loading" v-if="showError && isError && !loading"
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
}" }"
> >
<slot v-if="$slots.error" name="error" /> <slot v-if="$slots.error" name="error" />
<u-icon v-else :name="errorIcon"></u-icon> <u-icon v-else :name="errorIcon" :width="width" :height="height"></u-icon>
</view> </view>
</view> </view>
</template> </template>
...@@ -54,6 +54,8 @@ ...@@ -54,6 +54,8 @@
* @property {Boolean} show-loading 是否显示加载中的图标或者自定义的slot(默认 true) * @property {Boolean} show-loading 是否显示加载中的图标或者自定义的slot(默认 true)
* @property {Boolean} show-error 是否显示加载错误的图标或者自定义的slot(默认 true) * @property {Boolean} show-error 是否显示加载错误的图标或者自定义的slot(默认 true)
* @property {Boolean} fade 是否需要淡入效果(默认 true) * @property {Boolean} fade 是否需要淡入效果(默认 true)
* @property {String Number} width 传入图片路径时图片的宽度
* @property {String Number} height 传入图片路径时图片的高度
* @property {Boolean} webp 只支持网络资源,只对微信小程序有效(默认 false) * @property {Boolean} webp 只支持网络资源,只对微信小程序有效(默认 false)
* @property {String | Number} duration 搭配fade参数的过渡时间,单位ms(默认 500) * @property {String | Number} duration 搭配fade参数的过渡时间,单位ms(默认 500)
* @event {Function} click 点击图片时触发 * @event {Function} click 点击图片时触发
...@@ -62,6 +64,7 @@ ...@@ -62,6 +64,7 @@
* @example <u-image width="100%" height="300rpx" :src="src"></u-image> * @example <u-image width="100%" height="300rpx" :src="src"></u-image>
*/ */
export default { export default {
name: 'u-image',
props: { props: {
// 图片地址 // 图片地址
src: { src: {
......
...@@ -24,6 +24,8 @@ ...@@ -24,6 +24,8 @@
:fixed="fixed" :fixed="fixed"
:focus="focus" :focus="focus"
:autoHeight="autoHeight" :autoHeight="autoHeight"
:selection-end="uSelectionEnd"
:selection-start="uSelectionStart"
@input="handleInput" @input="handleInput"
@blur="handleBlur" @blur="handleBlur"
@focus="onFocus" @focus="onFocus"
...@@ -43,6 +45,8 @@ ...@@ -43,6 +45,8 @@
:focus="focus" :focus="focus"
:confirmType="confirmType" :confirmType="confirmType"
:cursor-spacing="getCursorSpacing" :cursor-spacing="getCursorSpacing"
:selection-end="uSelectionEnd"
:selection-start="uSelectionStart"
@focus="onFocus" @focus="onFocus"
@blur="handleBlur" @blur="handleBlur"
@input="handleInput" @input="handleInput"
...@@ -78,6 +82,8 @@ import Emitter from '../../libs/util/emitter.js'; ...@@ -78,6 +82,8 @@ import Emitter from '../../libs/util/emitter.js';
* @property {String} placeholder placeholder显示值(默认 '请输入内容') * @property {String} placeholder placeholder显示值(默认 '请输入内容')
* @property {Boolean} disabled 是否禁用输入框(默认false) * @property {Boolean} disabled 是否禁用输入框(默认false)
* @property {String Number} maxlength 输入框的最大可输入长度(默认140) * @property {String Number} maxlength 输入框的最大可输入长度(默认140)
* @property {String Number} selection-start 光标起始位置,自动聚焦时有效,需与selection-end搭配使用(默认-1)
* @property {String Number} maxlength 光标结束位置,自动聚焦时有效,需与selection-start搭配使用(默认-1)
* @property {String Number} cursor-spacing 指定光标与键盘的距离,单位px(默认0) * @property {String Number} cursor-spacing 指定光标与键盘的距离,单位px(默认0)
* @property {String} placeholderStyle placeholder的样式,字符串形式,如"color: red;"(默认 "color: #c0c4cc;") * @property {String} placeholderStyle placeholder的样式,字符串形式,如"color: red;"(默认 "color: #c0c4cc;")
* @property {String} confirm-type 设置键盘右下角按钮的文字,仅在type为text时生效(默认done) * @property {String} confirm-type 设置键盘右下角按钮的文字,仅在type为text时生效(默认done)
...@@ -184,6 +190,16 @@ export default { ...@@ -184,6 +190,16 @@ export default {
cursorSpacing: { cursorSpacing: {
type: [Number, String], type: [Number, String],
default: 0 default: 0
},
// 光标起始位置,自动聚焦时有效,需与selection-end搭配使用
selectionStart: {
type: [Number, String],
default: -1
},
// 光标结束位置,自动聚焦时有效,需与selection-start搭配使用
selectionEnd: {
type: [Number, String],
default: -1
} }
}, },
data() { data() {
...@@ -223,6 +239,14 @@ export default { ...@@ -223,6 +239,14 @@ export default {
// //
getCursorSpacing() { getCursorSpacing() {
return Number(this.cursorSpacing); return Number(this.cursorSpacing);
},
// 光标起始位置
uSelectionStart() {
return String(this.selectionStart);
},
// 光标结束位置
uSelectionEnd() {
return String(this.selectionEnd);
} }
}, },
created() { created() {
......
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
<slot /> <slot />
<view class="u-tooltip" v-if="tooltip"> <view class="u-tooltip" v-if="tooltip">
<view class="u-tooltip-item u-tooltip-cancel" hover-class="u-tooltip-cancel-hover" @tap="onCancel"> <view class="u-tooltip-item u-tooltip-cancel" hover-class="u-tooltip-cancel-hover" @tap="onCancel">
{{cancelBtn ? '取消' : ''}} {{cancelBtn ? cancelText : ''}}
</view> </view>
<view v-if="showTips" class="u-tooltip-item u-tooltip-tips"> <view v-if="showTips" class="u-tooltip-item u-tooltip-tips">
{{tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘'}} {{tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘'}}
</view> </view>
<view v-if="confirmBtn" @tap="onConfirm" class="u-tooltip-item u-tooltips-submit" hover-class="u-tooltips-submit-hover"> <view v-if="confirmBtn" @tap="onConfirm" class="u-tooltip-item u-tooltips-submit" hover-class="u-tooltips-submit-hover">
{{confirmBtn ? '完成' : ''}} {{confirmBtn ? confirmText : ''}}
</view> </view>
</view> </view>
<block v-if="mode == 'number' || mode == 'card'"> <block v-if="mode == 'number' || mode == 'card'">
...@@ -34,6 +34,8 @@ ...@@ -34,6 +34,8 @@
* @property {Boolean} cancel-btn 是否显示工具条左边的"取消"按钮(默认true) * @property {Boolean} cancel-btn 是否显示工具条左边的"取消"按钮(默认true)
* @property {Boolean} confirm-btn 是否显示工具条右边的"完成"按钮(默认true) * @property {Boolean} confirm-btn 是否显示工具条右边的"完成"按钮(默认true)
* @property {Boolean} mask 是否显示遮罩(默认true) * @property {Boolean} mask 是否显示遮罩(默认true)
* @property {String} confirm-text 确认按钮的文字
* @property {String} cancel-text 取消按钮的文字
* @property {Number String} z-index 弹出键盘的z-index值(默认1075) * @property {Number String} z-index 弹出键盘的z-index值(默认1075)
* @property {Boolean} random 是否打乱键盘按键的顺序(默认false) * @property {Boolean} random 是否打乱键盘按键的顺序(默认false)
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false) * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
...@@ -111,6 +113,16 @@ ...@@ -111,6 +113,16 @@
zIndex: { zIndex: {
type: [Number, String], type: [Number, String],
default: '' default: ''
},
// 取消按钮的文字
cancelText: {
type: String,
default: '取消'
},
// 确认按钮的文字
confirmText: {
type: String,
default: '确认'
} }
}, },
data() { data() {
......
<template> <template>
<view> <view>
<u-popup :zoom="zoom" <u-popup :zoom="zoom" mode="center" :popup="false" :z-index="uZIndex" v-model="value" :length="width"
mode="center" :popup="false" :mask-close-able="maskCloseAble" :border-radius="borderRadius" @close="popupClose" :negative-top="negativeTop">
:z-index="uZIndex" v-model="value"
:length="width" :mask-close-able="maskCloseAble"
:border-radius="borderRadius"
@close="popupClose"
:negative-top="negativeTop"
>
<view class="u-model"> <view class="u-model">
<view v-if="showTitle" class="u-model-title u-line-1" :style="[titleStyle]">{{ title }}</view> <view v-if="showTitle" class="u-model__title u-line-1" :style="[titleStyle]">{{ title }}</view>
<view class="u-model-content"> <view class="u-model__content">
<view :style="[contentStyle]" v-if="$slots.default"> <view :style="[contentStyle]" v-if="$slots.default">
<slot /> <slot />
</view> </view>
<view v-else class="u-model-content-message" :style="[contentStyle]">{{ content }}</view> <view v-else class="u-model__content__message" :style="[contentStyle]">{{ content }}</view>
</view> </view>
<view class="u-model-footer u-border-top" v-if="showCancelButton || showConfirmButton"> <view class="u-model__footer u-border-top" v-if="showCancelButton || showConfirmButton">
<view <view v-if="showCancelButton" :hover-stay-time="100" hover-class="u-model__btn--hover" class="u-model__footer__button"
v-if="showCancelButton" :style="[cancelBtnStyle]" @tap="cancel">
:hover-stay-time="100"
hover-class="btn-hover"
class="u-model-footer-button"
type="default"
:style="[cancelBtnStyle]"
@tap="cancel"
>
{{cancelText}} {{cancelText}}
</view> </view>
<view <view v-if="showConfirmButton" :hover-stay-time="100" :hover-class="asyncClose ? 'none' : 'u-model__btn--hover'"
v-if="showConfirmButton" class="u-model__footer__button hairline-left" :style="[confirmBtnStyle]" @tap="confirm">
: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> <u-loading mode="circle" :color="confirmColor" v-if="loading"></u-loading>
<block v-else> <block v-else>
{{confirmText}} {{confirmText}}
...@@ -48,7 +29,7 @@ ...@@ -48,7 +29,7 @@
</template> </template>
<script> <script>
/** /**
* modal 模态框 * modal 模态框
* @description 弹出模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作 * @description 弹出模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作
* @tutorial https://www.uviewui.com/components/modal.html * @tutorial https://www.uviewui.com/components/modal.html
...@@ -77,7 +58,7 @@ ...@@ -77,7 +58,7 @@
* @event {Function} cancel 取消按钮被点击 * @event {Function} cancel 取消按钮被点击
* @example <u-modal :src="title" :content="content"></u-modal> * @example <u-modal :src="title" :content="content"></u-modal>
*/ */
export default { export default {
name: 'u-modal', name: 'u-modal',
props: { props: {
// 是否显示Modal // 是否显示Modal
...@@ -148,28 +129,28 @@ export default { ...@@ -148,28 +129,28 @@ export default {
// 标题的样式 // 标题的样式
titleStyle: { titleStyle: {
type: Object, type: Object,
default() { default () {
return {} return {}
} }
}, },
// 内容的样式 // 内容的样式
contentStyle: { contentStyle: {
type: Object, type: Object,
default() { default () {
return {} return {}
} }
}, },
// 取消按钮的样式 // 取消按钮的样式
cancelStyle: { cancelStyle: {
type: Object, type: Object,
default() { default () {
return {} return {}
} }
}, },
// 确定按钮的样式 // 确定按钮的样式
confirmStyle: { confirmStyle: {
type: Object, type: Object,
default() { default () {
return {} return {}
} }
}, },
...@@ -201,10 +182,14 @@ export default { ...@@ -201,10 +182,14 @@ export default {
}, },
computed: { computed: {
cancelBtnStyle() { cancelBtnStyle() {
return Object.assign({color: this.cancelColor}, this.cancelStyle); return Object.assign({
color: this.cancelColor
}, this.cancelStyle);
}, },
confirmBtnStyle() { confirmBtnStyle() {
return Object.assign({color: this.confirmColor}, this.confirmStyle); return Object.assign({
color: this.confirmColor
}, this.confirmStyle);
}, },
uZIndex() { uZIndex() {
return this.zIndex ? this.zIndex : this.$u.zIndex.popup; return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
...@@ -214,13 +199,13 @@ export default { ...@@ -214,13 +199,13 @@ export default {
// 如果是异步关闭时,外部修改v-model的值为false时,重置内部的loading状态 // 如果是异步关闭时,外部修改v-model的值为false时,重置内部的loading状态
// 避免下次打开的时候,状态混乱 // 避免下次打开的时候,状态混乱
value(n) { value(n) {
if(n === true) this.loading = false; if (n === true) this.loading = false;
} }
}, },
methods: { methods: {
confirm() { confirm() {
// 异步关闭 // 异步关闭
if(this.asyncClose) { if (this.asyncClose) {
this.loading = true; this.loading = true;
} else { } else {
this.$emit('input', false); this.$emit('input', false);
...@@ -245,31 +230,31 @@ export default { ...@@ -245,31 +230,31 @@ export default {
this.loading = false; this.loading = false;
} }
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.btn-hover { .u-model {
background-color: rgb(230, 230, 230);
}
.u-model {
height: auto; height: auto;
overflow: hidden; overflow: hidden;
font-size: 32rpx; font-size: 32rpx;
background-color: #fff; background-color: #fff;
&-title { &__btn--hover {
background-color: rgb(230, 230, 230);
}
&__title {
padding-top: 48rpx; padding-top: 48rpx;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
color: $u-main-color; color: $u-main-color;
} }
&-content { &__content {
&-message { &__message {
padding: 48rpx; padding: 48rpx;
font-size: 30rpx; font-size: 30rpx;
text-align: center; text-align: center;
...@@ -277,10 +262,10 @@ export default { ...@@ -277,10 +262,10 @@ export default {
} }
} }
&-footer { &__footer {
display: flex; display: flex;
&-button { &__button {
flex: 1; flex: 1;
height: 100rpx; height: 100rpx;
line-height: 100rpx; line-height: 100rpx;
...@@ -291,5 +276,5 @@ export default { ...@@ -291,5 +276,5 @@ export default {
border-radius: 4rpx; border-radius: 4rpx;
} }
} }
} }
</style> </style>
<template> <template>
<view class="u-numberbox"> <view class="u-numberbox">
<view class="u-icon-minus" @touchstart.stop="btnTouchStart('minus')" @touchend.stop="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal <= min }" :style="{ <view class="u-icon-minus" @touchstart.stop="btnTouchStart('minus')" @touchend.stop="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal <= min }"
:style="{
background: bgColor, background: bgColor,
height: inputHeight + 'rpx', height: inputHeight + 'rpx',
color: color color: color
}"> }">
<u-icon name="minus" :size="size"></u-icon> <u-icon name="minus" :size="size"></u-icon>
</view> </view>
<input :disabled="disabledInput || disabled" :cursor-spacing="getCursorSpacing" :class="{ 'u-input-disabled': disabled }" v-model="inputVal" class="u-number-input" @blur="onBlur" <input :disabled="disabledInput || disabled" :cursor-spacing="getCursorSpacing" :class="{ 'u-input-disabled': disabled }"
v-model="inputVal" class="u-number-input" @blur="onBlur"
type="number" :style="{ type="number" :style="{
color: color, color: color,
fontSize: size + 'rpx', fontSize: size + 'rpx',
...@@ -15,7 +17,8 @@ ...@@ -15,7 +17,8 @@
height: inputHeight + 'rpx', height: inputHeight + 'rpx',
width: inputWidth + 'rpx' width: inputWidth + 'rpx'
}" /> }" />
<view class="u-icon-plus" @touchstart.stop="btnTouchStart('plus')" @touchend.stop="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal >= max }" :style="{ <view class="u-icon-plus" @touchstart.stop="btnTouchStart('plus')" @touchend.stop="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal >= max }"
:style="{
background: bgColor, background: bgColor,
height: inputHeight + 'rpx', height: inputHeight + 'rpx',
color: color color: color
...@@ -37,6 +40,7 @@ ...@@ -37,6 +40,7 @@
* @property {Number} step 步长,每次加或减的值(默认1) * @property {Number} step 步长,每次加或减的值(默认1)
* @property {Boolean} disabled 是否禁用操作,禁用后无法加减或手动修改输入框的值(默认false) * @property {Boolean} disabled 是否禁用操作,禁用后无法加减或手动修改输入框的值(默认false)
* @property {Boolean} disabled-input 是否禁止输入框手动输入值(默认false) * @property {Boolean} disabled-input 是否禁止输入框手动输入值(默认false)
* @property {Boolean} positive-integer 是否只能输入正整数(默认true)
* @property {String | Number} size 输入框文字和按钮字体大小,单位rpx(默认26) * @property {String | Number} size 输入框文字和按钮字体大小,单位rpx(默认26)
* @property {String} color 输入框文字和加减按钮图标的颜色(默认#323233) * @property {String} color 输入框文字和加减按钮图标的颜色(默认#323233)
* @property {String | Number} input-width 输入框宽度,单位rpx(默认80) * @property {String | Number} input-width 输入框宽度,单位rpx(默认80)
...@@ -129,9 +133,21 @@ ...@@ -129,9 +133,21 @@
pressTime: { pressTime: {
type: [Number, String], type: [Number, String],
default: 250 default: 250
},
// 是否只能输入大于或等于0的整数(正整数)
positiveInteger: {
type: Boolean,
default: true
} }
}, },
watch: { watch: {
value(v1, v2) {
// 只有value的改变是来自外部的时候,才去同步inputVal的值,否则会造成循环错误
if(!this.changeFromInner) {
this.inputVal = v1;
}
this.changeFromInner = false;
},
inputVal(v1, v2) { inputVal(v1, v2) {
// 为了让用户能够删除所有输入值,重新输入内容,删除所有值后,内容为空字符串 // 为了让用户能够删除所有输入值,重新输入内容,删除所有值后,内容为空字符串
if (v1 == '') return; if (v1 == '') return;
...@@ -140,14 +156,26 @@ ...@@ -140,14 +156,26 @@
let tmp = this.$u.test.number(v1); let tmp = this.$u.test.number(v1);
if (tmp && v1 >= this.min && v1 <= this.max) value = v1; if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
else value = v2; else value = v2;
// 判断是否只能输入大于等于0的整数
if(this.positiveInteger) {
// 小于0,或者带有小数点,
if(v1 < 0 || String(v1).indexOf('.') !== -1) {
value = v2;
// 双向绑定input的值,必须要使用$nextTick修改显示的值
this.$nextTick(() => {
this.inputVal = v2;
})
}
}
// 发出change事件 // 发出change事件
this.handleChange(value, 'change'); this.handleChange(value, 'change');
} }
}, },
data() { data() {
return { return {
inputVal: 1 , // 输入框中的值,不能直接使用props中的value,因为应该改变props的状态 inputVal: 1, // 输入框中的值,不能直接使用props中的value,因为应该改变props的状态
timer: null, // 用作长按的定时器 timer: null, // 用作长按的定时器
changeFromInner: false, // 值发生变化,是来自内部还是外部
}; };
}, },
created() { created() {
...@@ -165,7 +193,7 @@ ...@@ -165,7 +193,7 @@
// 先执行一遍方法,否则会造成松开手时,就执行了clearTimer,导致无法实现功能 // 先执行一遍方法,否则会造成松开手时,就执行了clearTimer,导致无法实现功能
this[callback](); this[callback]();
// 如果没开启长按功能,直接返回 // 如果没开启长按功能,直接返回
if(!this.longPress) return ; if (!this.longPress) return;
clearInterval(this.timer); //再次清空定时器,防止重复注册定时器 clearInterval(this.timer); //再次清空定时器,防止重复注册定时器
this.timer = null; this.timer = null;
this.timer = setInterval(() => { this.timer = setInterval(() => {
...@@ -256,6 +284,7 @@ ...@@ -256,6 +284,7 @@
handleChange(value, type) { handleChange(value, type) {
if (this.disabled) return; if (this.disabled) return;
// 发出input事件,修改通过v-model绑定的值,达到双向绑定的效果 // 发出input事件,修改通过v-model绑定的值,达到双向绑定的效果
this.changeFromInner = true;
this.$emit('input', Number(value)); this.$emit('input', Number(value));
this.$emit(type, { this.$emit(type, {
// 转为Number类型 // 转为Number类型
......
...@@ -2,7 +2,12 @@ ...@@ -2,7 +2,12 @@
<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex"> <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"> <view class="u-datetime-picker">
<view class="u-picker-header" @touchmove.stop.prevent=""> <view class="u-picker-header" @touchmove.stop.prevent="">
<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--tips"
:style="{ color: cancelColor }"
hover-class="u-opacity"
:hover-stay-time="150"
@tap="getResult('cancel')"
>{{cancelText}}</view>
<view class="u-picker__title">{{ title }}</view> <view class="u-picker__title">{{ title }}</view>
<view <view
class="u-btn-picker u-btn-picker--primary" class="u-btn-picker u-btn-picker--primary"
...@@ -12,7 +17,7 @@ ...@@ -12,7 +17,7 @@
@touchmove.stop="" @touchmove.stop=""
@tap.stop="getResult('confirm')" @tap.stop="getResult('confirm')"
> >
确定 {{confirmText}}
</view> </view>
</view> </view>
<view class="u-picker-body"> <view class="u-picker-body">
...@@ -108,6 +113,8 @@ import areas from '../../libs/util/area.js'; ...@@ -108,6 +113,8 @@ import areas from '../../libs/util/area.js';
* @property {String} cancel-color 取消按钮的颜色(默认#606266) * @property {String} cancel-color 取消按钮的颜色(默认#606266)
* @property {String} confirm-color 确认按钮的颜色(默认#2979ff) * @property {String} confirm-color 确认按钮的颜色(默认#2979ff)
* @property {String} default-time 默认选中的时间,mode=time时有效 * @property {String} default-time 默认选中的时间,mode=time时有效
* @property {String} confirm-text 确认按钮的文字
* @property {String} cancel-text 取消按钮的文字
* @property {String} default-region 默认选中的地区,中文形式,mode=region时有效 * @property {String} default-region 默认选中的地区,中文形式,mode=region时有效
* @property {String} default-code 默认选中的地区,编号形式,mode=region时有效 * @property {String} default-code 默认选中的地区,编号形式,mode=region时有效
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true) * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true)
...@@ -231,6 +238,16 @@ export default { ...@@ -231,6 +238,16 @@ export default {
title: { title: {
type: String, type: String,
default: '' default: ''
},
// 取消按钮的文字
cancelText: {
type: String,
default: '取消'
},
// 确认按钮的文字
confirmText: {
type: String,
default: '确认'
} }
}, },
data() { data() {
......
...@@ -33,10 +33,9 @@ ...@@ -33,10 +33,9 @@
<scroll-view class="u-drawer__scroll-view" scroll-y="true" v-else> <scroll-view class="u-drawer__scroll-view" scroll-y="true" v-else>
<slot /> <slot />
</scroll-view> </scroll-view>
<view class="u-close" :class="['u-close--' + closeIconPos]"> <view @tap="close" class="u-close" :class="['u-close--' + closeIconPos]">
<u-icon <u-icon
v-if="mode != 'center' && closeable" v-if="mode != 'center' && closeable"
@click="close"
:name="closeIcon" :name="closeIcon"
:color="closeIconColor" :color="closeIconColor"
:size="closeIconSize" :size="closeIconSize"
...@@ -196,6 +195,7 @@ export default { ...@@ -196,6 +195,7 @@ export default {
visibleSync: false, visibleSync: false,
showDrawer: false, showDrawer: false,
timer: null, timer: null,
closeFromInner: false, // value的值改变,是发生在内部还是外部
}; };
}, },
computed: { computed: {
...@@ -263,9 +263,10 @@ export default { ...@@ -263,9 +263,10 @@ export default {
value(val) { value(val) {
if (val) { if (val) {
this.open(); this.open();
} else { } else if(!this.closeFromInner) {
this.close(); this.close();
} }
this.closeFromInner = false;
} }
}, },
mounted() { mounted() {
...@@ -298,7 +299,12 @@ export default { ...@@ -298,7 +299,12 @@ export default {
// 打开时,先渲染组件,延时一定时间再让遮罩和弹窗的动画起作用 // 打开时,先渲染组件,延时一定时间再让遮罩和弹窗的动画起作用
change(param1, param2, status) { change(param1, param2, status) {
// 如果this.popup为false,意味着为picker,actionsheet等组件调用了popup组件 // 如果this.popup为false,意味着为picker,actionsheet等组件调用了popup组件
if (this.popup == true) this.$emit('input', status); if (this.popup == true) {
// 标记关闭是内部发生的,否则修改了value值,导致watch中对value检测,导致再执行一遍close
// 造成@close事件触发两次
this.closeFromInner = true;
this.$emit('input', status);
}
this[param1] = status; this[param1] = status;
if(status) { if(status) {
// #ifdef H5 || MP // #ifdef H5 || MP
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
'u-section--line': showLine 'u-section--line': showLine
}"> }">
<view class="u-section__title__icon-wrap u-flex" :style="[lineStyle]"> <view class="u-section__title__icon-wrap u-flex" :style="[lineStyle]">
<u-icon name="column-line" :size="fontSize * 1.25" bold :color="lineColor ? lineColor : color"></u-icon> <u-icon top="0" name="column-line" :size="fontSize * 1.25" bold :color="lineColor ? lineColor : color"></u-icon>
</view> </view>
<text class="u-flex u-section__title__text">{{title}}</text> <text class="u-flex u-section__title__text">{{title}}</text>
</view> </view>
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
return { return {
// 由于竖线为字体图标,具有比实际线宽更宽的宽度,所以也需要根据字体打下动态调整 // 由于竖线为字体图标,具有比实际线宽更宽的宽度,所以也需要根据字体打下动态调整
left: -(Number(this.fontSize) * 0.9) + 'rpx', left: -(Number(this.fontSize) * 0.9) + 'rpx',
top: -(Number(this.fontSize) * (this.$u.os == 'ios' ? 0.13 : 0.15)) + 'rpx', top: -(Number(this.fontSize) * (this.$u.os == 'ios' ? 0.14 : 0.15)) + 'rpx',
} }
} }
}, },
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
:hover-stay-time="150" :hover-stay-time="150"
@tap="getResult('cancel')" @tap="getResult('cancel')"
> >
取消 {{cancelText}}
</view> </view>
<view class="u-select__header__title"> <view class="u-select__header__title">
{{title}} {{title}}
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
@touchmove.stop="" @touchmove.stop=""
@tap.stop="getResult('confirm')" @tap.stop="getResult('confirm')"
> >
确定 {{confirmText}}
</view> </view>
</view> </view>
<view class="u-select__body"> <view class="u-select__body">
...@@ -60,6 +60,8 @@ ...@@ -60,6 +60,8 @@
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false) * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
* @property {String} cancel-color 取消按钮的颜色(默认#606266) * @property {String} cancel-color 取消按钮的颜色(默认#606266)
* @property {String} confirm-color 确认按钮的颜色(默认#2979ff) * @property {String} confirm-color 确认按钮的颜色(默认#2979ff)
* @property {String} confirm-text 确认按钮的文字
* @property {String} cancel-text 取消按钮的文字
* @property {String} default-value 提供的默认选中的下标,见官网说明 * @property {String} default-value 提供的默认选中的下标,见官网说明
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true) * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true)
* @property {String Number} z-index 弹出时的z-index值(默认10075) * @property {String Number} z-index 弹出时的z-index值(默认10075)
...@@ -144,6 +146,16 @@ export default { ...@@ -144,6 +146,16 @@ export default {
title: { title: {
type: String, type: String,
default: '' default: ''
},
// 取消按钮的文字
cancelText: {
type: String,
default: '取消'
},
// 确认按钮的文字
confirmText: {
type: String,
default: '确认'
} }
}, },
data() { data() {
......
...@@ -18,7 +18,8 @@ ...@@ -18,7 +18,8 @@
<slot v-if="$slots.default"/> <slot v-if="$slots.default"/>
<view v-else class="u-slider__button" :style="[blockStyle, { <view v-else class="u-slider__button" :style="[blockStyle, {
height: blockWidth + 'rpx', height: blockWidth + 'rpx',
width: blockWidth + 'rpx' width: blockWidth + 'rpx',
backgroundColor: blockColor
}]"></view> }]"></view>
</view> </view>
</view> </view>
......
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
* @property {String Number} z-index 吸顶时的z-index值(默认970) * @property {String Number} z-index 吸顶时的z-index值(默认970)
* @property {String Number} h5-nav-height 导航栏高度,自定义导航栏时(无导航栏时需设置为0),需要传入此值,单位px(默认44) * @property {String Number} h5-nav-height 导航栏高度,自定义导航栏时(无导航栏时需设置为0),需要传入此值,单位px(默认44)
* @event {Function} fixed 组件吸顶时触发 * @event {Function} fixed 组件吸顶时触发
* @event {Function} unfixed 组件取消吸顶时触发
* @example <u-sticky offset-top="200"><view>塞下秋来风景异,衡阳雁去无留意</view></u-sticky> * @example <u-sticky offset-top="200"><view>塞下秋来风景异,衡阳雁去无留意</view></u-sticky>
*/ */
export default { export default {
...@@ -132,8 +133,9 @@ ...@@ -132,8 +133,9 @@
}, },
setFixed(top) { setFixed(top) {
const fixed = top < this.stickyTop; const fixed = top < this.stickyTop;
this.fixed = fixed;
if (fixed) this.$emit('fixed', this.index); if (fixed) this.$emit('fixed', this.index);
else if(this.fixed) this.$emit('unfixed', this.index);
this.fixed = fixed;
}, },
disconnectObserver(observerName) { disconnectObserver(observerName) {
const observer = this[observerName]; const observer = this[observerName];
......
...@@ -16,8 +16,9 @@ ...@@ -16,8 +16,9 @@
]"> ]">
<u-icon <u-icon
:size="midButton && item.midButton ? midButtonSize : iconSize" :size="midButton && item.midButton ? midButtonSize : iconSize"
:name="index == value ? item.selectedIconPath : item.iconPath" :name="elIconPath(index)"
:color="index == value ? activeColor : inactiveColor" img-mode="scaleToFill"
:color="elColor(index)"
:custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'" :custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'"
></u-icon> ></u-icon>
<u-badge :count="item.count" :is-dot="item.isDot" <u-badge :count="item.count" :is-dot="item.isDot"
...@@ -26,7 +27,7 @@ ...@@ -26,7 +27,7 @@
></u-badge> ></u-badge>
</view> </view>
<view class="u-tabbar__content__item__text" :style="{ <view class="u-tabbar__content__item__text" :style="{
color: index == value ? activeColor : inactiveColor color: elColor(index)
}"> }">
<text class="u-line-1">{{item.text}}</text> <text class="u-line-1">{{item.text}}</text>
</view> </view>
...@@ -34,7 +35,8 @@ ...@@ -34,7 +35,8 @@
<view v-if="midButton" class="u-tabbar__content__circle__border" :class="{ <view v-if="midButton" class="u-tabbar__content__circle__border" :class="{
'u-border': borderTop, 'u-border': borderTop,
}" :style="{ }" :style="{
backgroundColor: bgColor backgroundColor: bgColor,
left: midButtonLeft
}"> }">
</view> </view>
</view> </view>
...@@ -110,12 +112,64 @@ ...@@ -110,12 +112,64 @@
type: Boolean, type: Boolean,
default: true default: true
}, },
// 是否隐藏原生tabbar
hideTabBar: {
type: Boolean,
default: true
},
}, },
data() { data() {
return { return {
// 由于安卓太菜了,通过css居中凸起按钮的外层元素有误差,故通过js计算将其其中
midButtonLeft: '50%',
pageUrl: '', // 当前
}
},
created() {
// 是否隐藏原生tabbar
if(this.borderTop) uni.hideTabBar();
// 获取引入了u-tabbar页面的路由地址,该地址没有路径前面的"/"
let pages = getCurrentPages();
// 页面栈中的最后一个即为项为当前页面,route属性为页面路径
this.pageUrl = pages[pages.length - 1].route;
},
computed: {
elIconPath() {
return (index) => {
// 历遍u-tabbar的每一项item时,判断是否传入了pagePath参数,如果传入了
// 和data中的pageUrl参数对比,如果相等,即可判断当前的item对应当前的tabbar页面,设置高亮图标
// 采用这个方法,可以无需使用v-model绑定的value值
let pagePath = this.list[index].pagePath;
// 如果定义了pagePath属性,意味着使用系统自带tabbar方案,否则使用一个页面用几个组件模拟tabbar页面的方案
// 这两个方案对处理tabbar item的激活与否方式不一样
if(pagePath) {
if(pagePath == this.pageUrl || pagePath == '/' + this.pageUrl) {
return this.list[index].selectedIconPath;
} else {
return this.list[index].iconPath;
}
} else {
// 普通方案中,索引等于v-model值时,即为激活项
return index == this.value ? this.list[index].selectedIconPath : this.list[index].iconPath
}
} }
}, },
elColor() {
return (index) => {
// 判断方法同理于elIconPath
let pagePath = this.list[index].pagePath;
if(pagePath) {
if(pagePath == this.pageUrl || pagePath == '/' + this.pageUrl) return this.activeColor;
else return this.inactiveColor;
} else {
return index == this.value ? this.activeColor : this.inactiveColor;
}
}
}
},
mounted() {
this.midButton && this.getMidButtonLeft();
},
methods: { methods: {
async clickHandler(index) { async clickHandler(index) {
if(this.beforeSwitch && typeof(this.beforeSwitch) === 'function') { if(this.beforeSwitch && typeof(this.beforeSwitch) === 'function') {
...@@ -141,7 +195,16 @@ ...@@ -141,7 +195,16 @@
switchTab(index) { switchTab(index) {
// 发出事件和修改v-model绑定的值 // 发出事件和修改v-model绑定的值
this.$emit('change', index); this.$emit('change', index);
// 如果有配置pagePath属性,使用uni.switchTab进行跳转
if(this.list[index].pagePath) {
uni.switchTab({
url: this.list[index].pagePath
})
} else {
// 如果配置了papgePath属性,将不会双向绑定v-model传入的value值
// 因为这个模式下,不再需要v-model绑定的value值了,而是通过getCurrentPages()适配
this.$emit('input', index); this.$emit('input', index);
}
}, },
// 计算角标的right值 // 计算角标的right值
getOffsetRight(count, isDot) { getOffsetRight(count, isDot) {
...@@ -153,6 +216,12 @@ ...@@ -153,6 +216,12 @@
} else { } else {
return -30; return -30;
} }
},
// 获取凸起按钮外层元素的left值,让其水平居中
getMidButtonLeft() {
let windowWidth = this.$u.sys.windowWidth;
// 由于安卓中css计算left: 50%的结果不准确,故用js计算
this.midButtonLeft = (windowWidth / 2) + 'px';
} }
} }
} }
...@@ -181,11 +250,13 @@ ...@@ -181,11 +250,13 @@
width: 110rpx; width: 110rpx;
height: 110rpx; height: 110rpx;
top: -48rpx; top: -48rpx;
left: 50%;
transform: translateX(-50%);
position: absolute; position: absolute;
z-index: 4; z-index: 4;
background-color: #ffffff; background-color: #ffffff;
// 由于安卓的无能,导致只有3个tabbar item时,此css计算方式有误差
// 故使用js计算的形式来定位,此处不注释,是因为js计算有延后,避免出现位置闪动
left: 50%;
transform: translateX(-50%);
&:after { &:after {
border-radius: 100px; border-radius: 100px;
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<view :id="id"> <view :id="id">
<scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation> <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-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)" <view class="u-tab-item u-line-1" :id="'u-tab-item-' + index" v-for="(item, index) in list" :key="index" @tap="clickTab(index)"
:style="[tabItemStyle(index)]"> :style="[tabItemStyle(index)]">
{{ item[name] || item['name']}} {{ item[name] || item['name']}}
</view> </view>
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
* @property {Object} bar-style 底部滑块的样式,对象形式 * @property {Object} bar-style 底部滑块的样式,对象形式
* @property {Boolean} show-bar 是否显示底部的滑块(默认true) * @property {Boolean} show-bar 是否显示底部的滑块(默认true)
* @property {String Number} bar-height 滑块高度,单位rpx(默认6) * @property {String Number} bar-height 滑块高度,单位rpx(默认6)
* @property {String Number} item-width 标签的宽度(默认auto)
* @property {String Number} gutter 单个tab标签的左右内边距之和,单位rpx(默认40) * @property {String Number} gutter 单个tab标签的左右内边距之和,单位rpx(默认40)
* @property {String} bg-color tabs导航栏的背景颜色(默认#ffffff) * @property {String} bg-color tabs导航栏的背景颜色(默认#ffffff)
* @property {String} name 组件内部读取的list参数中的属性名,见官网说明(默认name) * @property {String} name 组件内部读取的list参数中的属性名,见官网说明(默认name)
...@@ -135,6 +136,11 @@ ...@@ -135,6 +136,11 @@
default() { default() {
return {} return {}
} }
},
// 标签的宽度
itemWidth: {
type: [Number, String],
default: 'auto'
} }
}, },
data() { data() {
...@@ -196,7 +202,8 @@ ...@@ -196,7 +202,8 @@
'font-size': this.fontSize + 'rpx', 'font-size': this.fontSize + 'rpx',
'transition-duration': `${this.duration}s`, 'transition-duration': `${this.duration}s`,
padding: this.isScroll ? `0 ${this.gutter}rpx` : '', padding: this.isScroll ? `0 ${this.gutter}rpx` : '',
flex: this.isScroll ? 'auto' : '1' flex: this.isScroll ? 'auto' : '1',
width: this.$u.addUnit(this.itemWidth)
}; };
// 字体加粗 // 字体加粗
if (index == this.currentIndex && this.bold) style.fontWeight = 'bold'; if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
......
...@@ -235,7 +235,7 @@ export default { ...@@ -235,7 +235,7 @@ export default {
limitType:{ limitType:{
type: Array, type: Array,
default() { default() {
return ['png', 'jpg', 'jpeg', 'webp']; return ['png', 'jpg', 'jpeg', 'webp', 'gif'];
} }
}, },
}, },
......
This diff is collapsed.
// 此版本发布于2020-07-23 // 此版本发布于2020-07-28
let version = '1.5.5'; let version = '1.5.6';
export default { export default {
v: version, v: version,
......
...@@ -14,11 +14,11 @@ class Request { ...@@ -14,11 +14,11 @@ class Request {
let tmpConfig = {}; let tmpConfig = {};
let interceptorReuest = this.interceptor.request(options); let interceptorReuest = this.interceptor.request(options);
if (interceptorReuest === false) { if (interceptorReuest === false) {
return false; // 返回一个处于pending状态中的Promise,来取消原promise
return new Promise(()=>{});
} }
this.options = interceptorReuest; this.options = interceptorReuest;
} }
options.dataType = options.dataType || this.config.dataType; options.dataType = options.dataType || this.config.dataType;
options.responseType = options.responseType || this.config.responseType; options.responseType = options.responseType || this.config.responseType;
options.url = options.url || ''; options.url = options.url || '';
...@@ -91,6 +91,10 @@ class Request { ...@@ -91,6 +91,10 @@ class Request {
}, this.config.loadingTime); }, this.config.loadingTime);
} }
uni.request(options); uni.request(options);
}).catch(res => {
// 如果返回reject(),不让其进入this.$u.post().then().catch()后面的catct()
// 因为很多人都会忘了写后面的catch(),导致报错捕获不到catch
return new Promise(()=>{});
}) })
} }
......
{ {
"name": "uview-ui", "name": "uview-ui",
"version": "1.5.5", "version": "1.5.6",
"description": "uView UI,是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水", "description": "uView UI,是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水",
"main": "index.js", "main": "index.js",
"keywords": ["uview", "uView", "uni-app", "uni-app ui", "uniapp", "uviewui", "uview ui", "uviewUI", "uViewui", "uViewUI", "uView UI", "uni ui", "uni UI", "uniapp ui", "ui", "UI框架", "uniapp ui框架", "uniapp UI"], "keywords": ["uview", "uView", "uni-app", "uni-app ui", "uniapp", "uviewui", "uview ui", "uviewUI", "uViewui", "uViewUI", "uView UI", "uni ui", "uni UI", "uniapp ui", "ui", "UI框架", "uniapp ui框架", "uniapp UI"],
......
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