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

冉娃娃
  • 1.2k

业务背景

用了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设计的
  • 在组件引用的地方传入这个类名,可以直接侵入到子组件里面
回复
阅读 7.8k
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 样式的按钮来触发一些功能,比如警告和无效提示(业务中很常见)。直接禁止了按钮就扼杀了这个功能了。真想按钮不响应,加一句判断就行了。
宣传栏