mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 21:29:31 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<view class="tm-propress" :style="{
|
||||
width: width_c ,
|
||||
}">
|
||||
<view
|
||||
class="tm-propress-wk "
|
||||
:style="{
|
||||
height: height_upx,
|
||||
overflow:loading?'hidden':'inherit'
|
||||
}"
|
||||
>
|
||||
<view :class="[shape=='round'?'round-24':'',bgColor,black_tmeme?'bk':'']" class="tm-propress-wk-statick "></view>
|
||||
<view :animation="animationData" :class="[black_tmeme?'bk':'',shape=='round'?'round-24':'',colors.theme?colors.color:'',loading?'ani':'']"
|
||||
class="tm-propress-wk-active flex-end"
|
||||
:style="{
|
||||
height: height_upx,
|
||||
width:baifenbi,
|
||||
background:colors.theme?'default':colors.color
|
||||
}"
|
||||
>
|
||||
|
||||
<block v-if="value>0&&showValue">
|
||||
<slot name="default" :value="value">
|
||||
<view class="tm-propress-wk-active-label flex-center px-10 round-24"
|
||||
:class="[black_tmeme?'bk':'',colors.theme?colors.color:'']"
|
||||
:style="{background:colors.theme?'default':colors.color}">
|
||||
<text>{{value}}%</text>
|
||||
</view>
|
||||
</slot>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 进度条
|
||||
* @property {Function} change value变化时触发.
|
||||
* @property {Function} input value变化时触发.
|
||||
* @property {Number} value = [] 通过value来赋值进度,如果想双向绑定需要value.sync,建议使用v-model.
|
||||
* @property {Number} width = [] 宽度,默认自动宽度,单位rpx,也可输入百分比或者其它类型比如5px
|
||||
* @property {Number} height = [] 高度,默认6,单位upx,也可输入百分比或者其它类型比如5px
|
||||
* @property {String} shape = [round|square] 默认round,方形:square,半圆形:round.
|
||||
* @property {String} color = [] 默认primary,可以是16进制,rgb,rgba,主题色名称.
|
||||
* @property {String} bg-color = [] 默认 grey-lighten-4 ,背景颜色
|
||||
* @property {Boolean} loading = [true|false] 默认false,自动加载中...
|
||||
* @example <tm-propress v-model="checked" ></tm-propress>
|
||||
*/
|
||||
export default {
|
||||
name: 'tm-propress',
|
||||
model:{
|
||||
prop:"value",
|
||||
event:"input"
|
||||
},
|
||||
props: {
|
||||
// 单位upx
|
||||
width: {
|
||||
type: Number|String,
|
||||
default: 0
|
||||
},
|
||||
// 单位upx
|
||||
height: {
|
||||
type: Number|String,
|
||||
default: 8
|
||||
},
|
||||
value:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
showValue:{
|
||||
type:Boolean|String,
|
||||
default:true,
|
||||
},
|
||||
// 方形:square,半圆形:round.
|
||||
shape:{
|
||||
type:String,
|
||||
default:"round"
|
||||
},
|
||||
color:{
|
||||
type:String,
|
||||
default:"primary"
|
||||
},
|
||||
loading:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
bgColor:{
|
||||
type:String,
|
||||
default:'grey-lighten-4'
|
||||
},
|
||||
// 跟随主题色的改变而改变。
|
||||
fllowTheme:{
|
||||
type:Boolean|String,
|
||||
default:true
|
||||
},
|
||||
black: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
black_tmeme: function() {
|
||||
if (this.black !== null) return this.black;
|
||||
return this.$tm.vx.state().tmVuetify.black;
|
||||
},
|
||||
colors:function(){
|
||||
return this.$TestColor(this.color_tmeme);
|
||||
},
|
||||
color_tmeme:function(){
|
||||
if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
|
||||
return this.$tm.vx.state().tmVuetify.color;
|
||||
}
|
||||
return this.color;
|
||||
},
|
||||
width_upx: {
|
||||
get:function(){
|
||||
return this.width_c;
|
||||
},
|
||||
set:function(val){
|
||||
if(val==''||val==0||typeof val === 'undefined'){
|
||||
this.width_c = '100%';
|
||||
return;
|
||||
}
|
||||
let reg = /(vw|vh|rem|em|\%|upx|rpx|auto|px)/g;
|
||||
if (reg.test(val)) {
|
||||
this.width_c = val;
|
||||
return
|
||||
}
|
||||
this.width_c = val+'rpx';
|
||||
|
||||
}
|
||||
},
|
||||
height_upx: function() {
|
||||
let reg = /(vw|vh|rem|em|\%|upx|rpx|auto|px)/g;
|
||||
if (reg.test(this.height)) {
|
||||
return this.height;
|
||||
}
|
||||
return this.height+'rpx';
|
||||
},
|
||||
baifenbi:function(){
|
||||
if(this.loading) return "100rpx";
|
||||
let bl = this.value ;
|
||||
if(typeof bl !=='number') bl =0;
|
||||
if(bl>=100) bl =100;
|
||||
if(bl<=0) bl =0;
|
||||
this.$emit("input",bl);
|
||||
this.$emit("update:value",bl);
|
||||
this.$emit("change",bl);
|
||||
return bl + "%"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width_c:0,
|
||||
animationData:"",
|
||||
animation:null,
|
||||
tmiddd:55656
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.width_upx = this.width;
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.tmiddd)
|
||||
},
|
||||
async mounted() {
|
||||
|
||||
this.$nextTick(async function(){
|
||||
let p = await this.$Querey(".tm-propress",this).catch(e=>{})
|
||||
|
||||
this.width_upx = p[0].width+'px';
|
||||
if(this.loading){
|
||||
await this.startAni();
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
async startAni(){
|
||||
// clearInterval(this.tmiddd)
|
||||
let t = this;
|
||||
var animation = uni.createAnimation({
|
||||
duration: 1000,
|
||||
timingFunction: 'linear',
|
||||
})
|
||||
this.animation = animation
|
||||
animation.opacity(0).translateX(t.width_c).step()
|
||||
this.animationData = animation.export()
|
||||
this.tmiddd = setInterval(async function() {
|
||||
t.animationData = ""
|
||||
animation.opacity(1).translateX(0).step({duration:0})
|
||||
t.animationData = animation.export()
|
||||
await uni.$tm.sleep(50)
|
||||
animation.opacity(0).translateX(t.width_c).step()
|
||||
t.animationData = animation.export()
|
||||
}.bind(this), 1000)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tm-propress {
|
||||
.tm-propress-wk {
|
||||
position: relative;
|
||||
.tm-propress-wk-statick,
|
||||
.tm-propress-wk-active {
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
.tm-propress-wk-active {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition:0.35s;
|
||||
|
||||
.tm-propress-wk-active-label{
|
||||
|
||||
height: 30rpx;
|
||||
font-size:22rpx;
|
||||
max-width: 100rpx;
|
||||
|
||||
}
|
||||
// &.ani{
|
||||
// transition:1s;
|
||||
// animation-name: linef;
|
||||
// animation-duration: 1s;
|
||||
// animation-timing-function: linear;
|
||||
// animation-iteration-count: infinite;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes linef{
|
||||
0%{
|
||||
// left:0;
|
||||
transform: translateX(0);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
100%{
|
||||
// left:100%;
|
||||
transform: translateX(311px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user