一、遇到的问题

按照官网给的方法、使用fill和fill-text，无法成功修改样式。然后看了很多网上的，直接修改样式，我仿照他们写法、也失效了。但我仔细看了看他们的css文件，发现几乎都用了less预编译。

在添加less后，不要在原来组件中的的<style scoped><style>中写修改el-radio的样式，而是在下面重新写一个<style lang="less"> <style>在里面写el-radio样式就好，且最好是用less的语法

二、

下面分享一个我修改了el-radio样式实现radio-button，也就是常见淘宝京东那些选择码数，款式的单选按钮（选择按钮）

<template><div class="radios_outerbox" v-for="(i, index) in sizes_list" :key="index"><el-radio v-model="size_radio_choose" :label="i.label" style="" border></el-radio></div>
</template><script>
export default {data() {return {// 用来接收选中的值size_radio_choose: "",//码数列表sizes_list: [{ label: 35 },{ label: 35.5 },{ label: 36, disable: true },{ label: 36.5 },{ label: 37 },{ label: 37.5 },{ label: 38 },{ label: 39 },{ label: 39.5 },{ label: 40 },{ label: 40.5 },],};},
};
</script>
<style scoped>
</style><style lang="less">
.radios_outerbox {.el-radio__input.is-checked + .el-radio__label {color: black;}.el-radio.is-bordered.is-checked {border-color: rgb(53, 53, 53);}.el-radio__label {padding-left: 0px;}.el-radio__input {
//让选中的圆点不显示display: none;}.el-radio {padding: 6px 15px 0 15px;padding-top: 6px;padding-right: 15px;padding-bottom: 0px;padding-left: 15px !important;border-radius: var(--el-border-radius-base);height: 28px;width: 100px; //宽度可以自定义，如果不自定义，会根据label长度和padding生成font-size: 16px;}
}
</style>

需要安装less

需要自己安装element-ui plus

效果图：

vue中关于el-radio样式修改失效的问题（自定义属性），和实现类似淘宝的码数、款式的选泽按钮相关推荐

在vue移动端项目中，配合clipboard.js插件，复制一段密令（类似淘宝支付宝口令）的文本到剪切板...
需求开发过程中遇到的需求需要复制请求过来的一段密令(类似支付宝淘宝口令)到剪切板. pc端的文本复制到剪切板如果是在pc端的话,可以直接使用原生js进行编写,代码如下: <textarea ...
bind-html自动换行,vue element ui this.$alert 样式修改，长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果问题 ...
AntDV中a-input的默认样式修改
AntDV中a-input的默认样式修改 UI稿有修改a-input样式的需求,调整代码如下: 基本外观样式(背景颜色,字体颜色,placeholder颜色): /deep/ .ant-input{b ...
VUE类似淘宝选择商品多规格(库存判断)
1.组件效果展示也可访问链接查看网页效果... 后面又用uni-app写过一次,比这次稍微清晰一些 uni-app类似淘宝选择商品多规格(库存判断) 瞎封装组件系列: VUE简单提示框 VUE树形图 ...
在系统中集成淘宝扫码登录
在系统中集成淘宝扫码登录在系统中集成淘宝扫码登录申请二维码并存入数据库在手淘首页搜索框中输入口令,并搜索点击确认登录后,系统中即可获取到cookie相关信息在系统中集成淘宝扫码登录为了在公 ...
vue 实现类似淘宝的商品详情页的商品展示
vue 实现类似淘宝的商品详情页的商品展示利用vue和swiper实现缩略图控制 / Swiper互相控制具体需求描述: 图片大图自动轮播展示,下面的缩略图跟着变化,点击小图切换到对应的大图,大图 ...
iview的表格自定义_Vue中使用iview-UI表格样式修改和使用自定义模板数据渲染相关...
项目前台页面用的iview-UI,下面对表格相关的样式修改和数据渲染进行一下总结数据渲染相关正常渲染直接从教程中拿出来的组件代码: columns中填写的数据必须是一个数组,代表的是表头相关,常 ...
【Vue】class style：Vue中的两种样式处理方法
class属性 1.基本的class使用 <!DOCTYPE html> <html lang="en"> <head><meta cha ...
vue中改变v-html元素样式
<div class="brand-article" v-html="content.article"></div> 实现样式: 设计图 ...

vue中关于el-radio样式修改失效的问题（自定义属性），和实现类似淘宝的码数、款式的选泽按钮

一、遇到的问题

二、

vue中关于el-radio样式修改失效的问题（自定义属性），和实现类似淘宝的码数、款式的选泽按钮相关推荐

最新文章

热门文章