wl-design-mobile 0.0.1

package/btn/lambo-big-button.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="btns">
+    <ul class="lambobigbutton-ul">
+      <van-button :disabled="disabled" :icon="icon" :icon-position="position" :loading="loading" :plain="plain"
+                  :type="type" class="LamboBigButton" size="large" @click="handleClick"> {{ text }}
+      </van-button>
+    </ul>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'LamboBigButton',
+  components: {},
+  props: {
+    type: {
+      // 填充类型按钮  plain传false type传primary
+      // 线框类型按钮  plain传true type传info
+      // 无框类型按钮  plain传false type传default
+      type: String,
+      default: 'primary'
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    text: {
+      type: String,
+      default: '大号按钮'
+    },
+    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);
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+@import "../styles/index.less";
+
+.LamboBigButton {
+  height: 38px;
+  border-radius: 3px;
+}
+
+/*填充按钮primary类型按钮样式 */
+/deep/ .lambobigbutton-ul .van-button--primary {
+  background: var(--scl-blue);
+  border: 1px solid var(--scl-blue);
+}
+
+/*填充按钮primary类型不可用按钮样式 */
+/deep/ .lambobigbutton-ul .van-button--disabled {
+  cursor: not-allowed;
+  opacity: 1;
+  background-color: var(--scl-gray-6);
+  color: #000000;
+  border: 0px solid var(--scl-gray-6);
+}
+
+/*按钮文字样式*/
+/deep/ .lambobigbutton-ul .van-button__text {
+  font-size: 14px;
+  padding: 10px 0px;
+  font-family: 微软雅黑, serif Regular;
+}
+
+/*线框按钮按钮样式*/
+/deep/ .lambobigbutton-ul .van-button--plain.van-button--info {
+  color: var(--scl-blue);
+  border: 1px solid var(--scl-blue);
+}
+
+/*线框按钮不可用按钮样式*/
+/deep/ .lambobigbutton-ul .van-button--plain.van-button--info.van-button--disabled {
+  color: #000000;
+  border: 1px solid var(--scl-gray-6);
+  background-color: #ffffff;
+}
+
+/*无框类型按钮样式 */
+/deep/ .lambobigbutton-ul .van-button--default {
+  background: var(--scl-white-1);
+  border: 1px solid var(--scl-white-1);
+  color: var(--scl-blue);
+}
+
+/*无框按钮不可用按钮样式*/
+/deep/ .lambobigbutton-ul .van-button--default.van-button--disabled {
+  color: #000000;
+  border: 1px solid var(--scl-white-1);
+  background-color: var(--scl-white-1);
+}
+
+</style>

package/btn/lambo-button-group.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="button-group">
+      <slot name="opt"></slot>
+    </div>
+</template>
+<script>
+
+export default {
+  name: 'LamboButtonGroup',
+  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)
+}
+
+.button-group-line {
+  width: 100%;
+  height: 1px;
+  border-bottom: 1px solid var(--scl-white-2);
+}
+
+.button-group /deep/ .btns {
+  flex: 1;
+  text-align: center;
+}
+
+.button-group /deep/ .btns:nth-child(n+2) {
+  border-left: 1px solid var(--scl-white-2);
+}
+</style>

package/btn/lambo-icon-button.vue

@@ -0,0 +1,50 @@
+<template>
+  <van-button :icon="loadIcon" class="btn-icon" :loading="loading" :disabled="disabled" @click="handleClick"></van-button>
+</template>
+<script>
+
+export default {
+  name: "LamboIconButton",
+  props: {
+    icon: String,
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    handleClick(event) {
+      this.$emit('click', event);
+    }
+  },
+  computed: {
+    loadIcon() {
+      // vite的写法，而且需要用相对路径
+      // return new URL('../../../assets/icon/' + this.icon, import.meta.url).href
+      return require('../assets/icon/' + this.icon)
+    }
+  }
+}
+</script>
+<style scoped>
+@import "../styles/index.less";
+
+.btn-icon {
+  border: 1px solid #e5e5e5;
+  width: 40px;
+  height: 30px;
+  background-color: transparent;
+  font-size: 12px;
+  border-radius: 3px;
+}
+/deep/ .van-icon__image {
+  width: 1em;
+}
+</style>

