vue复选框组件
 
 Vue材料复选框 (Vue material checkbox)
 
 
Material design checkbox component for Vue.
 
 
 Vue的材料设计复选框组件。 
 
 

  View demo 
  查看演示 
  Download Source 
  下载源 
 
 

   
 
 
 

  
 
 
 
 用 (Use)
 
 
 与npm (With npm)
 
 
install plugin
 安装插件 
 
npm install vue-material-checkbox --save
 
 
import to the app and add to the Vue
 导入到应用程序并添加到Vue 
 
import checkbox from 'vue-material-checkbox'
Vue.use(checkbox)
 
 
Use it as component:
 用作组件： 
 
<checkbox id="mycheck1" v-model="someVar">My Checkbox</checkbox>
 
 
 零件 (Component)
 
 
There is autogenerated id for label and checkbox, but you can specify it yourself.
 
 
 标签和复选框有自动生成的ID，但您可以自己指定。 
 
 
You can specify label for checkbox inside checkbox tag:
 
 
 您可以在复选框标签内为复选框指定标签： 
 
 
<checkbox id="mycheck1" v-model="someVar"> ThisIsLabel </checkbox>
 
 
You can set custom color for background of checkbox:
 
 
 您可以为复选框的背景设置自定义颜色： 
 
 
<checkbox id="mycheck1" v-model="someVar" color="#f50057"> ThisIsLabel </checkbox>
 
 
 道具完整表 (Complete props table)
 
 
Prop
Type
Default
What For
id
String
undefined
Recommended. input id associated with label
value
String
undefined
Value for input, without it checkbox works as true/false
color
String
undefined
Pass the color string to change bg-color of checkbox
checked
Boolean
false
is checked by default?
name
String
undefined
Name for input
required
Boolean
false
HTML required attr
disabled
Boolean
false
HTML disabled attr
 
 
 Struts 
 类型 
 默认 
 做什么的 
 id 
 String 
 undefined 
 推荐 。 与标签关联的输入ID 
 value 
 String 
 undefined 
 输入值(不带输入)复选框为true/false 
 color 
 String 
 undefined 
 传递颜色字符串以更改复选框的bg-color 
 checked 
 Boolean 
 false 
 默认情况下被选中？ 
 name 
 String 
 undefined 
 输入名称 
 required 
 Boolean 
 false 
 HTML必需的属性 
 disabled 
 Boolean 
 false 
 禁用HTML的attr 
 
 
 去做 (todo)
 
 
ripple effect
 连锁React 
 

  
翻译自: https://vuejsexamples.com/lightweight-material-design-checkbox-component-for-vue/
 
 
vue复选框组件

CheckBox，复选框。
JCheckBox 常用构造方法:
// 无文本，默认未选中
JCheckBox()

// 有文本，默认未选中
JCheckBox(String text)

// 有文本，并指定是否选中
JCheckBox(String text, boolean selected)

JCheckBox 常用方法:
// 设置复选框的 文本、字体 和 字体颜色
void setText(String text)
void setFont(Font font)
void setForeground(Color fg)

/* 以下方法定义在 javax.swing.AbstractButton 基类中 */

// 设置复选框是否选中状态
void setSelected(boolean b)

// 判断复选框是否选中
boolean isSelected()

// 设置复选框是否可用
void setEnabled(boolean enable)

// 设置图片和文本的间距
void setIconTextGap(int iconTextGap)

JCheckBox 常用监听器:
// 添加状态改变监听器
void addChangeListener(ChangeListener l)
2. 代码实例
package com.xiets.swing;

import javax.swing.*;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;

public class Main {

    public static void main(String[] args) {
        JFrame jf = new JFrame("测试窗口");
        jf.setSize(250, 250);
        jf.setLocationRelativeTo(null);
        jf.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);

        JPanel panel = new JPanel();

        // 创建复选框
        JCheckBox checkBox01 = new JCheckBox("菠萝");
        JCheckBox checkBox02 = new JCheckBox("香蕉");
        JCheckBox checkBox03 = new JCheckBox("雪梨");
        JCheckBox checkBox04 = new JCheckBox("荔枝");
        JCheckBox checkBox05 = new JCheckBox("橘子");
        JCheckBox checkBox06 = new JCheckBox("苹果");

        // 添加第一个复选框的状态被改变的监听（其他复选框如果需要监听状态改变，则可按此方法添加监听）
        checkBox01.addChangeListener(new ChangeListener() {
            @Override
            public void stateChanged(ChangeEvent e) {
                // 获取事件源（即复选框本身）
                JCheckBox checkBox = (JCheckBox) e.getSource();
                System.out.println(checkBox.getText() + " 是否选中: " + checkBox.isSelected());
            }
        });

        // 设置默认第一个复选框选中
        checkBox01.setSelected(true);

        panel.add(checkBox01);
        panel.add(checkBox02);
        panel.add(checkBox03);
        panel.add(checkBox04);
        panel.add(checkBox05);
        panel.add(checkBox06);

