安装

// with npm
npm install sightwise-card-plugin-vue

// with pnpm
pnpm add sightwise-card-plugin-vue

Vue2使用示例

<script>
import axios from 'axios'
import { SCard } from 'sightwise-card-plugin-vue'

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

export default {
  components: {
    SCard
  },
  data() {
    return {
      request: axios.create({
        baseURL: '/api/CardCenter',
        headers: {
          'User-Token': '123',
        },
      }),
      darkMode: false,
      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 | | prefixUrl | url前置地址，优先级大于原配置 | string | - |

Events

| 事件名 | 描述 | 参数 | | ----------------- | ---------------------------- | ------ | | after-get-card | 获取卡片数据成功后 | object | | after-get-dataset | 获取卡片关联数据集数据成功后 | object | | card-ready | 卡片所有接口请求完成后 | object |

注意

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