114 lines
2.4 KiB
Vue
114 lines
2.4 KiB
Vue
<!-- payPage.vue -->
|
|
|
|
<template>
|
|
<view>
|
|
<view class="player-container">
|
|
<div id="player-container"></div>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
props:{
|
|
skelUrl:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
atlasUrl:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
width:{
|
|
type:String,
|
|
default:'100px'
|
|
},
|
|
height:{
|
|
type:String,
|
|
default:'100px'
|
|
},
|
|
zIndex:{
|
|
type:String,
|
|
default:'100'
|
|
},
|
|
},
|
|
mounted() {
|
|
this.loadSpinePlayer();
|
|
},
|
|
methods: {
|
|
loadSpinePlayer() {
|
|
// 动态加载 CSS
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = '/static/spine-player.min.css';
|
|
document.head.appendChild(link);
|
|
//
|
|
// 动态加载 JS
|
|
const script = document.createElement('script');
|
|
script.src = '/static/spine-player.js';
|
|
script.onload = this.initializeSpinePlayer.bind(this);
|
|
document.body.appendChild(script);
|
|
},
|
|
initializeSpinePlayer() {
|
|
let spine1 = new spine.SpinePlayer("player-container", {
|
|
skelUrl: this.skelUrl,
|
|
atlasUrl: this.atlasUrl,
|
|
// skelUrl: "/static/spine/guan_yu/guan_yu.skel",
|
|
// atlasUrl: "/static/spine/guan_yu/guan_yu.atlas",
|
|
animation: 'stand',
|
|
premultipliedAlpha: false,
|
|
backgroundColor: "#00000000",
|
|
// viewport: {
|
|
// debugRender: true,
|
|
// },
|
|
// showControls: true,
|
|
alpha: true, // 可选：是否透明
|
|
});
|
|
spine1.canvas.style.width = this.width
|
|
spine1.canvas.style.height = this.height
|
|
spine1.canvas.style.zIndex = this.zIndex
|
|
// spine1.canvas.style.transform = 'scale(0.8)';
|
|
spine1.playerControls.style.display = 'none'
|
|
// $0.removeEventListener('mousedown',getEventListeners($0).mousedown[0].listener,true)
|
|
console.log("spine:",spine1)
|
|
},
|
|
|
|
|
|
|
|
},
|
|
onHide() {
|
|
this.logOutvisible = true
|
|
},
|
|
onUnload() {
|
|
// 在页面离开时清除定时器
|
|
clearInterval(this.timer);
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.player-container {
|
|
// width: 100rpx;
|
|
// height: 100rpx;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// align-items: center;
|
|
// background-image: url('@/static/new/bg.png');
|
|
// background-size: 100%;
|
|
// background-repeat: no-repeat;
|
|
// border: 1px solid palegoldenrod;
|
|
// display: inline-block;
|
|
}
|
|
|
|
#player-container {
|
|
// width: 100rpx;height: 100rpx;
|
|
}
|
|
|
|
</style>
|
|
<style>
|
|
|
|
</style> |