我的vue应用程序在触摸设备上的网页和电子应用程序之间共享。在这款触控设备上,我希望包含额外的风格。所以在我的App.vue中有:
<script>
var is_electron = process.hasOwnProperty("versions") && process.versions.hasOwnProperty("electron")
var is_embedded = is_electron && require("electron").remote.process.argv.includes("-e")
</script>
<style>
* {
transition-property: none !important;
transform: none !important;
animation: none !important;
cursor: none !important;
}
</style>
我怎样才能有条件地包含这种*风格?
如果特定于平台的样式很小,我建议使用一些辅助类。您甚至可以通过在其中一个选择器中对css进行范围设置来设置子组件的样式。
<template>
<main :class="classes">
<!-- Hello world -->
</main>
</template>
<script>
var isElectron = process.hasOwnProperty("versions") && process.versions.hasOwnProperty("electron")
var isEmbedded = isElectron && require("electron").remote.process.argv.includes("-e")
export defualt {
name: 'App',
computed: {
classes () {
return {
electron: isElectron,
embedded: isEmbedded
}
}
}
}
</script>
<style>
.electron:not(.embedded) * {
border: 1px solid blue;
}
.embedded:not(.electron) * {
/* What kind of sorcery is this? */
}
.electron.embedded * {
border: 1px dotted red;
}
main:not(.electron):not(.embedded) * {
border: 1px dashed green;
}
</style>