wl-design-mobile 0.0.3 → 0.0.5

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

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <div class="info-btn-div">
+      <van-button :disabled="disabled" :icon="icon" :icon-position="position" :loading="loading"
+                  :type="'info'" :class="dynamicClass" size="normal" @click="handleClick"> {{ text }}
+        <slot name="extend"></slot>
+      </van-button>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'LamboInfoBtn',
+  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;
+  min-width: 60px;
+  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;
+}
+
+/* type[info] disable[true] plain[false] */
+/deep/ .info-btn-div .van-button--info {
+  background-color: transparent;
+  color: var(--scl-blue);
+  border: 1px solid var(--scl-blue);
+}
+
+/*线框按钮不可用按钮样式*/
+/deep/ .info-btn-div .van-button--disabled {
+  opacity: 1;
+  color: #000000;
+  border: 1px solid var(--scl-gray-6);
+  background-color: #ffffff;
+}
+</style>

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

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <div class="primary-btn-div">
+      <van-button :disabled="disabled" :icon="icon" :icon-position="position" :loading="loading"
+                  :type="'primary'" :class="dynamicClass" size="normal" @click="handleClick"> {{ text }}
+        <slot name="extend"></slot>
+      </van-button>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'LamboPrimaryBtn',
+  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;
+  min-width: 60px;
+  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;
+}
+
+/* type[primary] disable[true] plain[false] */
+/deep/ .primary-btn-div .van-button--primary {
+  background-color: var(--scl-blue);
+  border: none;
+}
+
+/* type[primary] disable[false] plain[false] */
+/deep/ .primary-btn-div .van-button--disabled {
+  cursor: not-allowed;
+  opacity: 1;
+  background-color: var(--scl-gray-6);
+  color: #000000;
+  border: none;
+}
+
+</style>

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

@@ -0,0 +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;
+  min-width: 60px;
+  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-group.vue

@@ -0,0 +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 solid  rgba(229, 229, 229, 3);
+}
+
+.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

@@ -0,0 +1,40 @@
+<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>

