blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-05 19:41:45 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] 部分组件边框实现修改 (#87)

Browse Source 
* 使用超细边框

* 部分组件切换为 hairline

* 文档 边框替换
This commit is contained in:
Yao 2017-12-23 14:25:41 +08:00 committed by GitHub
parent 6b76ab59ef
commit ce5559a57e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
40 changed files with 283 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
example/app.wxss
View File

@ -18,12 +18,12 @@
z-index: 5;
}
.doc-title {
font-size: 25px;
line-height: 25px;
color: #666;
position: relative;
padding: 15px 0;
margin: 10px 15px;
border-bottom: 1rpx solid #e5e5e5;
line-height: 25px;
font-size: 25px;
color: #666;
}
.doc-description {
margin: 14px 0;

2
example/pages/badge/index.wxml
View File

@ -1,6 +1,6 @@
<view class="container">
<view class="doc-title">BADGE</view>
<view class="doc-title zan-hairline--bottom zan-hairline--bottom">BADGE</view>
<view class="demo">
<view class="demo__item">

2
example/pages/btn/index.wxml
View File

@ -1,6 +1,6 @@
<view class="container">
<view class="doc-title">BUTTON</view>
<view class="doc-title zan-hairline--bottom">BUTTON</view>
<view class="zan-panel-title">普通按钮</view>
<view class="zan-panel">

2
example/pages/capsule/index.wxml
View File

@ -2,7 +2,7 @@
<view class="container">
<view class="doc-title">CAPSULE</view>
<view class="doc-title zan-hairline--bottom">CAPSULE</view>
<view class="zan-panel-title">基本用法</view>
<view class="zan-panel">

2
example/pages/card/index.wxml
View File

@ -1,6 +1,6 @@
<view class="container">
<view class="doc-title">CARD</view>
<view class="doc-title zan-hairline--bottom">CARD</view>
<view class="zan-panel">
<view class="zan-card">

2
example/pages/cell/index.wxml
View File

@ -2,7 +2,7 @@
<view class="container">
<view class="doc-title">CELL</view>
<view class="doc-title zan-hairline--bottom">CELL</view>
<view class="zan-panel">
<view class="zan-cell">

2
example/pages/dialog/index.wxml
View File

@ -2,7 +2,7 @@
<view class="container">
<view class="doc-title">DIALOG</view>
<view class="doc-title zan-hairline--bottom">DIALOG</view>
<view class="zan-btns" style="margin-top: 30vh;">
<button class="zan-btn" bindtap="toggleBaseDialog">

2
example/pages/field/index.wxml
View File

@ -1,7 +1,7 @@
<import src="/dist/field/index.wxml" />
<view class="container">
<view class="doc-title">Field</view>
<view class="doc-title zan-hairline--bottom">Field</view>
<!-- Field 基础用法 -->
<view class="zan-panel-title">基础用法</view>

2
example/pages/icon/index.wxml
View File

@ -1,6 +1,6 @@
<view class="container">
<view class="doc-title">ICON</view>
<view class="doc-title zan-hairline--bottom">ICON</view>
<view class="zan-panel">
<view wx:for="{{ icons }}" wx:for-item="icon" class="icon-wrap">

2
example/pages/layout/index.wxml
View File

@ -1,6 +1,6 @@
<view class="container">
<view class="doc-title">LAYOUT</view>
<view class="doc-title zan-hairline--bottom">LAYOUT</view>
<view class="zan-panel-title">基础用法</view>
<view class="doc-description">Layout 组件提供了24列栅格，添加 zan-col-x 可以设置元素所占宽度</view>

2
example/pages/loadmore/index.wxml
View File

@ -1,7 +1,7 @@
<import src="/dist/loadmore/index.wxml" />
<view class="container">
<view class="doc-title">LOADMORE</view>
<view class="doc-title zan-hairline--bottom">LOADMORE</view>
<template is="zan-loadmore" data="{{loading: true}}" />
<template is="zan-loadmore" data="{{nodata: true}}" />

2
example/pages/noticebar/index.wxml
View File

@ -1,7 +1,7 @@
<import src="/dist/noticebar/index.wxml" />
<view class="container">
<view class="doc-title">NOTICEBAR</view>
<view class="doc-title zan-hairline--bottom">NOTICEBAR</view>
<view class="zan-panel-title">滚动通告栏</view>
<view class="zan-panel">

2
example/pages/panel/index.wxml
View File

@ -1,6 +1,6 @@
<view class="container">
<view class="doc-title">PANEL</view>
<view class="doc-title zan-hairline--bottom">PANEL</view>
<view class="zan-panel-title">标题</view>
<view class="zan-panel">

2
example/pages/popup/index.wxml
View File

@ -1,6 +1,6 @@
<view class="container">
<view class="doc-title">POPUP</view>
<view class="doc-title zan-hairline--bottom">POPUP</view>
<view class="zan-btns" style="margin-top: 30vh;">
<button class="zan-btn" bindtap="togglePopup">

2
example/pages/select/index.wxml
View File

@ -2,7 +2,7 @@
<view class="container">
<view class="doc-title">SELECT</view>
<view class="doc-title zan-hairline--bottom">SELECT</view>
<view class="zan-panel-title">基础用法</view>
<view class="zan-panel">

2
example/pages/stepper/index.wxml
View File

@ -2,7 +2,7 @@
<view class="container">
<view class="doc-title">Stepper</view>
<view class="doc-title zan-hairline--bottom">Stepper</view>
<view style="padding: 40px 15px">
<template is="zan-stepper" data="{{ ...stepper1, componentId: 'stepper1' }}" />

2
example/pages/steps/index.wxml
View File

@ -2,7 +2,7 @@
<view class="container">
<view class="doc-title">STEPS</view>
<view class="doc-title zan-hairline--bottom">STEPS</view>
<view class="zan-panel">
<view class="zan-cell">

2
example/pages/switch/index.wxml
View File

@ -2,7 +2,7 @@
<view class="container">
<view class="doc-title">SWITCH</view>
<view class="doc-title zan-hairline--bottom">SWITCH</view>
<view class="zan-panel-title">同步开关</view>
<view class="zan-panel">

2
example/pages/tab/index.wxml
View File

@ -2,7 +2,7 @@
<view class="container">
<view class="doc-title">TAB</view>
<view class="doc-title zan-hairline--bottom">TAB</view>
<view style="margin: 20px 0">
<template

2
example/pages/tag/index.wxml
View File

@ -1,6 +1,6 @@
<view class="container">
<view class="doc-title">Tag</view>
<view class="doc-title zan-hairline--bottom">Tag</view>
<view class="zan-panel">
<view class="zan-cell zan-cell--last-child">

2
example/pages/toast/index.wxml
View File

@ -2,7 +2,7 @@
<view class="container">
<view class="doc-title">TOAST</view>
<view class="doc-title zan-hairline--bottom">TOAST</view>
<view class="zan-btns" style="margin-top: 30vh;">
<button class="zan-btn" bindtap="showToast">

2
example/pages/toptips/index.wxml
View File

@ -2,7 +2,7 @@
<view class="container">
<view class="doc-title">TOPTIPS</view>
<view class="doc-title zan-hairline--bottom">TOPTIPS</view>
<view class="zan-btns" style="margin-top: 30vh;">
<button class="zan-btn" bindtap="showTopTips">

26
packages/btn/index.pcss
View File

@ -1,3 +1,5 @@
@import "../common/_mixins";
.zan-btn {
position: relative;
color: #333;
@ -6,7 +8,6 @@
padding-left: 15px;
padding-right: 15px;
border-radius: 2px;
border: 1rpx solid #e5e5e5;
font-size: 16px;
line-height: 45px;
height: 45px;
@ -16,7 +17,9 @@
vertical-align: middle;
}
.zan-btn::after {
display: none;
@mixin hairline;
border-width: 1px;
border-radius: 4px;
}
.zan-btns {
margin: 15px;
@ -26,19 +29,28 @@
.zan-btn--primary {
color: #fff;
background-color: #4b0;
border-color: #0a0;
&::after {
border-color: #0a0;
}
}
.zan-btn--warn {
color: #fff;
background-color: #f85;
border-color: #f85;
&::after {
border-color: #f85;
}
}
.zan-btn--danger {
color: #fff;
background-color: #f44;
border-color: #e33;
&::after {
border-color: #e33;
}
}
/* size */
@ -131,6 +143,10 @@
border-color: #e5e5e5 ! important;
cursor: not-allowed ! important;
opacity: 1 ! important;
&::after {
border-color: #e5e5e5 ! important;
}
}
/* :last-child */

10
packages/cell/index.pcss
View File

@ -1,3 +1,5 @@
@import "../common/_mixins";
.zan-cell {
position: relative;
padding: 12px 15px;
@ -8,14 +10,12 @@
}
.zan-cell::after {
position: absolute;
@mixin hairline;
border-bottom-width: 1px;
left: 15px;
right: 0;
bottom: 0;
border-top: 1rpx solid #e5e5e5;
background: #e5e5e5;
content: ' ';
}
.zan-cell__icon {
margin-right: 5px;
}

16
packages/color/index.pcss
View File

@ -1,27 +1,29 @@
@import '../common/_var';
.zan-c-red {
color: #f44 !important;
color: $red !important;
}
.zan-c-gray {
color: #c9c9c9 !important;
color: $gray !important;
}
.zan-c-gray-dark {
color: #999 !important;
color: $gray-dark !important;
}
.zan-c-gray-darker {
color: #666 !important;
color: $gray-darker !important;
}
.zan-c-black {
color: #333 !important;
color: $text-color !important;
}
.zan-c-blue {
color: #3283fa !important;
color: $blue !important;
}
.zan-c-green {
color: #44BB00 !important;
color: $green !important;
}

15
packages/common/_mixins.pcss Normal file
View File

@ -0,0 +1,15 @@
@import './_var';
@define-mixin hairline $border-retina-color: $gray-light {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border: 0 solid $border-retina-color;
}

35
packages/common/_var.pcss Normal file
View File

@ -0,0 +1,35 @@
/* color variables */
$black: #000;
$white: #fff;
$red: #f44;
$blue: #38f;
$orange: #f60;
$green: #06bf04;
$gray: #c9c9c9;
$gray-light: #e5e5e5;
$gray-darker: #666;
$gray-dark: #999;
/* default colors */
$text-color: #333;
$border-color: #ccc;
$active-color: #e8e8e8;
$background-color: #f8f8f8;
/* button */
$button-default-color: $text-color;
$button-default-background-color: $white;
$button-default-border-color: $gray-light;
$button-primary-color: $white;
$button-primary-background-color: #4b0;
$button-primary-border-color: #0a0;
$button-danger-color: $white;
$button-danger-background-color: $red;
$button-danger-border-color: #e33;
$button-disabled-color: $gray-dark;
$button-disabled-background-color: $gray-light;
$button-disabled-border-color: $border-color;
$button-bottom-action-default-color: $white;
$button-bottom-action-default-background-color: #f85;
$button-bottom-action-primary-color: $white;
$button-bottom-action-primary-background-color: $red;

0
packages/utils/index.js → packages/common/helper.js
View File

38
packages/dialog/index.pcss
View File

@ -1,3 +1,5 @@
@import "../common/_mixins";
/* 基础样式 */
.zan-dialog--container {
position: fixed;
@ -33,10 +35,15 @@
}
.zan-dialog__content {
position: relative;
padding: 15px 20px;
line-height: 1.5;
min-height: 40px;
border-bottom: 1rpx solid #e5e5e5;
&::after {
@mixin hairline;
border-bottom-width: 1px;
}
}
/* 在有标题时，需要减弱内容的存在感 */
@ -53,9 +60,13 @@
line-height: 50px;
height: 50px;
padding: 0 5px;
border: 0px none;
border-radius: 0;
margin-bottom: 0;
&::after {
border-width: 0;
border-radius: 0;
}
}
/* 展示时，样式重置 */
@ -75,18 +86,25 @@
.zan-dialog__footer--horizon .zan-dialog__button {
flex: 1;
border-right: 1rpx solid #e5e5e5;
&::after {
border-right-width: 1px;
}
&:last-child::after {
border-right-width: 0;
}
}
.zan-dialog__footer--horizon .zan-dialog__button:last-child {
border-right: 0px none;
}
.zan-dialog__footer--vertical .zan-dialog__button {
flex: 1;
border-bottom: 1rpx solid #e5e5e5;
}
.zan-dialog__footer--vertical .zan-dialog__button:last-child {
border-bottom: 0px none;
&::after {
border-bottom-width: 1px;
}
&:last-child::after {
border-bottom-width: 0;
}
}

