chore: add alert plugin for docs; 🌟

This commit is contained in:
chenghongxing
2020-07-22 15:59:45 +08:00
parent ad5727eaf5
commit 107d64fb06
9 changed files with 203 additions and 1 deletions

View File

@@ -0,0 +1,42 @@
<template>
<div class="alert" :style="`top: ${top}px`">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'Alert',
props: ['show'],
data() {
return {
top: 100
}
},
mounted() {
console.log(this)
// this.$page.alert = this.$page.alert ? this.$page.alert : {top: 100}
// this.$page.alert.top += 20
// this.top = this.$page.alert.top
setTimeout(() => {
this.$el.remove()
}, 1000)
}
}
</script>
<style scoped>
.alert{
position: absolute;
padding: 6px 8px;
background-color: #f0f2f5;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
border-radius: 4px;
margin: 0 auto;
z-index: 999;
top: 100px;
width: fit-content;
left: 0;
right: 0;
}
</style>

View File

@@ -0,0 +1,35 @@
<template>
<div :data-clipboard-text="color" class="color" @click="onClick" :style="`background-color:${color}`" />
</template>
<script>
import Clipboard from 'clipboard'
export default {
name: 'Color',
props: ['color'],
data() {
return {
alert: false
}
},
methods: {
onClick() {
let clipboard = new Clipboard('.color')
clipboard.on('success', () => {
this.$alert(`颜色代码已复制:${this.color}`)
clipboard.destroy()
})
}
}
}
</script>
<style scoped>
.color{
border: 1px dashed #a0d911;
display: inline-block;
width: 20px;
height: 20px;
cursor: pointer;
}
</style>

View File

@@ -0,0 +1,18 @@
<template>
<div>
<color class="color" :key="index" v-for="(color, index) in colors" :color="color" ></color>
</div>
</template>
<script>
export default {
name: 'ColorList',
props: ['colors']
}
</script>
<style scoped>
.color{
margin: 0 2px;
}
</style>