blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

style(Cascader): fix style details (#7779)

Browse Source 
* style(Cascader): fix style details

* style(Tabs): use less var
This commit is contained in:
neverland 2020-12-21 13:34:36 +08:00 committed by GitHub
parent 659ea9cf07
commit b4cb00ed97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 51 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/cascader/README.md
View File

@ -15,10 +15,10 @@ Vue.use(Cascader);
```html
<van-field
v-model="fieldValue"
is-link
readonly
label="Area"
:value="fieldValue"
placeholder="Select Area"
@click="show = true"
/>
@ -78,10 +78,10 @@ export default {
```html
<van-field
v-model="fieldValue"
is-link
readonly
label="Area"
:value="fieldValue"
placeholder="Select Area"
@click="show = true"
/>

14
src/cascader/README.zh-CN.md
View File

@ -21,17 +21,17 @@ Vue.use(Cascader);
```html
<van-field
v-model="fieldValue"
is-link
readonly
label="地区"
:value="fieldValue"
placeholder="请选择地区"
placeholder="请选择所在地区"
@click="show = true"
/>
<van-popup v-model="show" round position="bottom">
<van-cascader
v-model="cascaderValue"
title="请选择地区"
title="请选择所在地区"
@close="show = false"
@finish="onFinish"
/>
@ -77,7 +77,7 @@ export default {
```html
<van-cascader
v-model="cascaderValue"
title="请选择地区"
title="请选择所在地区"
active-color="#1989fa"
@close="show = false"
@finish="onFinish"
@ -90,17 +90,17 @@ export default {
```html
<van-field
v-model="fieldValue"
is-link
readonly
label="地区"
:value="fieldValue"
placeholder="请选择地区"
placeholder="请选择所在地区"
@click="show = true"
/>
<van-popup v-model="show" round position="bottom">
<van-cascader
v-model="cascaderValue"
title="请选择地区"
title="请选择所在地区"
@close="show = false"
@change="onChange"
@finish="onFinish"

33
src/cascader/demo/index.vue
View File

@ -2,14 +2,20 @@
<demo-section>
<demo-block card :title="t('basicUsage')">
<van-field
v-model="base.result"
is-link
readonly
:label="t('area')"
:value="base.result"
:placeholder="t('selectArea')"
@click="base.show = true"
/>
<van-popup v-model="base.show" round position="bottom">
<van-popup
v-model="base.show"
round
position="bottom"
get-container="body"
safe-area-inset-bottom
>
<van-cascader
v-model="base.value"
:title="t('selectArea')"
@ -22,14 +28,20 @@
<demo-block card :title="t('customColor')">
<van-field
v-model="customColor.result"
is-link
readonly
:label="t('area')"
:value="customColor.result"
:placeholder="t('selectArea')"
@click="customColor.show = true"
/>
<van-popup v-model="customColor.show" round position="bottom">
<van-popup
v-model="customColor.show"
round
position="bottom"
get-container="body"
safe-area-inset-bottom
>
<van-cascader
v-model="customColor.value"
:title="t('selectArea')"
@ -43,14 +55,20 @@
<demo-block card :title="t('asyncOptions')">
<van-field
v-model="async.result"
is-link
readonly
:label="t('area')"
:value="async.result"
:placeholder="t('selectArea')"
@click="async.show = true"
/>
<van-popup v-model="async.show" round position="bottom">
<van-popup
v-model="async.show"
round
position="bottom"
get-container="body"
safe-area-inset-bottom
>
<van-cascader
v-model="async.value"
:title="t('selectArea')"
@ -73,7 +91,7 @@ export default {
'zh-CN': {
area: '地区',
options: zhCNOptions,
selectArea: '请选择地区',
selectArea: '请选择所在地区',
customColor: '自定义颜色',
asyncOptions: '异步加载选项',
asyncOptions1: [
@ -145,6 +163,7 @@ export default {
onFinish(type, { value, selectedOptions }) {
const result = selectedOptions.map((option) => option.text).join('/');
this[type] = {
...this[type],
show: false,
value,
result,

10
src/cascader/index.less
View File

@ -17,7 +17,7 @@
&__close-icon {
color: @cascader-close-icon-color;
font-size: @cascader-close-icon-color;
font-size: @cascader-close-icon-size;
&:active {
color: @cascader-close-icon-active-color;
@ -32,7 +32,11 @@
&.van-tabs--line .van-tabs__wrap {
height: @cascader-tabs-height;
padding: 0 6px;
}
.van-tabs__nav--complete {
padding-right: 6px;
padding-left: 6px;
}
}
@ -42,6 +46,7 @@
&--unselected {
color: @cascader-unselected-tab-color;
font-weight: normal;
}
}
@ -59,6 +64,7 @@
&--selected {
color: @cascader-active-color;
font-weight: @font-weight-bold;
}
}

9
src/cascader/test/__snapshots__/demo.spec.js.snap
View File

@ -6,31 +6,28 @@ exports[`renders demo correctly 1`] = `
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择地区" class="van-field__control"></div>
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择所在地区" class="van-field__control"></div>
</div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<!---->
</div>
<div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择地区" class="van-field__control"></div>
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择所在地区" class="van-field__control"></div>
</div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<!---->
</div>
<div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择地区" class="van-field__control"></div>
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择所在地区" class="van-field__control"></div>
</div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<!---->
</div>
</div>
`;

10
src/tabs/index.less
View File

@ -66,11 +66,6 @@
&::-webkit-scrollbar {
display: none;
}
&--complete {
padding-right: 8px;
padding-left: 8px;
}
}
}
}
@ -87,6 +82,11 @@
padding-bottom: 15px; /* 15px padding to hide scrollbar in mobile safari */
}
&--complete {
padding-right: @padding-xs;
padding-left: @padding-xs;
}
&--card {
box-sizing: border-box;
height: @tabs-card-height;