wl-design-mobile 0.8.19 → 0.8.21

package/btn/components/lambo-text-btn.vue

@@ -1,116 +1,116 @@
-<template>
-  <div>
-    <div class="text-btn-div">
-      <van-button :disabled="disabled" :icon="icon" :icon-position="position" :loading="loading"
-                  :type="'default'" :class="dynamicClass" size="normal" @click="handleClick"> {{ text }}
-        <slot name="extend"></slot>
-      </van-button>
-    </div>
-  </div>
-</template>
-<script>
-
-export default {
-  name: 'LamboTextBtn',
-  components: {},
-  props: {
-    text: {
-      type: String,
-      default: '中号按钮'
-    },
-    position: {
-      type: String,
-      default: 'left'
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    icon: {
-      type: String,
-      default: null
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    size: {
-      type: String,
-      default: "normal"
-    }
-  },
-  data() {
-    return {}
-  },
-  methods: {
-    handleClick(event) {
-      this.$emit('click', event);
-    }
-  },
-  computed: {
-    dynamicClass() {
-      if (this.size === 'big') {
-        return {
-          "big-btn": true
-        }
-      } else if (this.size === 'small') {
-        return {
-          "small-btn": true
-        }
-      } else {
-        return {
-          "normal-btn": true
-        }
-      }
-    }
-  },
-  created() {
-
-  },
-  mounted() {
-
-  }
-}
-</script>
-<style scoped>
-@import "../../styles/index.less";
-
-.big-btn {
-  border: none;
-  width: 100%;
-  height: 38px;
-  font-size: 14px;
-  border-radius: 3px;
-}
-
-.normal-btn {
-  border: none;
-  min-width: 60px;
-  height: 30px;
-  font-size: 12px;
-  border-radius: 3px;
-}
-
-.small-btn {
-  border: none;
-  min-width: 60px;
-  height: 27px;
-  font-size: 11px;
-  border-radius: 3px;
-}
-
-/*无框类型按钮样式 */
-/deep/ .text-btn-div .van-button--default {
-  background: var(--scl-white-1);
-  border: none;
-  color: var(--scl-blue);
-}
-
-/*无框按钮不可用按钮样式*/
-/deep/ .text-btn-div .van-button--disabled {
-  opacity: 1;
-  color: #000000;
-  border: none;
-  background-color: var(--scl-white-1);
-}
-</style>
+<template>
+  <div>
+    <div class="text-btn-div">
+      <van-button :disabled="disabled" :icon="icon" :icon-position="position" :loading="loading"
+                  :type="'default'" :class="dynamicClass" size="normal" @click="handleClick"> {{ text }}
+        <slot name="extend"></slot>
+      </van-button>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'LamboTextBtn',
+  components: {},
+  props: {
+    text: {
+      type: String,
+      default: '中号按钮'
+    },
+    position: {
+      type: String,
+      default: 'left'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "normal"
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    handleClick(event) {
+      this.$emit('click', event);
+    }
+  },
+  computed: {
+    dynamicClass() {
+      if (this.size === 'big') {
+        return {
+          "big-btn": true
+        }
+      } else if (this.size === 'small') {
+        return {
+          "small-btn": true
+        }
+      } else {
+        return {
+          "normal-btn": true
+        }
+      }
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+@import "../../styles/index.less";
+
+.big-btn {
+  border: none;
+  width: 100%;
+  height: 38px;
+  font-size: 14px;
+  border-radius: 3px;
+}
+
+.normal-btn {
+  border: none;
+  min-width: 60px;
+  height: 30px;
+  font-size: 12px;
+  border-radius: 3px;
+}
+
+.small-btn {
+  border: none;
+  min-width: 60px;
+  height: 27px;
+  font-size: 11px;
+  border-radius: 3px;
+}
+
+/*无框类型按钮样式 */
+/deep/ .text-btn-div .van-button--default {
+  background: var(--scl-white-1);
+  border: none;
+  color: var(--scl-blue);
+}
+
+/*无框按钮不可用按钮样式*/
+/deep/ .text-btn-div .van-button--disabled {
+  opacity: 1;
+  color: #000000;
+  border: none;
+  background-color: var(--scl-white-1);
+}
+</style>

package/btn/lambo-btn-divide.vue

@@ -1,120 +1,35 @@
-<template>
-  <div class="lambo-btn-divide" :style="holderStyle">
-    <div ref="bar"
-         class="container-divide"
-         :class="{'container-divide--fixed': fixed, 'container-divide--safe': fixed && safeArea}"
-         :style="barStyle">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "LamboBtnDivide",
-  props: {
-    // 是否固定在页面底部，常用于修改、新增等表单页面，避免滚动到底部才能操作
-    fixed: {
-      type: Boolean,
-      default: false
-    },
-    // 固定时是否适配 iPhone 底部安全区（Home 指示条）
-    safeArea: {
-      type: Boolean,
-      default: true
-    },
-    // 固定时的层级，默认与顶部导航栏一致；vant 弹层默认 2000+，会自然覆盖在底栏之上
-    zIndex: {
-      type: [Number, String],
-      default: 100
-    }
-  },
-  data() {
-    return {
-      barHeight: 0
-    }
-  },
-  computed: {
-    holderStyle() {
-      // 固定时底栏脱离文档流，外层生成等高占位，避免页面内容被遮挡
-      return this.fixed && this.barHeight > 0 ? {height: this.barHeight + 'px'} : {};
-    },
-    barStyle() {
-      return this.fixed ? {zIndex: this.zIndex} : {};
-    }
-  },
-  watch: {
-    fixed(val) {
-      if (val) {
-        this.$nextTick(this.updateHeight);
-      } else {
-        this.barHeight = 0;
-      }
-    },
-    safeArea() {
-      if (this.fixed) {
-        this.$nextTick(this.updateHeight);
-      }
-    }
-  },
-  mounted() {
-    if (!this.fixed) {
-      return;
-    }
-    this.$nextTick(this.updateHeight);
-    window.addEventListener('resize', this.updateHeight);
-    window.addEventListener('orientationchange', this.updateHeight);
-    // 按钮内容（字体、图标）变化导致高度变化时同步占位高度
-    if (typeof ResizeObserver !== 'undefined' && this.$refs.bar) {
-      this.resizeObserver = new ResizeObserver(this.updateHeight);
-      this.resizeObserver.observe(this.$refs.bar);
-    }
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.updateHeight);
-    window.removeEventListener('orientationchange', this.updateHeight);
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
-  },
-  methods: {
-    updateHeight() {
-      if (this.fixed && this.$refs.bar) {
-        this.barHeight = this.$refs.bar.offsetHeight;
-      }
-    }
-  }
-}
-</script>
-<style scoped>
-.container-divide {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  flex-direction: row;
-  gap: 6px;
-}
-
-.container-divide /deep/ .btn-sel {
-  flex: 1;
-}
-
-/* 固定底部模式：白底 + 顶部分隔线 + 轻微阴影，与页面内容区分 */
-.container-divide--fixed {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  box-sizing: border-box;
-  padding: 8px 14px;
-  background-color: var(--scl-white-1, #FFFFFF);
-  border-top: 1px solid var(--scl-white-3, #EBEDF0);
-  box-shadow: 0 -2px 8px rgba(51, 51, 51, 0.06);
-}
-
-/* iPhone 底部安全区适配 */
-.container-divide--safe {
-  padding-bottom: calc(8px + constant(safe-area-inset-bottom));
-  padding-bottom: calc(8px + env(safe-area-inset-bottom));
-}
-</style>
+<template>
+  <div class="container-divide">
+    <slot></slot>
+  </div>
+</template>
+<script>
+import LamboBtn from "../btn/lambo-btn.vue";
+
+export default {
+  name: "LamboBtnDivide",
+  components: {LamboBtn},
+  props: {},
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+<style scoped>
+.container-divide {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  flex-direction: row;
+  gap: 6px;
+}
+
+.container-divide /deep/ .btn-sel {
+  flex: 1;
+}
+</style>

package/btn/lambo-btn-group.vue

@@ -1,46 +1,46 @@
-<template>
-  <div class="button-group">
-    <slot></slot>
-  </div>
-</template>
-<script>
-
-export default {
-  name: 'LamboBtnGroup',
-  components: {},
-  props: {},
-  data() {
-    return {
-
-    }
-  },
-  methods: {
-
-  },
-  created() {
-
-  },
-  mounted() {
-
-  }
-}
-</script>
-<style scoped>
-@import "../styles/index.less";
-
-.button-group {
-  display: flex;
-  padding: 0 14px;
-  background-color: var(--scl-white-1);
-  border-bottom: 1px var(--scl-white-2);
-}
-
-.button-group /deep/ .btn-sel {
-  flex: 1;
-  text-align: center;
-}
-
-/*.button-group /deep/ .btn-sel:nth-child(n+2) {
-  border-left: 1px solid var(--scl-white-2);
-}*/
-</style>
+<template>
+  <div class="button-group">
+    <slot></slot>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'LamboBtnGroup',
+  components: {},
+  props: {},
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+
+  },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+@import "../styles/index.less";
+
+.button-group {
+  display: flex;
+  padding: 0 14px;
+  background-color: var(--scl-white-1);
+  border-bottom: 1px var(--scl-white-2);
+}
+
+.button-group /deep/ .btn-sel {
+  flex: 1;
+  text-align: center;
+}
+
+/*.button-group /deep/ .btn-sel:nth-child(n+2) {
+  border-left: 1px solid var(--scl-white-2);
+}*/
+</style>

package/btn/lambo-btn-split-line.vue

@@ -1,41 +1,41 @@
-<template>
-  <div class="line-parent-div">
-    <div class="line-div"></div>
-  </div>
-</template>
-<script>
-
-export default {
-  components: {},
-  props: {
-    // 后期竖线长度和居中水平，根据插槽元素调整，目前只实现normal大小的。
-    // size: {
-    //   type: String,
-    //   default: 'normal',
-    // }
-  },
-  data() {
-    return {
-
-    }
-  },
-  methods: {
-
-  }
-}
-</script>
-<style scoped>
-.line-parent-div {
-  height: 27px;
-  width: 1px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.line-div {
-  height: 12px;
-  width: 1px;
-  background-color: var(--scl-white-2);
-}
-</style>
+<template>
+  <div class="line-parent-div">
+    <div class="line-div"></div>
+  </div>
+</template>
+<script>
+
+export default {
+  components: {},
+  props: {
+    // 后期竖线长度和居中水平，根据插槽元素调整，目前只实现normal大小的。
+    // size: {
+    //   type: String,
+    //   default: 'normal',
+    // }
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+<style scoped>
+.line-parent-div {
+  height: 27px;
+  width: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.line-div {
+  height: 12px;
+  width: 1px;
+  background-color: var(--scl-white-2);
+}
+</style>