Taro + vue3 小程序封装标题组件

一只小阿乐2024-04-03 10:17

分为没有跳转页面的title组件和有跳转页面的title组件

我们可以把这个封装成一个组件

直接上代码

<template>
  <div class="fixed-title-container">
    <div class="box">
      <div class="icon" v-if="isShow" @click="handleBack">
        <IconFont name="rect-left" size="12"></IconFont>
      </div>
      <div class="text" :style="{ marginLeft: isShow ? '15px' : '0' }">{{ Title }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, toRefs } from "vue";
import { IconFont } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";
const props = defineProps({
  Title: String,
  isShow: {
    required: false,
    default: false,
  },
});
const { Title, isShow } = toRefs(props);
const handleBack=()=>{
  Taro.navigateBack({
    delta: 1,
  })
}
</script>

<style lang="scss">
.fixed-title-container {
  height: 120px;
  padding: 0 30px;
  line-height: 120px;
  background: linear-gradient(
    to right,
    #d8ecfe,
    #d2e8fe,
    #cce5fe,
    #cde5ff,
    #c6e2ff,
    #c2dfff,
    #c1dffe
  );
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
  position: fixed;

  .box {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    .icon {
     height: 50px;
     line-height: 50px;
     text-align: center;
      width: 50px;
      border-radius: 50%;
      background-color:d8ecfe;
      border: 1px solid #ccc;
    }
    .text {
      font-size: 30px;
      color: #15181d;
      font-weight: 700;
    }
  }
}
</style>

 <FixedTitle Title="功夫熊猫4" :isShow="true"></FixedTitle> //组件使用

当然我这个是比较简单的一个组件

这个组件的目的除了title标题其实还有一个就是返回上一页类似我们小程序自己路由上的返回

逻辑很简单的大家可以在我这个基础上继续修改更加适合自己逻辑和样式的组件