add top offset
This commit is contained in:
parent
67142ca7db
commit
7046316d60
|
@ -13,10 +13,10 @@
|
|||
<div class="bd-title">
|
||||
<h3 v-if="setting.text">{{setting.text}}</h3>
|
||||
<div class="bd-colourpicker-wrapper">
|
||||
<button class="bd-colourpicker-swatch" :style="{backgroundColor: rgbaString}" @click="open = !open"/>
|
||||
<button class="bd-colourpicker-swatch" :style="{backgroundColor: rgbaString}" @click="show"/>
|
||||
</div>
|
||||
</div>
|
||||
<Picker ref="picker" v-model="colors" @input="pick" :class="{'bd-hidden': !open}"/>
|
||||
<Picker ref="picker" v-model="colors" @input="pick" :class="{'bd-hidden': !open}" :style="{top: topOffset}"/>
|
||||
<div class="bd-hint">{{setting.hint}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -26,7 +26,8 @@
|
|||
data() {
|
||||
return {
|
||||
open: false,
|
||||
colors: '#FFF'
|
||||
colors: '#FFF',
|
||||
topOffset: '35px'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
@ -57,6 +58,15 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
const offset = window.innerHeight - this.$refs.root.getBoundingClientRect().top - 340;
|
||||
if (offset >= 0) {
|
||||
this.topOffset = '35px';
|
||||
} else {
|
||||
this.topOffset = 35 + offset > 35 ? '35px' : `${35 + offset}px`;
|
||||
}
|
||||
this.open = true;
|
||||
},
|
||||
pick(c) {
|
||||
this.change(this.rgbaString);
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue