w-component-vue 2.2.31 → 2.2.34

package/src/components/WLeafletVueDyn.vue

@@ -103,7 +103,7 @@ export default {
             type: Array,
             default: () => [
                 //現在w-leaflet-vue已依賴w-component-vue故為循環引用, 但使用dyn則為脫勾, 故仍需人工更新此處版本
-                'https://cdn.jsdelivr.net/npm/w-leaflet-vue@1.0.23/dist/w-leaflet-vue.umd.js',
+                'https://cdn.jsdelivr.net/npm/w-leaflet-vue@1.0.28/dist/w-leaflet-vue.umd.js',
             ],
         },
         opt: {

package/src/components/WListExpandItem.vue

@@ -25,7 +25,7 @@
 
                 <slot
                     name="header"
-                    :mouseEnter="mouseEnter"
+                    :isHover="mouseEnter"
                     :isActive="active"
                 >
 
@@ -52,7 +52,7 @@
 
                 <slot
                     name="content"
-                    :mouseEnter="mouseEnter"
+                    :isHover="mouseEnter"
                     :isActive="active"
                 >
                 </slot>
@@ -83,7 +83,7 @@ import WIcon from './WIcon.vue'
 /**
  * @vue-prop {String} [text=''] 輸入文字字串，預設''
  * @vue-prop {String} [textFontSize='1rem'] 輸入文字字型大小字串，預設'1rem'
- * @vue-prop {Boolean} [active=false] 輸入是否為主動模式，預設false
+ * @vue-prop {Boolean} [active=false] 輸入是否為主動模式布林值，預設false
  * @vue-prop {Object} [paddingStyle={v:10,h:12}] 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:10,h:12}
  * @vue-prop {String} [backgroundColor='white'] 輸入背景顏色字串，預設'white'
  * @vue-prop {String} [backgroundColorHover='rgba(200,200,200,0.2)'] 輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.2)'

package/src/components/WListHorizontal.vue

@@ -41,6 +41,8 @@
                         :iconColorHover="itemIconColorHover"
                         :iconColorActive="itemIconColorActive"
                         :rippleColor="itemRippleColor"
+                        :clickable="itemClickable"
+                        :cursorPointer="itemCursorPointer"
                         @click="ckItem(item)"
                     >
 
@@ -71,7 +73,6 @@ import size from 'lodash/size'
 import each from 'lodash/each'
 import every from 'lodash/every'
 import isEqual from 'lodash/isEqual'
-import cloneDeep from 'lodash/cloneDeep'
 import isobj from 'wsemi/src/isobj.mjs'
 import domResize from '../js/domResize.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
@@ -80,8 +81,8 @@ import WListItem from './WListItem.vue'
 
 /**
  * @vue-prop {Array} [items=[]] 輸入項目的字串陣列或物件陣列，預設[]
- * @vue-prop {Boolean} [useActive=false] 輸入項目是否使用點擊成為活耀狀態，預設false
- * @vue-prop {String|Object} [itemActive=null] 輸入活耀項目物件，預設null
+ * @vue-prop {Boolean} [useActive=false] 輸入項目是否使用點擊成為活耀狀態布林值，預設false
+ * @vue-prop {String|Object} [itemActive=null] 輸入活耀項目字串或物件，預設null
  * @vue-prop {String} [itemTextFontSize='1rem'] 輸入文字字型大小字串，預設'1rem'
  * @vue-prop {String} [keyText='text'] 輸入項目為物件時，存放顯示文字之欄位字串，預設'text'
  * @vue-prop {String} [keyIcon='icon'] 輸入項目為物件時，存放圖標之欄位字串，預設'icon'
@@ -99,6 +100,8 @@ import WListItem from './WListItem.vue'
  * @vue-prop {String} [itemIconColorHover='#222'] 輸入滑鼠移入時圖標顏色字串，預設'#222'
  * @vue-prop {String} [itemIconColorActive='orange darken-3'] 輸入主動模式時圖標顏色字串，預設'orange darken-3'
  * @vue-prop {String} [itemRippleColor='rgba(245,124,0,0.4)'] 輸入ripple效果顏色字串，預設'rgba(245,124,0,0.4)'
+ * @vue-prop {Boolean} [itemClickable=true] 輸入是否為可點擊模式布林值，預設true
+ * @vue-prop {Boolean} [itemCursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式，預設true
  * @vue-prop {Boolean} [borderBottom=true] 輸入主動模式時是否於項目底部顯示高亮線條，預設true
  * @vue-prop {Number} [borderBottomSize=2] 輸入底部高亮線條尺寸(高度)數字，單位px，預設2
  * @vue-prop {String} [borderBottomColor='rgba(245,124,0,0.8)'] 輸入底部高亮線條顏色字串，預設'rgba(245,124,0,0.8)'
@@ -196,6 +199,14 @@ export default {
             type: String,
             default: 'rgba(245,124,0,0.4)',
         },
+        itemClickable: {
+            type: Boolean,
+            default: true,
+        },
+        itemCursorPointer: {
+            type: Boolean,
+            default: true,
+        },
         borderBottom: {
             type: Boolean,
             default: true,
@@ -383,16 +394,11 @@ export default {
             //save itemActiveTrans
             vo.itemActiveTrans = item
 
-            //nextTick
-            vo.$nextTick(() => {
-
-                //emit
-                vo.$emit('click', cloneDeep(item))
+            //emit
+            vo.$emit('click', { ...item })
 
-                //emit
-                vo.$emit('update:itemActive', cloneDeep(item))
-
-            })
+            //emit
+            vo.$emit('update:itemActive', { ...item })
 
         },
 

package/src/components/WListItem.vue

@@ -1,28 +1,33 @@
 <template>
     <div
-        :style="`transition:all 0.3s; border-top-left-radius:${borderRadius}px; border-top-right-radius:${borderRadius}px; ${usePadding} background:${useBackgroundColor}; cursor:pointer;`"
+        :style="`transition:all 0.3s; border-top-left-radius:${borderRadius}px; border-top-right-radius:${borderRadius}px; ${usePadding} background:${useBackgroundColor}; ${clickable&&cursorPointer?'cursor:pointer;':''}`"
         v-domripple="{color:rippleColor}"
         @mouseenter="mouseEnter=true"
         @mouseleave="mouseEnter=false"
-        @click="$emit('click',{icon,text})"
+        @click="clickItem"
     >
-        <div style="display:flex; align-items:center;">
+        <!-- 文字顏色與字型大小放在slot外, 使組件設定能於slot內收到預設影響 -->
+        <div :style="`transition:all 0.3s; color:${useTextColor}; ${useTextFontSize}`">
 
             <slot
-                :mouseEnter="mouseEnter"
+                :isHover="mouseEnter"
                 :isActive="active"
             >
 
-                <WIcon
-                    style="margin-right:8px;"
-                    :icon="icon"
-                    :color="useIconColor"
-                    :size="iconSize"
-                    v-if="hasIcon"
-                ></WIcon>
+                <div style="display:flex; align-items:center;">
+
+                    <WIcon
+                        style="margin-right:8px;"
+                        :icon="icon"
+                        :color="useIconColor"
+                        :size="iconSize"
+                        v-if="hasIcon"
+                    ></WIcon>
+
+                    <div>
+                        {{text}}
+                    </div>
 
-                <div :style="`transition:all 0.3s; color:${useTextColor}; ${useTextFontSize}`">
-                    {{text}}
                 </div>
 
             </slot>
@@ -32,7 +37,6 @@
 </template>
 
 <script>
-import get from 'lodash/get'
 import replace from 'wsemi/src/replace.mjs'
 import domRipple from '../js/domRipple.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
@@ -43,7 +47,7 @@ import WIcon from './WIcon.vue'
 /**
  * @vue-prop {String} [text=''] 輸入文字字串，預設''
  * @vue-prop {String} [textFontSize='1rem'] 輸入文字字型大小字串，預設'1rem'
- * @vue-prop {Boolean} [active=false] 輸入是否為主動模式，預設false
+ * @vue-prop {Boolean} [active=false] 輸入是否為主動模式布林值，預設false
  * @vue-prop {Object} [paddingStyle={v:10,h:12}] 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:10,h:12}
  * @vue-prop {Number} [borderRadius=0] 輸入框圓角度數字，單位為px，預設0
  * @vue-prop {String} [backgroundColor='white'] 輸入背景顏色字串，預設'white'
@@ -58,6 +62,8 @@ import WIcon from './WIcon.vue'
  * @vue-prop {String} [iconColorHover='#222'] 輸入滑鼠移入時圖標顏色字串，預設'#222'
  * @vue-prop {String} [iconColorActive='white'] 輸入主動模式時圖標顏色字串，預設'white'
  * @vue-prop {String} [rippleColor='rgba(255,255,255,0.4)'] 輸入ripple效果顏色字串，預設'rgba(255,255,255,0.4)'
+ * @vue-prop {Boolean} [clickable=true] 輸入是否為可點擊模式布林值，預設true
+ * @vue-prop {Boolean} [cursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式，預設true
  */
 export default {
     directives: {
@@ -140,6 +146,14 @@ export default {
             type: String,
             default: 'rgba(255,255,255,0.4)',
         },
+        clickable: {
+            type: Boolean,
+            default: true,
+        },
+        cursorPointer: {
+            type: Boolean,
+            default: true,
+        },
     },
     data: function() {
         return {
@@ -247,15 +261,19 @@ export default {
     },
     methods: {
 
-        getIcon: function(item) {
-            return get(item, 'icon', '')
-        },
+        clickItem: function() {
+            // console.log('clickItem')
+
+            let vo = this
 
-        getText: function(item) {
-            let t = get(item, 'text', '')
-            if (t === '') {
-                return item
+            //check
+            if (!vo.clickable) {
+                return
             }
+
+            //emit
+            vo.$emit('click', { icon: vo.icon, text: vo.text })
+
         },
 
     }

package/src/components/WListVertical.vue

@@ -39,6 +39,8 @@
                         :iconColorHover="itemIconColorHover"
                         :iconColorActive="itemIconColorActive"
                         :rippleColor="itemRippleColor"
+                        :clickable="itemClickable"
+                        :cursorPointer="itemCursorPointer"
                         @click="ckItem(item)"
                     >
 
@@ -47,7 +49,9 @@
                         >
                             <slot
                                 name="item"
-                                :item="{...item,...props}"
+                                :item="item"
+                                :isHover="props.isHover"
+                                :isActive="props.isActive"
                             >
                             </slot>
                         </template>
@@ -72,7 +76,6 @@ import get from 'lodash/get'
 import size from 'lodash/size'
 import every from 'lodash/every'
 import isEqual from 'lodash/isEqual'
-import cloneDeep from 'lodash/cloneDeep'
 import isEle from 'wsemi/src/isEle.mjs'
 import isobj from 'wsemi/src/isobj.mjs'
 import domResize from '../js/domResize.mjs'
@@ -82,8 +85,8 @@ import WListItem from './WListItem.vue'
 
 /**
  * @vue-prop {Array} [items=[]] 輸入項目的字串陣列或物件陣列，預設[]
- * @vue-prop {Boolean} [useActive=false] 輸入項目是否使用點擊成為活耀狀態，預設false
- * @vue-prop {String|Object} [itemActive=null] 輸入活耀項目物件，預設null
+ * @vue-prop {Boolean} [useActive=false] 輸入項目是否使用點擊成為活耀狀態布林值，預設false
+ * @vue-prop {String|Object} [itemActive=null] 輸入活耀項目字串或物件，預設null
  * @vue-prop {String} [itemTextFontSize='1rem'] 輸入文字字型大小字串，預設'1rem'
  * @vue-prop {String} [keyText='text'] 輸入項目為物件時，存放顯示文字之欄位字串，預設'text'
  * @vue-prop {String} [keyIcon='icon'] 輸入項目為物件時，存放圖標之欄位字串，預設'icon'
@@ -99,6 +102,8 @@ import WListItem from './WListItem.vue'
  * @vue-prop {String} [itemIconColorHover='#222'] 輸入滑鼠移入時圖標顏色字串，預設'#222'
  * @vue-prop {String} [itemIconColorActive='white'] 輸入主動模式時圖標顏色字串，預設'white'
  * @vue-prop {String} [itemRippleColor='rgba(255,255,255,0.4)'] 輸入ripple效果顏色字串，預設'rgba(255,255,255,0.4)'
+ * @vue-prop {Boolean} [itemClickable=true] 輸入是否為可點擊模式布林值，預設true
+ * @vue-prop {Boolean} [itemCursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式，預設true
  */
 export default {
     directives: {
@@ -186,6 +191,14 @@ export default {
             type: String,
             default: 'rgba(255,255,255,0.4)',
         },
+        itemClickable: {
+            type: Boolean,
+            default: true,
+        },
+        itemCursorPointer: {
+            type: Boolean,
+            default: true,
+        },
     },
     data: function() {
         return {
@@ -292,16 +305,11 @@ export default {
             //save itemActiveTrans
             vo.itemActiveTrans = item
 
-            //nextTick
-            vo.$nextTick(() => {
-
-                //emit
-                vo.$emit('click', cloneDeep(item))
+            //emit
+            vo.$emit('click', { ...item })
 
-                //emit
-                vo.$emit('update:itemActive', cloneDeep(item))
-
-            })
+            //emit
+            vo.$emit('update:itemActive', { ...item })
 
         },
 

package/src/components/WPanelDivideHorizontal.vue

@@ -2,7 +2,7 @@
     <div
         :changeParam="changeParam"
         v-domresize
-        @domresize="updatePanelSize"
+        @domresize="resizePanel"
     >
 
         <div
@@ -41,6 +41,7 @@
 </template>
 
 <script>
+import isNumber from 'lodash/isNumber'
 import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
 import domResize from '../js/domResize.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
@@ -48,8 +49,12 @@ import color2hex from '../js/vuetifyColor.mjs'
 
 /**
  * @vue-prop {Number} [ratio=0.5] 輸入分隔條位置比例數字，範圍為0~1，預設0.5
- * @vue-prop {Number} [min=0] 輸入分隔條位置最小比例數字，範圍為0~1，需小於max，若min大於max則由min主導，預設0
- * @vue-prop {Number} [max=1] 輸入分隔條位置最大比例數字，範圍為0~1，需大於min，若min大於max則由min主導，預設1
+ * @vue-prop {Number} [ratioMin=0] 輸入分隔條位置最小比例數字，範圍為0~1，需小於ratioMax，若ratioMin大於ratioMax則由ratioMin主導，預設0
+ * @vue-prop {Number} [ratioMax=1] 輸入分隔條位置最大比例數字，範圍為0~1，需大於ratioMin，若ratioMin大於ratioMax則由ratioMin主導，預設1
+ * @vue-prop {Number} [leftWidthMin=null] 輸入左側區最小寬度數字，處理優先權大於ratioMin與ratioMax，預設null
+ * @vue-prop {Number} [leftWidthMax=null] 輸入左側區最大寬度數字，處理優先權大於ratioMin與ratioMax，預設null
+ * @vue-prop {Number} [rightWidthMin=null] 輸入右側區最小寬度數字，處理優先權大於ratioMin、ratioMax、leftWidthMin與leftWidthMax，預設null
+ * @vue-prop {Number} [rightWidthMax=null] 輸入右側區最大寬度數字，處理優先權大於ratioMin、ratioMax、leftWidthMin與leftWidthMax，預設null
  * @vue-prop {String} [barColor='#ddd'] 輸入分隔條顏色字串，預設'#ddd'
  * @vue-prop {Number} [barSize=2] 輸入分隔條尺寸數字，為分隔條寬度，單位為px，預設2
  * @vue-prop {String} [barBorderColor='transparent'] 輸入分隔條框線顏色字串，預設'transparent'
@@ -64,14 +69,30 @@ export default {
             type: Number,
             default: 0.5, //0~1
         },
-        min: {
+        ratioMin: {
             type: Number,
             default: 0,
         },
-        max: {
+        ratioMax: {
             type: Number,
             default: 1,
         },
+        leftWidthMin: {
+            type: Number,
+            default: null,
+        },
+        leftWidthMax: {
+            type: Number,
+            default: null,
+        },
+        rightWidthMin: {
+            type: Number,
+            default: null,
+        },
+        rightWidthMax: {
+            type: Number,
+            default: null,
+        },
         barColor: {
             type: String,
             default: '#ddd',
@@ -124,16 +145,15 @@ export default {
     computed: {
 
         changeParam: function() {
-            //console.log('computed changeParam')
+            // console.log('computed changeParam')
 
             let vo = this
 
             //ratio
             let r = vo.ratio
 
-            //min, max
-            r = Math.min(r, vo.max)
-            r = Math.max(r, vo.min)
+            //limitRatio
+            r = vo.limitRatio(r)
 
             //save
             vo.r = r
@@ -160,8 +180,8 @@ export default {
     },
     methods: {
 
-        updatePanelSize: function(msg) {
-            //console.log('methods updatePanelSize', msg)
+        resizePanel: function(msg) {
+            //console.log('methods resizePanel', msg)
 
             let vo = this
 
@@ -174,11 +194,63 @@ export default {
 
         },
 
+        limitRatio: function(r) {
+            // console.log('methods limitRatio', r)
+
+            let vo = this
+
+            //ratioMin, ratioMax
+            r = Math.min(r, vo.ratioMax)
+            r = Math.max(r, vo.ratioMin)
+
+            //check
+            if (vo.panelWidth > 0) {
+
+                //leftWidth
+                let leftWidth = (r) * vo.panelWidth
+
+                //check leftWidthMin
+                if (isNumber(vo.leftWidthMin)) {
+                    if (leftWidth < vo.leftWidthMin) {
+                        r = vo.leftWidthMin / vo.panelWidth
+                    }
+                }
+
+                //check leftWidthMax
+                if (isNumber(vo.leftWidthMax)) {
+                    if (leftWidth > vo.leftWidthMax) {
+                        r = vo.leftWidthMax / vo.panelWidth
+                    }
+                }
+
+                //rightWidth
+                let rightWidth = (1 - r) * vo.panelWidth
+
+                //check rightWidthMin
+                if (isNumber(vo.rightWidthMin)) {
+                    if (rightWidth < vo.rightWidthMin) {
+                        r = -(vo.rightWidthMin / vo.panelWidth - 1)
+                    }
+                }
+
+                //check rightWidthMax
+                if (isNumber(vo.rightWidthMax)) {
+                    if (rightWidth > vo.rightWidthMax) {
+                        r = -(vo.rightWidthMax / vo.panelWidth - 1)
+                    }
+                }
+
+            }
+
+            return r
+        },
+
         dragBar: function({ clientX }) {
             //console.log('methods dragBar', clientX)
 
             let vo = this
 
+            //r
             let bd = vo.$el.getBoundingClientRect()
             let x = clientX
             let w = vo.$el.offsetWidth
@@ -187,9 +259,8 @@ export default {
                 r = (x - bd.left) / w //clientX需扣除元件的left位置
             }
 
-            //min, max
-            r = Math.min(r, vo.max)
-            r = Math.max(r, vo.min)
+            //limitRatio
+            r = vo.limitRatio(r)
 
             //save
             vo.r = r

package/src/components/WPanelDivideVertical.vue

@@ -2,7 +2,7 @@
     <div
         :changeParam="changeParam"
         v-domresize
-        @domresize="updatePanelSize"
+        @domresize="resizePanel"
     >
 
         <div
@@ -41,6 +41,7 @@
 </template>
 
 <script>
+import isNumber from 'lodash/isNumber'
 import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
 import domResize from '../js/domResize.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
@@ -48,8 +49,12 @@ import color2hex from '../js/vuetifyColor.mjs'
 
 /**
  * @vue-prop {Number} [ratio=0.5] 輸入分隔條位置比例數字，範圍為0~1，預設0.5
- * @vue-prop {Number} [min=0] 輸入分隔條位置最小比例數字，範圍為0~1，需小於max，若min大於max則由min主導，預設0
- * @vue-prop {Number} [max=1] 輸入分隔條位置最大比例數字，範圍為0~1，需大於min，若min大於max則由min主導，預設1
+ * @vue-prop {Number} [ratioMin=0] 輸入分隔條位置最小比例數字，範圍為0~1，需小於ratioMax，若ratioMin大於ratioMax則由ratioMin主導，預設0
+ * @vue-prop {Number} [ratioMax=1] 輸入分隔條位置最大比例數字，範圍為0~1，需大於ratioMin，若ratioMin大於ratioMax則由ratioMin主導，預設1
+ * @vue-prop {Number} [topHeightMin=null] 輸入左側區最小寬度數字，處理優先權大於ratioMin與ratioMax，預設null
+ * @vue-prop {Number} [topHeightMax=null] 輸入左側區最大寬度數字，處理優先權大於ratioMin與ratioMax，預設null
+ * @vue-prop {Number} [bottomHeightMin=null] 輸入右側區最小寬度數字，處理優先權大於ratioMin、ratioMax、topHeightMin與topHeightMax，預設null
+ * @vue-prop {Number} [bottomHeightMax=null] 輸入右側區最大寬度數字，處理優先權大於ratioMin、ratioMax、topHeightMin與topHeightMax，預設null
  * @vue-prop {String} [barColor='#ddd'] 輸入分隔條顏色字串，預設'#ddd'
  * @vue-prop {String} [barBorderColor='transparent'] 輸入分隔條框線顏色字串，預設'transparent'
  * @vue-prop {Number} [barSize=2] 輸入分隔條尺寸數字，為分隔條高度，單位為px，預設2
@@ -64,14 +69,30 @@ export default {
             type: Number,
             default: 0.5, //0~1
         },
-        min: {
+        ratioMin: {
             type: Number,
             default: 0,
         },
-        max: {
+        ratioMax: {
             type: Number,
             default: 1,
         },
+        topHeightMin: {
+            type: Number,
+            default: null,
+        },
+        topHeightMax: {
+            type: Number,
+            default: null,
+        },
+        bottomHeightMin: {
+            type: Number,
+            default: null,
+        },
+        bottomHeightMax: {
+            type: Number,
+            default: null,
+        },
         barColor: {
             type: String,
             default: '#ddd',
@@ -131,9 +152,8 @@ export default {
             //ratio
             let r = vo.ratio
 
-            //min, max
-            r = Math.min(r, vo.max)
-            r = Math.max(r, vo.min)
+            //limitRatio
+            r = vo.limitRatio(r)
 
             //save
             vo.r = r
@@ -160,8 +180,8 @@ export default {
     },
     methods: {
 
-        updatePanelSize: function(msg) {
-            //console.log('methods updatePanelSize', msg)
+        resizePanel: function(msg) {
+            //console.log('methods resizePanel', msg)
 
             let vo = this
 
@@ -174,6 +194,57 @@ export default {
 
         },
 
+        limitRatio: function(r) {
+            // console.log('methods limitRatio', r)
+
+            let vo = this
+
+            //ratioMin, ratioMax
+            r = Math.min(r, vo.ratioMax)
+            r = Math.max(r, vo.ratioMin)
+
+            //check
+            if (vo.panelHeight > 0) {
+
+                //topHeight
+                let topHeight = (r) * vo.panelHeight
+
+                //check topHeightMin
+                if (isNumber(vo.topHeightMin)) {
+                    if (topHeight < vo.topHeightMin) {
+                        r = vo.topHeightMin / vo.panelHeight
+                    }
+                }
+
+                //check topHeightMax
+                if (isNumber(vo.topHeightMax)) {
+                    if (topHeight > vo.topHeightMax) {
+                        r = vo.topHeightMax / vo.panelHeight
+                    }
+                }
+
+                //bottomHeight
+                let bottomHeight = (1 - r) * vo.panelHeight
+
+                //check bottomHeightMin
+                if (isNumber(vo.bottomHeightMin)) {
+                    if (bottomHeight < vo.bottomHeightMin) {
+                        r = -(vo.bottomHeightMin / vo.panelHeight - 1)
+                    }
+                }
+
+                //check bottomHeightMax
+                if (isNumber(vo.bottomHeightMax)) {
+                    if (bottomHeight > vo.bottomHeightMax) {
+                        r = -(vo.bottomHeightMax / vo.panelHeight - 1)
+                    }
+                }
+
+            }
+
+            return r
+        },
+
         dragBar: function({ clientY }) {
             //console.log('methods dragBar', clientY)
 
@@ -187,9 +258,8 @@ export default {
                 r = (y - bd.top) / h //clientX需扣除元件的top位置
             }
 
-            //min, max
-            r = Math.min(r, vo.max)
-            r = Math.max(r, vo.min)
+            //limitRatio
+            r = vo.limitRatio(r)
 
             //save
             vo.r = r