元件原始碼 拖動條Slider

2021-09-24 08:31:55 字數 2265 閱讀 3729

slider主要的api如下:

屬性型別說明

defaultvalue

number

預設值tickvalue

number

標尺刻度數量,預設5

start

number

起始值,預設值為0

endnumber

結束值suffix

string

字尾onsliding

func

滑塊拖動進行時事件,value為拖動條當前值

onslid

func

滑塊拖動完成時事件,即滑鼠抬起後執行,value為拖動條當前值

defaultvalue就是預設的拖動條的位置,tickvalue是有多少段,start和end分別是起始和結束刻度,suffix是字尾。

slider元件的包括幾個基礎子元件:slider,selectedbar,scale

slider是拖動的頭部區域,就是那個方塊和tooltip

selectedbar是藍色區域,不包括slider,是已選擇的區域

scale是下面的刻度區域

bar是整個的灰色線條區域

刻度的實現就是建立乙個陣列,用來儲存每個刻度div(乙個刻度就是乙個div),然後通過遍歷來給每乙個刻度賦值(value)和給style.left賦值,這樣刻度條按照特定的位置排列。

class

scale

extends

component

componentwillmount()

render() = this.props

const rows =

for (let i = 0; i <= this.tickvalue; i++)

ref= classname="bfd-scale__tick">

div>

div>

) }

return (

ref="container"

style=}

classname=>

div>)}

componentdidmount()

if (index == arr.length - 1)

const el = this.refs['t' + index]

s el.innerhtml = '

' + parseint(math.round(value))

if (index == 0) else

if (index == this.tickvalue) else

})} gettick(num)

arr.push(this.width)``

return arr

}}複製**

slider區域是整個元件邏輯所在的地方,主要是該元件繫結了mousedown事件,而mousedown事件中為body繫結了mousemove和mouseup事件,我們的邏輯主要在mousemove事件中,在mousedown事件和mouseup事件響應函式中主要是為body註冊和解除安裝事件***。我們來看mousemove事件的監聽函式:

handlemousemove(event)  else

if (left >= (this.width - this.sliderwidth / 2)) else

slider.style.left = left + 'px'

const text = this.getvalue(parseint(selectedbar.style.width, 10))

this.refs.msg.innerhtml = text + (this.props.suffix || '')

if (typeof

this.props.onsliding == 'function')

}}複製**

可以看到,上面主要是設定selectbar的寬度selectedbar.style.width,設定msg中的文字text,如果元件設定了onsiding處理函式的話,就觸發該函式。

**中有乙個封裝較好的函式,用來獲取乙個元素的左偏移量

getoffsetleft(el) 

return left

}複製**

增加拖動條的椒鹽雜訊生成器原始碼

椒鹽雜訊生成器 這個函式作用是對輸入影象輸出椒鹽雜訊 輸入src源影象,輸入格式影象名 影象格式,要求影象和程式處於相同資料夾 調整椒鹽雜訊引數,輸入s進行儲存,輸入q退出 include include using namespace cv using namespace std void src...

sentinel context元件原始碼分析

context元件在sentinel中扮演的是一種什麼樣的角色呢?借用原作者的注釋 this class holds metadata of current invocation 其實就是儲存一次資源訪問鏈路元資料的類,鏈路的各個節點都能通過獲取鏈路繫結的context來獲取一些資訊進行相應的處理。...

URLRewriter元件及原始碼

微軟推出的一款重寫url的乙個元件,以及元件源 用法如下 原理 當iis接收到請求之後,判斷請求頁面的字尾名,然後通過iis配置中的對映中設定的,哪種字尾的檔案是由哪個處理程式處理的規則交由相應的程式來處理該請求完成操作。所以我們要在iis裡設定對映 讓 html 的檔案交由 net 的處理程式 即...