用ivew写一个弹窗组件，根据单选框按钮显示不同内容

最新推荐文章于 2023-10-12 19:35:10 发布

Lpd_Reason

最新推荐文章于 2023-10-12 19:35:10 发布

阅读量998

点赞数

CC 4.0 BY-SA版权

分类专栏：前端框架vue

本文链接：https://blog.youkuaiyun.com/qq_40283784/article/details/86644683

前端框架vue 专栏收录该内容

33 篇文章

订阅专栏

本文档介绍了如何利用iView UI库创建一个弹窗组件，并结合单选按钮实现不同内容的展示。内容涵盖组件的数据结构、事件处理以及SCSS样式设置，最终展示出具有交互功能的弹窗效果。

modal:

<modal
      v-model="showSumbitDefectModalValue"
      width="700px"
      :closable='false' 
      :mask-closable='false'
      >
      <div class="sumbit-ddefect-common-modal-head">
        <div class="text-left common-modal-head-left">
          <Icon type="ios-bug" color="red" size="23" style="top: -2px;position:relative;"/> Submit Defect to Jira
        </div>
        <div class="text-right">
            <i-button type="primary" size="small" @click.native="setSumbitDefect" @mousedown.native.stop style="width: 65px;font-size:16px;">OK</i-button>
            <Button type="text" size="small" @click.native="cancelSumbitDefect" @mousedown.native.stop style="width: 65px;font-size:16px;">Cancel</Button>
        </div>
        <div class="clearFloat"></div>
      </div>
      <div class="sumbit-ddefect-common-modal-content">
        <div class="sumbit-ddefect-radio">
          <RadioGroup @on-change="sumbitDefectRadioChange()" v-model="sumbitDefectRadioselect">
              <Radio label="createNewDefect" style="margin: 0px 240px 0px 30px;">
                  <span>Create new defect</span>
              </Radio>
              <Radio label="linkWithExsitingDefect" style="">
                  <span>Link With Exsiting Defect</span>
              </Radio>
          </RadioGroup>
        </div>
        <div class="sumbit-ddefect-radio-content">
          <div class="sumbit-ddefect-radio-content-head">
            {{sumbitDefectRadioselect=="createNewDefect"?createNewDefectWord:linkWithExsitingDefectWord}}
          </div>
          <div class="sumbit-ddefect-radio-content-table" v-if="sumbitDefectRadioselect=='createNewDefect'">
            <div class="sumbit-ddefect-radio-content-table-tr">
              <div class="sumbit-ddefect-radio-content-table-tr-td1">
                Select Jira project：
              </div>
              <div class="sumbit-ddefect-radio-content-table-tr-td2">
                <Select v-model="model11" style="width:100%">
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
              </div>
            </div>
           <div class="sumbit-ddefect-radio-content-table-tr">
              <div class="sumbit-ddefect-radio-content-table-tr-td1">
                Select Jira issue type：
              </div>
              <div class="sumbit-ddefect-radio-content-table-tr-td2">
                <Select v-model="model11" style="width:100%">
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
              </div>
            </div>
            <div class="sumbit-ddefect-radio-content-table-tr">
              <div class="sumbit-ddefect-radio-content-table-tr-td1">
                Select Jira prefix：
              </div>
              <div class="sumbit-ddefect-radio-content-table-tr-td2">
                <Input placeholder="Enter something..." style="width:100%;" />
              </div>
            </div>
          </div>
          <div class="sumbit-ddefect-radio-content-link" v-else-if="sumbitDefectRadioselect=='linkWithExsitingDefect'">
            <div class="sumbit-ddefect-radio-content-link-head">
              <div class="radio-content-link-id">Enter Jira Issue ID:</div>
              <div class="radio-content-link-input"><Input placeholder="Enter something..." style="width:100%;" /></div>
              <div class="radio-content-link-icon"><Icon type="ios-link" color="#259e24" size="18"/>Link</div>
            </div>
            <div class="sumbit-ddefect-radio-content-link-content">
              <div class="sumbit-ddefect-radio-content-link-content-tr">
                <div class="sumbit-ddefect-radio-content-link-content-td1">
                  <span>ID</span>
                </div>
                <div class="sumbit-ddefect-radio-content-link-content-td2">
                  <span>Title</span>
                </div>
                <div class="sumbit-ddefect-radio-content-link-content-td3"> 
                  <span>Status</span>
                </div>
                <div class="sumbit-ddefect-radio-content-link-content-td4">
                  <span>Dev Test Task ID</span>
                </div>
              </div>
              <div class="sumbit-ddefect-radio-content-link-content-template"><span style="margin-left: 10px;">Template ID：</span></div>
              <div class="sumbit-ddefect-radio-content-link-content-body">
                <div class="sumbit-ddefect-radio-content-link-content-td1">
                  <span>ID</span>
                </div>
                <div class="sumbit-ddefect-radio-content-link-content-td2">
                  <span>Title</span>
                </div>
                <div class="sumbit-ddefect-radio-content-link-content-td3"> 
                  <span>Status</span>
                </div>
                <div class="sumbit-ddefect-radio-content-link-content-td4">
                  <span>Dev Test Task ID</span>
                </div>
              </div>
              <!--<Table border :columns="sumbitDefectColumns" :data="sumbitDefectData"></Table>-->
            </div>
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </modal>

data:

