feat: className特性完善

Author: yuanzm

demos/noengine/engine.js

@@ -59,17 +59,12 @@ export default defineComponent({
       testText.style.backgroundColor = '#f3f3f3'
 
       testText.on('click', () => {
-        console.log(testText.className)
-        const newClass = (testText.className === 'testText' ? 'testText redText' : 'testText')
-        console.log(newClass)
-
-        testText.className = newClass
+        if (testText.classList.contains('redText')) {
+          testText.classList.remove('redText')
+        } else {
+          testText.classList.add('redText')
+        }
       })
-
-      // console.log(testText.style.textShadow)
-
-      // testText.style.textShadow = '2px 2px 2px blue'
-
     },
   },
 });

demos/noengine/sub/engine.js

@@ -51,7 +51,7 @@ export default defineComponent({
     return {
       isDev: true,
 
-      tabindex: 0,
+      tabindex: 4,
     };
   },
   mounted() {

dist/index.js

@@ -66,7 +66,7 @@ let style = {
   },
   rankList: {
     width: 960,
-    height: 1000,
+    height: 1410 - 120,
     backgroundColor: "#ffffff",
   },
   list: {
@@ -128,7 +128,7 @@ let style = {
   },
   selfListItem: {
     borderRadius: 20,
-    marginTop: 50,
+    marginTop: 20,
     backgroundColor: "#ffffff",
   },
   listTips: {
@@ -194,6 +194,18 @@ export default defineComponent({
 
       const list = Layout.getElementById('list');
 
+      const selfListItem = Layout.getElementsByClassName('listItem')[0]
+
+      selfListItem.on('click', () => {
+        if (selfListItem.classList.contains('listItemOld')) {
+          selfListItem.classList.remove('listItemOld');
+          selfListItem.classList.remove('selfListItem');
+        } else {
+          selfListItem.classList.add('listItemOld');
+          selfListItem.classList.add('selfListItem');
+        }
+      })
+
       // @ts-ignore
       window.list = list;
     },

packages/devtools/src/demos/helloworld.vue

@@ -1,40 +1,37 @@
 class TokenList {
-    constructor(initialTokens) {
-      this.tokens = new Set(initialTokens || []);
-    }
-  
-    // 添加一个令牌
-    add(token) {
-      this.tokens.add(token);
-    }
-  
-    // 删除一个令牌
-    remove(token) {
-      this.tokens.delete(token);
-    }
-  
-    // 检查列表中是否存在指定的令牌
-    contains(token) {
-      return this.tokens.has(token);
-    }
-  
-    // 返回列表中的令牌数
-    get length() {
-      return this.tokens.size;
-    }
-  
-    // 将令牌列表转换为字符串
-    toString() {
-      return Array.from(this.tokens).join(' ');
-    }
-  
-    // 获取令牌列表的值（values）数组
-    get values() {
-      return Array.from(this.tokens);
-    }
-  
-    // 将字符串转换为令牌列表
-    static fromString(str) {
-      return new TokenList(str.split(/\s+/));
-    }
-  }
+  public tokens: Set<string>
+
+  constructor(initialTokens: string) {
+    this.tokens = new Set(initialTokens || []);
+  }
+
+  // 返回列表中的令牌数
+  get length() {
+    return this.tokens.size;
+  }
+
+  // 获取令牌列表的值（values）数组
+  get values() {
+    return Array.from(this.tokens);
+  }
+
+  // 将令牌列表转换为字符串
+  get value() {
+    return Array.from(this.tokens).join(' ');
+  }
+
+  // 添加一个令牌
+  add(token: string) {
+    this.tokens.add(token);
+  }
+
+  // 检查列表中是否存在指定的令牌
+  contains(token: string) {
+    return this.tokens.has(token);
+  }
+
+  // 删除一个令牌
+  remove(token: string) {
+    this.tokens.delete(token);
+  }
+}

packages/devtools/src/demos/index.vue

@@ -79,4 +79,19 @@ export function clamp(number: number, min: number, max: number): number {
  */
 export function lerp(from: number, to: number, ratio: number): number {
   return from + (to - from) * ratio;
-}
+}
+
+export function convertPercent(data: string | number, parentData: number) {
+  if (typeof data === 'number' || data === null) {
+    return data;
+  }
+
+  const matchData = data.match(/(\d+(?:\.\d+)?)%/);
+  if (matchData && matchData[1]) {
+    return parentData * parseFloat(matchData[1]) * 0.01;
+  }
+}
+
+export function isPercent(data: string | number) {
+  return typeof data === 'string' && /\d+(?:\.\d+)?%/.test(data);
+}

packages/devtools/src/demos/ranklist.vue

@@ -4,6 +4,7 @@ import { View, Text, Image, ScrollView, BitMapText, Canvas, Element, Button } fr
 import { IStyle } from '../components/style';
 import { ILayout, ILayoutBox } from '../components/elements';
 import { Callback, TreeNode } from '../types';
+import { convertPercent, isPercent } from './util';
 import env from '../env';
 
 interface Constructor {
@@ -24,21 +25,6 @@ export function registerComponent(name: string, Constructor: Constructor) {
   constructorMap[name] = Constructor;
 }
 
-export function isPercent(data: string | number) {
-  return typeof data === 'string' && /\d+(?:\.\d+)?%/.test(data);
-}
-
-export function convertPercent(data: string | number, parentData: number) {
-  if (typeof data === 'number' || data === null) {
-    return data;
-  }
-
-  const matchData = data.match(/(\d+(?:\.\d+)?)%/);
-  if (matchData && matchData[1]) {
-    return parentData * parseFloat(matchData[1]) * 0.01;
-  }
-}
-
 export function create(node: TreeNode, style: Record<string, IStyle>, parent?: Record<string, any>) {
   const Constructor = constructorMap[node.name];