package/btn/lambo-btn.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="btn-sel">
+    <template v-if="type === 'info'">
+      <lambo-info-btn :text="text" :size="size" :position="position" :disabled="disabled" :icon="icon" :loading="loading" @click="handleClick"></lambo-info-btn>
+    </template>
+    <template v-else-if="type === 'text'">
+      <lambo-text-btn :text="text" :size="size" :position="position" :disabled="disabled" :icon="icon" :loading="loading" @click="handleClick"></lambo-text-btn>
+    </template>
+    <template v-else>
+      <lambo-primary-btn :text="text" :size="size" :position="position" :disabled="disabled" :icon="icon" :loading="loading" @click="handleClick"></lambo-primary-btn>
+    </template>
+  </div>
+</template>
+<script>
+
+import LamboInfoBtn from "@/components/lambo/btn/components/lambo-info-btn.vue";
+import LamboTextBtn from "@/components/lambo/btn/components/lambo-text-btn.vue";
+import LamboPrimaryBtn from "@/components/lambo/btn/components/lambo-primary-btn.vue";
+
+export default {
+  name: "LamboBtn",
+  components: {LamboPrimaryBtn, LamboTextBtn, LamboInfoBtn},
+  props: {
+    type: {
+      type: String,
+      default: 'primary'
+    },
+    text: {
+      type: String,
+      default: '按钮'
+    },
+    size: {
+      type: String,
+      default: 'normal',
+    },
+    position: {
+      type: String,
+      default: 'left'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    handleClick(event) {
+      this.$emit('click', event);
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>

package/btn/lambo-extend-btn.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="btn-sel">
+    <lambo-btn :type="type" :text="text" :size="size" :position="position" :disabled="disabled" :icon="icon"
+               :loading="loading"
+               :class="dynamicClass" @click="onClick"></lambo-btn>
+    <ul v-show="show" class="extend-ul">
+      <slot></slot>
+    </ul>
+  </div>
+</template>
+<script>
+import LamboBtn from "@/components/lambo/btn/lambo-btn.vue";
+
+export default {
+  name: 'LamboExtendBtn',
+  components: {LamboBtn},
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    text: {
+      type: String,
+      default: '按钮'
+    },
+    size: {
+      type: String,
+      default: 'normal',
+    },
+    position: {
+      type: String,
+      default: 'right'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: "arrow-down"
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      show: false,
+    }
+  },
+  methods: {
+    onClick() {
+      this.show = !this.show;
+    },
+  },
+  computed: {
+    dynamicClass() {
+      if (this.size === 'big') {
+        return {
+          "big-btn": true
+        }
+      } else if (this.size === 'small') {
+        return {
+          "small-btn": true
+        }
+      } else {
+        return {
+          "normal-btn": true
+        }
+      }
+    }
+  },
+}
+</script>
+<style scoped>
+@import "../styles/index.less";
+
+.big-btn {
+  border: none;
+  min-width: 60px;
+  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;
+}
+
+.extend-ul {
+  z-index: 999;
+}
+</style>

package/btn/{lambo-icon-button.vue → lambo-icon-btn.vue}

@@ -4,7 +4,7 @@
 <script>
 
 export default {
-  name: "LamboIconButton",
+  name: "LamboIconBtn",
   props: {
     icon: String,
     loading: {

package/detail/lambo-detail-grid.vue

@@ -25,6 +25,8 @@ export default {
     }
   },
   created() {
+  },
+  mounted() {
     console.log("LamboDetailGrid -- created -- data:", this.data)
     this.initData()
   },

package/edit/list/Lambo-edit-list.vue

@@ -11,8 +11,7 @@
         <div slot="right-icon" class="coll-title-icon">
           <van-icon :color="'#0070D2'" class="van-icon van-cell__right-icon" name="play"
                     style="position:absolute;left: 1px;"/>
-          <lambo-medium-button :disabled="false" :type="type" style="margin-top: -5px" text="删除"
-                               @click="deleteSpart"></lambo-medium-button>
+          <lambo-btn :type="'text'" :text="'删除'" :size="'normal'" style="margin-top: -5px" @click="deleteSpart"></lambo-btn>
         </div>
         <lambo-edit-single-select :data="singleKv" :default-item="defaultItem" :required="true"
                                   :title="'单选框'"></lambo-edit-single-select>
@@ -22,22 +21,20 @@
         <slot></slot>
       </van-collapse-item>
     </van-collapse>
-    <lambo-big-button :disabled="false" :type="type" text="新增一条" @click="addSpart"></lambo-big-button>
+    <lambo-btn :type="'text'" :text="'新增一条'" :size="'big'" @click="addSpart"></lambo-btn>
   </div>
 </template>
 <script>
-import LamboBigButton from '../../btn/lambo-big-button.vue'
-import LamboMediumButton from '../../btn/lambo-medium-button.vue'
 import LamboEditSingleSelect from "../../edit/select/lambo-edit-single-select.vue";
 import LamboEditMultiSelect from "../../edit/select/lambo-edit-multi-select.vue";
 import LamboEditInput from "../../edit/select/lambo-edit-input.vue";
+import LamboBtn from "@/components/lambo/btn/lambo-btn.vue";
 
 export default {
   name: 'LamboEditList',
   components: {
+    LamboBtn,
     LamboEditInput, LamboEditMultiSelect, LamboEditSingleSelect,
-    LamboBigButton,
-    LamboMediumButton
   },
   props: {},
   data() {

package/edit/list/lambo-edit-card-group.vue

@@ -11,8 +11,7 @@
         <div slot="right-icon" class="coll-title-icon">
           <van-icon :color="'#0070D2'" class="van-icon van-cell__right-icon" name="play"
                     style="position:absolute;left: 1px;"/>
-          <lambo-medium-button :disabled="false" :type="type" style="margin-top: -5px" text="删除"
-                               @click="deleteSpart(index)"></lambo-medium-button>
+          <lambo-btn :type="'text'" :text="'删除'" :size="'normal'" style="margin-top: -5px" @click="deleteSpart(index)"></lambo-btn>
         </div>
         <slot></slot>
       </van-collapse-item>
@@ -20,18 +19,16 @@
   </div>
 </template>
 <script>
-import LamboBigButton from '../../btn/lambo-big-button.vue'
-import LamboMediumButton from '../../btn/lambo-medium-button.vue'
 import LamboEditSingleSelect from "../../edit/select/lambo-edit-single-select.vue";
 import LamboEditMultiSelect from "../../edit/select/lambo-edit-multi-select.vue";
 import LamboEditInput from "../../edit/select/lambo-edit-input.vue";
+import LamboBtn from "@/components/lambo/btn/lambo-btn.vue";
 
 export default {
   name: 'LamboEditCardGroup',
   components: {
-    LamboEditInput, LamboEditMultiSelect, LamboEditSingleSelect,
-    LamboBigButton,
-    LamboMediumButton
+    LamboBtn,
+    LamboEditInput, LamboEditMultiSelect, LamboEditSingleSelect
   },
   props: {
     lineList: {