        jf.setContentPane(panel);
        jf.setVisible(true);
    }

}

结果展示:

前言
 
 
 
根据百度前端技术学院2018 MVVM 学院 中的 2.5 表单实现Input、Checkbox组件 用 vue 实现的
 
 
checkbox复选框组件，使checkbox有三种状态： checked：ture (选中) / false (未选中) , indeterminate (部分选中)
 
 
1.利用slot插槽
 
 
2.在同一文件中用到父子通信 $emit $on
 
 
本文章的 github地址
 
 

实现思路
 
1.在mounted(附加到页面上)时绑定监听
 
因为只有在mounted（元素挂载到页面上）之后才能理清节点之间的关系，也才能找到目标节点的$parent,$children
 
mounted() {
    // 得先检测其 $parent 是不是复选框组件（如果是，则其有onDispatch 函数）
    if (this.$parent.onDispatch) {
        // 如果组件的状态改变，则会执行其父组件的 onDispatch 函数
        this.$on("checkStatus", this.$parent.onDispatch);
    }
},
 
 
 
2. 当复选框状态改变时，将自己的改变后的复选框状态通知给其父复选框
 
this.$emit("checkStatus", "indeterminate"/true/false);
 
 
 
3. onDispatch 函数分析
 
3.1 接收到的值为 子组件状态改变后 发送过来的状态：{"indeterminate"/true/false}
 
3.2 改变其#(id).checked属性，直接操作其绑定的isChecked即可:checked="isChecked"
 
isChecked只有true/false 
 
3.3 改变其#(id).indeterminate属性，得获取元素(需要id,所以每个chekbox需要绑定一个id:id="id")，得到其indeterminate,
 
_getIndeterminate() {
    return document.getElementById(this.id).indeterminate;
},
_setIndeterminate(bool) {
    document.getElementById(this.id).indeterminate = bool;
},
 
 
 
3.4 当复选框状态为选中/未选中 时，设置其全部子组件为相对应值
 
（递归，多层改变，能对孩子，孙子，重孙等起作用。）
 
_setAllSubItem(component, bool) {
    component.$children.map(i => {
        i.isChecked = bool;
        this._setAllSubItem(i, bool);
    });
},
 
 
 
4. 最后执行形式
 
<v-checkbox text="爱好" id="hobby">
    <v-checkbox text="种花" id="plant">
        <v-checkbox text="养鱼" id="fish"></v-checkbox>
    </v-checkbox>
    <v-checkbox text="购物" id="shop"></v-checkbox>
    <v-checkbox text="吃饭" id="eat"></v-checkbox>
</v-checkbox>
 
 
 
代码实现
 
<template>
  <div>
    <label>
      <input type="checkbox" @change="handleChange" :checked="isChecked" :id="id">
      <span class="checkbox"></span>
      <span class="text" s-if="text">{{text}}</span>
    </label>
    <div class="sub">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: ["text", "id"],
  mounted() {
    if (this.$parent.onDispatch) {
      this.$on("checkStatus", this.$parent.onDispatch);
    }
  },
  data() {
    return {
      id: this.id,
      parent: null,
      subItems: [],
      isChecked: false
    };
  },
  methods: {
    // 设置元素 Indeterminate 状态，若为true，表示部分选中
    _setIndeterminate(bool) {
      document.getElementById(this.id).indeterminate = bool;
    },

    // 获取元素 Indeterminate 状态
    _getIndeterminate() {
      return document.getElementById(this.id).indeterminate;
    },

    // 将元素所有子元素的选中状态统一设置成该元素的选中状态 true/false
    _setAllSubItem(component, bool) {
      component.$children.map(i => {
        i.isChecked = bool;
        this._setAllSubItem(i, bool);
      });
    },

    onDispatch(val) {
      //不是根元素
      // console.log(this.$parent.$parent._uid);
      console.log(this);
      // 恢复默认状态
      this._setIndeterminate(false);
      // 如果子组件传过来的值是"indeterminate"，即子组件是部分选中状态，那么其父组件一定也是部分选中状态
      if (val == "indeterminate") {
        this._setIndeterminate(true);
        this.$emit("checkStatus", "indeterminate");
        return;
      }
      var subItems = this.$children;
      if (subItems.length > 0) {
        var check_num = 0;
        subItems.map(i => {
          // 或者如果子选项中有一个为indeterminate，那么其父组件也一定也是部分选中状态
          if (i._getIndeterminate()) {
            this._setIndeterminate(true);
            this.$emit("checkStatus", "indeterminate");
            return;
          }
          if (i.isChecked) {
            check_num++;
          }
        });
        if (check_num == subItems.length) {
          //选中子项目个数
          this.isChecked = true;
          this.$emit("checkStatus", true);
        } else if (check_num == 0) {
          this.isChecked = false;
          this.$emit("checkStatus", false);
        } else {
          this._setIndeterminate(true);
          this.$emit("checkStatus", "indeterminate");
        }
      }
    },

    handleChange() {
      this.isChecked = !this.isChecked;
      this.$emit("checkStatus", this.isChecked);
      if (this.isChecked) {
        this._setAllSubItem(this, true);
      } else {
        this._setAllSubItem(this, false);
      }
    }
  }
};
 
 
 
