形态汇合

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

装置

yarn add s-clip-path --save# ORnpm install s-clip-path --save

降级

npm update s-clip-path# ORyarn 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五角星