@wanmi/x-site-ui-base

建站UI基础组件库

Usage no npm install needed!

<script type="module">
  import wanmiXSiteUiBase from 'https://cdn.skypack.dev/@wanmi/x-site-ui-base';
</script>

README

建站基础组件.

1. 图片懒加载组件

根据w&h 生成对应的三种尺寸的srcset, 根据enableLazyLoad 开启懒加载组件

<img src="demo.jpg@100px" srcset="demo.jpg@100px 1x, demo.jpg@200px 2x, demo.jpg@300px 3x">

使用

    import ImgComp from "@qianmi/x-site-ui-base/widget/weixin/img-comp";

API

参数 说明 类型 默认值
enableLazyLoad 是否开启懒加载 Boolean true
imgSrc 图片地址 String ""
imgHref 图片链接 String ""
w 图片优化宽度 Number 无
h 图片优化高度 Number 无
width 样式宽度(90,90px,0.45rem) String Number
height 样式高度 String Number

说明

  1. 要生成 需要指定 imgHref为undefined
  2. 图片自适应，w或h传一个即可。
  3. w,h的值为@1x的px值，运行时会根据dpr自动处理到最优

issue

  1. 目前为了兼容,不传imgHref，默认值""会生成 <a href=""><img /></a> 而不是 <img />。imgHref应该无默认值。
  2. width，height应该合并到style中统一赋值。因为该属性仅仅为了设置css属性
  3. img 目前无法设置className。