vue混入(mixins)的應用

vue的API中有個混入，這裏主要介紹利用選項合併來二次封裝element-ui的el-table標籤，使其達到可以最大限度的複用。

官方例子

官方的例子作了簡單的介紹，這裏就不浪費篇幅去介紹了，你們能夠直接查看官方例子選項合併或則查看下面的截圖：

其實你們看了官方文檔已經知道了用法和注意事項，下面開始一步步來驗證便可。

新建Vue項目

利用vue-cli工具新建一個項目，步驟以下：

• 在cmd命令工具中輸入下面的命令新建一個vue項目：

vue create elevue
複製代碼

• 切換目錄到剛剛建立的項目根目錄下運行 yarn serve命令開啓服務

  

• 在瀏覽器上輸入上面的網址就能夠看到效果了，以下：

  

安裝element-ui

在上面新建的項目根目錄下安裝element-ui，命令以下：

yarn add element-ui
複製代碼

安裝完後再main.js中添加以下代碼：

目前還不知道有沒有安裝成功呢，因此找個頁面試試效果，在home.vue文件中添加以下代碼看看效果：

<el-row>
    <el-button>默認按鈕</el-button>
    <el-button type="primary">主要按鈕</el-button>
    <el-button type="success">成功按鈕</el-button>
    <el-button type="info">信息按鈕</el-button>
    <el-button type="warning">警告按鈕</el-button>
    <el-button type="danger">危險按鈕</el-button>
</el-row>
複製代碼

mixins文件(重點)

這裏結合element-ui表格的二次封裝這篇文章裏面封裝的table組件來介紹mixins這個文件的具體寫法和大體內容。

修改封裝table

因爲封裝的table適合每一個頁面單獨使用，這裏是須要將大部分的公共功能抽出來整合，減小後面頁面的重複勞動，因此須要對此進行改進，主要改進一個地方就是loading的位置以下：

對於具體應用組件table的地方也須要修改兩個地方，一個是去掉table對象裏面的loading，而後是在table組件上添加一個loading綁定，以下：

編寫mixins文件內容

這時在src目錄下新建utils目錄，utils目錄下新建咱們的mixins.js文件，添加以下簡單的代碼：

export var mixin = {
  data() {
    return {
      loading: true, // 加載狀態
    };
  }
};
複製代碼

而後再新建項目的home.vue文件中引入上面的文件

注意上面的兩處地方，這個時候的效果就出來了，以下：

接着在添加方法獲取表格數據以及生命週期函數來初始化，以下：

export var mixin = {
  data() {
    return {
      loading: true, // 加載狀態
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.$http.get(this.table.listUrl).then(res => {
        this.table.data = res.data.recent;
        this.loading = false;
      });
    },
  },
};
複製代碼

上面有一個listUrl地址目前沒有，其實這時只須要在home.vue中定義listUrl便可獲取數據了

上面是採用的知乎的開發api須要配置跨域，這裏就你們能夠自行配置跨域便可。

這個時候就能夠看到頁面中有數據展現了

其實這裏我只是介紹了方法，能夠有不少公用功能寫在這裏，如：

export var mixin = {
  data() {
    return {
      page: {
        pageSize: 10,
        pageSizes: [10, 30, 50, 100, 200],
        currentPage: 1,
        totalPage: 0,
      },
      loading: true, // 加載狀態
      searchFileds: {}, //搜索條件
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.$http.get(this.table.listUrl).then(res => {
        this.table.data = res.data.recent;
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
    },
  },
};
複製代碼

上面能夠將分頁和查詢都統一到一塊兒來處理，只須要修改getList()方法裏面的參數便可。

若是你的接口規範的話，甚至刪除功能均可以直接寫在這裏，後面就會少些好多代碼的。