结合iview组件库实现一个单选展示两行内容

本文链接：https://blog.youkuaiyun.com/liuhp123/article/details/104287147

本文介绍了一个用于解决系统中主题名可能存在的冲突问题的提示框设计，通过提供两个选项让用户选择：使用已存在的主题名或创建一个新的主题名。此设计包括了详细的代码实现及样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如图：

提示框代码如下：

<template>
    <FormItem v-if="alertFlag" class="alert-wrap">
      <div class="alter-content">
        <p class="alert-title">提示：系统设别到主题名可能存在冲突，请选择期望写入的主题名</p>
        <div class="subject-name">主题名：</div>
        <div class="radios">
          <RadioGroup vertical>
            <div class="radio-content">
              <!-- <input type="radio" name="alert-choose" value="add-repeat" > -->
              <Radio class="icon-radio" label="existed-subject">
                <div class="single-radio">
                  <span>bt(172.24.0.11:3306,172.24.0.12:3306,172.24.0.13.3306)</span>
                  <p>该主题名存在，且括号内为对应数据源</p>
                </div>
              </Radio>
            </div>
            <div class="radio-content second-radio">
              <!-- <input type="radio" name="alert-choose" value="add-new"> -->
              <Radio class="icon-radio" label="new-subject">
                <div class="single-radio">
                  <span>bt12345678</span>
                  <p>新增主题名</p>
                </div>
              </Radio>
            </div>
          </RadioGroup>
        </div>
      </div>
    </FormItem>
<template>

<script>
export default{
    data(){
        return{
            alertFlag:false,
        }
    },
    methods:{
        hideAlert(){
          this.alertFlag = false
        }
    }
}
    
</script>
//样式
<style scoped lang="less">
.alert-wrap{
  width:100%;
  .alter-content{
    width:100%;
    padding:10px;
    border:1px solid #cccc;
    border-radius: 5px;
    .alert-title{
      color: red;
      font-size: 14px;
    }
    .subject-name{
      display: inline-block;
      vertical-align: top;
      margin-top: 5px;
      line-height: 16px;
      font-size: 13px;
    }
    .radios{
      display: inline-block;
      vertical-align: top;
      margin-top: 5px;
      .radio-content{
        vertical-align: top;
        .ivu-radio{
          vertical-align: top;
        }
        input{
          vertical-align: top;
        }
      }
    }
    .single-radio{
      display: inline-block;
      line-height: 16px;
      font-size: 12px;
    }
    .submit{
      position: relative;
      top:435px;
    }
  }
}
.second-radio{
  margin-top: 6px;
}

</style>
<style >
.alert-wrap .alter-content .radios .radio-content .ivu-radio{
  vertical-align: top;
}
</style>