package/btn/lambo-medium-button.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="btns">
+    <ul class="lambomediumbutton-ul">
+      <van-button :disabled="disabled" :icon="icon" :icon-position="position" :loading="loading" :plain="plain"
+                  :type="type" class="LamboMediumButton" size="normal" @click="handleClick"> {{ text }}
+      </van-button>
+    </ul>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'LamboMediumButton',
+  components: {},
+  props: {
+    type: {
+      // 填充类型按钮  plain传false type传primary
+      // 线框类型按钮  plain传true type传info
+      // 无框类型按钮  plain传false type传default
+      type: String,
+      default: 'primary'
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    text: {
+      type: String,
+      default: '中号按钮'
+    },
+    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);
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+@import "../styles/index.less";
+
+.LamboMediumButton {
+  height: 30px;
+  border-radius: 3px;
+}
+
+/*填充按钮primary类型按钮样式 */
+/deep/ .lambomediumbutton-ul .van-button--primary {
+  background: var(--scl-blue);
+  border: 1px solid var(--scl-blue);
+}
+
+/*填充按钮primary类型不可用按钮样式 */
+/deep/ .lambomediumbutton-ul .van-button--disabled {
+  cursor: not-allowed;
+  opacity: 1;
+  background-color: var(--scl-gray-6);
+  color: #000000;
+  border: 0px solid var(--scl-gray-6);
+}
+
+/*按钮文字样式*/
+/deep/ .lambomediumbutton-ul .van-button__text {
+  font-size: 11px;
+  padding: 10px 0px;
+  font-family: 微软雅黑, serif Regular;
+}
+
+/*线框按钮按钮样式*/
+/deep/ .lambomediumbutton-ul .van-button--plain.van-button--info {
+  color: var(--scl-blue);
+  border: 1px solid var(--scl-blue);
+}
+
+/*线框按钮不可用按钮样式*/
+/deep/ .lambomediumbutton-ul .van-button--plain.van-button--info.van-button--disabled {
+  color: #000000;
+  border: 1px solid var(--scl-gray-6);
+  background-color: #ffffff;
+}
+
+/*无框类型按钮样式 */
+/deep/ .lambomediumbutton-ul .van-button--default {
+  background: var(--scl-white-1);
+  border: 1px solid var(--scl-white-1);
+  color: var(--scl-blue);
+}
+
+/*无框按钮不可用按钮样式*/
+/deep/ .lambomediumbutton-ul .van-button--default.van-button--disabled {
+  color: #000000;
+  border: 1px solid var(--scl-white-1);
+  background-color: var(--scl-white-1);
+}
+
+</style>

package/btn/lambo-small-button-group.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div slot="btns"></div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'LamboSmallButtonGroup',
+  components: {},
+  props: {},
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+
+  },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+@import "../styles/index.less";
+
+</style>

package/btn/lambo-small-button-select.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <LamboBigButton :disabled="false" :position="position" :text="text" :type="type" icon="arrow-down"
+                    @click="onClick"></LamboBigButton>
+    <ul v-show="show">
+      <LamboBigButton :disabled="false" :type="type" text="编辑" @click="onClick1"></LamboBigButton>
+      <LamboBigButton :disabled="false" :type="type" text="删除" @click="onClick2"></LamboBigButton>
+    </ul>
+  </div>
+</template>
+<script>
+
+import LamboBigButton from "@/components/lambo/btn/lambo-big-button.vue";
+
+export default {
+  name: 'LamboSmallButtonSelect',
+  components: {LamboBigButton},
+  props: {
+    text: {
+      type: String,
+      default: '更多'
+    },
+  },
+  data() {
+    return {
+      type: 'default',
+      position: 'right',
+      show: false,
+    }
+  },
+  methods: {
+    onClick() {
+      this.show = !this.show;
+    },
+    onClick1() {
+      console.log('path', 'onClick1')
+    },
+    onClick2() {
+      console.log('path', 'onClick2')
+    },
+  },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+@import "../styles/index.less";
+
+</style>