javascript 简单的材料设计复选框。演示：https：//jsfiddle.net/vogp8uwe/

Posted 2021-05-04

p.checkbox {
   cursor:pointer;
   display:flex;
   flex-flow:row nowrap;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

p.checkbox svg, p.checkbox span.label {
  margin:auto 0px;
}

p.checkbox span.label {
  padding-left:8px;
}

p.checkbox svg {
   fill: rgba(189, 195, 199,1.0);
}

p.checkbox svg.on {
  fill:rgba(41, 128, 185,1.0);
}

p.checkbox[disabled] {
  color:rgba(189, 195, 199,1.0);
  cursor:default;
}

p.checkbox[disabled] svg {
  fill: rgba(189, 195, 199,1.0);
}

<material-checkbox
  :input-value="itsChecked"
  :input-set="changeValue"
  :input-disabled="itsDisabled"
  :input-label="labelString">
 </material-checkbox>

Vue.component('material-checkbox', {
  props: [
    'inputValue',
    'inputSet',
    'inputLabel',
    'inputDisabled',
    'height',
    'width'
  ],
  template:
  `<p class="checkbox" @click="emitSet" :disabled="inputDisabled">
    <svg :height="height || 24" viewBox="0 0 24 24" :width="width || 24" xmlns="http://www.w3.org/2000/svg" class="on" v-if="inputValue">
      <path d="M0 0h24v24H0z" fill="none"/>
      <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
    </svg>
    <svg :height="height || 24" viewBox="0 0 24 24" :width="width || 24" xmlns="http://www.w3.org/2000/svg" class="off" v-else>
      <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
    </svg>
    <span class="label" v-if="inputLabel">
      {{ inputLabel }}
    </span>
  </p>
  `,
  methods: {
    emitSet: function () {
      if (!this.inputDisabled) this.inputSet()
    }
  }
})