vue-resource

最新推荐文章于 2024-10-08 17:48:41 发布

荭色海湾

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量215

点赞数 3

分类专栏： Vue2 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_53374893/article/details/141268014

版权

Vue2 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1.简介

也是对xhr封装的一个vue插件库

2.安装

npm i vue-resource

3.使用

<template>
  <div class="container-xl">
    <div class="row bc">
      <div
        class="col-xl search-box d-flex flex-column justify-content-end"
      >
        <h1 class="text-bottom margin-left-dom">搜索 Github 用户</h1>
      </div>
    </div>
    <div class="row bc">
      <div class="col-xl search-box" >
        <div class="input-group mb-3 margin-left-dom inputWidth">
          <input
            type="text"
            class="form-control"
            placeholder="输入一个关键词"
            v-model="keyWord"
          />
            <button class="btn btn-outline-dark dom-margin" type="button" @click="searchUsers" >搜索</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';


export default {
  name: "MySearch",
  data() {
    return {
      keyWord:''
    }
  },
  methods:{
    searchUsers(){
      
         this.$bus.$emit('sendList',{ 
        isFirst: false,
        isLoading: true,
        });


      this.$http.get('https://api.github.com/search/users',{
        params:{
          q:this.keyWord
        }
      }).then(res=>{
         this.$bus.$emit('sendList',{ 
          users: res.data.items,
        isLoading: false,
        });
      },err=>{
        console.log(err);
        this.$bus.$emit('sendList',{ 
            users: [],
            isLoading: false,
            errMsg: '请求失败，请稍后再试！'
        });
      })
    }

  }
};
</script>

<style scoped>

.bc{
background-color: rgba(13, 14, 14, 0.313);

}

.search-box {
  height: 120px;
}

.margin-left-dom {
  margin-left: 30px;
}

.inputWidth {
  width: 450px;
}
.dom-margin{
  margin-left: 12px;
}
</style>