gyyg-components 0.3.6 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyyg-components",
-  "version": "0.3.06",
+  "version": "0.3.08",
   "private": false,
   "main": "lib/gyyg-components.umd.js",
   "scripts": {

package/src/components/MECDescriptions/MECDescriptions.vue

@@ -24,7 +24,7 @@
                 :span="item.span || 1"
                 :contentClassName="direction == 'vertical' ? 'vertical-content' : item.contentClassName || ''"
                 :labelStyle="direction == 'horizontal' ? { width: labelWidth + 'px', textAlign: 'right' } : {}"
-                :contentStyle="item.contentStyle || {}"
+                :contentStyle="direction == 'horizontal' ? { width: 'calc(100% - (' + labelWidth + 'px))' }: {}"
                 :labelClassName="direction == 'vertical' ? 'vertical-label' : item.labelClassName || ''"
             >
                 <div v-if="item.type === 'img'">

package/src/components/MecButtonGroup/MecButtonGroup.vue

@@ -1,11 +1,10 @@
 <template>
     <div :class="showTags ? 'has-tags' : ''">
-        <mec-tags
-            v-if="showTags"
-            :tagsList="tagsData"
-        ></mec-tags>
-        <div class="btn-group">
-
+        
+        <div
+            class="btn-group"
+            ref="btnGroup"
+        >
             <div
                 v-for="btn in btnList"
                 :key="btn.id"
@@ -64,6 +63,12 @@
 
             </div>
         </div>
+        <mec-tags
+            v-if="showTags"
+            :tagsList="tagsData"
+            @tagClose="tagClose"
+            :btnWidth="btnWidth"
+        ></mec-tags>
 
     </div>
 </template>
@@ -86,7 +91,8 @@ export default {
     },
     data() {
         return {
-            tagsData: null
+            tagsData: null,
+            btnWidth: 0
         }
     },
     watch: {
@@ -96,8 +102,25 @@ export default {
             },
             deep: true,
             immediate: true
+        },
+        btnList: {
+            handler(val) {
+                if (this.$refs.btnGroup) {
+                    this.btnWidth = this.$refs.btnGroup.offsetWidth
+
+                }
+            },
+            deep: true,
+            immediate: true
         }
     },
