element-plus/website/components/demo/border/shadow-box.vue

31 lines
639 B
Vue

<template>
<div>
<template v-for="(shadow, i) in shadowGroup" :key="i">
<div
class="demo-shadow"
:style="{ boxShadow: `var(--el-box-shadow-${shadow.type})` }"
></div>
<span class="demo-shadow-text">{{ shadow.name }} <code>box-shadow: {{ getValue(shadow.type) }}</code></span>
</template>
</div>
</template>
<script>
import { getCssVarValue } from '../../../util'
export default {
props: {
shadowGroup: {
type: Array,
default() {
return []
},
},
},
methods: {
getValue(type) {
return getCssVarValue('box-shadow', type)
},
},
}
</script>