角度组件
This commit is contained in:
Iruka
parent
d3ac14bab5
commit
d3ad689af1
227
components/angle-progress-bar/angle-progress-bar.vue
Normal file
227
components/angle-progress-bar/angle-progress-bar.vue
Normal file
@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<u-popup :mode="mode" :show="showPopup" @close="close">
|
||||
<view class="dialog-container">
|
||||
<view class="dialog-title">
|
||||
<view>{{ title }}</view>
|
||||
<view>{{ extra }}</view>
|
||||
<view class="close-btn" @click="close">
|
||||
<u-icon name="close" color="#333" size="20"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dialog-body">
|
||||
<view class="grid">
|
||||
<view class="grid-time">
|
||||
<view @click="subtraction">-</view>
|
||||
</view>
|
||||
<view class="grid-time">
|
||||
<view class="logs-data-box">
|
||||
<view class="content" style="height: 100%;">
|
||||
<view>
|
||||
<view style="text-align: center;"> {{ value }}% </view>
|
||||
<view style="width: 100%;">
|
||||
<u-slider :height="100" blockSize="28" min="0" max="100" activeColor="#15d99b"
|
||||
:value="value" :step="step" :showValue="false" @changing="changing"
|
||||
@change="change" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-time">
|
||||
<view @click="addition">+</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="buttons">
|
||||
<u-button type="success" size="large" text="确定" @click="confirm"></u-button>
|
||||
<u-button type="info" size="large" text="取消" @click="close"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "angle-progress-bar",
|
||||
emits: ['close', 'confirm'],
|
||||
props: {
|
||||
mode: { // left、top、right、bottom、center
|
||||
type: String,
|
||||
default: "bottom"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showPopup: false,
|
||||
step: 1,
|
||||
title: "",
|
||||
extra: "",
|
||||
value: 0,
|
||||
pagesObj: {
|
||||
item: null,
|
||||
index: null,
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
show(title, extra, value, pagesObj) {
|
||||
this.showPopup = true;
|
||||
this.title = title;
|
||||
this.extra = extra;
|
||||
this.value = value;
|
||||
this.pagesObj = pagesObj || {
|
||||
item: null,
|
||||
index: null,
|
||||
};
|
||||
},
|
||||
close() {
|
||||
this.showPopup = false;
|
||||
this.$emit('close');
|
||||
},
|
||||
confirm() {
|
||||
let obj = this.pagesObj;
|
||||
obj.value = this.value
|
||||
this.$emit('confirm', obj);
|
||||
this.close();
|
||||
},
|
||||
subtraction() {
|
||||
if (this.value >= this.step) {
|
||||
this.value = this.value - this.step;
|
||||
} else {
|
||||
this.value = 0;
|
||||
}
|
||||
},
|
||||
addition() {
|
||||
let value = this.value + this.step;
|
||||
if (value <= 100) {
|
||||
this.value = value;
|
||||
} else {
|
||||
this.value = 100;
|
||||
}
|
||||
},
|
||||
changing(e) {
|
||||
this.value = e;
|
||||
},
|
||||
change(e) {
|
||||
this.value = e;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 弹出进度条 */
|
||||
.dialog-container {
|
||||
min-width: 300px;
|
||||
|
||||
.dialog-title {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
&>uni-view {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&>uni-view:nth-child(2) {
|
||||
font-size: 14px;
|
||||
color: #5bc724;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
movable-area {
|
||||
|
||||
height: 30rpx;
|
||||
width: 210px;
|
||||
margin: auto;
|
||||
border-radius: 5px;
|
||||
background-color: #D8D8D8;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
movable-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
background-color: #15d99b;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::v-deep .uni-slider-handle-wrapper {
|
||||
height: 30px !important;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .uni-slider-thumb {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
box-shadow: 0 0 0px 4px #74ffd4 !important;
|
||||
margin-top: -12px !important;
|
||||
}
|
||||
|
||||
::v-deep uni-slider {
|
||||
margin: 10px 18px 0 18px !important;
|
||||
}
|
||||
|
||||
::v-deep uni-slider .uni-slider-tap-area {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
.grid {
|
||||
margin: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 0.5fr 2fr 0.5fr;
|
||||
|
||||
.grid-time:first-child,
|
||||
.grid-time:last-child {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
align-items: end;
|
||||
|
||||
&>uni-view {
|
||||
width: 35px;
|
||||
height: 30px;
|
||||
background-color: #eaecf0;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
line-height: 26px;
|
||||
color: #564556;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-time:last-child {
|
||||
justify-items: left;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin: 40px 10px 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user