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>
<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");
@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;
}