2
packages/field/index.js
View File

@ -1,4 +1,4 @@
const { extractComponentId } = require('../utils/index');
const { extractComponentId } = require('../common/helper');
module.exports = {
_handleZanFieldChange(event) {

19
packages/field/index.pcss
View File

@ -1,4 +1,4 @@
@import '../cell/index.pcss';
@import '../cell/index';
.zan-field {
padding: 7px 15px;
@ -7,13 +7,13 @@
.zan-field--wrapped {
margin: 0 15px;
border: 1rpx solid #e5e5e5;
border-radius: 8rpx;
background-color: #fff;
}
.zan-field--wrapped::after {
border: 0rpx;
&::after {
left: 0;
border-width: 1px;
border-radius: 4px;
}
}
.zan-field--wrapped + .zan-field--wrapped {
@ -21,11 +21,14 @@
}
.zan-field--error {
/* 圆角输入框时，将边框也置红 */
border-color: #f40;
color: #f40;
}
/* 圆角输入框时，将边框也置红 */
.zan-field--wrapped.zan-field--error::after {
border-color: #f40;
}
.zan-field__title {
color: #333;
min-width: 65px;

43
packages/helper/index.pcss
View File

@ -1,3 +1,5 @@
@import "../common/_mixins";
.zan-pull-left {
float: left;
}
@ -99,3 +101,44 @@
display: table;
clear: both;
}
/* 超细边框 */
.zan-hairline {
&,
&--top,
&--left,
&--right,
&--bottom,
&--top-bottom,
&--surround {
position: relative;
&::after {
@mixin hairline;
}
}
&--top::after {
border-top-width: 1px;
}
&--left::after {
border-left-width: 1px;
}
&--right::after {
border-right-width: 1px;
}
&--bottom::after {
border-bottom-width: 1px;
}
&--top-bottom::after {
border-width: 1px 0;
}
&--surround::after {
border-width: 1px;
}
}

10
packages/loadmore/index.pcss
View File

@ -1,3 +1,5 @@
@import "../common/_mixins";
.zan-loadmore {
position: relative;
width: 65%;
@ -32,8 +34,12 @@
.zan-loadmore--nodata,
.zan-loadmore--nomore {
border-top: 1rpx solid #e5e5e5;
color: #999;
&::after {
@mixin hairline;
border-top-width: 1px;
}
}
.zan-loadmore--nodata {
@ -45,6 +51,7 @@
top: -11px;
background: #f9f9f9;
padding: 0 6px;
z-index: 1;
}
.zan-loadmore--nomore .zan-loadmore__tips {
@ -52,6 +59,7 @@
top: -11px;
background: #f9f9f9;
padding: 0 6px;
z-index: 1;
}
.zan-loadmore__dot {

21
packages/noticebar/index.js
View File

@ -1,5 +1,5 @@
var ZanNoticeBar = {
initZanNoticeBarScroll: function (componentId) {
initZanNoticeBarScroll(componentId) {
this.zanNoticeBarNode = this.zanNoticeBarNode || {};
this.zanNoticeBarNode[`${componentId}`] = {
width: undefined,
@ -8,11 +8,10 @@ var ZanNoticeBar = {
resetAnimation: null
};
var currentComponent = this.zanNoticeBarNode[`${componentId}`];
var _this = this;
wx.createSelectorQuery().select(`#${componentId}__content`).boundingClientRect(function (rect) {
wx.createSelectorQuery().select(`#${componentId}__content`).boundingClientRect((rect) => {
if (rect.width) {
currentComponent.width = rect.width;
wx.createSelectorQuery().select(`#${componentId}__content-wrap`).boundingClientRect(function (rect) {
wx.createSelectorQuery().select(`#${componentId}__content-wrap`).boundingClientRect((rect) => {
currentComponent.wrapWidth = rect.width;
if (currentComponent.wrapWidth < currentComponent.width) {
var mstime = currentComponent.width / 40 * 1000;
@ -24,7 +23,7 @@ var ZanNoticeBar = {
duration: 0,
timingFunction: 'linear'
});
_this.scrollZanNoticeBar(componentId, mstime);
this.scrollZanNoticeBar(componentId, mstime);
}
}).exec();
} else {
@ -32,22 +31,22 @@ var ZanNoticeBar = {
}
}).exec();
},
scrollZanNoticeBar: function (componentId, mstime) {
scrollZanNoticeBar(componentId, mstime) {
var currentComponent = this.zanNoticeBarNode[`${componentId}`];
var resetAnimationData = currentComponent.resetAnimation.translateX(currentComponent.wrapWidth).step();
this.setData({
[`${componentId}.animationData`]: resetAnimationData.export()
});
var aninationData = currentComponent.animation.translateX(-mstime * 40 / 1000).step();
var _this = this;
setTimeout(function () {
_this.setData({
setTimeout(() => {
this.setData({
[`${componentId}.animationData`]: aninationData.export()
});
}, 100);
setTimeout(function () {
_this.scrollZanNoticeBar(componentId, mstime);
setTimeout(() => {
this.scrollZanNoticeBar(componentId, mstime);
}, mstime);
}
};

11
packages/panel/index.pcss
View File

@ -1,9 +1,16 @@
@import "../common/_mixins";
.zan-panel {
position: relative;
background: #fff;
border-top: 1rpx solid #e5e5e5;
border-bottom: 1rpx solid #e5e5e5;
margin-top: 10px;
overflow: hidden;
&::after {
@mixin hairline;
border-top-width: 1px;
border-bottom-width: 1px;
}
}
.zan-panel-title {

15
packages/select/index.js
View File

@ -1,13 +1,14 @@
const { extractComponentId } = require('../common/helper');
function handle(e) {
var dataset = e.currentTarget.dataset;
var componentId = dataset.componentId;
var value = e.detail.value;
const componentId = extractComponentId(e);
const value = e.detail.value;
callback.call(this, componentId, value);
}
function callback(componentId, value) {
var e = { componentId, value };
const e = { componentId, value };
console.info('[zan:Select:change]', e);
if (this.handleZanSelectChange) {
@ -17,10 +18,8 @@ function callback(componentId, value) {
}
}
var Select = {
module.exports = {
_handleZanSelectChange(e) {
handle.call(this, e);
},
}
};
module.exports = Select;

10
packages/tab/index.js
View File

@ -1,9 +1,11 @@
const { extractComponentId } = require('../common/helper');
var Tab = {
_handleZanTabChange(e) {
var dataset = e.currentTarget.dataset;
var componentId = dataset.componentId;
var selectedId = dataset.itemId;
var data = { componentId, selectedId };
const componentId = extractComponentId(e);
const dataset = e.currentTarget.dataset;
const selectedId = dataset.itemId;
const data = { componentId, selectedId };
console.info('[zan:tab:change]', data);
if (this.handleZanTabChange) {

65
packages/tag/index.pcss
View File

@ -1,60 +1,83 @@
@import '../common/_var';
@import "../common/_mixins";
.zan-tag {
display: inline-block;
position: relative;
box-sizing: border-box;
line-height: 16px;
padding: 0 5px;
border-radius: 2px;
font-size: 11px;
background: #c9c9c9;
border: 1rpx solid #e5e5e5;
background: $gray;
text-align: center;
color: #fff;
color: $white;
&::after {
@mixin hairline;
border-width: 1px;
border-radius: 4px;
}
}
.zan-tag--plain {
color: #c9c9c9;
background: #fff;
color: $gray;
background: $white;
}
/* 各种主题代码 */
.zan-tag--primary {
color: #fff;
background-color: #4b0;
border: 1rpx solid #4b0;
color: $button-primary-color;
background-color: $button-primary-background-color;
&::after {
border-color: $button-primary-background-color;
}
/* 空心形式 */
&.zan-tag--plain {
color: #4b0;
background: #fff;
color: $button-primary-background-color;
background: $white;
}
}
.zan-tag--danger {
color: #fff;
background: #f44;
border: 1rpx solid #f44;
color: $button-danger-color;
background: $button-danger-background-color;
&::after {
border-color: $button-danger-background-color;
}
/* 空心形式 */
&.zan-tag--plain {
color: #f44;
background: #fff;
color: $button-danger-background-color;
background: $button-danger-color;
}
}
.zan-tag--warn {
color: #fff;
color: $white;
background: #f85;
border: 1rpx solid #f85;
&::after {
border-color: #f85;
}
/* 空心形式 */
&.zan-tag--plain {
color: #f85;
background: #fff;
background: $white;
}
}
/* disabled tag */
.zan-tag--disabled {
color: #cacaca !important;
background: #eee;
border: 1rpx solid #e5e5e5;
color: $button-disabled-color !important;
background: $button-disabled-background-color;
&::after {
border-color: $button-disabled-border-color;
}
}

2
postcss.config.js
View File

@ -5,7 +5,7 @@ const postcssCalc = require('postcss-calc');
module.exports = {
plugins: [
postcssEasyImport({
extensions: ['wxss', 'css']
extensions: ['.wxss', '.css', '.pcss']
}),
precss(),
postcssCalc()

8
scripts/utils/build-css.js
View File

@ -1,17 +1,17 @@
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const cssmin = require('gulp-clean-css');
const rename = require("gulp-rename");
const rename = require('gulp-rename');
const gutil = require('gulp-util');
const options = gutil.env;
gulp.task('compile', () => {
return gulp.src('../../packages/**/*.pcss')
return gulp.src(['../../packages/**/*.pcss', '!../../packages/**/_*.pcss'])
.pipe(postcss())
.pipe(cssmin())
.pipe(rename(function (path) {
path.extname = ".wxss"
.pipe(rename((path) => {
path.extname = '.wxss';
}))
.pipe(gulp.dest(options.dist));
});