乙個簡單的刻度尺
匯入npm install cs-ruler
全域性引入
在 main.js 中引入
import csruler from 'cs-ruler'
vue.use(csruler)
在.vue檔案中使用
注意 這裡的元件名稱為 cs-ruler,不能替換為其他的
區域性引入
如果想要在單個檔案中引入,也可以的
在.vue中引入
import ruler from 'cs-ruler'
在components中註冊元件
components: {
'cs-ruler': ruler.csingruler
之後就可以使用了
可配置項
rulernum 是乙個函式,需要乙個值去接收
methods: {
//子元件傳遞刻度表
rulernum(value){
this.numvalue = value
使用@post-numvalue來接收滾動的值
nownum為初始值,預設為100,可不傳
maxnum為刻度尺的最大值,預設為1000,可不傳
minnum為刻度的最小值,預設為0,可不傳
可配置小數
可配置一頁顯示多少格,目前一頁為40個小格
主題顏色
配置字型大小以及刻度值的顯示
2.0.0版本新增
新增可配置指標顏色
新增配置字型大小
字型顏色直接修改相應的class名即可,如果有需求想要配置可以提出
新增配置格數
可配置一頁顯示多少格,預設一頁為40個小格,最低30個小格,數字為10的倍數,格數太低沒有適配,有需求可以提出來
新增配置小數
可開啟小數,整體除以10,預設不開啟(最大值與最小值需要相應的變大10倍)
2.0.2版本修改
修改最大值無法選中..已修復
2.1.0版本修改
修復樣式影響到其他頁面問題
修復同時使用多個元件,配置無效問題
新增滾動結束後傳送給父級訊息事件,具體使用方法如下
在方法中監聽scroll-end傳遞的值,值為true,則滾動完成
methods: {
//子元件結束傳值true
endevent(val){
console.log(val)
新增開始滾動後傳送給父級訊息事件,具體使用方法如下
在方法中監聽scroll-start傳遞的值,值為true,則滾動完成
methods: {
startevent(val){
console.log(val)
2.1.2版本修改
新增倍數字段onegridvalue,將整體的數值擴大,預設為1(最大值與最小值也會相應的擴大)
2.1.3版本修改
修復bug最小值設定的原因,導致初始值計算出錯
喜歡的話歡迎到github上star並且提出自己的需求
python座標軸刻度設定對數 用對數刻度設定刻度
我將新增一些圖並顯示如何刪除較小的刻度線 op from matplotlib import pyplot as plt fig1,ax1 plt.subplots ax1.plot 10,100,1000 1,2,3 ax1.set xscale log ax1.set xticks 20,300...
自定義 View 迴圈滾動刻度控制項
先看效果圖 enter description here loopscaleview 是乙個自定義的刻度尺風格的選值控制項,從上面的 大家可以看到 loopscaleview 的執行效果.可以設定螢幕內顯示的刻度數,也可以設定每乙個刻度代表的值得大小。onvaluechangelistener 刻度...
python設定標題 軸標籤 刻度標籤
import numpy as np import matplotlib.pyplot as plt plt.figure x np.arange 0,10,1 這個函式的第三個引數表示的是步長，以此進行劃分 z x 2y np.linspace 1,10,10 這個函式的第三個引數表示的是用幾個點...