形状集合

形状集合

利用 css clip-path 属性 裁剪形状 持续迭代中...

安装

yarn add s-clip-path --save
# OR
npm install s-clip-path --save

升级

npm update s-clip-path
# OR
yarn upgrade s-clip-path

使用

引入

import sClipPath from "s-clip-path";

注册

components: { sClipPath },

调用

<s-clip-path :option="option" />

参数

option: {
    width: "100px",
    height: "100px",
    bgColor: "",
    bgImg: {
        url: "https://gitee.com/SuHangWeb/uPic/raw/master/uPic/pFxr5i.jpeg",
        mode: "cover",
    },
    shape: {
        type: "triangle",
        mode: "top",
    },
},

option

名称	说明
width	宽度 全类型 类似：100px 100vw
height	高度 全类型 类似：100px 100vh
bgColor	颜色 例如：#cccccc
bgImg	图片 参数 见下方 bgImg 配置
shape	形状 参数 见下方 shape 配置

bgImg

名称	说明
url	图片地址
+ mode	图片填充模式
- contain	保持宽高缩放图片，使图片的长边能完全显示出来
- cover	保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边
- fill	拉伸图片，使图片填满元素
- none	保持图片原有尺寸
- scale-down	取none或contain中较小的一个

shape

名称	说明
mode	方向 生效：（triangle，arrow）
+ type	形状
- triangle	三角形
- circle	圆形
- close	关闭
- correct	对号
- messaqe	消息
- arrow	箭头
- rhombus	菱形
- star	五角星