Comments (5)
The issue is the footer Unity.vue component doesn't match the index.html and static/TemplateData/style.css
file that unity gives you. So if you include it the different footers will "clash". A kind of hacky solution for this is to select the element with the fullscreen class in the mounted lifecycle hook and set its text content to an empty string, Unfortunately, the label will still appear for a brief moment before being removed.
Alternatively you could opt to not include the static/TemplateData/style.css
. Then nothing will clash but the fullscreen text will still be there and can be hidden using :hide-footer="true"
attribute. this also allows you to remove a few files from your templateData folder like the webgl-logo.png
, fullscreen.png
and style.css
for starters. I kind of like not having all that stuff in the footer personally.
On a side note, I tried to just edit the source template but it didn't seem to change anything for some reason. I tried rerunning the dev script and also deleting any service workers so I'm kind of confused there... I assume it has something to do with the JavaScript file that comes with the package.
<!-- the components footer html as is-->
<div class="footer" v-if="hideFooter !== true">
<a class="fullscreen" @click.prevent="fullscreen">Fullscreen</a>
</div>
mounted() {
document.querySelector('.fullscreen').textContent = ''
},
from vue-unity-webgl.
Hi, have you tried using the attribute hideFooter
?
Example:
<template>
<unity hideFooter=true src="static/Build/game.json" width="1000" height="600" unityLoader="static/Build/UnityLoader.js" ></unity>
</template>
from vue-unity-webgl.
The above does not work for me... I'm still seeing the footer after adding hideFooter=true
from vue-unity-webgl.
Hello, it works now.
It sounds like you can pass some other parameters this way.
<template>
<unity v-bind="{hideFooter: true}" src="static/Build/game.json" unityLoader="static/Build/UnityLoader.js" ></unity>
</template>
from vue-unity-webgl.
Just in mounted function , use this code, set it to be hidden:
mounted() {
// hide fullScreen
const fullScreenEl = document.querySelector('.fullscreen');
fullScreenEl.style.display = 'none';
}
from vue-unity-webgl.
Related Issues (20)
- stale vue-unity-webgl.js HOT 1
- Error Security Policy
- Unable to use with Nuxt HOT 1
- Example Repo HOT 1
- Textinputs not working when I implemented Unity HOT 1
- How to hide footer HOT 1
- how can component support canvas.toDataUrl()
- what does 'Module' mean?
- Cannot use scss to select #unity-container HOT 1
- multiple unity instances can not be loaded successfully in SPA
- Is Vue 3 support planned? HOT 9
- Fullscreen button bug HOT 1
- unitywegl logo HOT 1
- how can i use externalProgress property HOT 1
- calling vue js function from unity HOT 3
- Is there any plan for Unity 2020 support? HOT 10
- Messages from unity to js HOT 7
- Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c') HOT 5
- Could I use the absolute path? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-unity-webgl.