Skip to content

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

修复http请求头某些情况下可能无效的问题 

修正toast组件的position参数拼写错误的问题
给empty组件添加margin-top参数
改进rate组件的示例效果
将collapse的标题按压效果设置为自定义可选形式
优化tabs组件标签的居中问题
优化grid宫格组件的hover-class按下效果
新增uView特色的基础样式类，涵盖内外边距，字体大小，颜色，flex布局等
parent 63471554
Hide whitespace changes
Inline Side-by-side
Showing with 129 additions and 177 deletions
App.vue
View file @ 6948b1ff
...@@ -25,5 +25,4 @@ ...@@ -25,5 +25,4 @@
background: transparent; background: transparent;
} }
/* #endif */ /* #endif */
</style> </style>
pages/componentsA/toast/index.vue
View file @ 6948b1ff
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</view> </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="postionChange"></u-subsection> <u-subsection vibrateShort current="1" :list="['顶部', '中部', '底部']" @change="positionChange"></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>
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
type: 'success', type: 'success',
title: '桃花潭水深千尺', title: '桃花潭水深千尺',
icon: true, icon: true,
postion: 'center', position: 'center',
url: '', url: '',
} }
}, },
...@@ -47,8 +47,8 @@ ...@@ -47,8 +47,8 @@
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'default'; this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'default';
this.show(); this.show();
}, },
postionChange(index) { positionChange(index) {
this.postion = index == 0 ? 'top' : index == 1 ? 'center' : 'bottom'; this.position = index == 0 ? 'top' : index == 1 ? 'center' : 'bottom';
this.show(); this.show();
}, },
iconChange(index) { iconChange(index) {
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
show() { show() {
this.$refs.uToast.show({ this.$refs.uToast.show({
title: this.title, title: this.title,
postion: this.postion, position: this.position,
type: this.type, type: this.type,
icon: this.icon, icon: this.icon,
url: this.url, url: this.url,
......
pages/componentsB/rate/index.vue
View file @ 6948b1ff
...@@ -50,8 +50,18 @@ ...@@ -50,8 +50,18 @@
inactiveColor: '#b2b2b2', inactiveColor: '#b2b2b2',
disabled: false, disabled: false,
count: 5, count: 5,
activeIcon: 'star-fill', customIcon: false,
inactiveIcon: 'star' plain: false,
}
},
computed: {
activeIcon() {
let icon = this.customIcon ? 'heart' : 'star';
return this.plain ? icon : icon + '-fill'
},
inactiveIcon() {
let icon = this.customIcon ? 'heart' : 'star';
return this.plain ? icon : icon + '-fill'
} }
}, },
methods: { methods: {
...@@ -59,12 +69,7 @@ ...@@ -59,12 +69,7 @@
this.current = index == 0 ? 1 : index == 1 ? 2 : index == 2 ? 3 : 4; this.current = index == 0 ? 1 : index == 1 ? 2 : index == 2 ? 3 : 4;
}, },
plainChange(index) { plainChange(index) {
// 这里只是为了演示镂空状态，实际使用中不会发生这种情况，请求纠结这里的写法 this.plain = !index;
if(index == 0) {
this.activeIcon = this.activeIcon == 'star-fill' ? 'star' : 'heart';
} else {
this.activeIcon = this.activeIcon == 'star' ? 'star-fill' : 'heart-fill';
}
}, },
disabledChange(index) { disabledChange(index) {
this.disabled = index == 0 ? true : false; this.disabled = index == 0 ? true : false;
...@@ -82,13 +87,7 @@ ...@@ -82,13 +87,7 @@
} }
}, },
iconChange(index) { iconChange(index) {
if(index == 0) { this.customIcon = !index;
this.activeIcon = 'heart-fill';
this.inactiveIcon = 'heart';
} else {
this.activeIcon = 'star-fill';
this.inactiveIcon = 'star';
}
}, },
change(val) { change(val) {
// console.log(val); // console.log(val);
......
pages/componentsC/collapse/index.vue
View file @ 6948b1ff
...@@ -6,7 +6,9 @@ ...@@ -6,7 +6,9 @@
<u-toast ref="uToast"></u-toast> <u-toast ref="uToast"></u-toast>
<u-collapse event-type="close" :arrow="arrow" :accordion="accordion" @change="change"> <u-collapse event-type="close" :arrow="arrow" :accordion="accordion" @change="change">
<u-collapse-item :index="index" @change="itemChange" :title="item.head" v-for="(item, index) in itemList" :key="index"> <u-collapse-item :index="index" @change="itemChange" :title="item.head" v-for="(item, index) in itemList" :key="index">
{{item.body}} <view class="">
{{item.body}}
</view>
</u-collapse-item> </u-collapse-item>
</u-collapse> </u-collapse>
</view> </view>
...@@ -54,6 +56,7 @@ ...@@ -54,6 +56,7 @@
}], }],
accordion: true, accordion: true,
arrow: true, arrow: true,
hoverClass: 'hover2'
} }
}, },
methods: { methods: {
...@@ -85,6 +88,12 @@ ...@@ -85,6 +88,12 @@
} }
</script> </script>
<style>
.hover1 {
background-color: red;
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
// padding: 24rpx; // padding: 24rpx;
......
pages/componentsC/test/index.vue
View file @ 6948b1ff
<template> <template>
<view> <view class="wrap u-flex">
<view style="margin: 20px 0px 20px 0px;">
<scroll-view scroll-x enable-flex class="scroll">
<view v-for="i in 4" :key="i" class="slider">
<view class="slider-view-1">
<view class="slider-view-1-1">推广奖励</view>
<view class="slider-view-1-2">
<u-count-to color="#fff" font-size="80" :end-val="500"></u-count-to>
￥
</view>
</view>
<view class="slider-view-2">
下次是手动阿萨德撒的撒的
下次是手动阿萨德撒的撒的
下次是手动阿萨德撒的撒的
下次是手动阿萨德撒的撒的
下次是手动阿萨德撒的撒的
下次是手动阿萨德撒的撒的
下次是手动阿萨德撒的撒的
下次是手动阿萨德撒的撒的
下次是手动阿萨德撒的撒的
下次是手动阿萨德撒的撒的
</view>
</view>
</scroll-view>
<view class="content">
<text class="content-title" >推广奖励怎么计算?</text>
<view class="content-view">
<view>
<u-button type="error"
size="medium"
@tap="to('/pages/center/agent/agentplus')">
进入代理管理后台
</u-button>
<u-button :ripple="true" @tap="to('/pages/center/agent/agentlist')" type="error" size="medium">查看详细奖励记录</u-button>
</view>
</view>
</view>
</view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { onLoad() {
return { getApp().globalData.username = 'test12';
customStyle:{
}
}
},
methods: {
to(e){
uni.navigateTo({
url: e
});
}
} }
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
/deep/.uni-scroll-view::-webkit-scrollbar {
display: none
}
.scroll{
white-space: nowrap;
width: 100%;
overflow: hidden;
display: flex;
}
.slider{
display: inline-block;
width: 200px;
height: 230px;
background-color: red;
background-color: #fff;
margin: 0 20px 0 20px;
box-shadow:15px 0 15px -15px #606266,
-15px 0 15px -15px #606266;
}
.slider-view-1{
height: 70%;
background-color: #007AFF;
position: relative;
display: flex;
padding: 5px;
}
.slider-view-2{
height: 30%;
background-color: #fff;
white-space:normal;
overflow-y: auto;
padding: 5px;
font-size: 12px;
color: #909399;
}
.slider-view-1-1{
color:#fff;
font-size: 14px;
}
.slider-view-1-2{
color:#fff;
font-size: 14px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.content{
margin: 20px 5px 20px 5px;
padding: 10px;
background: #fff;
}
.content-title{
font-size: 16px;
color: #007AFF;
font-weight: bold;
}
.content-view{
margin: 10px;
display: flex;
border-bottom: 1px solid #c8c9cc;
padding-bottom: 10px;
font-size: 14px;
}
</style> </style>
uni.scss
View file @ 6948b1ff
...@@ -4,6 +4,3 @@ ...@@ -4,6 +4,3 @@
* uView自定义的css类名和scss变量，均以"u-"开头，不会造成冲突，请放心使用 * uView自定义的css类名和scss变量，均以"u-"开头，不会造成冲突，请放心使用
*/ */
@import '@/uview/index.scss'; @import '@/uview/index.scss';
$u-type-success: black;
\ No newline at end of file
uview/components/u-collapse-item/u-collapse-item.vue
View file @ 6948b1ff
<template> <template>
<view class="u-collapse-item"> <view class="u-collapse-item">
<view class="u-collapse-head" @tap.stop="headClick" hover-class="u-hover-class" :style="[headStyle]"> <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' }, <view class="u-collapse-title u-line-1" :style="[{ textAlign: align ? align : 'left' },
isShow && activeStyle && !arrow ? activeStyle : '']"> isShow && activeStyle && !arrow ? activeStyle : '']">
{{ title }} {{ title }}
...@@ -84,7 +84,8 @@ ...@@ -84,7 +84,8 @@
height: 0, // body内容的高度 height: 0, // body内容的高度
headStyle: {}, // 头部样式，对象形式 headStyle: {}, // 头部样式，对象形式
bodyStyle: {}, // 主体部分样式 bodyStyle: {}, // 主体部分样式
arrowColor: '' arrowColor: '',
hoverClass: '', // 头部按下时的效果样式类
}; };
}, },
mounted() { mounted() {
...@@ -100,7 +101,7 @@ ...@@ -100,7 +101,7 @@
computed: { computed: {
arrow() { arrow() {
return this.uCollapse.arrow; return this.uCollapse.arrow;
} },
}, },
created() { created() {
this.isShow = this.open; this.isShow = this.open;
...@@ -109,6 +110,7 @@ ...@@ -109,6 +110,7 @@
this.headStyle = this.uCollapse.headStyle; this.headStyle = this.uCollapse.headStyle;
this.bodyStyle = this.uCollapse.bodyStyle; this.bodyStyle = this.uCollapse.bodyStyle;
this.arrowColor = this.uCollapse.arrowColor; this.arrowColor = this.uCollapse.arrowColor;
this.hoverClass = this.uCollapse.hoverClass;
}, },
methods: { methods: {
// 点击collapsehead头部 // 点击collapsehead头部
......
uview/components/u-collapse/u-collapse.vue
View file @ 6948b1ff
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
* @property {String} arrow-color 标题右侧箭头的颜色（默认#909399） * @property {String} arrow-color 标题右侧箭头的颜色（默认#909399）
* @property {String} head-bg-color 标题的背景颜色（默认#ffffff） * @property {String} head-bg-color 标题的背景颜色（默认#ffffff）
* @property {String} body-bg-color 主体内容的背景颜色（默认#ffffff） * @property {String} body-bg-color 主体内容的背景颜色（默认#ffffff）
* @property {String} hover-class 样式类名，按下时有效（默认u-hover-class）
* @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array) * @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)
* @example <u-collapse></u-collapse> * @example <u-collapse></u-collapse>
*/ */
...@@ -49,6 +50,11 @@ ...@@ -49,6 +50,11 @@
type: String, type: String,
default: '' default: ''
}, },
// 标题部分按压时的样式类，"none"为无效果
hoverClass: {
type: String,
default: 'u-hover-class'
}
}, },
provide() { provide() {
return { return {
......
uview/components/u-empty/u-empty.vue
View file @ 6948b1ff
<template> <template>
<view class="u-empty" v-if="show"> <view class="u-empty" v-if="show" :style="{
marginTop: marginTop + 'rpx'
}">
<image class="u-image" :src="src ? src : icons[mode].image" mode="widthFix" :style="{ <image class="u-image" :src="src ? src : icons[mode].image" mode="widthFix" :style="{
width: imgWidth + 'rpx', width: imgWidth + 'rpx',
height: imgHeight == 'auto' ? 'auto' : imgHeight + 'rpx' height: imgHeight == 'auto' ? 'auto' : imgHeight + 'rpx'
...@@ -29,6 +31,7 @@ ...@@ -29,6 +31,7 @@
* @property {String} mode 内置的图标，见官网说明（默认data） * @property {String} mode 内置的图标，见官网说明（默认data）
* @property {String Number} img-width 图标的宽度，单位rpx（默认240） * @property {String Number} img-width 图标的宽度，单位rpx（默认240）
* @property {String} img-height 图标的高度，单位rpx（默认auto） * @property {String} img-height 图标的高度，单位rpx（默认auto）
* @property {String Number} margin-top 组件距离上一个元素之间的距离（默认0）
* @property {Boolean} show 是否显示组件（默认true） * @property {Boolean} show 是否显示组件（默认true）
* @event {Function} click 点击组件时触发 * @event {Function} click 点击组件时触发
* @event {Function} close 点击关闭按钮时触发 * @event {Function} close 点击关闭按钮时触发
...@@ -76,6 +79,11 @@ ...@@ -76,6 +79,11 @@
show: { show: {
type: Boolean, type: Boolean,
default: true default: true
},
// 组件距离上一个元素之间的距离
marginTop: {
type: [String, Number],
default: 0
} }
}, },
data() { data() {
......
uview/components/u-grid-item/u-grid-item.vue
View file @ 6948b1ff
<template> <template>
<view class="u-grid-item" :class="[showBorder ? 'u-border-right u-border-bottom' : '']" :hover-class="hoverClass ? 'u-grid-item-hover' : ''" <view class="u-grid-item" :class="[showBorder ? 'u-border-right u-border-bottom' : '']" :hover-class="hoverClass"
:hover-stay-time="200" @tap="click" :style="{ :hover-stay-time="200" @tap="click" :style="{
background: bgColor, background: bgColor,
width: width + 'px' width: width + 'px'
......
uview/components/u-grid/u-grid.vue
View file @ 6948b1ff
...@@ -26,15 +26,15 @@ export default { ...@@ -26,15 +26,15 @@ export default {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 是否显示hover-class的样式
hoverClass: {
type: Boolean,
default: false
},
// 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右 // 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右
align: { align: {
type: String, type: String,
default: 'left' default: 'left'
},
// 宫格按压时的样式类，"none"为无效果
hoverClass: {
type: String,
default: 'u-hover-class'
} }
}, },
data() { data() {
......
uview/components/u-read-more/u-read-more.vue
View file @ 6948b1ff
...@@ -3,7 +3,10 @@ ...@@ -3,7 +3,10 @@
<view class="u-content" :style="{ height: isLongContent && !showMore ? showHeight + 'px' : 'auto' }"> <view class="u-content" :style="{ height: isLongContent && !showMore ? showHeight + 'px' : 'auto' }">
<slot></slot> <slot></slot>
</view> </view>
<view @tap="toggleReadMore" v-if="isLongContent" class="u-showmore-wrap" :class="{ 'u-show-more': showMore }"> <view @tap="toggleReadMore" v-if="isLongContent" class="u-showmore-wrap"
:class="{ 'u-show-more': showMore }"
:style="[shadowStyle]"
>
<text class="u-readmore-btn" :style="{ <text class="u-readmore-btn" :style="{
fontSize: fontSize + 'rpx', fontSize: fontSize + 'rpx',
color: color color: color
...@@ -60,6 +63,17 @@ ...@@ -60,6 +63,17 @@
fontSize: { fontSize: {
type: [String, Number], type: [String, Number],
default: 28 default: 28
},
// 是否显示阴影
shadowStyle: {
type: Object,
default() {
return {
backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
paddingTop: "300rpx",
marginTop: "-300rpx"
}
}
} }
}, },
watch: { watch: {
...@@ -120,9 +134,6 @@ ...@@ -120,9 +134,6 @@
.u-showmore-wrap { .u-showmore-wrap {
position: relative; position: relative;
width: 100%; width: 100%;
background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%);
padding-top: 300rpx;
margin-top: -300rpx;
padding-bottom: 26rpx; padding-bottom: 26rpx;
display: flex; display: flex;
align-items: center; align-items: center;
......
uview/components/u-toast/u-toast.vue
View file @ 6948b1ff
<template> <template>
<view class="u-toast" :class="[isShow ? 'u-show' : '', 'u-type-' + config.type, 'u-postion-' + config.postion]" :style="{ <view class="u-toast" :class="[isShow ? 'u-show' : '', 'u-type-' + config.type, 'u-position-' + config.position]" :style="{
padding: isShow ? '0 40rpx' : 0, padding: isShow ? '0 40rpx' : 0,
zIndex: uZIndex zIndex: uZIndex
}"> }">
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
isTab: false, // 是否跳转tab页面 isTab: false, // 是否跳转tab页面
url: '', // toast消失后是否跳转页面，有则跳转 url: '', // toast消失后是否跳转页面，有则跳转
icon: true, // 显示的图标 icon: true, // 显示的图标
postion: 'center', // toast出现的位置 position: 'center', // toast出现的位置
} }
}; };
}, },
...@@ -156,19 +156,19 @@ ...@@ -156,19 +156,19 @@
line-height: normal; line-height: normal;
} }
.u-postion-center { .u-position-center {
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
} }
.u-postion-top { .u-position-top {
left: 50%; left: 50%;
top: 20%; top: 20%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
} }
.u-postion-bottom { .u-position-bottom {
left: 50%; left: 50%;
bottom: 20%; bottom: 20%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
......
uview/index.scss
View file @ 6948b1ff
...@@ -61,7 +61,8 @@ u-icon { ...@@ -61,7 +61,8 @@ u-icon {
/* start--hover-class-start */ /* start--hover-class-start */
.u-hover-class { .u-hover-class {
background-color: #f7f8f9!important; // background-color: #f7f8f9!important;
opacity: 0.6;
} }
/* end--hover-class--end */ /* end--hover-class--end */
......
uview/libs/config/config.js
View file @ 6948b1ff
// 此版本发布于2020-04-27 // 此版本发布于2020-04-28
let version = '1.1.2'; let version = '1.1.3';
export default { export default {
v: version, v: version,
......
uview/libs/css/common.scss
View file @ 6948b1ff
.u-font-xs {
font-size: 22rpx;
}
.u-font-sm {
font-size: 26rpx;
}
.u-font-md {
font-size: 28rpx;
}
.u-font-lg {
font-size: 30rpx;
}
.u-font-xl {
font-size: 34rpx;
}
.u-flex { .u-flex {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -79,9 +99,20 @@ ...@@ -79,9 +99,20 @@
} }
} }
// 定义外边距 // 定义内外边距
@for $i from 1 through 80 { @for $i from 1 through 80 {
@if $i % 2 == 0 or $i % 5 == 0 { @if $i % 2 == 0 or $i % 5 == 0 {
// 得出：u-margin-30或者u-m-30
.u-margin-#{$i}, .u-m-#{$i} {
margin: $i + rpx;
}
// 得出：u-padding-30或者u-p-30
.u-padding-#{$i}, .u-p-#{$i} {
padding: $i + rpx;
}
// 完整版，结果如：u-margin-left-30
@each $dirction in left, top, right, botttom { @each $dirction in left, top, right, botttom {
// 定义外边距 // 定义外边距
.u-margin-#{$dirction}-#{$i} { .u-margin-#{$dirction}-#{$i} {
...@@ -93,6 +124,19 @@ ...@@ -93,6 +124,19 @@
padding: $i + rpx; padding: $i + rpx;
} }
} }
// 缩写版，结果如： u-m-l-30
@each $dirction in l, t, r, b {
// 定义外边距
.u-m-#{$dirction}-#{$i} {
margin: $i + rpx;
}
// 定义内边距
.u-p-#{$dirction}-#{$i} {
padding: $i + rpx;
}
}
} }
} }
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