0.0.21 • Published 2 months ago
sightwise-card-plugin-dev v0.0.21
安装
// 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配置
0.0.21
2 months ago
0.0.20
5 months ago
0.0.19
5 months ago
0.0.18
5 months ago
0.0.10
7 months ago
0.0.11
7 months ago
0.0.12
6 months ago
0.0.13
6 months ago
0.0.14
6 months ago
0.0.15
6 months ago
0.0.9
7 months ago
0.0.16
5 months ago
0.0.8
7 months ago
0.0.17
5 months ago
0.0.7
8 months ago
0.0.6
8 months ago
0.0.5
8 months ago
0.0.4
8 months ago
0.0.3
8 months ago
0.0.2
8 months ago
0.0.1
8 months ago