Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

km-preview-component

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Package was removed

Sorry, it seems this package was removed from the registry

km-preview-component

KooMessage 模板预览组件

0.0.7
unpublished
latest
npm

Version published: last year

Weekly downloads: 0

Maintainers: 1

Weekly downloads

Created: last year

Source

KmPreivewComponent

基于 angular 和 WebComponent 实现的全平台全框架通用的智能信息模板预览组件

安装/Install

$ npm i km-preview-component

使用/Usage

For Vue

1.引入核心文件

main.ts 中引入 js 和 css 文件

import '../node_modules/km-preview-component/km-preview-component-wc.js';
import '../node_modules/km-preview-component/km-preview-component-styles.css'

2.引入图片资源

$ npm i copy-webpack-plugin

vue.config.js 中利用插件 CopyWebpackPlugin 配置 configureWebpack

const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: "node_modules/km-preview-component/km-preview-img",
            to: "km-preview-img",
            globOptions: {
              ignore: [".*"],
            },
          },
        ],
      }),
    ],
  },
});

3.在 vue 项目中注册预览组件的自定义标签

vue.config.js 中配置 chainWebpack 的 isCustomElement 以在 vue 项目中注册自定义元素，如下 switch 中的条件可按需引入

module.exports = defineConfig({
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        options.compilerOptions = {
          ...options.compilerOptions,
          isCustomElement: (tag) => {
            switch (tag) {
              case "km-preview-wc":
                return true;
              case "vms-preview-wc":
                return true;
              case "mobile-preview-wc":
                return true;
              case "vms-mini-preview-wc":
                return true;
              case "mini-preview-wc":
                return true;
              default:
                return false;
            }
          },
        };
        return options;
      });
  },
});

4.vue 项目中使用预览组件

<temlpate>
    <km-preview-wc
        :frameworkData="actualTemplateData"
        :factory="actualFactory"
        :xxx="xxx"
    ></km-preview-wc>
</template>

For Angular

1.引入核心文件

angular.json 文件中 projects -> yourProjects -> architect -> build-> options 的 assets、style、script 配置

{
  "assets": [
    {
      "glob": "**/*",
      "input": "node_modules/km-preview-component/km-preview-img",
      "output": "km-preview-img"
    }
  ],
  "style": [
    "node_modules/km-preview-component/km-preview-component-styles.css"
  ],
  "script": ["node_modules/km-preview-component/km-preview-component-wc.js"]
}

2.angular 项目中使用预览组件

<temlpate>
    <km-preview-wc
        [frameworkData]="actualTemplateData"
        [factory]="actualFactory"
        [xxx]="xxx"
    ></km-preview-wc>
</template>

引用组件的 module.ts 中添加如下配置以注册自定义元素：
@NgModule({
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ],
}

API

当前支持以下组件

km-preview-wc

参数名	描述	类型	默认值	必传项
frameworkData	模板数据，用于渲染	TemplateFramework	-	是
factory	选择使用何种供应商样式预览	'HUAWEI' \| 'XIAOMI' \|'OPPO' \|'MEIZU' \|'VIVO'	''	否
lang	语言	'zh-cn' \| 'en-us	'zh-cn'	否

// 此处引入的内容为 frameworkData 的类型注释
import TemplateFramework from "node_modules/km-preview-component/interface/templateFrameworkInterface.ts";

let actualTemplateData: TemplateFramework;

效果预览：

mini-preview-wc

参数名	描述	类型	默认值	必传项
frameworkData	模板数据，用于渲染	TemplateFramework	-	是
factory	选择使用何种供应商样式预览	'HUAWEI' \| 'XIAOMI' \|'OPPO' \|'MEIZU' \|'VIVO'	''	否
lang	语言	'zh-cn' \| 'en-us	'zh-cn'	否
outerWidth	缩放比例调整	number	400	否

效果预览：此组件为 km-preview-wc 的可配置缩放比例版本，通过 outerWidth 属性来控制

mobile-preview-wc

