wuzhe-ui

diy a h5 mobile ui

Usage no npm install needed!

<script type="module">
  import wuzheUi from 'https://cdn.skypack.dev/wuzhe-ui';
</script>

README

DIY H5 MOBILE UI

笔记

  1. 想在键盘上直接提交搜索操作，如果想达到这种效果，就必须使用下面这种结构：
<form action="#">
    <input type="text" />
</form>

也就是带有 action 属性的表单里包含的 input 元素，这样的结构就会被输入法认定为表单的功能，会在键盘上显示出“前往”的按钮

  1. :valid伪类选择器，表示内容验证正确的input或其他form元素。:valid是和 input 中的“required”属性对应的，input 元素有内容时“required”验证条件就会通过，这时候 :valid 选择器就会选中这个 input。
  2. 实现容器垂直方向顶部和底部分别与兄弟盒子顶部和底部对齐：
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  1. 多行文本截断：
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

踩坑之路

  1. 使用多行文本截断的less样式，由于编译less的autoprefixer设置不正确，下面这行代码没有正确编译到最终的css文件里：
  -webkit-box-orient: vertical;

导致text-align: center不起作用；将autoprefixer的设置项改为cover: 99.5%后，最终编译出来的css文件，就有了-webkit-box-orient: vertical,多行文本截断以及文本水平居中也生效了。

发布代码到npm

  • 发布代码到npm之前，需要在项目根目录执行npm init -y；配置项目的基本信息，版本号，项目依赖；
  • npm adduser；第一次发布包需要添加用户；输入用户名和密码；登陆成功；
  • npm login；登陆npm
  • npm publish；发布代码到npm仓库