[已解决]vant-ui源码vant-button的几个疑问

Question

业务背景

用了uni-app一年啦,但是没有通用的ui框架,就想着自己仿vant-weapp,适配一下uni-app,能够在各个端上用

这两天把button仿下来,但是里面有几个地方还存在疑问,

关于css

为什么要使用新的css变量?

• 在package/common/style/theme.less文件下面
• 好多css属性值都被替换成了原生变量了var(--$1, @{$1})
• 可实际上,我在vant小程序示例里面,并未发现全局定义的css变量
• 作者的目的是啥呢?

完整代码

@import (reference) './var.less';  
  
.theme(@property, @imp) {  
  @{property}: e(replace(@imp, '@(\[^() \]+)', '@{$1}', 'ig'));  
  @{property}: e(replace(@imp, '@(\[^() \]+)', 'var(--$1, @{$1})', 'ig'));  
}

问题解决

• 在我观察到的示例代码里面,确实没有传全局变量
• 或许这个是他们内部项目用的,反正给了一个降级色,无所谓了

hairline细边框的原理是啥?

• 以前未接触到细边框的需求
• 搜索了一圈都只是介绍怎么实现细边框
• 但是未涉及原理
• 这一缩放怎么就把1px变成了.5px了呢...懵逼

相关代码

.van-hairline--bottom:after, .van-hairline--left:after, .van-hairline--right:after, .van-hairline--surround:after, .van-hairline--top-bottom:after, .van-hairline--top:after, .van-hairline:after {  
  position: absolute;  
  top: -50%;  
  right: -50%;  
  bottom: -50%;  
  left: -50%;  
  box-sizing: border-box;  
  content: " ";  
  -webkit-transform: scale(.5);  
  transform: scale(.5)  
  -webkit-transform-origin: center;  
  transform-origin: center;  
  pointer-events: none;  
  border: 0 solid #eee;  
}

问题解决

• 参照一楼回答

关于html属性

为什么仅仅是通过样式和事件判断来模拟按钮的disabled属性?

• button按钮有一个disabled属性
• 但是官方并未使用这个属性
• 而是通过css样式模拟被禁用的效果
• 在点击事件的时候,通过判断prop的disabled和loading属性来决定是否触发父元素的click事件
• 但按钮disabled后,再点击时,原生能力相关事件还是会被触发

相关代码

if (!this.data.disabled && !this.data.loading) {  
  this.$emit('click');  
}  

问题解决

• 参照一楼回答

hover-class属性为什么会传递一个hover-class类?

• hover-class属性是微信原生提供的高亮效果
• 看到vant代码里面,是通过van-button--active来实现的
• 多传一个hover-class干什么呢?在CSS里面没有看到全局定义的这个类名呀

相关代码

<button
  hover-class="van-button--active hover-class"
  ...

问题解决

• 这个是小程序里面的私有接口,基于web components设计的
• 在组件引用的地方传入这个类名,可以直接侵入到子组件里面

Answer 1

• CSS 变量是通过 Vue mixin 的方式渗入到了全部 vue 文件，仔细找可以找到 bem.js。

  • 这里使用的是 BEM 命名规范。
  • 目的是可以通过变量修改整个框架的 CSS 命名，且不会混乱。比如 web 框架改成 weex 框架，那就把'vant-web'改成'vant-weex'。
  • Element-UI 和 BootStrap-UI 都使用 BEM 规范，但是不使用 js 执行，而是直接打全名。
  • 我试过用 bem.js 参入 Vue，感觉打字量上，不比打全名轻松。
• 0.5px 的实现就是把一个 1px 的元素通过 transform:scale 缩小。原因是，直接写 border:0.5px 并不是所有设备、浏览器都支持小数点边框写法。

• 有些框架里面，disabled 对于按钮来说只是一个样式。

  • weex 中，Android 支持 disabeld，iOS 下 disabled 的 div 仍然能触发事件。
  • 有时候仍然需要 disabled 样式的按钮来触发一些功能，比如警告和无效提示（业务中很常见）。直接禁止了按钮就扼杀了这个功能了。真想按钮不响应，加一句判断就行了。