0.0.23 • Published 2 years ago

sightwise-card-plugin-dev

Licence

ISC

Version

0.0.23

Deps

Size

8.1 MB

Vulns

Weekly

Summary Dependency Versions

安装

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

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

Vue3使用示例

<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配置

Keywords

sightwise sightwise-card sightwise-card-plugin