feat: 拓展功能，支持vue换肤动态更换样式

README.md

@@ -138,7 +138,7 @@ Note:
 
 * `c____2____el-collapse-item__wrap` `c` stands for passing styles to child components, and number `2` represent the level of child components
 
-* `c____100____el-collapse-item__wrap` `c` stands for passing styles to all child components, and number `2` represent the level of child components
+* `c____100____el-collapse-item__wrap` `c` stands for passing styles to all child components, and number `100` represent the level of child components
 
 4. in parent ts
 ``` ts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-css-ts",
-  "version": "1.0.2-RC",
+  "version": "1.0.3-RC",
   "description": "Local style processing in Vue for ts-oriented development mode",
   "types": "dist/index.d.ts",
   "main": "dist/index.js",

src/index.ts

@@ -1,12 +1,24 @@
 import c from './c-elem'
 import { stylesToChildComponet } from './helper'
+import localStorage from './local-storage'
 
 let VueCssTs: any = function VueCssTs() {
   return {
     beforeCreate: function beforeCreate() {
       let _this: any = this;
       stylesToChildComponet(_this);
       let styles = _this.$options.style;
+      /*
+      * 拓展css-module 换肤实现
+      */
+      const theme = localStorage.get('system-theme');
+      if (Array.isArray(_this.$options.themes) && _this.$options.themes.length > 0
+        && theme && theme !== '') {
+        const result = _this.$options.themes.filter((t: any) => t.name === theme);
+        if (Array.isArray(result) && result.length > 0) {
+          styles = result[0].style;
+        }
+      }
       _this.original$createElement = _this.original$createElement || _this.$createElement;
       _this.original_c = _this.original_c || _this._c;
       _this.$createElement = c.bind(_this, {
@@ -19,6 +31,18 @@ let VueCssTs: any = function VueCssTs() {
         context: _this,
         styles: styles
       });
+    },
+    /*
+      *  1. 释放第三方插件中的bind及对象
+    */
+    destroyed() {
+      let _this: any = this;
+      _this._c = null;
+      _this.original_c = null;
+      _this.$parent = null;
+      _this.original$createElement = null;
+      _this.$createElement = null;
+      _this.$options = null;
     }
   };
 };

src/local-storage.ts

@@ -0,0 +1,68 @@
+export default {
+
+    /**
+     * 添加或修改
+     *
+     * @param {*} key
+     * @returns
+     */
+    set(key: any, data: any) {
+        if (data !== null && (typeof data === 'object')) {
+            data = JSON.stringify(data);
+        }
+        localStorage.setItem(key, data);
+    },
+
+    /**
+     * get查询
+     */
+    get(key: any) {
+        const val = localStorage.getItem(key);
+        if (val === null || val === 'null') {
+            return null;
+        } else if (val === 'undefined') {
+            return undefined;
+        } else {
+            try {
+                return JSON.parse(val);  // 解析成功说明是JSON
+            } catch (e) {
+                return val;
+            }
+        }
+    },
+
+    /**
+     * 修改 key 对应对象 中的字段
+     * 如果对象不存在则创建
+     */
+    modify(key: any, fields: any) {
+        let obj = this.get(key);
+        if (obj === null) {
+            obj = {};
+        }
+        if (obj instanceof Object && fields) {
+            for (const name in fields) {
+                if (name !== null) {
+                    obj[name] = fields[name];
+                }
+            }
+            this.set(key, obj);
+        }
+    },
+
+    /**
+     * 删除
+     */
+    remove(key: any) {
+        if (key instanceof Array) {
+            for (const k of key) {
+                if (k !== null) {
+                    localStorage.removeItem(k);
+                }
+            }
+        } else {
+            localStorage.removeItem(key);
+        }
+    }
+};
+