vant 带关闭按钮div_[已解决]vant-ui源码vant-button的几个疑问

业务背景

用了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里面没有看到全局定义的这个类名呀

相关代码

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

...

问题解决

这个是小程序里面的私有接口,基于web components设计的

在组件引用的地方传入这个类名,可以直接侵入到子组件里面