Merge pull request #15 from ZhonganTechENG/dev-1.1.0-beta

Dev 1.1.0 beta

build/webpack.umd.conf.js

@@ -20,9 +20,20 @@ module.exports = merge(baseWebpackConfig, {
   entry: {
     ['zarm-vue.umd.js']: path.join(__dirname, '../src/index.js'),
   },
-  externals: [
-    'vue',
-  ],
+  externals: {
+    'vue': {
+      root: 'Vue',
+      commonjs: 'vue',
+      commonjs2: 'vue',
+      amd: 'vue'
+    },
+    'lodash': {
+      commonjs: 'lodash',
+      commonjs2: 'lodash',
+      amd: 'lodash',
+      root: '_'
+    }
+  },
   output: {
     path: path.resolve(__dirname, '../release'),
     filename: '[name]',

example/components/accordion.vue

@@ -32,7 +32,7 @@
           <za-panel>
             <za-panel-header title="手风琴模式" />
             <za-panel-body>
-              <zaAccordion :multiple='false' animated>
+              <zaAccordion animated :multiple='true' >
                 <zaAccordionItem title="50元套餐" aiTag='0'>
                   <div>我是50元套餐内容</div>
                   <div>我是50元套餐内容</div>
@@ -111,7 +111,7 @@
             <za-panel-header title="强制展开模式" />
             <za-panel-body>
               <zaAccordion open>
-                <zaAccordionItem title="50元套餐" open>
+                <zaAccordionItem title="50元套餐">
                   <div>我是50元套餐内容</div>
                   <div>我是50元套餐内容</div>
                   <div>我是50元套餐内容</div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zarm-vue",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "zarm in vue",
   "author": "zhanwangye <[email protected]>",
   "tags": [

src/accordion/src/accordion.vue

@@ -7,18 +7,11 @@
 <script>
 export default {
   name: 'zaAccordion',
-  components: {
-    // zaPopup
-  },
   props: {
     prefixCls: {
       type: String,
       default: 'za-accordion',
     },
-    activeTag: {
-      type: Array,
-      default: () => [],
-    },
     defaultActiveTag: {
       type: Array,
       default: () => [],
@@ -36,9 +29,25 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      activeTag: [],
+    };
+  },
   methods: {
     onchange(index) {
+      const { multiple } = this;
       this.$emit('change', index);
+      if (multiple) {
+        const accordionItemRefs = this.$children;
+        const aiTags = [];
+        accordionItemRefs.forEach(item => {
+          if (item.$options.name === 'zaAccordionItem') {
+            aiTags.push(item.aiTag);
+          }
+        });
+        this.activeTag = aiTags.filter(i => i === index);
+      }
     },
   },
 };

src/accordion/src/accordionItem.vue

@@ -154,27 +154,48 @@ export default {
     setActive() {
       const self = this;
       let activeStatus = false;
-      const activeTag = this.activeTag;
-      activeTag.some((child) => {
-        if (child.toString() === self.itemActiveTag.toString()) {
+      const { itemActiveTag, activeTag, itemAnimated } = this;
+      const multiple = this.$parent.multiple;
+
+      if (multiple) {
+        if (activeTag.indexOf(itemActiveTag) > -1) {
           activeStatus = true;
-          return true;
+        } else {
+          activeStatus = false;
         }
-        return false;
-      });
+        if (itemAnimated) {
+          this.setStyle(!activeStatus);
+        }
+      } else {
+        activeTag.some((child) => {
+          if (child.toString() === self.itemActiveTag.toString()) {
+            activeStatus = true;
+            return true;
+          }
+          return false;
+        });
+      }
       self.active = activeStatus;
     },
     onClickItem() {
-      const itemAnimated = this.itemAnimated;
-      const open = this.open;
-      const active = this.active;
-
+      const { itemAnimated, open, active, activeTag, itemActiveTag } = this;
+      let activeStatus = false;
+      const multiple = this.$parent.multiple;
       if (open) {
         return;
       }
-      this.active = !active;
-      if (itemAnimated) {
-        this.setStyle(active);
+      if (multiple) {
+        if (activeTag.indexOf(itemActiveTag) > -1) {
+          activeStatus = true;
+        } else {
+          activeStatus = false;
+        }
+        this.active = activeStatus;
+      } else {
+        this.active = !active;
+        if (itemAnimated) {
+          this.setStyle(active);
+        }
       }
       this.itemChange();
     },