Vue 3 + TypeScript + Vite

马兰前端公共组件库使用说明

本文档介绍如何在项目中引入和使用马兰前端公共组件库。

安装

确保已在项目中安装了该组件库：

npm install malan-extend

全局引入

在项目的入口文件（如 main.ts 或 main.js）中引入并注册所有组件：

import { createApp } from 'vue';
import App from './App.vue';
import MalanExtend from 'malan-extend';
import 'malan-extend/dist/style.css'; // 引入样式文件

const app = createApp(App);

// 注册所有组件
app.use(MalanExtend);

app.mount('#app');

注册完成后，可以在任何组件中直接使用以下组件：

MalanH5CouponPopup - 优惠券选择弹窗

<template>
  <MalanH5CouponPopup v-model:show="showCouponPopup" />
</template>

<script setup>
import { ref } from 'vue';

const showCouponPopup = ref(false);
</script>

MalanH5Empty - 空状态组件

<template>
  <MalanH5Empty description="暂无数据" />
</template>

按需引入

如果只需要使用部分组件，可以按需引入：

引入组件

import { MalanH5CouponPopup, MalanH5Empty } from 'malan-extend';
import 'malan-extend/dist/style.css'; // 引入样式文件

在组件中使用

<template>
  <div>
    <MalanH5CouponPopup v-model:show="showCouponPopup" />
    <MalanH5Empty description="暂无数据" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { MalanH5CouponPopup, MalanH5Empty } from 'malan-extend';

const showCouponPopup = ref(false);
</script>

H5 Bridge (MalanApp)

MalanApp 是一个用于 H5 页面与原生 App 交互的桥接库，使用方式如下：

import { MalanApp } from 'malan-extend';

const app = new MalanApp();

// 监听事件
app.on('enterDeActivated', () => {
  console.log('App 进入非活跃状态');
});

// 调用原生方法
app.callHandler('getAppInfo', {}, (result) => {
  console.log('获取到的App信息:', result);
});

注意：MalanApp 不需要在 Vue 应用中注册，它是一个独立的 JavaScript 类。

组件列表

目前组件库包含以下组件：

1. MalanH5CouponPopup - H5 优惠券选择弹窗组件
2. MalanH5Empty - 空状态组件
3. MalanApp - H5 与原生 App 交互的桥接类

TypeScript 支持

本组件库使用 TypeScript 编写，提供完整的类型定义文件，在使用时可以享受完整的类型检查和自动补全功能。

样式说明

使用组件时需要手动引入样式文件：

import 'malan-extend/dist/style.css';

如果不引入样式文件，组件将不具有默认样式。

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.