<!doctype html>
<meta charset="utf-8">
<meta name="keywords" content="VSlide,微思文稿,数据可视化,图表制作">
<meta name="description" content="VSlide,微思文稿,零代码快速制作交互式数据可视化图表">
<title>VSlide微思文稿</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-stat@1.2.0/dist/ecStat.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.2.3"></script>
<script src="https://cdn.jsdelivr.net/npm/naive-ui@2.32.1/dist/index.prod.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
<script src="./lib/v-slide-vue.umd.min.js"></script>
<script src="./vslides.json?callback=getFile"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/v-slide-vue@0.3.1/lib/v-slide-vue.umd.min.js"></script> -->
<!-- <script
src="https://636c-cloud1-6gje6dbjbdbca85f-1312763637.tcb.qcloud.la/vslide-file/<%=fileId%>.json?callback=getFile"></script> -->
<script src="https://cdn.jsdelivr.net/npm/screenfull@5.2.0/dist/screenfull.min.js"></script>
<style>
body {
user-select: none;
}
.app {
text-align: center;
}
.doc {
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow: hidden;
}
.slide {
padding-top: 20px;
box-sizing: border-box;
box-shadow: -2px -2px 5px rgba(243, 245, 247, 0.863);
box-shadow: 2px 2px 5px rgba(112, 128, 144, 0.493);
position: relative;
text-align: center;
}
.footer {
position: absolute;
bottom: 5px;
color: silver;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background-color: rgb(219, 219, 219);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background-color: white;
border-radius: 4px;
border: solid 1px rgb(219, 219, 219);
}
::-webkit-scrollbar-thumb:hover {
border: solid 1px rgb(171, 171, 171);
}
</style>
<body>
<div id="app">
<template v-if="mode==='play'">
<v-slides-play :slides="slides" :height="height" :background="getBackground" :show-page="true"
@contextmenu="handleContextMenu" />
</template>
<template v-if="mode==='view'">
<div :style="{background:getBackground, height:height + 'px'}" @contextmenu="handleContextMenu">
<v-slides-view :slides="slides" :height="height" :show-page="true" />
</div>
</template>
<template v-if="mode==='doc'">
<div class="doc" :style="{background:getBackground}" @contextmenu="handleContextMenu">
<div class="slide" v-for="(slide, i) in slides" :key="i" :style="{width: '100%',height:height/1+ 'px'}">
<v-slide :slide-content="slide.slideContent" :height="height/1">
</v-slide>
<span v-if="showPage" class="footer">{{i+1}}/{{this.slides.length}}</span>
</div>
</div>
</template>
<n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="options" :show="showDropdown"
@select="handleSelect" :on-clickoutside="onClickoutside" />
</div>
<script>
const mode = 'play';
const showPage = false;
const options = [
{ label: '放映模式', key: 'play' },
{ label: '浏览模式', key: 'view' },
{ label: '文稿模式', key: 'doc' },
{ label: '全屏显示', key: 'fullscreen' },
{ label: '官方网站', key: 'home' }
];
const ref = Vue.ref;
const app = Vue.createApp({
setup() {
const modeRef = ref(mode)
const showPageRef = ref(showPage)
const showDropdownRef = ref(false)
const xRef = ref(0)
const yRef = ref(0)
return {
options,
showDropdown: showDropdownRef,
x: xRef,
y: yRef,
mode: modeRef,
showPage: showPageRef,
handleSelect(key) {
switch (key) {
case 'fullscreen':
showDropdownRef.value = false
if (screenfull.isEnabled) {
screenfull.request();
}
break;
case 'home':
window.location.href = "https://www.baidu.com"
break;
default:
showDropdownRef.value = false
modeRef.value = key
break;
}
},
handleContextMenu(e) {
e.preventDefault()
showDropdownRef.value = false
Vue.nextTick().then(() => {
showDropdownRef.value = true
xRef.value = e.clientX
yRef.value = e.clientY
})
},
onClickoutside() {
showDropdownRef.value = false;
}
}
},
data() {
return {
slides: vslideFile.slides,
getBackground: vslideFile.getBackground,
height: window.innerHeight
}
},
created() {
window.addEventListener("resize", this.getHeight);
},
destroyed() {
window.removeEventListener("resize", this.getHeight);
},
methods: {
getHeight() { this.height = window.innerHeight },
}
})
app
.use(naive)
.use(VSlideVue)
.component('v-chart', VueECharts)
.mount('#app')
</script>
</body>