事半功倍之swtichbutton添加样式

前提：我想用button实现一个横向单选框的效果，

第一个问题就是button里面的label字体出现在可以横向滑动的div里面变成了垂直显示的样式异常问题。

解决方法就是：给每一个button设置宽度。让它的最小宽度可以控制，比方一个中文字是0.81rem，那么就用字的数量n乘以0.81 得出的结果设置到min-width属性里面。

第二个问题就是正选和反向选择，需要自己手动实现。

刚开始的时候我用的是通过样式来获取所有的按钮，然后在通过样式改变反选发现思路不对，导致反选没有达到想要的效果。导致单选框变成了复选框。

其实思路很简单就是在选中当前按钮之前把所有按钮的样式都先初始化一下即可。

另外附上一个处理样式的js方法感觉比较靠谱：

  /**
   * 添加class
   */
  addClass(ele, value) {
    if (value) {
      let curValue = this.getClass(ele);
      if (curValue.indexOf(value) === -1) {
        curValue = curValue + " " + value;
      }
      ele.setAttribute("class", curValue.trim());
    }
  }
  /**
   * 删除class
   */
  removeClass(ele, value) {
    if (value) {
      let curValue = this.getClass(ele);
      if (curValue.indexOf(value) > -1) {
        curValue = (" " + curValue + " ").replace(" " + value + " ", " ");
      }
      ele.setAttribute("class", curValue.trim());
    }
  }
  /**
   * 元素是否存在值为@{value}的class
   */
  hasClass(ele, value) {
    let has = false;
    if (value) {
      const curValue = this.getClass(ele);
      if (curValue.indexOf(value) > -1) {
        has = true;
      }
    }
    return has;
  }

  /**
   * 获取class
   */
  getClass(elem) {
    return elem.getAttribute && elem.getAttribute("class") || "";
  }

解决办法如下：

  switchBlockClick(item) {
    try {
      item.selected = true;
      const array = document.getElementsByClassName('switch-box-button');
      // tslint:disable-next-line:prefer-for-of
      for (let index = 0; index < array.length; index++) {
        const element = array[index];
        if (item.id === element.id) {
          this.addClass(element, "switch-checked");
        } else {
          this.removeClass(element, "switch-checked");
        }
      }
    } catch (error) {
    }
  }

效果图如下:

如果大家有更好的办法可以留言，谢谢。