JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<template>
<el-radio-group v-model="radio2">
<el-radio :label="3">
<img src="https://picsum.photos/800/400/?1">
<span>备选项1</span>
</el-radio>
<el-radio :label="6">
<img src="https://picsum.photos/800/400/?2">
<span>备选项2</span>
</el-radio>
<el-radio :label="9"> </el-radio>
</el-radio-group>
</template>
</div>
SCSS
@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
img {
width: 100px;
}
.el-radio__label span {
display: block;
padding-left: 25px;
line-height: 30px;
text-align: center;
}
Babel + JSX
var Main = {
data () {
return {
radio2: 3
};
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')