Vue Element UI 单选框按钮自定义笑脸图标

要将Vue和Element UI的单选框按钮改变成笑脸，可以使用Element UI的自定义图标功能来实现。

首先，你需要在项目中引入Element UI的样式文件和字体文件。可以通过npm安装Element UI，然后在入口文件中引入样式文件：

import 'element-ui/lib/theme-chalk/index.css';

然后，在单选框按钮中使用el-icon组件，并设置icon属性为自定义的笑脸图标：

<el-radio-group v-model='selected'>
  <el-radio label='1'>
    <el-icon :class='selected === '1' ? 'icon-smile' : ''' :icon='selected === '1' ? 'el-icon-smile' : '''></el-icon>
  </el-radio>
  <el-radio label='2'>
    <el-icon :class='selected === '2' ? 'icon-smile' : ''' :icon='selected === '2' ? 'el-icon-smile' : '''></el-icon>
  </el-radio>
  <el-radio label='3'>
    <el-icon :class='selected === '3' ? 'icon-smile' : ''' :icon='selected === '3' ? 'el-icon-smile' : '''></el-icon>
  </el-radio>
</el-radio-group>

在Vue的data中定义selected属性，并在methods中添加处理选中项变化的方法：

data() {
  return {
    selected: '1'
  }
},
methods: {
  handleChange(value) {
    this.selected = value;
  }
}

接下来，在Vue的created生命周期钩子中注册自定义图标：

created() {
  this.$nextTick(() => {
    this.$icon({
      el: this.$el,
      name: 'smile',
      prefix: 'el-icon',
      fontFamily: 'element-icons'
    });
  });
}

最后，在样式文件中定义icon-smile类，设置笑脸图标的样式：

.icon-smile {
  font-size: 20px;
  color: yellow;
}

这样，当选中的单选框按钮发生变化时，笑脸图标的样式也会随之改变。记得在项目中引入Element UI的字体文件，以确保笑脸图标能够正确显示。