Checker 选择按钮

优质

小牛编辑

140浏览

2023-12-01

import { Checker,CheckerItem } from 'feui';
components: {
  [Checker.name]: Checker,
  [CheckerItem.name]: CheckerItem
},
data () {
  return {
    items1: [
        {
          key: "1",
          value: "A"
        },
        {
          key: "2",
          value: "B"
        },
        {
          key: "3",
          value: "C"
        }
      ],
      demo1: "",
      demo2: "2",
      demo3: "",
      demo4: '云和天',
      showPopup: false,
      demo5: 1,
      demo6: [2, 3],
  }
},
methods:{
  onItemClick (value, disabled) {
    console.log(value, disabled)
    if (!this.disabled) {
      this.showPopup = false
    }
  }
}

代码演示

基础用法

<fe-checker v-model="demo1" 
 default-item-class="demo1-item" 
 selected-item-class="demo1-item-selected">
   <fe-checker-item value="1">壹</fe-checker-item>
   <fe-checker-item value="2">貮</fe-checker-item>
   <fe-checker-item value="3">叁</fe-checker-item>
   <fe-checker-item value="4">肆</fe-checker-item>
   <fe-checker-item value="5">伍</fe-checker-item>
 </fe-checker>

自定义样式

<fe-checker v-model="demo3" 
  default-item-class="demo3-item" 
  selected-item-class="demo3-item-selected">
  <fe-checker-item value="FD6E0E">
    <img src="http://temp.im/80x45/FD6E0E/ffffff" alt="">
  </fe-checker-item>
  <fe-checker-item value="e71e18">
    <img src="http://temp.im/80x45/E71E18/ffffff" alt="">
  </fe-checker-item>
  <fe-checker-item value="453221">
    <img src="http://temp.im/80x45/45322E/ffffff" alt="">
  </fe-checker-item>
</fe-checker>

使用弹出层

<fe-group>
  <fe-cell title="选择套餐" :value="demo4" is-link 
  @click.native="showPopup=true"></fe-cell>
</fe-group>
<div v-transfer-dom>
  <fe-popup v-model="showPopup" class="checker-popup">
    <div style="padding:10px 10px 40px 10px;">
      <p style="padding: 5px 5px 5px 2px;color:#888;">选择套餐</p>
      <fe-checker
      v-model="demo4"
      default-item-class="demo4-item"
      selected-item-class="demo4-item-selected"
      disabled-item-class="demo4-item-disabled">
        <fe-checker-item value="云和天" @on-item-click="onItemClick">
          云和天</fe-checker-item>
        <fe-checker-item value="蝶和花" @on-item-click="onItemClick">
          蝶和花</fe-checker-item>
        <fe-checker-item value="我和你" @on-item-click="onItemClick">
          我和你</fe-checker-item>
        <fe-checker-item value="全家福" disabled @on-item-click="onItemClick">
          全家福</fe-checker-item>
      </fe-checker>
    </div>
  </fe-popup>
</div>

常见demo单选

<fe-checker
  v-model="demo5"
  default-item-class="demo5-item"
  selected-item-class="demo5-item-selected"
  >
  <fe-checker-item v-for="i in [1, 2, 3]" :key="i" 
  :value="i">￥{{i*300}}</fe-checker-item>
</fe-checker>

常见demo单选

<fe-checker
  v-model="demo6"
  type="checkbox"
  default-item-class="demo5-item"
  selected-item-class="demo5-item-selected"
>
  <fe-checker-item v-for="i in [1, 2, 3]" :key="i" 
    :value="i">{{['good', 'nice','awesome'][i - 1]}}
  </fe-checker-item>
</fe-checker>

Checker API

参数	说明	类型	默认值	可选值
value	表单值，使用`v-model`绑定	`Number`，`Array`	-	-
type	类型，单选为`radio`, 多选为`checkbox`	`String`	`radio`	-
max	最多可选个数，多选时可用	`Number`	-	-
radio-required	在单选模式下是否必选一个值。设为 true 后点击当前选中项不会取消选中。	`Boolean`	`false`	`true`,`false`
default-item-class	表单值	`String`	-	-
selected-item-class	标题	`String`	-	-
disabled-item-class	是否必选	`String`	`false`	`true`,`false`
-	-	-	-	-

Events

事件名	参数	说明	备注
on-change	value	值变化时触发	-
-	-	-	-

CheckerItem API

参数	说明	类型	默认值	可选值
value	当前项的值	`String`	-	-
disabled	是否为不可选	`Boolean`	`false`	`true`,`false`
-	-	-	-	-

Events

事件名	参数	说明	备注
@on-item-click	itemValue, itemDisabled	当前项被点击时触发	-
-	-	-	-