dolphin-weex-ui 1.2.2 → 1.2.3

package/packages/dof-slider/index.vue

@@ -1,13 +1,49 @@
 <template>
   <div class="dof-slider" @touchstart="onTouchStart" @horizontalpan="onTouchMove" @touchend="onTouchEnd">
     <div class="dof-slider-track" ref="track" :style="trackStyle">
-      <div :class="['dof-slider-bar', barColor ? '' : `dof-slider-bar--${this.theme}`]" ref="bar" :style="barStyle">
-        <div class="dof-slider-button" v-for="(itemStyle, i) in buttonStyle" :key="i" :style="itemStyle"></div>
+      <div v-if="isThinBar" class="dof-slider-thin-bar" :style="thinBarStyle">
+        <div
+          class="dof-slider-thin-bar-left"
+          v-if="gradientBarConfig.mid"
+          :style="{
+            backgroundImage: `linear-gradient(to right, ${gradientBarConfig.start}, ${gradientBarConfig.mid})`,
+            right: midWidth + 'px'
+          }"
+        ></div>
+        <div
+          v-if="gradientBarConfig.mid"
+          class="dof-slider-thin-bar-right"
+          :style="{
+            backgroundImage: `linear-gradient(to right, ${gradientBarConfig.mid}, ${gradientBarConfig.end})`,
+            left: midWidth + 'px'
+          }"
+        ></div>
+        <div
+          class="dof-slider-thin-bar-left"
+          v-if="!gradientBarConfig.mid"
+          :style="{
+            backgroundImage: `linear-gradient(to right, ${gradientBarConfig.start}, ${gradientBarConfig.end})`,
+            right: 0 + 'px'
+          }"
+        ></div>
+      </div>
+      <div
+        :class="['dof-slider-bar', barColor || isThinBar ? '' : `dof-slider-bar--${this.theme}`]"
+        ref="bar"
+        :style="barStyle"
+      >
+        <div
+          :class="['dof-slider-button', isTouching ? 'dof-slider-button-touching' : '']"
+          v-for="(itemStyle, i) in buttonStyle"
+          :key="i"
+          :style="itemStyle"
+        ></div>
       </div>
     </div>
     <div class="dof-slider-scales" v-if="$slots.default">
       <slot></slot>
     </div>
+    <div class="dof-slider-disabled-mask" v-if="isThinBar && disabled" @touchstart="() => {}"></div>
   </div>
 </template>
 
