element-ui後臺管理系統學習(9)-slot插槽的使用

在不同的頁面中，會有很多公共的頁面在不同的父頁面中出現，但是又不盡相同。這個時候我們可以多個組件，但是最優秀的方式是我們可以封裝一個組件，然後使用插槽動態改變一些又區別的地方。舉例如下：

爲了解決這中情況，我們通常可以抽離成一個組件，在不同的佈局部分使用插槽，要動態的控制佈局。

button-search.vue子組件

<template>
	<div>
		<div class="d-flex align-items-center">
			<!-- 左邊 -->
			<slot name="left"></slot>
			<!-- 右邊 -->
			<div class="ml-auto" v-show="!superSearch">
				<slot name="right">
					<el-input v-model="keyword" :placeholder="placeholder" size="mini" style="width:150px;" class="mr-2"></el-input>
					<el-button type="info" size="mini"
					@click="$emit('search',keyword)">搜索</el-button>
					<el-button size="mini" 
					@click="superSearch = true">高級搜索</el-button>
				</slot>
			</div>
			
		</div>
		<el-card class="box-card bg-light my-3" v-show="superSearch">
			<div slot="header" class="clearfix" style="margin: -10px;">
				<span>高級搜索</span>
				<el-button style="float: right; padding: 3px 0" 
				type="text" @click="closeSuperSearch">收起</el-button>
			</div>
			<!-- 表單 -->
			<slot name="form"></slot>
		</el-card>
	</div>
</template>

<script>
	export default {
		props: {
			placeholder: {
				type: String,
				default: ""
			},
		},
		data() {
			return {
				keyword: "",
				superSearch:false
			}
		},
		methods: {
			closeSuperSearch() {
				this.superSearch = false
			}
		},
	}
</script>

<style>
</style>

---

list.vue父組件

<template>
  <div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;">

    <el-tabs v-model="tabIndex" @tab-click="handleClick">
      <el-tab-pane :label="tab.name" :key="tabI" v-for="(tab,tabI) in tabbars">
        <button-search ref="buttonSearch" placeholder="要搜索的商品名稱" @search="searchEvent">
          <!-- 左邊 -->
          <template #left>
            <el-button type="success" size="mini">發佈商品</el-button>
            <el-button type="danger" size="mini">批量刪除</el-button>
          </template>
          <!-- 高級搜索表單 -->
          <template #form>
            <el-form inline ref="form" :model="form" label-width="80px">
              <el-form-item label="商品名稱" class="mb-0">
                <el-input v-model="form.name" placeholder="商品名稱" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="商品編碼" class="mb-0">
                <el-input v-model="form.code" placeholder="商品編碼" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="商品類型" class="mb-0">
                <el-select v-model="form.type" size="mini" placeholder="請選擇商品類型">
                  <el-option label="區域一" value="shanghai"></el-option>
                  <el-option label="區域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商品分類" class="mb-0">
                <el-input v-model="form.category" placeholder="商品分類" size="mini"></el-input>
              </el-form-item>
              <el-form-item class="mb-0">
                <el-button type="info" size="mini" @click="searchEvent">搜索</el-button>
                <el-button size="mini" @click="clearSearch">清空篩選條件</el-button>
              </el-form-item>
            </el-form>
          </template>
        </button-search>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import buttonSearch from "@/components/common/button-search.vue";
export default {
  components: {
    buttonSearch
  },
  data() {
    return {
      tabIndex: 0,
      tabbars: [
        { name: "審覈中" },
        { name: "出售中" },
        { name: "已下架" },
        { name: "庫存預警" },
        { name: "回收站" }
      ],
      form: {
        name: "",
        code: "",
        type: "",
        category: ""
      }
    };
  },
  methods: {
    // 加載數據
    handleClick(tab, event) {
      console.log(tab.index);
    },
    // 清空篩選條件
    clearSearch() {
      this.form = {
        name: "",
        code: "",
        type: "",
        category: ""
      };
      this.$refs.buttonSearch[this.tabIndex].closeSuperSearch();
    },
    // 搜索事件
    searchEvent(e = false) {
      // 簡單搜索
      if (typeof e === "string") {
        return console.log("簡單搜索", e);
      }
      // 高級搜索
      console.log("高級搜索");
    }
  }
};
</script>

<style>
</style>

---

思路分析：

在子組件button-search.vue中，我們可以使用<slot name="left"></slot>作爲一個插槽，在父組件list.vue中，可以使用模板插入不同的內容。這樣，便可以實現不同的樣式佈局。

<template #left>
    <el-button type="success" size="mini">發佈商品</el-button>
    <el-button type="danger" size="mini">批量刪除</el-button>
</template>