return {
      model11:"kkk",
      cityList: [
          {
              value: 'New York',
              label: 'New York'
          },
          {
              value: 'London',
              label: 'London'
          },
          {
              value: 'Sydney',
              label: 'Sydney'
          },
          {
              value: 'Ottawa',
              label: 'Ottawa'
          },
          {
              value: 'Paris',
              label: 'Paris'
          },
          {
              value: 'Canberra',
              label: 'Canberra'
          }
      ],
      sumbitDefectColumns: [
          {
              title: 'ID',
              key: 'id'
          },
          {
              title: 'Title',
              key: 'title'
          },
          {
              title: 'Status',
              key: 'status'
          },
          {
              title: 'Dev Test Task ID',
              key: 'devTestTaskID'
          }
      ],
      sumbitDefectData: [
          {
              id: 'John Brown',
              title: 18,
              status: 'New York No. 1 Lake Park',
              devTestTaskID: '2016-10-03'
          },
      ],
      linkWithExsitingDefectWord:"Link Jira Issue List",
      createNewDefectWord:"Link Jira information",
      sumbitDefectRadioselect:"createNewDefect",
      showSumbitDefectModalValue:false,

事件：

sumbitDefectRadioChange(){
        console.log("12123");
        console.log(this.sumbitDefectRadioselect);
      },
      setSumbitDefect(){
        this.showSumbitDefectModalValue=false;
      },
      cancelSumbitDefect(){
        this.showSumbitDefectModalValue=false;
      },
      showSumbitDefectModal(){
        this.showSumbitDefectModalValue=true;
      },

scss:

.sumbit-ddefect-common-modal-head{
    padding-bottom:10px;
    border-bottom:1px solid #ddd;
    .common-modal-head-left{
        float:left;
        color: #ffa500fa;
        font-size: 15px;
        font-weight: 800;
    }
}
.sumbit-ddefect-common-modal-content{
    .sumbit-ddefect-radio{
        border: 1px solid #ddd;
        margin: 10px 15px 10px 15px;
        display: flex;line-height: 30px;
    }
    .sumbit-ddefect-radio-content{
        margin: 10px 15px;
        border: 1px solid #ddd;
        .sumbit-ddefect-radio-content-head{
            background: #ccc;
            line-height: 30px;
            padding-left: 10px;
            font-weight: 800;
        }
        .sumbit-ddefect-radio-content-table{
            .sumbit-ddefect-radio-content-table-tr{
                display:flex;
                margin-bottom:10xp;
                margin: 11px 10px 11px 0px;
                .sumbit-ddefect-radio-content-table-tr-td1{
                    width:50%;
                    text-align:right;
                    line-height: 32px;
                }
                .sumbit-ddefect-radio-content-table-tr-td2{
                    width:50%;
                }
            }
            
        }
        .sumbit-ddefect-radio-content-link{
            .sumbit-ddefect-radio-content-link-head{
                display: flex;
                margin: 10px 10px 10px 10px;
                .radio-content-link-id{
                    text-align: right;
                    line-height: 34px;
                    width: 20%;
                    margin-right: 10px;
                }
                .radio-content-link-input{
                    width: 60%;
                    margin-right: 10px;
                }
                .radio-content-link-icon{
                    line-height: 34px;
                    color: #7e8a7a;
                    font-size: 18px;
                    font-weight: 700;
                    cursor:pointer;
                }
            }
            .sumbit-ddefect-radio-content-link-content{
                margin: 10px 10px 0px 10px;
                color: #0a0303d4;
                .sumbit-ddefect-radio-content-link-content-tr{
                    border: 1px solid #ddd;
                    display:flex;
                    margin: 10px 10px 0px 10px;
                    height: 50px;
                    background:rgb(125, 146, 98);
                    .sumbit-ddefect-radio-content-link-content-td1{
                        width:20%;
                        text-align:left;
                        border-right: 1px solid #ddd;
                    }
                    .sumbit-ddefect-radio-content-link-content-td2{
                        width:40%;
                        text-align:left;    
                        border-right: 1px solid #ddd;
                    }
                    .sumbit-ddefect-radio-content-link-content-td3{
                        width:20%;
                        text-align:left;    
                        border-right: 1px solid #ddd;
                    }
                    .sumbit-ddefect-radio-content-link-content-td4{
                        width:20%;
                        text-align:left;
                    }
                    span{
                        display: block;
                        margin: 15px 10px 10px 10px;
                    }
                }
                .sumbit-ddefect-radio-content-link-content-template{
                    background: rgb(87, 152, 139);
                    line-height: 30px;
                    border-right: 1px solid rgb(221, 221, 221);
                    border-left: 1px solid rgb(221, 221, 221);
                    margin: 0px 10px 0px 10px;
                }
                .sumbit-ddefect-radio-content-link-content-body{
                    display:flex;
                    margin:0px 10px 10px 10px;
                    height: 50px;
                    border: 1px solid #ddd;
                    background-color: #99bdae;
                    .sumbit-ddefect-radio-content-link-content-td1{
                        width:20%;
                        text-align:left;
                        border-right: 1px solid #ddd;
                    }
                    .sumbit-ddefect-radio-content-link-content-td2{
                        width:40%;
                        text-align:left;    
                        border-right: 1px solid #ddd;
                    }
                    .sumbit-ddefect-radio-content-link-content-td3{
                        width:20%;
                        text-align:left;    
                        border-right: 1px solid #ddd;
                    }
                    .sumbit-ddefect-radio-content-link-content-td4{
                        width:20%;
                        text-align:left;
                    }
                    span{
                        display: block;
                        margin: 15px 10px 10px 10px;
                    }
                }
            }
        }
    }
}

效果：