参数名	描述	类型	默认值	必传项
frameworkData	模板数据，用于渲染	TemplateFramework	-	是
selectedVendor	默认活跃的供应商	'HUAWEI' \| 'XIAOMI' \|'OPPO' \|'MEIZU' \|'VIVO'	''	是
isVendorButtonsActive	是否显示厂商选择按钮	boolean	false	否
isQrCodeActive	是否显示二维码开关	boolean	false	否
lang	语言	'zh-cn' \| 'en-us	'zh-cn'	否
emitAction	是否启用模板内点击事件回调	boolean	false	否

事件名	描述	参数	必传项
emittedActionData	模板内点击事件回调	event: ActionEmitModel	否

import ActionEmitModel from "node_modules/km-preview-component/interface/actionEmitModel.ts";

let actionData: ActionEmitModel;

效果预览：

vms-preview-wc

参数名	描述	类型	默认值	必传项
frameworkData	基础版模板数据，用于渲染	obj	-	是
selectedVendor	模板在传入供应商样式下渲染	'HUAWEI' \| 'XIAOMI' \|'OPPO' \|'MEIZU' \|'VIVO'	''	是

效果预览：

vms-mini-preview-wc

参数名	描述	类型	默认值	必传项
frameworkData	基础版模板数据，用于渲染	obj	-	是

效果预览：

Mock Data

import TemplateFramework from "node_modules/km-preview-component/interface/templateFrameworkInterface.ts";

