element ui 单选框的值设置为heml代码、element ui 单选框选图标、element ui 单选框赋值svg代码

单选框选择图标

 

<template>
	<div>
		单选图标
		<div>
			<template>
			  <el-radio v-model="radio" label="1">
				  <i class="el-icon-edit"></i>
			  </el-radio>
			  <el-radio v-model="radio" label="2">
				  <i class="el-icon-share"></i>
			  </el-radio>
			</template>
		</div>
		<br>
		单选值内容为html代码
		<br>
		<template>
			<el-radio-group v-model="radio2">
				<el-radio :label="icon1">
					<div v-html="icon1">
					</div>
				</el-radio>
				<el-radio :label="icon2">
					<div v-html="icon2">
					</div>
				</el-radio>
				<el-radio :label="icon3">
					<div v-html="icon3">
					</div>
				</el-radio>
				<el-radio :label="icon4">
					<div v-html="icon4"></div>
				</el-radio>
				<el-radio v-for="icon in icons" :label="iconPrefix+icon+iconSuffix">
					<div :class="icon">
					</div>
				</el-radio>
			</el-radio-group>
		</template>

	</div>
</template>


<script>
	export default {
		data() {
			return {
				radio: '1',
				radio2: 3,
				input: 3,
				icon1: '<svg t="1683803176246" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2020" width="16" height="16"><path d="M580.16 331.52c-49.44 0-89.76-40.32-89.76-89.76 0-49.44 40.32-89.76 89.76-89.76s89.76 40.32 89.76 89.76c0 49.44-40.32 89.76-89.76 89.76z m0-134.4c-24.48 0-44.64 20.16-44.64 44.64s20.16 44.64 44.64 44.64c24.48 0 44.64-20.16 44.64-44.64s-20.16-44.64-44.64-44.64zM302.72 824c-95.04 0-172.8-77.28-172.8-172.8s77.28-172.8 172.8-172.8c12.48 0 22.56 10.08 22.56 22.56s-10.08 22.56-22.56 22.56c-70.56 0-127.68 57.12-127.68 127.68s57.12 127.68 127.68 127.68c34.08 0 66.24-13.44 90.24-37.44 8.64-8.64 23.04-8.64 31.68 0 8.64 8.64 8.64 23.04 0 31.68C392 806.24 348.8 824 302.72 824zM721.76 830.72c-46.56 0-90.72-18.24-123.84-51.36-8.64-8.64-8.64-23.04 0-31.68 8.64-8.64 23.04-8.64 31.68 0 24.48 24.48 57.12 37.92 91.68 37.92 71.52 0 130.08-58.08 130.08-130.08 0-39.84-20.16-80.64-52.32-106.08-22.08-17.28-59.52-35.52-114.24-23.04-12 2.88-24-4.8-26.88-16.8-2.88-12 4.8-24 16.8-26.88 56.16-12.96 109.92-1.92 152.16 31.68 42.72 34.08 69.12 87.84 69.12 141.12 0.48 96.96-77.76 175.2-174.24 175.2z" fill="#1296db" p-id="2021"></path><path d="M461.12 744.32c-5.76 0-11.04-1.92-15.36-6.24-9.12-8.64-9.6-23.04-0.96-31.68l47.52-49.92c6.72-7.2 10.56-16.8 10.08-26.4-0.48-10.08-4.8-19.2-12-25.92L356 488c-13.44-12-20.64-28.8-21.12-46.08 0-17.28 7.2-34.08 19.68-46.08l56.64-52.8c41.28-39.36 78.24-25.92 101.76-7.68l1.44 0.96 166.56 147.36c9.12 8.16 10.08 22.56 1.92 31.68-8.16 9.12-22.56 10.08-31.68 1.92L485.12 370.88c-13.44-10.08-24.48-12-43.2 5.28L385.28 428.48c-3.36 3.36-5.28 7.68-5.28 12.96s1.92 9.6 5.76 12.96l134.88 115.68c16.8 15.36 26.4 35.52 26.88 57.6 0.96 22.08-7.2 43.2-22.56 59.04l-47.52 49.92c-4.32 5.28-10.08 7.68-16.32 7.68z" fill="#1296db" p-id="2022"></path></svg>',
				icon2: '<svg t="1683802997563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2428" width="16" height="16"><path d="M888 462.4L544 142.4c-19.2-17.6-48-17.6-65.6 0l-344 320c-9.6 9.6-16 22.4-16 35.2v355.2c0 27.2 22.4 49.6 49.6 49.6h683.2c27.2 0 49.6-22.4 49.6-49.6V497.6c3.2-12.8-3.2-25.6-12.8-35.2z m-32 392c0 1.6-1.6 1.6-1.6 1.6h-240V657.6c0-56-46.4-102.4-102.4-102.4-56 0-102.4 46.4-102.4 102.4v198.4h-240c-1.6 0-1.6-1.6-1.6-1.6V497.6l344-320 344 320v356.8z" p-id="2429"></path></svg>',
				icon3: '<svg t="1683803548624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3541" width="16" height="16"><path d="M192 384h640a42.666667 42.666667 0 0 1 42.666667 42.666667v362.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H192v106.666667a21.333333 21.333333 0 0 0 21.333333 21.333333h725.333334a21.333333 21.333333 0 0 0 21.333333-21.333333V308.821333L949.909333 298.666667h-126.528A98.048 98.048 0 0 1 725.333333 200.618667V72.661333L716.714667 64H213.333333a21.333333 21.333333 0 0 0-21.333333 21.333333v298.666667zM128 832H42.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V426.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333V85.333333a85.333333 85.333333 0 0 1 85.333333-85.333333h530.026667L1024 282.453333V938.666667a85.333333 85.333333 0 0 1-85.333333 85.333333H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333v-106.666667z m61.376-364.885333c-27.434667 0-49.898667 6.528-67.712 19.968-19.221333 13.824-28.501333 33.024-28.501333 57.216s9.621333 42.624 29.226666 55.296c7.466667 4.608 27.093333 12.288 58.432 23.04 28.138667 9.216 44.522667 15.36 49.514667 18.048 15.68 8.448 23.872 19.968 23.872 34.56 0 11.52-5.696 20.352-16.384 27.264-10.688 6.528-25.664 9.984-44.181333 9.984-21.013333 0-36.352-4.224-46.314667-11.904-11.050667-8.832-17.813333-23.808-20.672-44.544H85.333333c1.792 34.944 13.546667 60.288 34.922667 76.416 17.450667 13.056 42.026667 19.584 73.386667 19.584 32.426667 0 57.706667-7.296 75.52-21.12 17.813333-14.208 26.730667-33.792 26.730666-58.368 0-25.344-11.050667-44.928-33.130666-59.136-9.984-6.144-32.064-15.36-66.624-26.88-23.509333-8.064-38.122667-13.824-43.477334-16.896-12.096-6.912-17.813333-16.512-17.813333-28.032 0-13.056 4.992-22.656 15.68-28.416 8.554667-4.992 20.672-7.296 36.693333-7.296 18.538667 0 32.789333 3.456 42.048 11.136 9.258667 7.296 16.021333 19.584 19.584 36.48h41.344c-2.496-29.952-12.821333-52.224-30.656-66.432-16.725333-13.44-40.256-19.968-70.186666-19.968z m118.976 5.376L398.848 746.666667h50.24l90.496-274.176h-45.226667l-69.845333 223.488h-1.066667l-69.845333-223.488h-45.226667z m368.405333-5.376c-37.76 0-67.690667 13.824-89.792 42.24-21.013333 26.496-31.36 60.288-31.36 101.376 0 40.704 10.346667 74.112 31.36 99.84 22.442667 27.648 53.802667 41.472 94.421334 41.472 22.805333 0 43.093333-3.072 61.632-9.216A143.829333 143.829333 0 0 0 789.333333 716.714667V600.746667h-109.013333v38.4h67.328v56.448c-8.533333 5.376-17.450667 9.6-27.434667 12.672a123.285333 123.285333 0 0 1-34.197333 4.608c-30.997333 0-53.802667-9.216-68.416-27.648-13.525333-17.28-20.309333-42.24-20.309333-74.496 0-33.792 7.488-59.52 22.826666-77.952 13.866667-17.664 32.768-26.112 56.64-26.112 19.221333 0 34.901333 4.224 46.656 13.056 11.413333 8.832 19.242667 21.888 22.826667 39.552h42.026667c-4.629333-30.72-16.042667-53.376-34.197334-68.736-18.88-15.744-44.544-23.424-77.312-23.424z" fill="#1A8EF7" p-id="3542"></path></svg>',
				icon4: '<i class="el-icon-share"></i>',
				icons: [
					"el-icon-delete",
					"el-icon-setting",
					"el-icon-s-operation",
					"el-icon-s-home",
					"el-icon-s-marketing"
				],
				iconPrefix: "<div style='' class='>",
				iconSuffix: "'></div>"
			};
		},
		watch: {

		},
		methods: {

		}
	}
</script>
<style>
	.el-radio__label {
		float: right;
	}
</style>