用 uniapp 打造自用组件库 (二) 详情页

2024-01-03 11:36:41

前言

在本系列文章的第一部分中，我们介绍了如何使用 uniapp 封装一个简单的按钮组件。在这一部分中，我们将继续介绍如何封装一个详情页组件。详情页组件可用于展示商品或服务的详细信息，是一种非常常用的组件。

创建详情页组件

首先，我们创建一个新的 uniapp 项目，并安装必要的依赖项。

mkdir my-uniapp-component-library
cd my-uniapp-component-library
npm init -y
npm install uniapp

接下来，在项目中创建一个新的组件文件夹。

mkdir src/components

然后，在组件文件夹中创建一个新的详情页组件文件。

touch src/components/detail-page.vue

在详情页组件文件中，我们可以使用以下代码来定义组件：

<template>
  <view class="detail-page">
    <view class="detail-page__header">
      <view class="detail-page__title">{{ title }}</view>
      <view class="detail-page__subtitle">{{ subtitle }}</view>
    </view>
    <view class="detail-page__content">
      <slot name="content" />
    </view>
  </view>
</template>

<script>
export default {
  name: 'DetailPage',
  props: {
    title: {
      type: String,
      required: true
    },
    subtitle: {
      type: String,
      required: false
    }
  }
}
</script>

<style scoped>
.detail-page {
  padding: 16px;
}

.detail-page__header {
  margin-bottom: 16px;
}

.detail-page__title {
  font-size: 24px;
  font-weight: bold;
}

.detail-page__subtitle {
  font-size: 16px;
  color: #999;
}

.detail-page__content {
  font-size: 14px;
  line-height: 1.5;
}
</style>

使用详情页组件

现在，我们已经创建了详情页组件，就可以在我们的项目中使用它了。在需要使用详情页组件的地方，我们可以使用以下代码来引用它：

<template>
  <detail-page title="商品详情">
    <view slot="content">
      <view>商品名称：{{ productName }}</view>
      <view>商品价格：{{ productPrice }}</view>
      <view>商品{{ productDescription }}</view>
    </view>
  </detail-page>
</template>

<script>
export default {
  data() {
    return {
      productName: '商品名称',
      productPrice: '商品价格',
      productDescription: '商品'
    }
  }
}
</script>