elementUI slider單向進度條

2021-10-07 20:36:08 字數 3359 閱讀 4578

前端框架使用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...