@@ -68,6 +104,10 @@ export default {
     delay: {
       type: Number,
       default: 50
+    },
+    gradientBarConfig: {
+      type: Object,
+      default: () => ({})
     }
   },
   model: {
@@ -82,7 +122,8 @@ export default {
       width: 0,
       dragTargetIndex: null, // 0 1
       startRight: null,
-      prevScreenX: null
+      prevScreenX: null,
+      isTouching: false
     }
   },
   computed: {
@@ -90,17 +131,29 @@ export default {
     isBoth() {
       return Object.prototype.toString.call(this.value) === '[object Array]'
     },
+    // 是否细bar
+    isThinBar() {
+      return this.gradientBarConfig.start && this.gradientBarConfig.end
+    },
     scope() {
       return this.max - this.min
     },
     interactive() {
       return !this.disabled && !this.readonly
     },
+    _trackHeight() {
+      if (this.isThinBar) return this.buttonSize * 1.6
+      return this.trackHeight
+    },
     trackStyle() {
       const res = {
-        height: `${this.trackHeight}px`,
+        height: `${this._trackHeight}px`,
         backgroundColor: this.trackColor,
-        borderRadius: `${this.trackHeight / 2}px`
+        borderRadius: `${this._trackHeight / 2}px`
+      }
+      // 细bar样式
+      if (this.isThinBar) {
+        res.backgroundColor = 'transparent'
       }
       return res
     },
@@ -113,23 +166,23 @@ export default {
       }
 
       // const width = ((this.value - this.min) / this.scope) * this.width
-      // const widthCss = clamp(width+this.trackHeight, this.trackHeight, this.width)
+      // const widthCss = clamp(width+this._trackHeight, this._trackHeight, this.width)
 
-      // fix: 修复value带来的width小于this.trackHeight时，bar宽度不变
+      // fix: 修复value带来的width小于this._trackHeight时，bar宽度不变
       const width = percent * this.width
-      let widthCss = this.trackHeight
+      let widthCss = this._trackHeight
       if (percent < 0) {
-        widthCss = this.trackHeight
+        widthCss = this._trackHeight
       } else if (percent > 1) {
-        widthCss = this.width + this.trackHeight
+        widthCss = this.width + this._trackHeight
       } else {
         // 正常滑动
-        widthCss = width + this.trackHeight
+        widthCss = width + this._trackHeight
       }
       const res = {
         width: `${widthCss}px`,
-        borderRadius: `${this.trackHeight / 2}px`,
-        height: `${this.trackHeight}px`
+        borderRadius: `${this._trackHeight / 2}px`,
+        height: `${this._trackHeight}px`
       }
 
       if (this.isBoth) res.left = ((Math.max(this.value[0], this.min) - this.min) / this.scope) * this.width + 'px'
@@ -137,24 +190,45 @@ export default {
       if (this.barColor) {
         res.backgroundColor = this.barColor
       }
+      // 细bar样式
+      if (this.isThinBar) {
+        res.backgroundColor = 'transparent'
+      }
       return res
     },
     buttonStyle() {
+      // const buttonSize = !this.isTouching ? `${this.buttonSize}` : `${this.buttonSize + 16}`
+      const buttonSize = this.buttonSize
       const res = {
-        top: `${(this.trackHeight - this.buttonSize) / 2}px`,
-        // right: `${(this.trackHeight - this.buttonSize) / 2}px`,
-        width: `${this.buttonSize}px`,
-        height: `${this.buttonSize}px`,
-        borderRadius: `${this.buttonSize / 2}px`,
+        top: `${(this._trackHeight - buttonSize) / 2}px`,
+        // right: `${(this._trackHeight - this.buttonSize) / 2}px`,
+        width: `${buttonSize}px`,
+        height: `${buttonSize}px`,
+        borderRadius: `${buttonSize / 2}px`,
         backgroundColor: this.buttonColor
       }
-      const buttonPadding = (this.trackHeight - this.buttonSize) / 2
+      const buttonPadding = (this._trackHeight - buttonSize) / 2
       return this.isBoth
         ? [
             { ...res, left: `${buttonPadding}px` },
             { ...res, right: `${buttonPadding}px` }
           ]
         : [{ ...res, right: `${buttonPadding}px` }]
+    },
+    thinBarStyle() {
+      const buttonPadding = (this._trackHeight - this.buttonSize) / 2
+      const res = {
+        top: `${(this._trackHeight - 4) / 2}px`,
+        left: `${buttonPadding}px`,
+        right: `${buttonPadding}px`,
+        height: '4px'
+        // ios 线性渐变要写成行内
+        // backgroundImage: `linear-gradient(to right, ${this.gradientBarConfig.start}, ${this.gradientBarConfig.end});`
+      }
+      return res
+    },
+    midWidth() {
+      return this.width / 2
     }
   },
   mounted() {
@@ -163,7 +237,7 @@ export default {
       res => {
         if (res.result) {
           // 实际可滑动长度（可变化范围）= bar宽度 - btn宽度
-          this.width = res.size.width - this.trackHeight
+          this.width = res.size.width - this._trackHeight
         }
       },
       this.delay
@@ -174,7 +248,7 @@ export default {
       if (!this.interactive) {
         return
       }
-
+      if (this.isThinBar) this.isTouching = true
       this.touch.start(e)
 
       if (this.isBoth) {
@@ -216,6 +290,7 @@ export default {
       if (!this.interactive) {
         return
       }
+      this.isTouching = false
       // 点按
       if (this.startValue === this.current) {
         const total = this.width
@@ -281,6 +356,7 @@ export default {
 <style scoped>
 .dof-slider {
   flex-direction: column;
+  position: relative;
 }
 
 .dof-slider-track {
@@ -323,10 +399,40 @@ export default {
 
 .dof-slider-button {
   position: absolute;
+  transition-property: transform;
+  transition-duration: 0.3s;
+  transition-delay: 0s;
+  transform: scale(1);
+}
+.dof-slider-button-touching {
+  transform: scale(1.5);
 }
 .dof-slider-scales {
   position: relative;
   margin-top: 16px;
   height: 24px;
 }
+.dof-slider-thin-bar {
+  position: absolute;
+}
+.dof-slider-thin-bar-left {
+  position: absolute;
+  height: 4px;
+  top: 0px;
+  left: 0px;
+}
+.dof-slider-thin-bar-right {
+  position: absolute;
+  height: 4px;
+  top: 0px;
+  right: 0px;
+}
+.dof-slider-disabled-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
 </style>

package/packages/dof-slider-scale/index.vue

@@ -13,6 +13,11 @@ export default {
     value: {
       type: Number,
       required: true
+    },
+    color: {
+      type: String,
+      required: false,
+      default: '#8a8a8f'
     }
   },
   computed: {
@@ -23,9 +28,16 @@ export default {
       return this.value <= this.$parent.min
     },
     style() {
-      const style = {}
+      const style = {
+        color: this.color
+      }
       const left = ((this.value - this.$parent.min) / this.$parent.scope) * this.$parent.width
       style.left = `${left}px`
+      // 防止超出的情况
+      if (this.isLast) {
+        delete style.left
+        style.right = '0px'
+      }
       return style
     }
   }
@@ -47,6 +59,6 @@ export default {
 }
 
 .dof-slider-scale--last {
-  /* transform: translate(-100%, 0px); */
+  /* transform: translate(-50%, 0px); */
 }
 </style>

package/packages/dof-switch/index.vue

@@ -125,6 +125,10 @@
   border-width: 0px;
   background-color: #1f94d2;
 }
+.switch-active-colmo {
+  border-width: 0px;
+  background-color: #b35336;
+}
 .switch-disabled {
   opacity: 0.3;
 }