形状集合

利用 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|五角星|