vue 封装 radio 组件，纯css手写，需修改样式可自制

最新推荐文章于 2024-05-18 09:49:19 发布

叶公子star

最新推荐文章于 2024-05-18 09:49:19 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue radio

本文链接：https://blog.csdn.net/lucky___star/article/details/88600918

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

zl-radio

<template>
  <input type="radio" 
    class="input_check" 
    :disabled="disabled" 
    :checked="checked"
    @change="change"/>
</template>
<script>
export default {
  data(){
    return{
      // checked: false
    }
  },
  model: {
    prop: 'checked',
    event: 'change'
  },
  methods:{
    change(e){
      this.$emit('change', e.target.checked)
    }
  },
  props:{
    checked:{
      type:Boolean,
      default:false
    },
    disabled:{
      type:Boolean,
      default:false
    }
  }
}
</script>
<style lang="less" scoped>
input[type=radio] {
  width: .4rem;
  height: .4rem;
  -webkit-appearance: none;
  background-color: transparent;
  border: 0;
  outline: 0 !important;
  color: #d8d8d8;
  position: relative;
} 
input[type=radio]:before{
  content: "";
  display:block;
  width: .4rem;
  height: .4rem;
  border: 1px solid #ddd;
  background-color: #fff;
  box-sizing:border-box;  
  border-radius: .4rem;
  position: absolute;
}

input[type=radio]:disabled:before{
  content: "";
  display:block;
  width: .4rem;
  height: .4rem;
  border: 1px solid #333;
  background-color: #333;
  box-sizing:border-box;  
  border-radius: .4rem;
  position: absolute;
}
input[type=radio]:checked:before{
  content: "";
  display:block;
  width: .4rem;
  height: .4rem;
  border: 1px solid #D2A47E;
  background-color: #D2A47E;
  box-sizing:border-box;  
  border-radius: .4rem;
  position: absolute;
}
input[type=radio]:checked:after{
  content: "";
  display:block;
  width: .15rem;
  height: .3rem;
  border-left: .06rem solid #fff;
  border-top: .06rem solid #fff;
  border-radius:  .06rem;
  box-sizing:border-box; 
  position: absolute;
  transform: rotate(-135deg) translate(-70%, 25%);
}
</style>

未选状态选中状态