component & slot

component & slot

<template>
  <div class="myHeaderContainer">
    <header class="myHeader" :class="{ 'fixed': fixed }">
      <div class="top_bar">
        <div class="abs_l">
          <slot name="left">
            <a slot="left" class="back-white" @click.stop="back"></a>
          </slot>
        </div>
        <div class="abs_m">
          {{title}}
          <slot name="mid"></slot>
        </div>
        <div class="abs_r">
          <slot name="right"></slot>
        </div>
      </div>
    </header>
  </div>
</template>
<script>
import LightSDK from "light-sdk";
export default {
  props: {
    fixed: Boolean,
    title: String
  },
  methods: {
    back() {
      LightSDK.native.back({ number: "1" });
    }
  }
};
</script>
<style lang='less' scoped>
// header_height = 1.335rem
  .myHeaderContainer {
    height: 0.86rem;
  }
.myHeader {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: #1a90ff;
  color: #fff;
  font-size: 16px;

  &.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 666;
  }
  .top_bar {
    position: relative;
    height: 0.86rem;
    user-select: none;
    display: flex;
    align-items: center;
    a {
      display: table-cell;
      width: 0.86rem;
      height: 0.86rem;
      color: inherit;
      font-size: inherit;
      font-weight: inherit;
      text-decoration: none;
      vertical-align: middle;
    }
    .abs_l,
    .abs_r {
      width: 0.86rem;
      height: 0.86rem;
      font-size: inherit;
      color: inherit;
      text-align: center;
    }
    .abs_m {
      flex: 1;
      font-weight: 700;
      text-align: center;
    }
  }
}
</style>

demo

<my-header
    fixed
    title="名片夹">
    <span slot="right"
        v-if="isShowBusiness && selected === `2`"
        class="chat-header-icon chat-header-search"
        @click="handleSearch"
        ref="chat-search">
    </span>
</my-header>

demos

refs

https://www.cnblogs.com/xgqfrms/p/10979925.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---