共计 786 个字符，预计需要花费 2 分钟才能阅读完成。
形态汇合
利用 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 | 五角星 |
正文完