+    mounted() {
+        this.$nextTick(() => {
+            this.btnWidth = this.$refs.btnGroup.offsetWidth
+            console.log('width: calc(100% - (' + this.btnWidth + ' px))')
+        })
+    },
+
     methods: {
         // 按钮点击事件
         btnClick(btn) {
@@ -105,12 +128,17 @@ export default {
             if (btn.trigger) {
                 btn.trigger()
             }
+        },
+        tagClose(key, tag) {
+            this.$emit('tagClose', key, tag);
         }
     },
 }
 </script>
 <style lang="less" scoped>
 /deep/ .el-button {
+    font-weight: normal;
+
     &:not(:disabled):hover {
         transform: translateY(-1px);
     }
@@ -119,7 +147,6 @@ export default {
 .btn-group {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
 
     &>div {
         margin-left: 5px;
@@ -136,7 +163,6 @@ export default {
 .has-tags {
     display: flex;
     align-content: center;
-    justify-content: space-between;
 }
 
 /deep/ .el-badge__content.is-fixed {

package/src/components/MecRadio/MecRadio.vue

@@ -1,28 +1,28 @@
 <template>
-    <el-radio-group
-      v-model="radio"
-      :value="radio"
-      @change="handleChange"
-      v-bind="$attrs"
-      class="radio-group"
-    >
-      <el-radio
-        v-for="item in options"
-        :label="item[props.value]"
-        :key="item[props.value]"
-        :value="item[props.value]"
-        :border="border"
-      >{{ item[props.label] }}</el-radio>
-    </el-radio-group>
+  <el-radio-group
+    v-model="radio"
+    :value="radio"
+    @change="handleChange"
+    v-bind="$attrs"
+    class="radio-group"
+  >
+    <el-radio
+      v-for="item in option"
+      :label="item[props.value]"
+      :key="item[props.value]"
+      :value="item[props.value]"
+      :border="border"
+    >{{ item[props.label] }}</el-radio>
+  </el-radio-group>
 </template>
 <script>
 export default {
-    name: 'mec-radio',
-    props: {
+  name: 'mec-radio',
+  props: {
     value: {},
     border: {
-        type: Boolean,
-        default: false,
+      type: Boolean,
+      default: false,
     },
     options: {},
     props: {
@@ -34,30 +34,53 @@ export default {
       },
     },
   },
-    data() {
-        return {
-            radio: this.value,
-        }
+  data() {
+    return {
+      radio: this.value,
+      option: []
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.radio = val
+      },
+      immediate: true
     },
-    watch: {
-        value: {
-            handler(val) {
-                this.radio = val
-            },
-            immediate: true
-        },
-        radio: {
-            handler(val) {
-                this.$emit('input', val)
-                this.$emit('update:value', val)
-            },
+    radio: {
+      handler(val) {
+        this.$emit('input', val)
+        this.$emit('update:value', val)
+      },
+    },
+    options: {
+      handler: function (val) {
+        if (!Array.isArray(this.options) && this.options) {
+          if (this.options instanceof Promise) {
+            this.options.then(val => {
+              this.option = val.data || val;
+            });
+          }
+          if (typeof this.options == 'function') {
+            this.options().then(val => {
+              this.option = val.data || val;
+            });
+          }
+
+        } else {
+          this.option = this.options;
         }
+      },
+      deep: true,
+      immediate: true,
     },
-    methods: {
-        handleChange(e) {
-            this.$emit('change', e)
-        },
-    }
+  },
+  methods: {
+    handleChange(val) {
+      let info = this.option.filter(item => item[this.props.value] === val)
+      this.$emit('change', val, info.length > 0 ? info[0] : {})
+    },
+  }
 
 }
 </script>

package/src/components/MecSelect/MecSelect.vue

@@ -100,9 +100,10 @@ export default {
   methods: {
     handleChange(val) {
       this.selected = val;
+       let info = this.option.filter(item => item[this.props.value] == val)
       this.$emit("input", this.selected);
       this.$emit('update:value', val)
-      this.$emit("change", val);
+      this.$emit("change", val, info.length > 0 ? info[0] : {});
     },
     clear() {
       this.selected = '';

package/src/components/MecTags/MecTags.vue

@@ -1,13 +1,36 @@
 <template>
-    <div>
-        <el-tag
-            v-for="tag in tagsList"
-            :key="tag.id"
-            closable
-            :type="tag.type || ''"
+    <div
+        class="mec-tags"
+        :style="{ width: `calc(100% - ${btnWidth}px)` }"
+        ref="tagsContainer"
+    >
+        <el-button
+            icon="el-icon-arrow-left"
+            circle
+            v-show="showArrow"
+            @click="scrollLeft"
+        ></el-button>
+        <div
+            class="tags-box"
+            ref="tagsBox"
         >
-            {{ tag.label }}: {{ tag.value }}
-        </el-tag>
+            <el-tag
+                v-for="(tag, index) in tagsData"
+                :key="index"
+                closable
+                :type="tag.type || ''"
+                @close="handleClose(index, tag)"
+            >
+                {{ tag.label }}: {{ tag.value }}
+            </el-tag>
+        </div>
+        <el-button
+            style="margin-left: 3px"
+            icon="el-icon-arrow-right"
+            circle
+            v-show="showArrow"
+            @click="scrollRight"
+        ></el-button>
     </div>
 </template>
 <script>
@@ -15,9 +38,120 @@ export default {
     name: 'MecTags',
     props: {
         tagsList: {
-             type: [Array, Object],
+            type: [Array, Object],
+        },
+        btnWidth: {
+            // type: Number,
+        },
+    },
+    data() {
+        return {
+            tagsData: [],
+            tagsContainerWidth: 0,
+            showArrow: false,
         }
     },
+    watch: {
+        tagsList: {
+            handler(val) {
+                this.tagsData = []
+                this.tagsData = [...val] ;
+                if(this.tagsData.length > 0) {
+                    this.$nextTick(() => {
+                        this.updateTagsContainerWidth();
+                    });
+                }
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    mounted() {
+        this.updateTagsContainerWidth();
+        window.addEventListener('resize', this.updateTagsContainerWidth);
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.updateTagsContainerWidth);
+    },
+    methods: {
+        handleClose(index, tag) {
+            this.tagsData.splice(index, 1);
+            this.$emit('tagClose', tag.key, tag);
+        },
+        scrollLeft() {
+            const tagsBox = this.$refs.tagsBox;
+            tagsBox.scrollBy({
+                left: -150,
+                behavior: 'smooth'
+            });
+        },
+        scrollRight() {
+            const tagsBox = this.$refs.tagsBox;
+            tagsBox.scrollBy({
+                left: 150,
+                behavior: 'smooth'
+            });
+        },
+
+        updateTagsContainerWidth() {
+            this.tagsContainerWidth = this.$refs.tagsContainer.offsetWidth;
+            const boxWidth = this.$refs.tagsBox.scrollWidth;
+            if (boxWidth > this.tagsContainerWidth) {
+                this.showArrow = true;
+            } else {
+                this.showArrow = false;
+            }
+        }
+    }
 }
 
 </script>
+<style lang="less" scoped>
+.mec-tags {
+    height: 40px;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+
+    /deep/ .el-tag {
+        margin-right: 10px;
+        margin-bottom: 10px;
+        margin-bottom: 5px;
+        margin-top: 5px;
+        font-size: 14px;
+        height: 30px;
+        line-height: 30px;
+        padding: 0 5px;
+        color: #1890ff;
+
+        .el-icon-close {
+            right: 0;
+        }
+    }
+
+    /deep/ .el-button.is-circle {
+        padding: 0;
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        margin-right: 3px;
+        flex-grow: 0;
+        flex-shrink: 0;
+
+        &:hover,
+        &:focus {
+            background: #1890ff;
+            border-color: #1890ff;
+            color: #fff;
+        }
+    }
+}
+
+.tags-box {
+    display: flex;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+}
+</style>