cus-corner-card

圆角卡片CusCornerCard

安装

npm install cus-corner-card -S

使用

<script setup lang="ts">
import CusCornerCard from 'cus-corner-card'
</script>

<template>
  <CusCornerCard>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
  </CusCornerCard>
</template>

属性

| key | desc | value | | --------------- | --------------------------------------------------------- | -------------------- | | borderWidth | 卡片边框宽度（默认：1px） | px像素 | | borderColor | 卡片边框颜色（默认：#333b53） | 颜色值 | | borderStyle | 卡片边框样式（默认：solid） | solid/dash等边框样式 | | border | css一次性设置border上面三项样式，此项配置上面三项将不生效 | 1px solid #333b53 | | radius | 卡片圆角弧度（默认：5px） | px | | cornorWidth | 圆角宽度（默认：2px） | px | | cornorColor | 圆角颜色（默认：#00bb91） | 颜色值 | | cornorStyle | 圆角样式（默认：solid） | solid/dash等边框样式 | | cornorXLen | 圆角x方向长度（默认：5px） | px | | cornorYLen | 圆角y方向长度（默认：5px） | px | | backgroundColor | 卡片背景（默认：rgba(255, 255, 255, 0.1)） | 颜色值 |

卡片样式可通过属性配置进行修改，也可直接在<CusCornerCard></CusCornerCard>进行添加 style 或者 class，样式会被卡片组件继承。组件设置了默认内容插件，直接在<CusCornerCard></CusCornerCard>中编写卡片内容即可。