mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
feat(vue-app): allow customizing loading indicator (#5844)
This commit is contained in:
parent
7b6b3917c1
commit
cb1b980d8a
@ -3,7 +3,11 @@ import env from 'std-env'
|
||||
export default () => ({
|
||||
quiet: Boolean(env.ci || env.test),
|
||||
analyze: false,
|
||||
indicator: true,
|
||||
indicator: {
|
||||
position: 'bottom-right',
|
||||
backgroundColor: '#2E495E',
|
||||
color: '#00C48D'
|
||||
},
|
||||
profile: process.argv.includes('--profile'),
|
||||
extractCSS: false,
|
||||
crossorigin: undefined,
|
||||
|
@ -55,7 +55,11 @@ Object {
|
||||
"useShortDoctype": true,
|
||||
},
|
||||
},
|
||||
"indicator": true,
|
||||
"indicator": Object {
|
||||
"backgroundColor": "#2E495E",
|
||||
"color": "#00C48D",
|
||||
"position": "bottom-right",
|
||||
},
|
||||
"loaders": Object {
|
||||
"css": Object {
|
||||
"sourceMap": false,
|
||||
|
@ -42,7 +42,11 @@ Object {
|
||||
"useShortDoctype": true,
|
||||
},
|
||||
},
|
||||
"indicator": true,
|
||||
"indicator": Object {
|
||||
"backgroundColor": "#2E495E",
|
||||
"color": "#00C48D",
|
||||
"position": "bottom-right",
|
||||
},
|
||||
"loaders": Object {
|
||||
"css": Object {},
|
||||
"cssModules": Object {
|
||||
@ -378,7 +382,11 @@ Object {
|
||||
"useShortDoctype": true,
|
||||
},
|
||||
},
|
||||
"indicator": true,
|
||||
"indicator": Object {
|
||||
"backgroundColor": "#2E495E",
|
||||
"color": "#00C48D",
|
||||
"position": "bottom-right",
|
||||
},
|
||||
"loaders": Object {
|
||||
"css": Object {},
|
||||
"cssModules": Object {
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<transition appear>
|
||||
<div class="nuxt__build_indicator" v-if="building">
|
||||
<div class="nuxt__build_indicator" :style="indicatorStyle" v-if="building">
|
||||
<svg viewBox="0 0 96 72" version="1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M6 66h23l1-3 21-37L40 6 6 66zM79 66h11L62 17l-5 9 22 37v3zM54 31L35 66h38z"/>
|
||||
@ -40,6 +40,16 @@ export default {
|
||||
const _path = '<%= router.base %>_loading/ws'
|
||||
const _protocol = location.protocol === 'https:' ? 'wss' : 'ws'
|
||||
return `${_protocol}://${location.hostname}:${location.port}${_path}`
|
||||
},
|
||||
options: () => (<%= JSON.stringify(buildIndicator) %>),
|
||||
indicatorStyle() {
|
||||
const [ d1, d2 ] = this.options.position.split('-')
|
||||
return {
|
||||
[d1]: '20px',
|
||||
[d2]: '20px',
|
||||
'background-color': this.options.backgroundColor,
|
||||
color: this.options.color,
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -128,13 +138,9 @@ export default {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
font-family: monospace;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background-color: #2E495E;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
|
||||
color: #00C48D;
|
||||
width: 84px;
|
||||
z-index: 2147483647;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user