[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-sidebar
|
||||
:active-key="activeKey"
|
||||
@change="onChange"
|
||||
>
|
||||
<van-sidebar-item :title="$t('title')" />
|
||||
<van-sidebar-item
|
||||
:title="$t('title')"
|
||||
info="8"
|
||||
/>
|
||||
<van-sidebar-item
|
||||
:title="$t('title')"
|
||||
info="99"
|
||||
/>
|
||||
<van-sidebar-item
|
||||
:title="$t('title')"
|
||||
info="99+"
|
||||
/>
|
||||
</van-sidebar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title: '标签名称'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-sidebar {
|
||||
.van-sidebar {
|
||||
width: auto;
|
||||
margin: 0 15px;
|
||||
padding: 20px 0;
|
||||
background-color: @white;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.van-sidebar-item {
|
||||
width: 85px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
# Sidebar
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { Sidebar, SidebarItem } from 'vant';
|
||||
|
||||
Vue.use(Sidebar);
|
||||
Vue.use(SidebarItem);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
Use `active-key` prop to set index of chosen item
|
||||
|
||||
```html
|
||||
<van-sidebar :active-key="activeKey" @change="onChange">
|
||||
<van-sidebar-item title="Title" />
|
||||
<van-sidebar-item title="Title" info="8" />
|
||||
<van-sidebar-item title="Title" info="99" />
|
||||
<van-sidebar-item title="Title" info="99+" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Sidebar Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| active-key | Index of chosen item | `String | Number` | `0` |
|
||||
|
||||
### Sidebar Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| change | Triggered when item changed | key: index of current item |
|
||||
|
||||
### SidebarItem Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| title | Content | `String` | `''` |
|
||||
| info | Info Message | `String | Number` | `''` |
|
||||
| url | Link | `String` | - |
|
||||
|
||||
### SidebarItem Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click item | key: index of current item |
|
||||
@@ -0,0 +1,19 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { ParentMixin } from '../mixins/relation';
|
||||
|
||||
const [createComponent, bem] = createNamespace('sidebar');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [ParentMixin('vanSidebar')],
|
||||
|
||||
props: {
|
||||
activeKey: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
return <div class={[bem(), 'van-hairline--top-bottom']}>{this.slots()}</div>;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-sidebar {
|
||||
width: @sidebar-width;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-sidebar van-hairline--top-bottom"><a class="van-sidebar-item van-sidebar-item--select van-hairline">
|
||||
<div class="van-sidebar-item__text">标签名称
|
||||
<!---->
|
||||
</div>
|
||||
</a> <a class="van-sidebar-item van-hairline">
|
||||
<div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">8</div>
|
||||
</div>
|
||||
</a> <a class="van-sidebar-item van-hairline">
|
||||
<div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99</div>
|
||||
</div>
|
||||
</a> <a class="van-sidebar-item van-hairline">
|
||||
<div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99+</div>
|
||||
</div>
|
||||
</a></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,39 @@
|
||||
import { mount } from '../../../test/utils';
|
||||
import Sidebar from '..';
|
||||
import SidebarItem from '../../sidebar-item';
|
||||
|
||||
test('event', () => {
|
||||
const onClick = jest.fn();
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<sidebar @change="onChange">
|
||||
<sidebar-item @click="onClick">Text</sidebar-item>
|
||||
</sidebar>
|
||||
`,
|
||||
components: {
|
||||
Sidebar,
|
||||
SidebarItem
|
||||
},
|
||||
methods: {
|
||||
onClick,
|
||||
onChange
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.van-sidebar-item').trigger('click');
|
||||
expect(onClick).toHaveBeenCalledWith(0);
|
||||
expect(onChange).toHaveBeenCalledWith(0);
|
||||
wrapper.vm.$destroy();
|
||||
});
|
||||
|
||||
test('without parent', () => {
|
||||
const consoleError = console.error;
|
||||
try {
|
||||
console.error = jest.fn();
|
||||
mount(Sidebar);
|
||||
} catch (err) {
|
||||
console.error = consoleError;
|
||||
expect(err).toBeTruthy();
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,69 @@
|
||||
# Sidebar 侧边导航
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
import { Sidebar, SidebarItem } from 'vant';
|
||||
|
||||
Vue.use(Sidebar);
|
||||
Vue.use(SidebarItem);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过在`van-sidebar`上设置`active-key`属性来控制选中项
|
||||
|
||||
```html
|
||||
<van-sidebar :active-key="activeKey" @change="onChange">
|
||||
<van-sidebar-item title="标签名称" />
|
||||
<van-sidebar-item title="标签名称" info="8" />
|
||||
<van-sidebar-item title="标签名称" info="99" />
|
||||
<van-sidebar-item title="标签名称" info="99+" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Sidebar Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| active-key | 当前导航项的索引 | `String | Number` | `0` | - |
|
||||
|
||||
### Sidebar Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| change | 切换当前导航项时触发 | key: 当前导航项的索引 |
|
||||
|
||||
### SidebarItem Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| title | 内容 | `String` | `''` | - |
|
||||
| info | 提示消息 | `String | Number` | `''` | - |
|
||||
| url | 跳转链接 | `String` | - | - |
|
||||
|
||||
### SidebarItem Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | key: 当前导航项的索引 |
|
||||
Reference in New Issue
Block a user