mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
neverland
GitHub
commit
5fcdf200c6
122
docs/examples-docs/address-list.md
Normal file
122
docs/examples-docs/address-list.md
Normal file
@ -0,0 +1,122 @@
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: '1',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000',
|
||||
address: '浙江省杭州市拱墅区莫干山路 50 号'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '王五',
|
||||
tel: '1320000000',
|
||||
address: '浙江省杭州市滨江区江南大道 15 号'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast('新增收货地址');
|
||||
},
|
||||
onEdit(item, index) {
|
||||
Toast('编辑收货地址:' + index);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## AddressList 地址列表
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { AddressList } from 'vant';
|
||||
|
||||
Vue.component(AddressList.name, AddressList);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-address-list
|
||||
v-model="chosenAddressId"
|
||||
:list="list"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: '1',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000',
|
||||
address: '浙江省杭州市拱墅区莫干山路 50 号'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast('新增收货地址');
|
||||
},
|
||||
onEdit(item, index) {
|
||||
Toast('编辑收货地址:' + index);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 当前选中地址的 id | String | - | - |
|
||||
| list | 地址列表 | Array | `[]` | - |
|
||||
| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| add | 点击新增按钮时触发 | - |
|
||||
| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
|
||||
| change | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
|
||||
|
||||
### 数据格式
|
||||
#### 地址列表字段说明
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 每条地址的唯一标识 | `String | Number` |
|
||||
| name | 收货人姓名 | `String` |
|
||||
| tel | 收货人手机号 | `String` |
|
||||
| address | 收货地址 | `String` |
|
||||
@ -1,8 +1,6 @@
|
||||
<style>
|
||||
.demo-field {
|
||||
.van-field-wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,17 +8,11 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: 'zhangmin'
|
||||
value: '',
|
||||
password: '',
|
||||
username: 'zhangmin',
|
||||
message: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onIconClick() {
|
||||
this.username = '';
|
||||
},
|
||||
|
||||
onFieldBlur() {
|
||||
console.log('blured');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -39,92 +31,78 @@ Vue.component(Field.name, Field);
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
根据`type`属性显示不同的输入框。
|
||||
通过 v-model 绑定输入框的值
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" placeholder="请输入用户名"></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 自定义类型
|
||||
根据`type`属性定义不同类型的输入框
|
||||
|
||||
:::demo 自定义类型
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
type="text"
|
||||
label="用户名："
|
||||
placeholder="请输入用户名"
|
||||
v-model="username"
|
||||
label="用户名"
|
||||
icon="clear"
|
||||
:on-icon-click="onIconClick"
|
||||
@blur="onFieldBlur"
|
||||
required></van-field>
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
@click-icon="username = ''"
|
||||
>
|
||||
</van-field>
|
||||
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
label="密码："
|
||||
label="密码"
|
||||
placeholder="请输入密码"
|
||||
required>
|
||||
<template slot="icon">
|
||||
<van-icon name="search"></van-icon>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 无label的输入框
|
||||
#### 禁用输入框
|
||||
|
||||
不传入`label`属性即可。
|
||||
|
||||
:::demo 无label的输入框
|
||||
:::demo 禁用输入框
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field type="text" placeholder="请输入用户名"></van-field>
|
||||
<van-field value="输入框已禁用" label="用户名" disabled></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 带border的输入框
|
||||
#### 错误提示
|
||||
|
||||
传入一个`border`属性。
|
||||
|
||||
:::demo 带border的输入框
|
||||
```html
|
||||
<div class="van-field-wrapper">
|
||||
<van-field type="text" placeholder="请输入用户名" border></van-field>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用的输入框
|
||||
|
||||
传入`disabled`属性即可。
|
||||
|
||||
:::demo 禁用的输入框
|
||||
:::demo 错误提示
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field>
|
||||
<van-field label="用户名" placeholder="请输入用户名" error></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 错误的输入框
|
||||
#### 高度自适应
|
||||
对于 textarea，可以通过`autosize`属性设置高度自适应
|
||||
|
||||
传入`error`属性即可。
|
||||
|
||||
:::demo 错误的输入框
|
||||
:::demo 高度自适应
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field label="用户名：" type="text" placeholder="请输入用户名" error></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
#### Autosize的输入框(仅支持textarea)
|
||||
|
||||
传入`autosize`属性, 且将`rows`设为1。
|
||||
|
||||
:::demo 错误的输入框
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></van-field>
|
||||
<van-field
|
||||
v-model="message"
|
||||
label="留言"
|
||||
type="textarea"
|
||||
placeholder="请输入留言"
|
||||
rows="1"
|
||||
autosize
|
||||
>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
@ -133,23 +111,24 @@ Vue.component(Field.name, Field);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 输入框类型 | `String` | `text` | `text`, `number`, `email`, `url`, `tel`, `date`, `datetime`, `password`, `textarea` |
|
||||
| placeholder | 输入框placeholder | `String` | | |
|
||||
| value | 输入框的值 | `String` | | |
|
||||
| label | 输入框标签 | `String` | | |
|
||||
| disabled | 是否禁用输入框 | `Boolean` | `false` | |
|
||||
| error | 输入框是否有错误 | `Boolean` | `false` | |
|
||||
| readonly | 输入框是否只读 | `Boolean` | `false` | |
|
||||
| maxlength | 输入框maxlength | `String`, `Number` | | |
|
||||
| rows | textarea rows | `String`, `Number` | | |
|
||||
| cols | textarea cols | `String`, `Number` | | |
|
||||
| autosize | 自动调整高度(仅支持textarea) | `Boolean` | `false` | `true`, `false` |
|
||||
| icon | 输入框尾部图标 | `String` | | icon中支持的类型 |
|
||||
| onIconClick | 点击图标的回调函数 | `Function` | | |
|
||||
| type | 输入框类型 | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
|
||||
| value | 输入框的值 | `String` | - | - |
|
||||
| label | 输入框标签 | `String` | - | - |
|
||||
| disabled | 是否禁用输入框 | `Boolean` | `false` | - |
|
||||
| error | 输入框是否有错误 | `Boolean` | `false` | - |
|
||||
| autosize | 高度自适应(仅支持textarea) | `Boolean` | `false` | - |
|
||||
| icon | 输入框尾部图标 | `String` | - | Icon 组件支持的类型 |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| focus | 输入框聚焦时触发 | - |
|
||||
| blur | 输入框失焦时触发 | - |
|
||||
| click-icon | 点击尾部图标时触发 | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| icon | 自定义icon |
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ Vue.component(NoticeBar.name, NoticeBar);
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-notice-bar text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。">
|
||||
<van-notice-bar text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。" />
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -1,93 +1,9 @@
|
||||
<template>
|
||||
<div class="examples-container" ref="container">
|
||||
<div class="demo-content" ref="demo">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<div class="footer" :class="{ 'footer-fixed': isFooterFixed }">
|
||||
<img src="https://img.yzcdn.cn/upload_files/2017/04/18/FjupTe9o1apJhJr5qR-4ucXqPs7e.png" alt="logo" class="zanui-logo">
|
||||
</div>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
visible() {
|
||||
return ['/'].indexOf(this.$route.path) < 0;
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isFooterFixed: false
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.computeFooterFixed();
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route.path'(val) {
|
||||
this.$nextTick(() => {
|
||||
this.computeFooterFixed();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
computeFooterFixed() {
|
||||
if (this.$refs.container) {
|
||||
const demoSize = this.$refs.demo.getBoundingClientRect();
|
||||
const containerSize = this.$refs.container.getBoundingClientRect();
|
||||
if (demoSize.height < containerSize.height - 54) {
|
||||
this.isFooterFixed = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.isFooterFixed = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body, html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.examples-container {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
padding: 10px 0 20px;
|
||||
background: #f8f8f8;
|
||||
|
||||
&.footer-fixed {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.zanui-logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -214,6 +214,10 @@ module.exports = {
|
||||
{
|
||||
"groupName": "业务组件",
|
||||
"list": [
|
||||
{
|
||||
"path": "/address-list",
|
||||
"title": "AddressList 地址列表"
|
||||
},
|
||||
{
|
||||
"path": "/area",
|
||||
"title": "Area 省市区选择"
|
||||
|
||||
@ -36,7 +36,12 @@ router.afterEach(() => {
|
||||
|
||||
window.vueRouter = router;
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Vue.config.productionTip = false;
|
||||
}
|
||||
|
||||
new Vue({ // eslint-disable-line
|
||||
render: h => h(App),
|
||||
router
|
||||
}).$mount('#app-container');
|
||||
router,
|
||||
el: '#app-container'
|
||||
});
|
||||
|
||||
@ -35,7 +35,12 @@ router.afterEach(() => {
|
||||
|
||||
window.vueRouter = router;
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Vue.config.productionTip = false;
|
||||
}
|
||||
|
||||
new Vue({ // eslint-disable-line
|
||||
render: h => h(App),
|
||||
router
|
||||
}).$mount('#app-container');
|
||||
router,
|
||||
el: '#app-container'
|
||||
});
|
||||
|
||||
48
packages/address-list/index.vue
Normal file
48
packages/address-list/index.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="van-address-list">
|
||||
<van-radio-group :value="value" @input="$emit('input', $event)" class="van-address-list__group">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="item.id">
|
||||
<van-radio :name="item.id" @click="$emit('change', item, index)">
|
||||
<div class="van-address-list__name">{{ item.name }}，{{ item.tel }}</div>
|
||||
<div class="van-address-list__address">收货地址：{{ item.address }}</div>
|
||||
</van-radio>
|
||||
<van-icon name="edit" class="van-address-list__edit" @click="$emit('edit', item, index)" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
<van-cell icon="add" class="van-address-list__add van-hairline--top" @click="$emit('add')" :title="addButtonText" isLink />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
import Cell from '../cell';
|
||||
import CellGroup from '../cell-group';
|
||||
import Radio from '../radio';
|
||||
import RadioGroup from '../radio-group';
|
||||
|
||||
export default {
|
||||
name: 'van-address-list',
|
||||
|
||||
components: {
|
||||
[Icon.name]: Icon,
|
||||
[Cell.name]: Cell,
|
||||
[Radio.name]: Radio,
|
||||
[CellGroup.name]: CellGroup,
|
||||
[RadioGroup.name]: RadioGroup
|
||||
},
|
||||
|
||||
props: {
|
||||
value: [String, Number],
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
addButtonText: {
|
||||
type: String,
|
||||
default: '新增收货地址'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -27,6 +27,7 @@
|
||||
<slot name="right-icon">
|
||||
<i class="van-cell__right-icon van-icon van-icon-arrow" v-if="isLink"></i>
|
||||
</slot>
|
||||
<slot name="extra"></slot>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,47 +1,43 @@
|
||||
<template>
|
||||
<van-cell
|
||||
class="van-field"
|
||||
:title="label"
|
||||
:required="required"
|
||||
:class="{
|
||||
'van-field--hastextarea': type === 'textarea',
|
||||
:class="['van-field', {
|
||||
'van-field--has-textarea': type === 'textarea',
|
||||
'van-field--nolabel': !label,
|
||||
'van-field--disabled': disabled,
|
||||
'van-field--disabled': $attrs.disabled,
|
||||
'van-field--error': error,
|
||||
'van-field--border': border,
|
||||
'van-hairline--surround': border,
|
||||
'van-field--autosize': autosize,
|
||||
'van-field--has-icon': showIcon
|
||||
}">
|
||||
'van-field--has-icon': hasIcon,
|
||||
'van-hairline--surround': border
|
||||
}]">
|
||||
<textarea
|
||||
v-if="type === 'textarea'"
|
||||
ref="textareaElement"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
ref="textarea"
|
||||
class="van-field__control"
|
||||
v-model="currentValue"
|
||||
@focus="handleInputFocus"
|
||||
@blur="handleInputBlur"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxlength"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:rows="rows"
|
||||
:cols="cols">
|
||||
</textarea>
|
||||
:value="value"
|
||||
@input="onInput"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
class="van-field__control"
|
||||
:value="currentValue"
|
||||
@input="handleInput"
|
||||
@focus="handleInputFocus"
|
||||
@blur="handleInputBlur"
|
||||
:type="type"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxlength"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly">
|
||||
<div v-if="showIcon" class="van-field__icon" @click="onIconClick">
|
||||
:value="value"
|
||||
@input="onInput"
|
||||
/>
|
||||
<div
|
||||
v-if="hasIcon"
|
||||
v-show="$slots.icon || value"
|
||||
class="van-field__icon"
|
||||
@touchstart.prevent="onClickIcon"
|
||||
>
|
||||
<slot name="icon">
|
||||
<van-icon :name="icon"></van-icon>
|
||||
<van-icon :name="icon" />
|
||||
</slot>
|
||||
</div>
|
||||
</van-cell>
|
||||
@ -70,80 +66,52 @@ export default {
|
||||
value: {},
|
||||
icon: String,
|
||||
label: String,
|
||||
placeholder: String,
|
||||
error: Boolean,
|
||||
disabled: Boolean,
|
||||
readonly: Boolean,
|
||||
required: Boolean,
|
||||
maxlength: [String, Number],
|
||||
border: Boolean,
|
||||
rows: [String, Number],
|
||||
cols: [String, Number],
|
||||
autosize: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autosize: Boolean,
|
||||
onIconClick: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentValue: this.value
|
||||
};
|
||||
watch: {
|
||||
value() {
|
||||
if (this.autosize && this.type === 'textarea') {
|
||||
this.$nextTick(this.adjustSize);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.autosize && this.type === 'textarea') {
|
||||
const el = this.$refs.textareaElement;
|
||||
const el = this.$refs.textarea;
|
||||
el.style.height = el.scrollHeight + 'px';
|
||||
el.style.overflowY = 'hidden';
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
this.currentValue = val;
|
||||
},
|
||||
|
||||
currentValue(val) {
|
||||
if (this.autosize && this.type === 'textarea') {
|
||||
this.$nextTick(this.sizeAdjust);
|
||||
}
|
||||
this.$emit('input', val);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
showIcon() {
|
||||
// 有icon的slot，就认为一直展示
|
||||
if (this.$slots.icon) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return this.icon && this.currentValue;
|
||||
hasIcon() {
|
||||
return this.$slots.icon || this.icon;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleInput(event) {
|
||||
this.currentValue = event.target.value;
|
||||
onInput(event) {
|
||||
this.$emit('input', event.target.value);
|
||||
},
|
||||
|
||||
sizeAdjust() {
|
||||
const el = this.$refs.textareaElement;
|
||||
onClickIcon() {
|
||||
this.$emit('click-icon');
|
||||
this.onIconClick();
|
||||
},
|
||||
|
||||
adjustSize() {
|
||||
const el = this.$refs.textarea;
|
||||
el.style.height = 'auto';
|
||||
el.style.height = el.scrollHeight + 'px';
|
||||
},
|
||||
|
||||
handleInputFocus() {
|
||||
this.$emit('focus');
|
||||
},
|
||||
|
||||
handleInputBlur() {
|
||||
this.$emit('blur');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import Actionsheet from './actionsheet';
|
||||
import AddressList from './address-list';
|
||||
import Area from './area';
|
||||
import Badge from './badge';
|
||||
import BadgeGroup from './badge-group';
|
||||
@ -55,6 +56,7 @@ import Waterfall from './waterfall';
|
||||
const version = '0.9.7';
|
||||
const components = [
|
||||
Actionsheet,
|
||||
AddressList,
|
||||
Area,
|
||||
Badge,
|
||||
BadgeGroup,
|
||||
@ -121,6 +123,7 @@ export {
|
||||
install,
|
||||
version,
|
||||
Actionsheet,
|
||||
AddressList,
|
||||
Area,
|
||||
Badge,
|
||||
BadgeGroup,
|
||||
|
||||
@ -57,10 +57,10 @@ export default {
|
||||
},
|
||||
contentStyle() {
|
||||
return {
|
||||
left: -this.offsetWidth + 'px',
|
||||
transform: `translate3d(${-this.offsetWidth}px, 0, 0)`,
|
||||
transitionDelay: this.delay + 's',
|
||||
transitionDuration: this.duration + 's',
|
||||
transitionProperty: this.diableTransition ? 'none' : 'left'
|
||||
transitionProperty: this.diableTransition ? 'none' : 'all'
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
69
packages/vant-css/src/address-list.css
Normal file
69
packages/vant-css/src/address-list.css
Normal file
@ -0,0 +1,69 @@
|
||||
@import './common/var.css';
|
||||
|
||||
.van-address-list {
|
||||
height: 100%;
|
||||
|
||||
.van-cell__value {
|
||||
color: $text-color;
|
||||
padding-right: 34px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.van-radio__label {
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
.van-radio__input {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.van-icon-checked {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
&__group {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__address {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: $gray-darker;
|
||||
}
|
||||
|
||||
&__edit {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 4px;
|
||||
font-size: 24px;
|
||||
color: $gray-dark;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
&__add {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
padding-left: 15px;
|
||||
|
||||
.van-cell__text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.van-icon-add {
|
||||
color: $blue;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
/**
|
||||
* 基本样式入口
|
||||
* Entry of basic styles
|
||||
*/
|
||||
|
||||
@import "./common/var.css";
|
||||
|
||||
@ -25,9 +25,14 @@
|
||||
|
||||
.van-icon {
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
|
||||
@ -8,6 +8,7 @@ $van-checkbox-size: 18px;
|
||||
.van-icon-success {
|
||||
color: #fff;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
padding-left: 90px;
|
||||
}
|
||||
|
||||
&--hastextarea {
|
||||
&--has-textarea {
|
||||
.van-field__control {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/**
|
||||
* style entry
|
||||
* Entry of all component's style
|
||||
*/
|
||||
|
||||
/* base */
|
||||
@ -50,6 +50,7 @@
|
||||
@import './tree-select.css';
|
||||
|
||||
/* business components */
|
||||
@import './address-list.css';
|
||||
@import './coupon-list.css';
|
||||
@import './goods-action.css';
|
||||
@import './submit-bar.css';
|
||||
|
||||
@ -30,7 +30,6 @@
|
||||
&__content {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
transition-property: left;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
}
|
||||
|
||||
80
test/unit/specs/address-list.spec.js
Normal file
80
test/unit/specs/address-list.spec.js
Normal file
@ -0,0 +1,80 @@
|
||||
import { mount } from 'avoriaz';
|
||||
import AddressList from 'packages/address-list';
|
||||
|
||||
const list = [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000',
|
||||
address: '浙江省杭州市拱墅区莫干山路 50 号'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '王五',
|
||||
tel: '1320000000',
|
||||
address: '浙江省杭州市滨江区江南大道 15 号'
|
||||
}
|
||||
];
|
||||
|
||||
describe('AddressList', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a AddressList', () => {
|
||||
wrapper = mount(AddressList);
|
||||
expect(wrapper.hasClass('van-address-list')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a AddressList with three items', () => {
|
||||
wrapper = mount(AddressList, {
|
||||
propsData: {
|
||||
value: '1',
|
||||
list
|
||||
}
|
||||
});
|
||||
expect(wrapper.find('.van-address-list__group .van-cell').length).to.equal(3);
|
||||
expect(wrapper.find('.van-icon-checked').length).to.equal(1);
|
||||
});
|
||||
|
||||
it('listen to add & edit event', (done) => {
|
||||
wrapper = mount(AddressList, {
|
||||
propsData: {
|
||||
list
|
||||
}
|
||||
});
|
||||
|
||||
const add = sinon.spy();
|
||||
wrapper.vm.$on('add', add);
|
||||
wrapper.find('.van-address-list__add')[0].trigger('click');
|
||||
expect(add.calledOnce).to.be.true;
|
||||
|
||||
wrapper.vm.$on('edit', (item, index) => {
|
||||
expect(index).to.equal(0);
|
||||
done();
|
||||
});
|
||||
wrapper.find('.van-address-list__edit')[0].trigger('click');
|
||||
});
|
||||
|
||||
it('listen to change event', (done) => {
|
||||
wrapper = mount(AddressList, {
|
||||
propsData: {
|
||||
value: '1',
|
||||
list
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('change', (item, index) => {
|
||||
expect(item.id).to.equal('3');
|
||||
done();
|
||||
});
|
||||
wrapper.find('.van-radio')[2].trigger('click');
|
||||
});
|
||||
});
|
||||
@ -38,16 +38,12 @@ describe('Field', () => {
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-field')).to.be.true;
|
||||
expect(wrapper.data().currentValue).to.equal('test');
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
wrapper.vm.value = 'test2';
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.data().currentValue).to.equal('test2');
|
||||
expect(eventStub.calledWith('input'));
|
||||
expect(wrapper.find('.van-field__control')[0].element.value).to.equal('test2');
|
||||
done();
|
||||
});
|
||||
});
|
||||
@ -70,25 +66,6 @@ describe('Field', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('input something to field', (done) => {
|
||||
wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: ''
|
||||
}
|
||||
});
|
||||
|
||||
const input = wrapper.find('.van-field__control')[0];
|
||||
|
||||
input.element.value = 'test';
|
||||
input.trigger('input');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.data().currentValue).to.equal('test');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('create a textarea field', () => {
|
||||
wrapper = mount(Field, {
|
||||
propsData: {
|
||||
@ -98,7 +75,7 @@ describe('Field', () => {
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-field')).to.be.true;
|
||||
expect(wrapper.hasClass('van-field--hastextarea')).to.be.true;
|
||||
expect(wrapper.hasClass('van-field--has-textarea')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a autosize textarea field', (done) => {
|
||||
@ -109,6 +86,10 @@ describe('Field', () => {
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', val => {
|
||||
wrapper.vm.value = val;
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-field')).to.be.true;
|
||||
expect(wrapper.hasClass('van-field--autosize')).to.be.true;
|
||||
|
||||
@ -122,7 +103,7 @@ describe('Field', () => {
|
||||
|
||||
wrapper.update();
|
||||
setTimeout(() => {
|
||||
expect(wrapper.data().currentValue).to.equal('test');
|
||||
expect(wrapper.find('.van-field__control')[0].element.value).to.equal('test');
|
||||
expect(textareaElement.style.height).to.equal((textareaElement.scrollHeight - textAreaDiff) + 'px');
|
||||
done();
|
||||
}, 500);
|
||||
@ -136,6 +117,7 @@ describe('Field', () => {
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.van-field__icon')[0].trigger('touchstart');
|
||||
expect(wrapper.find('.van-field__icon').length).to.equal(1);
|
||||
});
|
||||
|
||||
@ -148,7 +130,7 @@ describe('Field', () => {
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.van-field__icon')[0].trigger('click');
|
||||
wrapper.find('.van-field__icon')[0].trigger('touchstart');
|
||||
expect(fn.calledOnce).to.be.true;
|
||||
});
|
||||
|
||||
|
||||
@ -7660,8 +7660,8 @@ yeast@0.1.2:
|
||||
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
|
||||
|
||||
zan-doc@^0.2.12:
|
||||
version "0.2.15"
|
||||
resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.2.15.tgz#f169ce77fce1323e257f7b5c674fc56092bf83ec"
|
||||
version "0.2.16"
|
||||
resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.2.16.tgz#dd458f0a807dea814b412a609679a63a20960077"
|
||||
dependencies:
|
||||
cheerio "0.22.0"
|
||||
decamelize "^1.2.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user