This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

增加卡片组件

old
yutent 2022-01-21 15:29:28 +08:00
parent b10bbeff9e
commit f247c2c0e2
3 changed files with 93 additions and 3 deletions

91
src/base/card.wc Normal file
View File

@ -0,0 +1,91 @@
<template>
<div class="card">
<header class="header"><slot name="header" /></header>
<main class="body"><slot /></main>
</div>
</template>
<style lang="scss">
:host {
display: flex;
width: 100%;
border-radius: 3px;
}
.header {
display: none;
padding: 8px 16px;
border-bottom: 1px solid var(--color-plain-2);
font-size: 16px;
&.show {
display: block;
}
}
.card {
display: flex;
flex-direction: column;
width: 100%;
border: 1px solid var(--color-plain-2);
border-radius: inherit;
font-size: 14px;
background: #fff;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out;
}
:host([shadow='hover']) {
.card {
box-shadow: none;
&:hover {
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}
}
}
:host([shadow='never']) {
.card {
box-shadow: none;
}
}
.body {
padding: 16px;
}
</style>
<script>
export default class Card {
props = {
shadow: 'always',
padding: 16
}
__init__() {
/* render */
var elem = this.root.children[1]
this.__HEADER__ = elem.children[0]
this.__BODY__ = elem.children[1]
}
mounted() {
var elems = this.__HEADER__.firstChild.assignedNodes()
if (elems.length) {
this.__HEADER__.classList.toggle('show', true)
}
}
watch() {
switch (name) {
case 'padding':
val = +val
this.props.padding = val > 0 ? val : 0
this.__BODY__.style.padding = `${this.props.padding}px`
break
}
}
}
</script>

View File

@ -23,8 +23,7 @@
export default class Col { export default class Col {
props = { props = {
span: 24, span: 24,
offset: 0, offset: 0
push: 0
} }
__init__() { __init__() {

View File

@ -1,7 +1,7 @@
import './avatar/index' import './avatar/index'
import './badge/index' import './badge/index'
import './base/row' import './base/row'
// import './badge/index' import './base/card'
import './code/index' import './code/index'
import './color/index' import './color/index'
import './drag/index' import './drag/index'