Commit 8968a8ef authored by yiruiwen's avatar yiruiwen

完善

parent 37fa38a9
...@@ -19,7 +19,7 @@ uView UI,是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架,全 ...@@ -19,7 +19,7 @@ uView UI,是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架,全
## [官方文档:https://www.uviewui.com](https://www.uviewui.com) ## [官方文档:https://www.uviewui.com](https://www.uviewui.com)
### [点击加群交流反馈:863820668](https://jq.qq.com/?_wv=1027&k=uyZUkSlo) ### [点击加群交流反馈:1129077272](https://qm.qq.com/cgi-bin/qm/qr?k=1FfucLpozYbnb7FWo_KsqAdEi1mE3Qrf&jump_from=webapi)
## 特性 ## 特性
...@@ -78,7 +78,6 @@ Vue.use(uView); ...@@ -78,7 +78,6 @@ Vue.use(uView);
```css ```css
/* App.vue */ /* App.vue */
<style lang="scss"> <style lang="scss">
/* 注意声明lang="scss"! */
@import "uview-ui/index.scss"; @import "uview-ui/index.scss";
</style> </style>
``` ```
...@@ -124,7 +123,7 @@ Vue.use(uView); ...@@ -124,7 +123,7 @@ Vue.use(uView);
## 捐赠uView的研发 ## 捐赠uView的研发
uView文档源码全部开源免费,如果您认为uView帮到了您的开发工作,您可以捐赠uView的研发工作,捐赠无门槛,哪怕是一杯可乐也好(相信这比打赏主播更有意义)。 uView文档内容和框架源码全部开源免费,如果您认为uView帮到了您的开发工作,您可以捐赠uView的研发工作,捐赠无门槛,哪怕是一杯可乐也好(相信这比打赏主播更有意义)。
<img src="https://uviewui.com/common/wechat.png" width="220" > <img src="https://uviewui.com/common/wechat.png" width="220" >
<img style="margin-left: 100px;" src="https://uviewui.com/common/alipay.png" width="220" > <img style="margin-left: 100px;" src="https://uviewui.com/common/alipay.png" width="220" >
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"name" : "uView", "name" : "uView",
"appid" : "__UNI__60F4B81", "appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架", "description" : "多平台快速开发的UI框架",
"versionName" : "1.8.2", "versionName" : "1.8.3",
"versionCode" : "100", "versionCode" : "100",
"transformPx" : false, "transformPx" : false,
"app-plus" : { "app-plus" : {
......
...@@ -68,8 +68,8 @@ ...@@ -68,8 +68,8 @@
* @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true) * @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true)
* @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true) * @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true)
* @property {String Number} max-year 可切换的最大年份(默认2050) * @property {String Number} max-year 可切换的最大年份(默认2050)
* @property {String Number} min-year 最小可选日期(默认1950) * @property {String Number} min-year 可切换的最小年份(默认1950)
* @property {String Number} min-date 可切换的最小年份(默认1950-01-01) * @property {String Number} min-date 最小可选日期(默认1950-01-01)
* @property {String Number} max-date 最大可选日期(默认当前日期) * @property {String Number} max-date 最大可选日期(默认当前日期)
* @property {String Number} 弹窗顶部左右两边的圆角值,单位rpx(默认20) * @property {String Number} 弹窗顶部左右两边的圆角值,单位rpx(默认20)
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true) * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true)
......
<template>
<view class="u-progress" :style="{
borderRadius: round ? '100rpx' : 0,
height: height + 'rpx',
backgroundColor: inactiveColor
}">
<view :class="[
type ? `u-type-${type}-bg` : '',
striped ? 'u-striped' : '',
striped && stripedActive ? 'u-striped-active' : ''
]" class="u-active" :style="[progressStyle]">
<slot v-if="$slots.default || $slots.$default" />
<block v-else-if="showPercent">
{{percent + '%'}}
</block>
</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(this.activeColor) style.backgroundColor = this.activeColor;
return style;
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.u-progress {
overflow: hidden;
height: 15px;
/* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
align-items: center;
width: 100%;
border-radius: 100rpx;
}
.u-active {
width: 0;
height: 100%;
align-items: center;
@include vue-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>
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
@load="onLoadHandler" @load="onLoadHandler"
:lazy-load="lazyLoad" :lazy-load="lazyLoad"
class="u-image__image" class="u-image__image"
:show-menu-by-longpress="showMenuByLongpress"
:style="{ :style="{
borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius) borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius)
}" }"
......
...@@ -178,14 +178,14 @@ export default { ...@@ -178,14 +178,14 @@ export default {
// 获取评分组件盒子的布局信息 // 获取评分组件盒子的布局信息
getElRectById() { getElRectById() {
// uView封装的获取节点的方法,详见文档 // uView封装的获取节点的方法,详见文档
this.$u.getRect('#' + this.elId).then(res => { this.$uGetRect('#' + this.elId).then(res => {
this.starBoxLeft = res.left this.starBoxLeft = res.left
}) })
}, },
// 获取单个星星的尺寸 // 获取单个星星的尺寸
getElRectByClass() { getElRectByClass() {
// uView封装的获取节点的方法,详见文档 // uView封装的获取节点的方法,详见文档
this.$u.getRect('.' + this.elClass).then(res => { this.$uGetRect('.' + this.elClass).then(res => {
this.starWidth = res.width this.starWidth = res.width
// 把每个星星右边到组件盒子左边的距离放入数组中 // 把每个星星右边到组件盒子左边的距离放入数组中
for (let i = 0; i < this.count; i++) { for (let i = 0; i < this.count; i++) {
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
: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"
v-if="item.count" v-if="item.count || item.isDot"
:offset="[-2, getOffsetRight(item.count, item.isDot)]" :offset="[-2, getOffsetRight(item.count, item.isDot)]"
></u-badge> ></u-badge>
</view> </view>
......
// 此版本发布于2020-11-19 // 此版本发布于2020-12-17
let version = '1.8.2'; let version = '1.8.3';
export default { export default {
v: version, v: version,
......
{ {
"name": "uview-ui", "name": "uview-ui",
"version": "1.8.2", "version": "1.8.3",
"description": "uView UI,是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水", "description": "uView UI,是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水",
"main": "index.js", "main": "index.js",
"keywords": [ "keywords": [
......
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