SOURCE

console 命令行工具 X clear

                    
>
console
var Main = {
    data() {
      return {
        checked: false,
         str: "",
      };
    },
     mounted() {
    let obj = {
      name: "张三",
      age: 18,
      gender: "男",
      child: [{ name: "张三", age: 18, gender: "男" }],
    };
    this.str = JSON.stringify(obj, null, 2);
  },
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<div id="app">
<template>
  <!-- `checked` 为 true 或 false -->
  <div class="my-checkbox">
     
      <el-checkbox  v-model="checked">备选项</el-checkbox>
       <pre>{{ str }}</pre>
  </div>
</template>
</div>
@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

/* 自定义的icon 使用的是阿里的图标库 https://www.iconfont.cn/ */

@import url("//at.alicdn.com/t/font_3295968_rwmcgh4pbj.css");
.my-checkbox .el-checkbox__inner {
    /* 这里写未选中的样式*/
    font-family: "iconfont" !important;
    font-size: 14px;
    color: red;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.my-checkbox .el-checkbox__inner::after {
    /* 这里写未选中的样式*/
    content: "\e7ac";
    border: none;
    transform: none;
    left: 0;
    top: 0;
}

.my-checkbox .el-checkbox__input.is-checked .el-checkbox__inner::after {
    /* 这里写选中的样式*/
    content: "\ec9e";
    color: white;
    border: none;
    transform: none;
    left: 0;
    top: 0;
}

.my-checkbox .el-checkbox__input.is-checked .el-checkbox__inner,
.my-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    font-size: 14px;
    /* 这里写选中的颜色*/
    background-color: blue;
    border-color: blue;
}

本项目引用的自定义外部资源