vue常用组件总结

vue为我们提供了一个强大的提高开发效率的神器----component，而且对于后期代码优化和维护也提供的极大地便利。现在，将一些常用的组件总结下来，便于日后有需要时直接复用！

一. 分页（Pagination.vue）

效果图如下：

点击两侧按钮，可进行翻页，当处于第一页时，左侧按钮不可点，当位于最后一页时，右侧按钮不可点。在输入框内输入页码按下回车可直接跳转对应页面。

html

<template>
  <div class="page-team">
    <div class="page-item-con">
      <div :class="currentPage == 1 || currentPage == '' ? 'disabledBtn' : 'lf-page-div'" @click="currentPage<=1?'':turn(currentPage-1)">
        <img src="@/assets/img/left-j.png" alt="" v-show="currentPage > 1" draggable="false">
        <img src="@/assets/img/left-j-dis.png" alt="" v-show="currentPage == 1 || currentPage == ''" draggable="false">
      </div>
      <div><input type="text" class="page-input" @keyup.enter="turn(currentPage)" v-model.number="currentPage" oninput="value=value.replace(/[^\d]/g,'')"></div>
      <div :class="currentPage >= totalPage ? 'disabledBtn' :'rg-page-div'" @click="currentPage>=totalPage?'':turn(currentPage+1)">
        <img src="@/assets/img/rg-j.png" alt="" v-show="pageCount > 1 && currentPage < pageCount" draggable="false">
        <img src="@/assets/img/rg-j-dis.png" alt="" v-show="currentPage >= pageCount" draggable="false">
      </div>
    </div>
    <div class="page-num">共 {{totalCount}} 条</div>
  </div>
</template>

JS

export default {
  name: 'Pagination',
  props: {
    currentPage: {//当前页
      type: Number,
      default: 1,
    },
    pageCount:{//每页显示条数
      type: Number,
      default: 20,
    },
    totalCount:{//总条数
      type: Number,
      required: true
    },

  },
  data() {
    return {
      limitNum:'',
    }
  },
  computed: {
    totalPage(){
      return Math.ceil(this.totalCount / this.pageCount)
    },
  },
  methods: {
    // 切换分页
    turn (page) {
      let i = parseInt(Number(page));
      if(i < 1){
        i = 1;
      }else if(i > this.totalPage){
        i = this.totalPage;
      }
      if(this.limitNum !== this.pageCount && this.limitNum !==''){//每页显示条数改变
        let pages=Math.ceil(this.totalCount / this.limitNum);
        if(page > pages){
          i = pages;
        }
        this.$emit('update:limit', this.limitNum);
      }
      this.$emit('update:currentPage', i);
      this.$emit('turn');
    },
  },
}

在需要分页的页面内引入

html

<Pagination :currentPage.sync="currentPage"  :pageCount.sync="pageCount" :totalCount="totalCount" @turn="_getTableData"></Pagination>

JS

import Pagination from '@/components/base/Pagination/Pagination'
export default {
    data() {
        currentPage：1,
        pageCount:20,
        totalCount:0,
    },
    components: {
        Pagination
    },
    methods: {
        // 获取数据
    async _getTableData() {
      this.loading = true;
      let res;
      let currentPage = this.currentPage - 1;
      try {
        res = await **接口名**({
          page: currentPage,
          count: this.pageCount,
        });
        if (res.total_nums) {
          this.tableData = res.collection;
          this.totalCount = res.total_nums
        } else {
          this.tableData = [];
        }
        this.loading = false;
      } catch (error) {
        this.tableData = [];
      }
    }
}

二. 搜索

效果图如下：

搜索使用了element组件中的el-input进行封装。

HTML

<template>
  <div>
    <el-input
      @keyup.enter.native="searchClick()"
      :placeholder="placeholder"
      clearable
      v-model="keyword"
      @change="searchChange"
      class="input-with-select">
      <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
    </el-input>
  </div>
</template>

JS

export default {
  props: {
    placeholder: {
      type: String,
      default: '请输入内容',
    }
  },
  data() {
    return {
      keyword: '',
    }
  },
  methods: {
    searchClick() {
      let str = this.keyword.trim()
      this.$emit('search',str)
    },
    searchChange(){
      let str = this.keyword.trim()
      this.$emit('query',str)
    }
  },
}

在需要搜索的也米看中调用：

HTML

<lin-search placeholder="请输入用户 ID" @search="searchClick" ref="search"/>

JS

import LinSearch from "@/components/base/search/lin-search";
export default {
 components: {
    LinSearch
  },
  methods: {
      searchClick(query) {
          console.log('query', query)
          this.loading = true;
          this.currentPage = 1;
          if (query) {
            this.query = Number(query);
          } else {
            this.query = "";
          }
          // 获取数据
          this._getTableData();
      },
  }
}

三. 点赞

点击字体图标，动画+1或者-1效果出现，同时给后台发送请求，保存点赞状态。（github上一个好用的点赞组件：VueStar）

后期常用插件还会继续补充