mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[breaking change] Cell: show active color when clicked (#497)
This commit is contained in:
neverland
GitHub
parent
b8ccd48648
commit
98ece3ab8f
@ -78,6 +78,8 @@ Vue.use(CellGroup);
|
||||
| url | Link | `String` | - | - |
|
||||
| to | Target route of the link, same as to of `vue-router` | `String | Object` | - | - |
|
||||
| replace | If true, the navigation will not leave a history record | `String` | `false` | - |
|
||||
| border | Whether to show inner border | `Boolean` | `true` | - |
|
||||
| clickable | Whether to show click feedback when clicked | `Boolean` | `false` | - |
|
||||
| is-link | Whether to show link icon | `Boolean` | `false` | - |
|
||||
| required | Whether to show required mark | `Boolean` | `false` | - |
|
||||
|
||||
|
||||
@ -85,7 +85,9 @@ Vue.use(CellGroup);
|
||||
| url | 跳转链接 | `String` | - | - |
|
||||
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
|
||||
| replace | 跳转时是否替换当前 history | `String` | `false` | - |
|
||||
| is-link | 是否展示右侧箭头 | `Boolean` | `false` | - |
|
||||
| border | 是否显示内边框 | `Boolean` | `true` | - |
|
||||
| clickable | 是否开启点击反馈 | `Boolean` | `false` | - |
|
||||
| is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` | - |
|
||||
| required | 是否显示表单必填符号 | `Boolean` | `false` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
@ -80,6 +80,10 @@ export default {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
|
||||
&:active {
|
||||
background-color: $active-color;
|
||||
}
|
||||
|
||||
&--open {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
<div class="van-address-list">
|
||||
<radio-group :value="value" @input="$emit('input', $event)" class="van-address-list__group">
|
||||
<cell-group>
|
||||
<cell v-for="(item, index) in list" :key="item.id">
|
||||
<cell v-for="(item, index) in list" :key="item.id" is-link>
|
||||
<radio :name="item.id" @click="$emit('select', item, index)">
|
||||
<div class="van-address-list__name">{{ item.name }}，{{ item.tel }}</div>
|
||||
<div class="van-address-list__address">{{ $t('address') }}：{{ item.address }}</div>
|
||||
</radio>
|
||||
<icon name="edit" class="van-address-list__edit" @click="$emit('edit', item, index)" />
|
||||
<icon slot="right-icon" name="edit" class="van-address-list__edit" @click="$emit('edit', item, index)" />
|
||||
</cell>
|
||||
</cell-group>
|
||||
</radio-group>
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
<template>
|
||||
<div class="van-cell van-hairline" :class="{ 'van-cell--required': required }" @click="onClick">
|
||||
<div
|
||||
class="van-cell"
|
||||
:class="{
|
||||
'van-hairline': border,
|
||||
'van-cell--required': required,
|
||||
'van-cell--clickable': isLink || clickable
|
||||
}"
|
||||
@click="onClick"
|
||||
>
|
||||
<div class="van-cell__title" v-if="$slots.title || title">
|
||||
<slot name="icon">
|
||||
<icon v-if="icon" :name="icon" />
|
||||
@ -43,7 +51,12 @@ export default create({
|
||||
label: String,
|
||||
isLink: Boolean,
|
||||
required: Boolean,
|
||||
value: [String, Number]
|
||||
clickable: Boolean,
|
||||
value: [String, Number],
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
<div class="van-contact-list">
|
||||
<radio-group :value="value" @input="$emit('input', $event)">
|
||||
<cell-group>
|
||||
<cell v-for="(item, index) in list" :key="item.id">
|
||||
<cell v-for="(item, index) in list" :key="item.id" is-link>
|
||||
<radio :name="item.id" @click="$emit('select', item, index)">
|
||||
<p class="van-contact-list__text">{{ $t('name') }}：{{ item.name }}</p>
|
||||
<p class="van-contact-list__text">{{ $t('tel') }}：{{ item.tel }}</p>
|
||||
</radio>
|
||||
<icon name="edit" class="van-contact-list__edit" @click="$emit('edit', item, index)" />
|
||||
<icon slot="right-icon" name="edit" class="van-contact-list__edit" @click="$emit('edit', item, index)" />
|
||||
</cell>
|
||||
</cell-group>
|
||||
</radio-group>
|
||||
|
||||
Binary file not shown.
@ -47,7 +47,7 @@
|
||||
&__edit {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 4px;
|
||||
right: 15px;
|
||||
font-size: 20px;
|
||||
color: $gray-dark;
|
||||
transform: translate(0, -50%);
|
||||
|
||||
@ -3,20 +3,21 @@
|
||||
.van-cell {
|
||||
width: 100%;
|
||||
display: table;
|
||||
padding: 10px 15px 10px 0;
|
||||
padding: 10px 15px;
|
||||
box-sizing: border-box;
|
||||
line-height: 24px;
|
||||
position: relative;
|
||||
background-color: $white;
|
||||
color: $text-color;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
left: 15px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
&-group {
|
||||
padding-left: 15px;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
@ -47,12 +48,18 @@
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
|
||||
&--alone {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--link {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&--alone {
|
||||
text-align: left;
|
||||
&--clickable {
|
||||
&:active {
|
||||
background-color: $active-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -38,8 +38,8 @@
|
||||
&__edit {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 4px;
|
||||
font-size: 24px;
|
||||
right: 15px;
|
||||
font-size: 20px;
|
||||
color: $gray-dark;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
@ -1,20 +1,13 @@
|
||||
@import './common/var.css';
|
||||
|
||||
.van-field {
|
||||
|
||||
width: 100%;
|
||||
|
||||
.van-cell__title,
|
||||
.van-cell__value {
|
||||
float: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.van-cell__title {
|
||||
width: 90px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.van-cell__value {
|
||||
|
||||
@ -2,5 +2,5 @@
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-family: 'vant-icon';
|
||||
src: url('./vant-icon-42d621.ttf') format('truetype');
|
||||
src: url('./vant-icon-120564.ttf') format('truetype');
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-family: 'vant-icon';
|
||||
src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-42d621.ttf') format('truetype');
|
||||
src: url('https://b.yzcdn.cn/zanui/icon/vant-icon-120564.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
|
||||
Binary file not shown.
@ -58,7 +58,7 @@ describe('CouponCell', () => {
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-cell__value--link': '使用优惠'
|
||||
'.van-cell__value': '使用优惠'
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -72,7 +72,7 @@ describe('CouponCell', () => {
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-cell__value--link': '您有 2 个可用优惠'
|
||||
'.van-cell__value': '您有 2 个可用优惠'
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -87,7 +87,7 @@ describe('CouponCell', () => {
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-cell__value--link span': '省￥1.50'
|
||||
'.van-cell__value span': '省￥1.50'
|
||||
},
|
||||
count: {
|
||||
'.van-cell__right-icon': 1
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user