feat: widget
This commit is contained in:
@@ -1,10 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import nanoid from 'nanoid';
|
import { nanoid } from 'nanoid';
|
||||||
import JSWidget from '@/components/widget/JSwidget.vue';
|
import JSWidget from '@/components/widget/JSwidget.vue';
|
||||||
|
|
||||||
const widgetOptions = {
|
const widgetOptions = {
|
||||||
"locale": "vi",
|
"locale": "vi",
|
||||||
"width": "350px",
|
"width": "334px",
|
||||||
"height": "250px",
|
"height": "250px",
|
||||||
"price_line_color": "#71BDDF",
|
"price_line_color": "#71BDDF",
|
||||||
"grid_color": "#999999",
|
"grid_color": "#999999",
|
||||||
@@ -12,15 +12,14 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
|
||||||
<JSWidget
|
<JSWidget
|
||||||
:CONTAINER_ID="`default_widget_[${nanoid(10)}]`"
|
:CONTAINER_ID="nanoid(10)"
|
||||||
:SCRIPT_ID="nanoid(10)"
|
:SCRIPT_ID="nanoid(10)"
|
||||||
SCRIPT_SRC="https://www.fireant.vn/Scripts/web/widgets.js"
|
SCRIPT_SRC="https://www.fireant.vn/Scripts/web/widgets.js"
|
||||||
:options="widgetOptions"
|
:options="widgetOptions"
|
||||||
|
:inside="false"
|
||||||
widgetKey="FireAnt"
|
widgetKey="FireAnt"
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
div {
|
div {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import nanoid from 'nanoid';
|
import { nanoid } from 'nanoid';
|
||||||
import JSWidget from '@/components/widget/JSwidget.vue';
|
import JSWidget from '@/components/widget/JSwidget.vue';
|
||||||
|
|
||||||
const widgetOptions = {
|
const widgetOptions = {
|
||||||
@@ -25,9 +25,8 @@
|
|||||||
"title": "Ethereum"
|
"title": "Ethereum"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"showSymbolLogo": true,
|
|
||||||
"isTransparent": false,
|
"isTransparent": false,
|
||||||
"displayMode": "adaptive",
|
"showSymbolLogo": true,
|
||||||
"colorTheme": "dark",
|
"colorTheme": "dark",
|
||||||
"locale": "en"
|
"locale": "en"
|
||||||
}
|
}
|
||||||
@@ -36,10 +35,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<JSWidget
|
<JSWidget
|
||||||
:CONTAINER_ID="`default_widget_[${nanoid(10)}]`"
|
:CONTAINER_ID="nanoid(10)"
|
||||||
:SCRIPT_ID="nanoid(10)"
|
:SCRIPT_ID="nanoid(10)"
|
||||||
SCRIPT_SRC="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js"
|
SCRIPT_SRC="https://s3.tradingview.com/external-embedding/embed-widget-tickers.js"
|
||||||
:options="widgetOptions"
|
:options="widgetOptions"
|
||||||
|
:inside="true"
|
||||||
widgetKey="TradingView"
|
widgetKey="TradingView"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -53,3 +53,4 @@ div {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
SCRIPT_SRC?: any,
|
SCRIPT_SRC?: any,
|
||||||
CONTAINER_ID?: any,
|
CONTAINER_ID?: any,
|
||||||
options?: any,
|
options?: any,
|
||||||
|
inside?: boolean,
|
||||||
widgetKey?: any
|
widgetKey?: any
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
@@ -45,10 +45,13 @@
|
|||||||
const script = document.createElement('script');
|
const script = document.createElement('script');
|
||||||
script.id = props.SCRIPT_ID;
|
script.id = props.SCRIPT_ID;
|
||||||
script.type = 'text/javascript';
|
script.type = 'text/javascript';
|
||||||
// script.async = true;
|
script.async = true;
|
||||||
script.src = props.SCRIPT_SRC;
|
script.src = props.SCRIPT_SRC;
|
||||||
script.onload = onload;
|
script.onload = onload;
|
||||||
document.getElementsByTagName('head')[0].appendChild(script);
|
if (props.inside) document.getElementById(props.CONTAINER_ID) && document.getElementById(props.CONTAINER_ID).appendChild(script);
|
||||||
|
else {
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(script);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const initWidget = (key: any) => {
|
const initWidget = (key: any) => {
|
||||||
if (typeof widgets[key].key === 'undefined') {
|
if (typeof widgets[key].key === 'undefined') {
|
||||||
@@ -73,7 +76,5 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ClientOnly>
|
|
||||||
<div :key="props.CONTAINER_ID" :id="props.CONTAINER_ID"></div>
|
<div :key="props.CONTAINER_ID" :id="props.CONTAINER_ID"></div>
|
||||||
</ClientOnly>
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user