zoukankan      html  css  js  c++  java
  • vue 顶部公共组件封装

    <template>
    <div class="top-header">
    <div
    class="top-nav flex flex--justify-content--space-between flex--align-items--center"
    :class="{'bg-white': !isTransparent}" >
    <!-- 左 -->
    <div class="left-img flex flex--justify-content--start">
    <div v-if="showBack" @click="back">
    <img v-if="!isTransparent" :src="blackImg" alt />
    <img v-else :src="whiteImg" alt />
    </div>
    </div>

    <!-- 中 -->
    <div class="top-center">
    <h2
    v-if="title"
    class="ellipsis-1"
    :class="{'black': !isTransparent, 'white': isTransparent}"
    >{{title}}</h2>
    </div>

    <!-- 右 -->
    <div class="right-opart flex flex--justify-content--end">
    <slot name="right"></slot>
    </div>
    </div>
    <div v-if="!isTransparent" class="clear-position"></div>
    </div>
    </template>
    <script>
    import whiteImg from "../../../static/img/common/white-left.png";//白色返回图标
    import blackImg from "../../../static/img/common/black-left.png";//黑色返回图标
    export default {
    props: [
    "isTransparent", // 导航组件是否透明
    "title", // 导航的标题,不传不显示
    "showBack" // 是否显示返回按钮
    ],
    data() {
    return {
    whiteImg,
    blackImg
    };
    },
    methods: {
    /**
    * 返回
    */
    back() {
    this.$router.go(-1);
    }
    }
    };
    </script>
    <style scoped>
    .top-header {

    }
    .right-opart,
    .left-img {
    25%;
    }
    .top-center {
    font-weight: 500;
    font-family: PingFangSC;
    }

    .clear-position,
    .top-nav {
    /* height: 0.8rem; */
    padding: 0 0.3rem;
    box-sizing: border-box;
    height: 1.12rem;
    /* background-color: #FFFFFF; */
    /* border-bottom: 1px solid #f2f4f7; */
    }
    .top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    /* padding-top: 0.32rem; */
    }
    .left-img img {
    0.24rem;
    height: 0.44rem;
    }
    .top-center h2 {
    font-size: 0.34rem;
    }
    .top-center h2.black {
    color: #333;
    }
    .top-center h2.white {
    color: #fff;
    }
    </style>

  • 相关阅读:
    CSS :hover伪类选择定义和用法
    php disk_free_space与disk_total_space实例介绍
    css required,focus,valid和invalid介绍
    E:in-range伪类选择器与E:out-of-range伪类选择器
    php不使用copy()函数复制文件的方法
    数组金额 转 大写
    PHP GD压缩图片
    php快递查询API类-支持各种快递
    share一段采集程序的代码
    全自动小说订阅微信推送
  • 原文地址:https://www.cnblogs.com/fanqiuzhuji/p/12610859.html
Copyright © 2011-2022 走看看