checker 灵活的单选组件

虽然有Radio组件提供单选功能，但是有很多情况下我们需要定义选项的样式布局，比如电商网站的商品属性选择。因此提供了checker，它提供了底层选择的抽象封装，使用者只需要考虑不同状态的样式。

当前组件由 checker 和 checker-item 组成

未来版本(可能在v0.2.0)将支持多选

checker 属性

checker-item 属性

使用

<checker :value.sync="somevalue"
         default-item-class="demo-item-defalut"
         selected-item-class="demo-item-selected">
  <checker-item value="1">1</checker-item>
  <checker-item value="2">2</checker-item>
  <checker-item value="3" disabled>3</checker-item>
</checker>

例子

template

<checker :value.sync="demo1" default-item-class="demo1-item" selected-item-class="demo1-item-selected">
  <checker-item value="1">1</checker-item>
  <checker-item value="2">2</checker-item>
  <checker-item value="3">3</checker-item>
</checker>
<br/>
<span>current value is: </span>

script

export default {
  data () {
    return {
      demo1: ''
    }
  }
}

style

.demo1-item {
  display: inline-block;
  border: 1px solid #ececec;
  padding: 5px 15px;
}
.demo1-item-selected {
  border: 1px solid green;
}

默认值

template

<checker :value.sync="demo2" default-item-class="demo2-item" selected-item-class="demo2-item-selected">
  <checker-item value="1">1</checker-item>
  <checker-item value="2">2</checker-item>
  <checker-item value="3">3</checker-item>
</checker>
<br/>
<span>current value is: </span>

script

export default {
  data () {
    return {
      demo2: '2'
    }
  }
}

style

.demo2-item {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
}
.demo2-item-selected {
  border-color: green;
}

disabled

template

<group>
  <cell title="select color" :value="demo4" is-link @click="showPopup=true"></cell>
</group>
<popup :show.sync="showPopup" class="checker-popup">
  <div style="padding:10px 10px 40px 10px;">
    <p style="padding: 5px 5px 5px 2px;color:#888;">Colors</p>
    <checker
    :value.sync="demo4"
    default-item-class="demo4-item"
    selected-item-class="demo4-item-selected"
    disabled-item-class="demo4-item-disabled"
    @on-item-click="showPopup=false">
      <checker-item value="花跟叶">花跟叶</checker-item>
      <checker-item value="鸟与树">鸟与树</checker-item>
      <checker-item value="我和你">我和你</checker-item>
      <checker-item value="全套礼品装" disabled>全套礼品装</checker-item>
    </checker>
  </div>
</popup>

script

export default {
  data () {
    return {
      demo4: '花跟叶',
      showPopup: false
    }
  }
}

style

.demo4-item {
  display: inline-block;
  background-color: #ddd;
  color: #222;
  font-size: 14px;
  padding: 5px 10px;
  margin-right: 10px;
  line-height: 18px;
  border-radius: 15px;
}
.demo4-item-selected {
  background-color: #FF3B3B;
  color: #fff;
}
.demo4-item-disabled {
  color: #999;
}