点击换一批效果

点击换一批效果

代码

 <div class="g">
        <div>
          <div class="g-a">
            <span class="spa">常用链接</span>
            <span class="spb">LINK</span>
            <div class="spc" @click="changeLink">
              <span class="spd">换一批</span>
              <img src="../../assets/images/cha.png" alt />
            </div>
          </div>
        </div>
        <div class="g-b">
          <!-- <div class="spa"> -->
          <!-- <dl>
            <dt v-for="(item, index) in overLink" :key="index">
              <a :href="item.url">{{ item.name }}</a>
            </dt>
          </dl>-->
          <el-row>
            <el-col :span="8" v-for="(item, index) in overLink" :key="index">
              <div class="g-dl">
                  //style="text-decoration:none;"  a标签去掉下划线
                <a :href="item.url" style="text-decoration:none;" target="_blank">{{ item.name }}</a>
              </div>
            </el-col>
          </el-row>
          <!-- </div> -->
        </div>
      </div>

数据

data(){
    return{
        //默认取值为0
        globalNum: 0,
        //点击换一批链接
        overLink: [],
        linkList: [],
        cloSureLink: null,
        //点击换一批合规
        
    }
},
created() {
    this.getLinkList()，
}
    

方法

methods:{
      getLinkList() {
      // 测试接口
      console.log('开始请求')
      this.$http
        .get('link')
        .then(res => {
          console.log(res)
          this.linkList = res.result.links
          //传参  指定展示6条数据
          this.cloSureLink = this.handleChange(this.linkList, 6)
          //默认展示一次
          this.changeLink()
        })
        .catch(err => {
          console.log(err)
        })
    },
        //换一批的封装方法
        handleChange(arr, num) {
      //console.log(this.globalNum())
      let globalNum = 0
      return callBack => {
        let overLink = []
        let result = this.changeList(arr, num)
        // debugger
        if (globalNum > result.length - 1) {
          globalNum = 0
          overLink = result[globalNum]
          // 回调函数取出赋值
          callBack(overLink)
          globalNum++
        } else {
          overLink = result[globalNum]
          callBack(overLink)
          globalNum++
        }
        return globalNum
      }
    },
          //点击换一批链接
    changeLink() {
      this.cloSureLink(res => {
        this.overLink = res
      })
    },
}

样式

  .g {
    position: relative;
    width: 380px;
    left: 400px;
    background: #ffffff;
    height: 126px;
    margin-top: 20px;

    .g-a {
      padding-top: 16px;
      margin: 0px 10px 16px 20px;
      height: 22px;
      line-height: 22px;

      .spa {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        font-weight: 600;
      }

      .spb {
        // display: block;
        margin-left: 4px;
        font-size: 20px;
        color: #e7ebef;
        line-height: 20px;
      }

      .spc {
        float: right;

        .spd {
          font-size: 14px;
          color: #666666;
          text-align: right;
        }

        img {
          width: 14px;
          height: 14px;
          vertical-align: middle;
          margin-left: 7px;
        }
      }
    }

    .g-b {
      height: 60px;
      width: 340px;
      margin: 0px 20px 16px 20px;
      padding-top: 0px;
    }

    .g-b dl {
      // padding-top: 0px;
      float: left;
      color: #666666;
      width: 113.3px;
    }
    .g-dl {
      a {
        display: block;
        font-size: 14px;
        line-height: 16px;
        padding-bottom: 16px;
      }

      .g-b dl dd {
        margin-left: 0px;
        font-size: 14px;

        // padding-top: 16px;
        line-height: 16px;
      }

      .spa {
        color: #1890ff;
      }
    }
  }

图例

示例二

代码

 <div class="f">
        <div class="f-a">
          <span class="spa">联系合规伙伴</span>
          <span class="spb">CONTACT</span>
          <div class="spc" @click="changeContact">
            <span class="spd">换一批</span>
            <img src="../../assets/images/cha.png" alt />
          </div>
        </div>
        <div class="f-b">
          <div
            class="fb-lef"
            v-for="(item, index) in contactList"
            :key="index"
            :class="{'active-bg':curBg===index}"
            @mouseover="curBg=index"
          >
            <img :src="item.avatar" alt />
            <div class="spc">
              <dl>
                <dd class="spa">{{item.displayname}}</dd>
                <dd class="spb">{{item.tel}}</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>

数据

data(){
    return{
        //默认取值为0
        globalNum: 0,
      //点击换一批合规
        contact: [],
        contactList: [],
        cloSureContact: null
        
        
    }
},
created() {
    // 获取联系合规伙伴数据
    this.getContact()
}

方法

methods:{
    //封装的方法——见上
    
    // get请求 get('地址'，'{params:数据}')
    async getContact() {
      console.log('开始请求合规')

      let res = await this.$http.get('contact')
      console.log(res)
      this.contact = res.result.contracts
      this.cloSureContact = this.handleChange(this.contact, 2)
      this.changeContact()
    },
}

样式

.f {
    width: 380px;
    // background: red;
    position: absolute;
    height: 126px;
    background: #ffffff;
    margin-top: 20px;
    // background: #ffffff;
    .f-a {
      padding-top: 16px;
      margin: 0px 10px 12px 20px;
      height: 22px;
      line-height: 22px;

      .spa {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        font-weight: 600;
      }

      .spb {
        // display: block;
        margin-left: 4px;
        font-size: 20px;
        color: #e7ebef;
        line-height: 20px;
      }

      .spc {
        float: right;

        .spd {
          font-size: 14px;
          color: #666666;
          text-align: right;
        }

        img {
          width: 14px;
          height: 14px;
          vertical-align: middle;
          margin-left: 7px;
        }
      }
    }

    .f-b {
      height: 60px;
      width: 360px;
      margin: 0px 10px 16px 10px;

      .fb-lef {
        float: left;
        height: 60px;
        width: 170px;

        // vertical-align: middle;
        img {
          border-radius: 50%;
          float: left;
          width: 40px;
          height: 40px;
          margin: 10px 8px 10px 10px;
        }

        .spc {
          // float: right;
          vertical-align: middle;

          // background: green;
          // height: 40px;
          dl .spa {
            font-size: 14px;
            color: #333333;
            line-height: 18px;
            // vertical-align: middle;
          }

          dl .spb {
            font-size: 12px;
            color: #666666;
            line-height: 14px;
          }
        }
      }

      .fb-rig {
        float: right;
        // background: #edf6ff;
        height: 60px;
        width: 170px;

        img {
          float: left;
          width: 40px;
          height: 40px;
          margin: 10px 8px 10px 0px;
        }

        .spc {
          vertical-align: middle;

          // height: 40px;
          .spa {
            font-size: 14px;
            color: #333333;
            line-height: 18px;
            // vertical-align: middle;
          }

          .spb {
            font-size: 12px;
            color: #666666;
            line-height: 14px;
          }
        }
      }
    }
  }