// 真实应用的模板数据接口的响应数据
let actualTemplateData: TemplateFramework = {
  id: "5d8857a6-ef8d-4cbd-ab24-539c11f67bd0",
  tpl_id: "700006021",
  card_id: "RedPacket",
  tpl_name: "测试oppo自定义背景图",
  domain_id: "231724915a62455ca356e10a085c9a23",
  scene: "智能信息模版",
  use_id: 2,
  sub_type: 1,
  sms_example: "你有一条新消息请查收",
  sms_template: "0",
  match_type: null,
  prereview_remark: "自动驳回",
  internal_status: 3,
  final_review_remark: null,
  sms_signs: [],
  created_at: "2023-07-07",
  auto_save: "no",
  pages: [
    {
      page_order: 1,
      contents: [
        {
          page_content_id: "eb63d566-2917-42ad-a864-67d61bae54d1",
          content_id: "eb63d566-2917-42ad-a864-67d61bae54d1",
          type: "image",
          content: null,
          content_child: null,
          src_type: 1,
          src: "HWR100004708",
          cover: null,
          is_text_title: null,
          action_type: "OPEN_URL",
          position_number: 1,
          visible: 1,
          currency_display: 1,
          oppo_background: "HWR100004709",
          vivo_background: null,
          voucher_type: null,
          validity_type: null,
          obs_file_url:
            "https://cn-north-5-km-template-public-security.obs.cn-north-5.myhuaweicloud.com:443/mfbcrlhpzr-17594951415287751.png",
          obs_cover_url: null,
          obs_oppo_url:
            "https://cn-north-5-km-template-public-security.obs.cn-north-5.myhuaweicloud.com:443/nflpiwwrpf-17598695691973370.jpg",
          obs_vivo_url: null,
          ratio: null,
          button_type: null,
          action: {
            target: "https://www.baidu.com",
            content: null,
            package_name: null,
            floor_url: null,
            floor_type: null,
            body: null,
            subject: null,
            description: null,
            begin_time: null,
            end_time: null,
            address: null,
            longitude: null,
            latitude: null,
            text_button: null,
            mode: null,
          },
          material_infos: [
            {
              material_url:
                "https://cn-north-5-km-template-public-security.obs.cn-north-5.myhuaweicloud.com:443/mfbcrlhpzr-17594951415287751.png",
              material_type: "normal",
            },
            {
              material_url:
                "https://cn-north-5-km-template-public-security.obs.cn-north-5.myhuaweicloud.com:443/nflpiwwrpf-17598695691973370.jpg",
              material_type: "oppo_background",
            },
          ],
        },
        {
          page_content_id: "f1ee81a9-14a7-449d-a767-21bec2613b12",
          content_id: "f1ee81a9-14a7-449d-a767-21bec2613b12",
          type: "text",
          content: "测试",
          content_child: null,
          src_type: null,
          src: null,
          cover: null,
          is_text_title: "false",
          action_type: null,
          position_number: 2,
          visible: 1,
          currency_display: 1,
          oppo_background: null,
          vivo_background: null,
          voucher_type: null,
          validity_type: null,
          obs_file_url: null,
          obs_cover_url: null,
          obs_oppo_url: null,
          obs_vivo_url: null,
          ratio: null,
          button_type: null,
          action: null,
          material_infos: null,
        },
        {
          page_content_id: "bbcc9c3b-1ea2-4ea9-a1b1-3297618dc136",
          content_id: "bbcc9c3b-1ea2-4ea9-a1b1-3297618dc136",
          type: "text",
          content: "测试",
          content_child: null,
          src_type: null,
          src: null,
          cover: null,
          is_text_title: "true",
          action_type: null,
          position_number: 3,
          visible: 1,
          currency_display: 1,
          oppo_background: null,
          vivo_background: null,
          voucher_type: null,
          validity_type: null,
          obs_file_url: null,
          obs_cover_url: null,
          obs_oppo_url: null,
          obs_vivo_url: null,
          ratio: null,
          button_type: null,
          action: null,
          material_infos: null,
        },
        {
          page_content_id: "121c812c-d5e5-467f-bd2b-1af0e7395a67",
          content_id: "121c812c-d5e5-467f-bd2b-1af0e7395a67",
          type: "text",
          content: "测试",
          content_child: null,
          src_type: null,
          src: null,
          cover: null,
          is_text_title: "false",
          action_type: null,
          position_number: 4,
          visible: 1,
          currency_display: 1,
          oppo_background: null,
          vivo_background: null,
          voucher_type: null,
          validity_type: null,
          obs_file_url: null,
          obs_cover_url: null,
          obs_oppo_url: null,
          obs_vivo_url: null,
          ratio: null,
          button_type: null,
          action: null,
          material_infos: null,
        },
        {
          page_content_id: "94e98f89-1442-4325-b41c-b633bf9f1241",
          content_id: "94e98f89-1442-4325-b41c-b633bf9f1241",
          type: "button",
          content: "按钮1",
          content_child: null,
          src_type: null,
          src: null,
          cover: null,
          is_text_title: null,
          action_type: "OPEN_URL",
          position_number: 5,
          visible: 1,
          currency_display: 1,
          oppo_background: null,
          vivo_background: null,
          voucher_type: null,
          validity_type: null,
          obs_file_url: null,
          obs_cover_url: null,
          obs_oppo_url: null,
          obs_vivo_url: null,
          ratio: null,
          button_type: null,
          action: {
            target: "https://www.baidu.com",
            content: null,
            package_name: null,
            floor_url: null,
            floor_type: null,
            body: null,
            subject: null,
            description: null,
            begin_time: null,
            end_time: null,
            address: null,
            longitude: null,
            latitude: null,
            text_button: null,
            mode: null,
          },
          material_infos: null,
        },
      ],
    },
  ],
  params: [],
  factorys: [
    {
      factory_type: "HUAWEI",
      state: 0,
    },
    {
      factory_type: "XIAOMI",
      state: 0,
    },
    {
      factory_type: "OPPO",
      state: 1,
    },
    {
      factory_type: "VIVO",
      state: 0,
    },
  ],
  old_pages: null,
};

Keywords

FAQs

What is km-preview-component?

Is km-preview-component popular?

Is km-preview-component well maintained?

Package last updated on 08 Aug 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

km-preview-component

KmPreivewComponent

安装/Install

使用/Usage

For Vue

1.引入核心文件

2.引入图片资源

3.在 vue 项目中注册预览组件的自定义标签

4.vue 项目中使用预览组件

For Angular

1.引入核心文件

2.angular 项目中使用预览组件

API

当前支持以下组件

Mock Data

Keywords

Related posts

Socket Now Supports uv.lock Files

Gmail For Exfiltration: Malicious npm Packages Target Solana Private Keys and Drain Victims' Wallets