feat: 样式调整

Qymh · Aug 31, 2019 · 085c3fe · 085c3fe
1 parent c68db20
commit 085c3fe
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/packages/@qymh/q-select/src/dom.ts b/packages/@qymh/q-select/src/dom.ts
@@ -25,7 +25,7 @@ class Dom {
     const baseSize = Math.floor(options.count / 2) * options.chunkHeight;
     if (!inline) {
       this.initialDomString += `
-        <div class="q-select-header q-select-header--${id}" style="padding: 10px 20px;">
+        <div class="q-select-header q-select-header--${id}" style="height:45px;padding-left:20px;padding-right:20px;">
           <div class="q-select-header-cancel q-select-header-cancel--${id}" style="width:100px; font-size:14px;">
             <div class="q-select-header-cancel__value q-select-header-cancel__value--${id}">${options.cancelBtn ||
         '取消'}</div>
@@ -60,7 +60,7 @@ class Dom {
     `;
     data.forEach(v => {
       this.initialDomString += `
-      <div class="q-select-box-item q-select-box-item--${id}">
+      <div class="q-select-box-item q-select-box-item--${id} q-select-flex">
         <div class="q-select-box-item__overlay q-select-box-item__overlay--${id}" style="background-size: 100% ${
         !loading ? baseSize + 'px' : '100%'
       };"></div>
@@ -121,7 +121,11 @@ class Dom {
         for (let v = $collections.length; v < dataTransLater.length; v++) {
           const fragment = document.createDocumentFragment();
           const $box = Dom.create('div');
-          Dom.addClass($box, ['q-select-box-item', `q-select-box-item--${id}`]);
+          Dom.addClass($box, [
+            'q-select-box-item',
+            'q-select-flex',
+            `q-select-box-item--${id}`
+          ]);
           const $overlay = Dom.create('div');
           Dom.addClass($overlay, [
             'q-select-box-item__overlay',
@@ -266,6 +270,15 @@ class Dom {
   }
 
   static addClass(el: HTMLElement, className: string | string[]) {
+    if (Array.isArray(className)) {
+      className = className.filter(v => {
+        return !el.classList.contains(v);
+      });
+    } else {
+      if (el.classList.contains(className)) {
+        return;
+      }
+    }
     const add = Array.isArray(className) ? className.join(' ') : className;
     el.className += ` ${add}`;
   }

diff --git a/packages/@qymh/q-select/src/touch.ts b/packages/@qymh/q-select/src/touch.ts
@@ -127,8 +127,14 @@ class Touch {
    * @param index 当前索引
    */
   active(index: number) {
-    Dom.findIndex(`q-select-box-item--${this.pre.id}`, index).style.display =
-      'flex';
+    Dom.removeClass(
+      Dom.findIndex(`q-select-box-item--${this.pre.id}`, index),
+      'q-select-none'
+    );
+    Dom.addClass(
+      Dom.findIndex(`q-select-box-item--${this.pre.id}`, index),
+      'q-select-flex'
+    );
     this.hidden = false;
   }
 
@@ -137,8 +143,14 @@ class Touch {
    * @param index 当前索引
    */
   deactive(index: number) {
-    Dom.findIndex(`q-select-box-item--${this.pre.id}`, index).style.display =
-      'none';
+    Dom.removeClass(
+      Dom.findIndex(`q-select-box-item--${this.pre.id}`, index),
+      'q-select-flex'
+    );
+    Dom.addClass(
+      Dom.findIndex(`q-select-box-item--${this.pre.id}`, index),
+      'q-select-none'
+    );
     this.hidden = true;
   }
 

diff --git a/packages/@qymh/q-select/style/q-select.css b/packages/@qymh/q-select/style/q-select.css
@@ -55,12 +55,17 @@
   display: flex;
 }
 .q-select-box-item {
-  display: flex;
   flex-grow: 1;
   flex-shrink: 1;
   position: relative;
   overflow: hidden;
 }
+.q-select-flex {
+  display: flex;
+}
+.q-select-none {
+  display: none;
+}
 .q-select-box-item-collections {
   width: 100%;
   will-change: transform;
@@ -87,7 +92,11 @@
   background-position: top, bottom;
   background-repeat: no-repeat;
   background-image:
-    linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)),
+    linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.95),
+      rgba(255, 255, 255, 0.6)
+    ),
     linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
 }
 .q-select-loading {