vue滑動進度條元件，可點選 可拖拽

錄屏有點邊框，請忽略~

匯入

import cprogress from

'./../components/c-progress'

="c-progress"

:percent=
"70" @percentchange=
"onpercentchange"
/>
="c-progress"
:percent=
"70"
:show-slider=
"true"
:show-per-text=
"false"
/>
="c-progress"
:percent=
"70"
:show-slider=
"true"
:width=
"400"
/>
="c-progress"
:percent=
"70"
:show-slider=
"true"
:width=
"200"
:slider-width=
"15"
/>
="c-progress"
:percent=
"80"
:show-slider=
"false" progress-color=
"red"
/>
="c-progress"
:percent=
"80"
:show-slider=
"false" type=
"warning"
/>
="c-progress"
:percent=
"80"
:show-slider=
"false" type=
"fail"
/>
="c-progress"
:percent=
"90"
:show-slider=
"true" type=
"success"
/>

說明型別

預設值percent

百分比number

60showslider

是否顯示滑塊

boolean

true

showpertext

是否顯示百分比

boolean

true

width

進度條的寬度

number

300sliderwidth

進度條的寬度

number

300bgcolor

背景顏色

string

#ebeef5

progresscolor

進度的顏色

string

#409eff

type

進度的顏色型別（與progresscolor只能填乙個）

string

default

事件名說明

percentchange

百分比的變化在事件的第乙個引數返回， percentchange(per)

="c-progress"

:percent=
"70" @percentchange=
"onpercentchange"
/>
onpercentchange
(per)

="c-progress"

>
="c-progress-outer"
:style=
"setprogressbgstyle" ref=
"progress"
>
="c-progress-inner"
:style=
"setprogressstyle"
>
<
/div>
"showslider"
class
="c-progress-slider" ref=
"slider"
:style=
"setsliderstyle"
>
<
/div>
<
/div>
"showpertext"
>}%
<
/span>
<
/div>
<
/template>
// 使用了element的顏色
const colortable =
export
default
, showslider:
, showpertext:
,// 進度條的寬度
width:
, bgcolor:
, progresscolor:
,// 滑塊的寬度
sliderwidth:
,// 顏色的型別
type:},
data()
},computed:
px` }},
// 設定進度條的樣式
setprogressstyle()
px`,
background: color
}},// 設定滑塊的樣式
setsliderstyle()
`,width:`$
px`,
height:`$
px`,
left:`$
px` }}}
,mounted()
, methods:
let curx = progress.offsetleft
this
.sliderleft = e.offsetx - curx
if(this
.sliderleft <=0)
if(this
.sliderleft >=
this
.width)
this
._countcurpercent()
} slider.
onmousedown
=(e)
=>
progress.
onmousemove
=(e)
=>}}
progress.
onmouseup=(
)=>},
// 算出百分比
_countcurpercent()
if(this
.temppercent >=
100)
this
.$emit
('percentchange'
,this
.temppercent)}}
}<
/script>

前端元件化 可拖拽進度條元件

專案更迭建立前端ui元件庫的一些歸納總結。1.元件化開發解決的問題 2.元件化開發原則 3.例項 可拖拽進度條元件 可拖拽進度條元件引數 入參描述 min進度調左側對應最小值 max進度條右側對應最大值 value 當前值color 進度條顏色 rendersign 是否重繪進度條 slider c...

Vue元件庫之進度條 progressbar 元件

效果圖 首先我們看一下進度條元件執行出來的效果，如下圖顯示 進度條元件 實現過程 progressbar元件在乙個可以直接執行的npm包，通過yeoman進行構建，再通過gulp webpack構建工具，生成的工作目錄如下，其中各個資料夾的內容入之前的一篇文章一樣 progressbar元件工作目錄...

VUE 超好看氣泡進度條元件

超好看的氣泡進度條,已封裝成元件.二話不說先上圖 使用 progressbar cardwidth 90 cardheight 30 width progre title title rightsize rightsize colorindex 2 progressbar cardwidthnumb...