结束
 
如果文章对你有帮助，麻烦点赞哦！一起走码农花路~
 
 
 

 
vue复选框组件
 
 漂亮的复选框 (pretty-checkbox-vue)
 
 
Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Vue.js.
 
 
 快速将漂亮的复选框组件(复选框，开关，单选按钮)与Vue.js集成在一起。 
 
 

  View demo 
  查看演示 
  Download Source 
  下载源 
 
 

 

  
 
 
 
 
 
 安装 (Installation)
 
 
npm i --save-dev pretty-checkbox-vue
 
 
 浏览器 (Browser)
 
 
Include the script file, then install the component with Vue.use(PrettyCheckbox); e.g.:
 
 
 包括脚本文件，然后使用Vue.use(PrettyCheckbox);安装组件Vue.use(PrettyCheckbox); 例如： 
 
 
<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/pretty-checkbox-vue/dist/pretty-checkbox-vue.min.js"></script>
<script type="text/javascript">
  Vue.use(PrettyCheckbox);
</script>
 
 
 模组 (Module)
 
 
import PrettyCheckbox from 'pretty-checkbox-vue';

Vue.use(PrettyCheckbox);
 
 
Or
 
 
 要么 
 
 
import PrettyInput from 'pretty-checkbox-vue/input';
import PrettyCheck from 'pretty-checkbox-vue/check';
import PrettyRadio from 'pretty-checkbox-vue/radio';

Vue.component('p-input', PrettyInput);
Vue.component('p-check', PrettyCheck);
Vue.component('p-radio', PrettyRadio);
 
 
 用法 (Usage)
 
 
Once installed, it can be used in a template as simply as:
 
 
 安装后，可以在模板中简单地使用它，如下所示： 
 
 
<p-check name="check" color="success" v-model="check">check</p-check>
<p-radio name="radio" color="info" v-model="radio">radio</p-radio>

<!-- Or it can be used just like input -->

<p-input type="checkbox" name="check" color="success" v-model="check">check</p-input>
<p-input type="radio" name="radio" color="info" v-model="radio">radio</p-input>
 
 
 物产 (Properties)
 
 
Property
Type
Default Value
type
String
checkbox (checkbox & input) or radio (radio)
name
String
value
Any
class
String
p-default (checkbox & input) or p-default p-round (radio)
true-value
Boolean or String
true
false-value
Boolean or String
false
checked
Boolean
false
disabled
Boolean
false
required
Boolean
false
indeterminate
Boolean
false
color
String
off-color
String
hover-color
String
indeterminate-color
String
toggle
Boolean
false
hover
Boolean
false
focus
Boolean
false
 
 
 属性 
 类型 
 默认值 
 类型 
 串 
 复选框(复选框和输入)或单选(广播) 
 名称 
 串 
 值 
 任何 
 类 
 串 
 p-default (复选框和输入)或p-default p-round (无线电) 
 真值 
 布尔值或字符串 
 真正 
 虚假价值 
 布尔值或字符串 
 假 
 已检查 
 布尔型 
 假 
 残障人士 
 布尔型 
 假 
 需要 
 布尔型 
 假 
 不定 
 布尔型 
 假 
 颜色 
 串 
 变色的 
 串 
 悬停颜色 
 串 
 不确定的颜色 
 串 
 拨动 
 布尔型 
 假 
 徘徊 
 布尔型 
 假 
 焦点 
 布尔型 
 假 
 
 
 插槽 (Slots)
 
 
Name
Purpose
default (no name)
include label in default mode or for "on" state in toggle mode
extra
include icon or svg or image in default mode or for "on" state in toggle mode
off-label
include label for "off" state in toggle mode
off-extra
include icon or svg or image for "off" state in toggle mode
hover-label
include label in hover state
hover-extra
include icon or svg or image in hover state
indeterminate-label
include label in indeterminate state
indeterminate-extra
include icon or svg or image in indeterminate state
 
 
 名称 
 目的 
 默认(无名称) 
 在默认模式下包含标签 ，或在切换模式下包含“ on”状态 
 额外 
 在默认模式下包含图标 ， svg或图像 ，在切换模式下包含“开启”状态 
 关闭标签 
 在切换模式下包含“关闭”状态的标签 
 异地 
 在切换模式下包含“关闭”状态的图标 ， svg或图像 
 悬停标签 
 包括处于悬停状态的标签 
 悬停 
 包括处于悬停状态的图标 ， svg或图像 
 不确定标签 
 包括不确定状态的标签 
 不确定的额外 
 包括处于不确定状态的图标或svg或图像 
 
 

  
翻译自: https://vuejsexamples.com/quickly-integrate-pretty-checkbox-components-with-vue-js/
 
 
vue复选框组件