前端框架使用vue + element ui ,故選用element ui 元件中的進度條
element元件位址
>
="content-hd"
>
單向進度條<
/h2>
<
/div>
="content-bd"
>
:base_info=
"base_info"
v-on:input_value=
"user_input_value"
v-on:is_true=
"is_true_value"
>
<
/onewaysliderbar>
<
/div>
<
/div>
<
/template>
import publichfun from
"../utils/fun"
import onewaysliderbar from
'../components/onewaysliderbar'
// 單向進度條
export
default
, base_info:
, max_send_amount :
'',
flag_is_true_value:'',
}},created()
,mounted()
, components:
, methods:
,// 接收進度條子元件傳遞的額度資料
user_input_value
(value)
,// 接收進度條子元件傳遞的資料
is_true_value
(value)}}
<
/script>
/deep/
.el-slider__marks-text
.slider-bar-input
<
/style>
components/onewaysliderbar.vue檔案
<
!-- 單向進度條 --
>
="slider-bar-wrp"
>
="tc"
>
class
="slider-bar-input"
v-model=
"input_value"
@input=
"on_change_input_value"
placeholder=
"請輸入內容"
>
<
/el-input>
="gapl" v-if=
"is_number"
>次<
/span>
="gapl" v-
else
>元<
/span>
="el-form-item__error"
>
}<
/div>
<
/div>
:step=
"move_step"
show-stops
:min=
"marks_min"
:max=
"marks_max"
:marks=
"marks"
v-model=
"user_recv_amount"
@input=
"on_input_user_recv_amount"
:format-tooltip=
"formattooltip"
>
<
/el-slider>
<
/div>
<
/template>
import publichfun from
"../utils/fun"
export
default
, is_number:},
data()
,// 滑動條下標}}
,created()
, methods:
let min =
number
(this
.base_info.min_limit)
let max =
number
(this
.base_info.max_limit)if(
this
.is_number)
else
// 傳參給父元件
this
.$emit
('input_value'
,this
.input_value)
this
.$emit
('is_true'
,this
.flag_user_recv_amount_month)},
/** * @function 輸入額度
*/on_change_input_value()
elseif(
publichfun.
_comparefloat
(this
.input_value,
this
.base_info.max_limit
))else
// 傳參給父元件
this
.$emit
('input_value'
,this
.input_value)
this
.$emit
('is_true'
,this
.flag_user_recv_amount_month)},
on_input_user_recv_amount()
}}<
/script>
.slider-bar-wrp
.slider-bar-wrp .slider-bar-input
.slider-bar-wrp .enhance-payment
.transfer-wallet-open .data-box .el-button--small
.transfer-wallet-open /deep/
.el-slider__marks-text
.transfer-wallet-open .slider-bar-input
<
/style>
elementUI slider雙向進度條
前端框架使用vue element ui 故選用element ui 元件中的進度條 element元件位址 content hd 雙向進度條 h2 div content bd base info base info v on input value user input value v on i...
進度介面 進度引擎
前段時間工作中遇到乙個問題,需要提供給前端乙個進度資訊展示的介面,一直的思路是將資訊資料放redis中,當每次請求的時候從redis中取出來,更新後再放回redis中,並且將此次的資料返回給前端。但是有乙個問題推翻了這種思路,當資料量過大時 或者獲取某一資料耗時過長時,前端會間隔幾秒就來請求介面,但...
單向迴圈佇列
相信有了前面的基礎我們可以很容易的實現單向迴圈佇列 需要引入我的鍊錶的list.c和list.h 標頭檔案 cycle queue.h cycle queue created by bikang on 16 9 12.ifndef cycle queue cycle queue define cyc...