mirror of
https://github.com/youzan/vant.git
synced 2025-10-22 11:54:02 +00:00
[improvement] Tab: extract title component (#3634)
This commit is contained in:
82
packages/tabs/Title.js
Normal file
82
packages/tabs/Title.js
Normal file
@@ -0,0 +1,82 @@
|
||||
import { use } from '../utils';
|
||||
|
||||
const bem = use('tab')[1];
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: String,
|
||||
color: String,
|
||||
title: String,
|
||||
active: Boolean,
|
||||
ellipsis: Boolean,
|
||||
disabled: Boolean,
|
||||
scrollable: Boolean,
|
||||
activeColor: String,
|
||||
inactiveColor: String,
|
||||
swipeThreshold: Number
|
||||
},
|
||||
|
||||
computed: {
|
||||
style() {
|
||||
const style = {};
|
||||
const { color, active } = this;
|
||||
const isCard = this.type === 'card';
|
||||
|
||||
// card theme color
|
||||
if (color && isCard) {
|
||||
style.borderColor = color;
|
||||
|
||||
if (!this.disabled) {
|
||||
if (active) {
|
||||
style.backgroundColor = color;
|
||||
} else {
|
||||
style.color = color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const titleColor = active ? this.activeColor : this.inactiveColor;
|
||||
if (titleColor) {
|
||||
style.color = titleColor;
|
||||
}
|
||||
|
||||
if (this.scrollable && this.ellipsis) {
|
||||
style.flexBasis = `${88 / this.swipeThreshold}%`;
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click');
|
||||
},
|
||||
|
||||
renderTitle(el) {
|
||||
const { title } = this.$refs;
|
||||
title.innerHTML = '';
|
||||
title.appendChild(el);
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
return (
|
||||
<div
|
||||
role="tab"
|
||||
aria-selected={this.active}
|
||||
class={bem({
|
||||
active: this.active,
|
||||
disabled: this.disabled,
|
||||
complete: !this.ellipsis
|
||||
})}
|
||||
style={this.style}
|
||||
onClick={this.onClick}
|
||||
>
|
||||
<span ref="title" class={{ 'van-ellipsis': this.ellipsis }}>
|
||||
{this.title}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
Reference in New Issue
Block a user