# sightwise-card-plugin-dev

> ``` // with npm npm install sightwise-card-plugin-dev

Latest version **0.0.23** (published 2024-06-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install sightwise-card-plugin-dev
pnpm add sightwise-card-plugin-dev
yarn add sightwise-card-plugin-dev
bun add sightwise-card-plugin-dev
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.23 |
| Published | 2024-06-28 |
| First published | 2023-09-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Keywords | sightwise, sightwise-card, sightwise-card-plugin |

## Links

- npm: https://www.npmjs.com/package/sightwise-card-plugin-dev
- npm.io page: https://npm.io/package/sightwise-card-plugin-dev

## Recent versions

- 0.0.23 (latest) — 2024-06-28
- 0.0.22 — 2024-05-13
- 0.0.21 — 2024-03-25
- 0.0.20 — 2023-12-20
- 0.0.19 — 2023-12-11
- 0.0.18 — 2023-12-07
- 0.0.17 — 2023-12-05
- 0.0.16 — 2023-12-04
- 0.0.15 — 2023-11-28
- 0.0.14 — 2023-11-24
- 0.0.13 — 2023-11-22
- 0.0.12 — 2023-11-02
- 0.0.11 — 2023-10-30
- 0.0.10 — 2023-10-18
- 0.0.9 — 2023-10-18
- … 8 more at https://npm.io/package/sightwise-card-plugin-dev/versions

## README

## 安装

```
// with npm
npm install sightwise-card-plugin-dev

// with pnpm
pnpm add sightwise-card-plugin-dev
```



## Vue3使用示例

```vue
<script lang="ts" setup>
import axios from 'axios'
import { SCard } from 'sightwise-card-plugin-dev'

import 'sightwise-card-plugin-dev/style.css' // 引入组件样式

const baseURL = import.meta.env.VITE_API_URL_PREFIX

// 卡片Id，必须的
const cardId = '1693595017039855618'

// axios实例，必须的
const request = axios.create({
  baseURL,
  headers: {
    'User-Token': '123',
  },
})

// 是否为暗黑模式，可选的
const darkMode = false

// 查询变量，可选的
const query = { delta: -1000 }
</script>

<template>
  <div class="card-preview-container">
    <SCard
      card-id="1726503566417334274"
      :request="request"
      :dark-mode="darkMode"
      :query="query"
    />
  </div>
</template>

<style lang="less">
  .card-preview-container {
    background-color: #E4E5EB;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    gap: 16px;
  }
</style>
```



## API

### Props

| 参数名    | 描述                         | 类型                 | 默认值   |
| --------- | ---------------------------- | -------------------- | -------- |
| cardId    | 渲染卡片的ID                 | string               | -        |
| request   | Axios实例                    | AxiosInstance        | -        |
| query     | 查询变量                     | object               | -        |
| showMode  | 显示模式                     | 'normal' \| 'static' | 'normal' |
| darkMode  | 暗黑模式                     | boolean              | false    |
| hideTitle | 隐藏标题                     | boolean              | false    |
| lazyLoad  | 懒加载，出现在可视区发起请求 | boolean              | false    |
| dataView  | 查看数据模式                 | boolean              | false    |

### Events

| 事件名            | 描述                         | 参数   |
| ----------------- | ---------------------------- | ------ |
| after-get-card    | 获取卡片数据成功后           | object |
| after-get-dataset | 获取卡片关联数据集数据成功后 | object |



## 注意

不要用在外层使用display: none去隐藏卡片，显隐时会导致卡片多次渲染
例如，在ant-desgin-vue@3.2.11中，默认会使用display: none隐藏tab-pane，此时需要开启animated配置

---
_Source: https://npm.io/package/sightwise-card-plugin-dev · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._