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 的處理程式 即...