mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'feature/tabs_lazyload' into 'master'
Feature/tabs lazyload review一下 See merge request !9
This commit is contained in:
zhangmin
commit
9bb76ae8cd
@ -22,6 +22,9 @@
|
||||
"badge": "./packages/badge/index.js",
|
||||
"search": "./packages/search/index.js",
|
||||
"step": "./packages/step/index.js",
|
||||
"tabs": "./packages/tabs/index.js",
|
||||
"tab": "./packages/tab/index.js",
|
||||
"lazyload": "./packages/lazyload/index.js",
|
||||
"image-preview": "./packages/image-preview/index.js",
|
||||
"col": "./packages/col/index.js",
|
||||
"row": "./packages/row/index.js",
|
||||
|
||||
126
docs/examples-docs/tab.md
Normal file
126
docs/examples-docs/tab.md
Normal file
@ -0,0 +1,126 @@
|
||||
## Tab 组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-tabs>
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
```
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
popalert() {
|
||||
alert('haha')
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
:::
|
||||
### 禁用用法
|
||||
:::demo 禁用用法
|
||||
```html
|
||||
<zan-tabs>
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab disable title="选项二" @disable="popalert">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
popalert() {
|
||||
alert('haha')
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### card样式用法
|
||||
:::demo card样式用法
|
||||
```html
|
||||
<zan-tabs type="card">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
```
|
||||
:::
|
||||
<style>
|
||||
.page-tab {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.custom-tabwrap .zan-tab-active{
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar{
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-tab {
|
||||
font-weight: bold;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
### 自定义样式用法
|
||||
:::demo 自定义样式用法
|
||||
```html
|
||||
<zan-tabs active="2" navclass="custom-tabwrap">
|
||||
<zan-tab title="选项一" class="custom-pane">内容一</zan-tab>
|
||||
<zan-tab title="选项二" class="custom-pane">内容二</zan-tab>
|
||||
<zan-tab title="选项三" class="custom-pane">内容三</zan-tab>
|
||||
<zan-tab title="选项四" class="custom-pane">内容四</zan-tab>
|
||||
<zan-tab title="选项五" class="custom-pane">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<style>
|
||||
.page-tab {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.custom-tabwrap .zan-tab-active{
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar{
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-tab {
|
||||
font-weight: bold;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### zan-tabs API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| classtype | 两种UI | string | line | card |
|
||||
| active | 默认激活的tab | string || number | 0 | |
|
||||
| navclass | tabs的内部nav上的自定义classname | string | '' | |
|
||||
|
||||
|
||||
### zan-tab API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | tab的标题 | string | '' | required |
|
||||
| disable | 是否禁用这个tab | Boolean | false | |
|
||||
|
||||
49
docs/examples/tab.vue
Normal file
49
docs/examples/tab.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="page-tab">
|
||||
<h1 class="page-title">Tab</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法line</h2>
|
||||
<zan-tabs>
|
||||
<zan-tab tab-key="0" title="选项一">内容一</zan-tab>
|
||||
<zan-tab tab-key="1" title="选项二">内容二</zan-tab>
|
||||
<zan-tab tab-key="2" title="选项三">内容三</zan-tab>
|
||||
<zan-tab tab-key="3" title="选项四">内容四</zan-tab>
|
||||
<zan-tab tab-key="4" title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
|
||||
<h2 class="page-sub-title" style="margin-top: 50px;">基础用法card</h2>
|
||||
<zan-tabs class-type="card">
|
||||
<zan-tab tab-key="0" title="选项一">内容一</zan-tab>
|
||||
<zan-tab tab-key="1" title="选项二">内容二</zan-tab>
|
||||
|
||||
</zan-tabs>
|
||||
|
||||
<h2 class="page-sub-title" style="margin-top: 50px;">自定义样式用法</h2>
|
||||
<zan-tabs active-tab-key="2" tabs-class-name="custom-tabwrap" tab-class-name="custom-tab">
|
||||
<zan-tab tab-key="0" title="选项一" tab-pane-class-name="custom-pane"><div class="test">内容一</div></zan-tab>
|
||||
<zan-tab tab-key="1" title="选项二" tab-pane-class-name="custom-pane">内容二</zan-tab>
|
||||
<zan-tab tab-key="2" title="选项三" tab-pane-class-name="custom-pane">内容三</zan-tab>
|
||||
<zan-tab tab-key="3" title="选项四" tab-pane-class-name="custom-pane">内容四</zan-tab>
|
||||
<zan-tab tab-key="4" title="选项五" tab-pane-class-name="custom-pane">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.page-tab {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.custom-tabwrap .zan-tab-active{
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar{
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-tab {
|
||||
font-weight: bold;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
8
packages/lazyload/CHANGELOG.md
Normal file
8
packages/lazyload/CHANGELOG.md
Normal file
@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
26
packages/lazyload/README.md
Normal file
26
packages/lazyload/README.md
Normal file
@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
79
packages/lazyload/index.js
Normal file
79
packages/lazyload/index.js
Normal file
@ -0,0 +1,79 @@
|
||||
export default {
|
||||
install: function(Vue, options) {
|
||||
options = options || { fade: false, nohori: false };
|
||||
// scroll结束的时候触发scrollend事件
|
||||
var timer = null;
|
||||
var topValue = 0;
|
||||
var bodyEle = document.body;
|
||||
var scrollEnd = document.createEvent('HTMLEvents');
|
||||
scrollEnd.initEvent('scrollEnd', true, false);
|
||||
function enterFrame() {
|
||||
if (bodyEle.scrollTop === topValue) {
|
||||
window.cancelAnimationFrame(timer);
|
||||
window.dispatchEvent(scrollEnd);
|
||||
} else {
|
||||
topValue = bodyEle.scrollTop;
|
||||
}
|
||||
window.requestAnimationFrame(enterFrame);
|
||||
}
|
||||
document.addEventListener('scroll', function() {
|
||||
if (!timer) {
|
||||
timer = window.requestAnimationFrame(enterFrame);
|
||||
}
|
||||
}, true);
|
||||
// vue指令
|
||||
function update(value) {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
var isFadeIn = this.modifiers.fade || options.fade;
|
||||
var isNoHori = this.modifiers.nohori || options.nohori;
|
||||
// 用css3来控制过渡效果
|
||||
if (isFadeIn) {
|
||||
this.el.style.opacity = 0;
|
||||
this.el.style.transition = 'opacity .3s';
|
||||
this.el.style.webkitTransition = 'opacity .3s';
|
||||
}
|
||||
var compute = function() {
|
||||
if (this.el === null) {
|
||||
return;
|
||||
}
|
||||
var rect = this.el.getBoundingClientRect();
|
||||
var vpWidth = document.head.parentNode.clientWidth;
|
||||
var vpHeight = document.head.parentNode.clientHeight;
|
||||
var loadImg = function() {
|
||||
this.el.src = value;
|
||||
this.el.addEventListener('load', onloadEnd);
|
||||
window.removeEventListener('scrollEnd', compute, true);
|
||||
window.removeEventListener('resize', compute, true);
|
||||
}.bind(this);
|
||||
if (this.el.src === value) return;
|
||||
if (isNoHori) {
|
||||
if (rect.bottom >= 0 && rect.top <= vpHeight) {
|
||||
loadImg();
|
||||
}
|
||||
} else if (rect.bottom >= 0 && rect.top <= vpHeight && rect.right >= 0 && rect.left <= vpWidth) {
|
||||
loadImg();
|
||||
}
|
||||
}.bind(this);
|
||||
var onload = function() {
|
||||
compute();
|
||||
this.el && this.el.removeEventListener('load', onload);
|
||||
window.addEventListener('scrollEnd', compute, true);
|
||||
window.addEventListener('resize', compute, true);
|
||||
}.bind(this);
|
||||
var onloadEnd = function() {
|
||||
if (this.el === null) {
|
||||
return;
|
||||
}
|
||||
if (isFadeIn) {
|
||||
this.el.style.opacity = 1;
|
||||
}
|
||||
this.el.removeEventListener('load', onloadEnd);
|
||||
}.bind(this);
|
||||
// 元素load触发事件
|
||||
this.el.addEventListener('load', onload);
|
||||
}
|
||||
Vue.directive('lazyload', update);
|
||||
}
|
||||
};
|
||||
10
packages/lazyload/package.json
Normal file
10
packages/lazyload/package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
8
packages/tab/CHANGELOG.md
Normal file
8
packages/tab/CHANGELOG.md
Normal file
@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
26
packages/tab/README.md
Normal file
26
packages/tab/README.md
Normal file
@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
2
packages/tab/index.js
Normal file
2
packages/tab/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
import Tab from './src/tab';
|
||||
export default Tab;
|
||||
10
packages/tab/package.json
Normal file
10
packages/tab/package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
27
packages/tab/src/tab.vue
Normal file
27
packages/tab/src/tab.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="zan-tabs-pane" :class="classNames">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-tab',
|
||||
props: {
|
||||
// 选项卡头显示文字
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
disable: Boolean
|
||||
},
|
||||
computed: {
|
||||
classNames() {
|
||||
return { 'is-select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$parent.tabs.push(this);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
79
packages/tab/src/tabs.vue
Normal file
79
packages/tab/src/tabs.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="zan-tabs">
|
||||
<div class="zan-tabs-nav" :class="classNames">
|
||||
<div class="zan-tabs-nav-bar" :style="navBarStyle"></div>
|
||||
<div
|
||||
v-for="(tab, index) in tabs"
|
||||
class="zan-tab"
|
||||
:class="{'zan-tab-active': index == switchActiveTabKey}"
|
||||
ref="tabkey"
|
||||
@click="handleTabClick(index,tab)"
|
||||
>
|
||||
{{ tab.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="zan-tabs-content"><slot></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-tabs',
|
||||
props: {
|
||||
// 外部传入的激活的tab标签
|
||||
active: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 是默认的line还是card
|
||||
type: {
|
||||
type: String,
|
||||
default: 'line'
|
||||
},
|
||||
// nav的wrap的样式
|
||||
navclass: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: [],
|
||||
isReady: false,
|
||||
switchActiveTabKey: this.active
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classNames() {
|
||||
return [`zan-tabs-${this.type}`, this.navclass];
|
||||
},
|
||||
navBarStyle() {
|
||||
if (!this.isReady) return;
|
||||
const tabKey = this.switchActiveTabKey;
|
||||
const elem = this.$refs.tabkey[tabKey];
|
||||
const offsetWidth = `${elem.offsetWidth || 0}px`;
|
||||
const offsetLeft = `${elem.offsetLeft || 0}px`;
|
||||
return {
|
||||
width: offsetWidth,
|
||||
transform: `translate3d(${offsetLeft}, 0px, 0px)`
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTabClick(index, el) {
|
||||
if (el.disable) {
|
||||
el.$emit('disable');
|
||||
return;
|
||||
}
|
||||
this.switchActiveTabKey = index;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 页面载入完成
|
||||
this.$nextTick(() => {
|
||||
// 可以开始触发在computed中关于nav-bar的css动画
|
||||
this.isReady = true;
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
3
packages/tabs/index.js
Normal file
3
packages/tabs/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import Tabs from '../tab/src/tabs';
|
||||
|
||||
export default Tabs;
|
||||
@ -18,6 +18,7 @@
|
||||
@import './steps.css';
|
||||
@import './tag.css';
|
||||
@import './checkbox.css';
|
||||
@import './tab.css';
|
||||
@import './col.css';
|
||||
@import './row.css';
|
||||
@import './image_preview.css';
|
||||
|
||||
100
packages/zanui-css/src/tab.css
Normal file
100
packages/zanui-css/src/tab.css
Normal file
@ -0,0 +1,100 @@
|
||||
@import "./common/var.css";
|
||||
@import "./mixins/border_retina.css";
|
||||
@component-namespace zan {
|
||||
@b tabs {
|
||||
position: relative;
|
||||
}
|
||||
@b tabs-line {
|
||||
height: 44px;
|
||||
background-color: $c-white;
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
@b tabs-nav-bar {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@b tabs-card {
|
||||
height: 28px;
|
||||
margin: 0 15px;
|
||||
background-color: $c-white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #666666;
|
||||
overflow: hidden;
|
||||
.zan-tabs-nav-bar {
|
||||
display: none;
|
||||
}
|
||||
.zan-tab {
|
||||
color: #666666;
|
||||
line-height: 28px;
|
||||
border-right: 1px solid #666666;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
&.zan-tab-active {
|
||||
background-color: #666666;
|
||||
color: $c-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@b tabs-nav {
|
||||
display: flex;
|
||||
transition: transform .5s cubic-bezier(.645, .045, .355, 1);
|
||||
position: relative;
|
||||
/*float: left*/
|
||||
&::after, &::before {
|
||||
display: table;
|
||||
content: " "
|
||||
}
|
||||
&::after {
|
||||
clear: both
|
||||
}
|
||||
}
|
||||
@b tabs-nav-bar {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: #f13e3a;
|
||||
transition: transform .3s cubic-bezier(.645, .045, .355, 1);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
@b tab {
|
||||
color: $c-black;
|
||||
font-size: 14px;
|
||||
line-height: 44px;
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
transition: color .3s cubic-bezier(.645, .045, .355, 1);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
@b tab-active {
|
||||
color: #FF4444;
|
||||
}
|
||||
@b tabs-pane {
|
||||
display: none;
|
||||
@when select {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -21,6 +21,9 @@ import BadgeGroup from '../packages/badge-group/index.js';
|
||||
import Badge from '../packages/badge/index.js';
|
||||
import Search from '../packages/search/index.js';
|
||||
import Step from '../packages/step/index.js';
|
||||
import Tabs from '../packages/tabs/index.js';
|
||||
import Tab from '../packages/tab/index.js';
|
||||
import Lazyload from '../packages/lazyload/index.js';
|
||||
import ImagePreview from '../packages/image-preview/index.js';
|
||||
import Col from '../packages/col/index.js';
|
||||
import Row from '../packages/row/index.js';
|
||||
@ -50,6 +53,8 @@ const install = function(Vue) {
|
||||
Vue.component(Badge.name, Badge);
|
||||
Vue.component(Search.name, Search);
|
||||
Vue.component(Step.name, Step);
|
||||
Vue.component(Tabs.name, Tabs);
|
||||
Vue.component(Tab.name, Tab);
|
||||
Vue.component(Col.name, Col);
|
||||
Vue.component(Row.name, Row);
|
||||
Vue.component(Actionsheet.name, Actionsheet);
|
||||
@ -86,6 +91,9 @@ module.exports = {
|
||||
Badge,
|
||||
Search,
|
||||
Step,
|
||||
Tabs,
|
||||
Tab,
|
||||
Lazyload,
|
||||
ImagePreview,
|
||||
Col,
|
||||
Row,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user