blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] NavBar: jsx (#2541)

Browse Source
This commit is contained in:
neverland 2019-01-16 21:17:16 +08:00 committed by GitHub
parent 7ed9a5352f
commit 3f60e4701b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
packages/nav-bar/index.js Normal file
View File

@ -0,0 +1,53 @@
import { use } from '../utils';
import Icon from '../icon';
const [sfc, bem] = use('nav-bar');
export default sfc({
props: {
title: String,
fixed: Boolean,
leftText: String,
rightText: String,
leftArrow: Boolean,
border: {
type: Boolean,
default: true
},
zIndex: {
type: Number,
default: 1
}
},
render(h) {
return (
<div
class={[bem({ fixed: this.fixed }), { 'van-hairline--bottom': this.border }]}
style={{ zIndex: this.zIndex }}
>
<div
class={bem('left')}
onClick={() => {
this.$emit('click-left');
}}
>
{this.$slots.left || [
this.leftArrow && <Icon class={bem('arrow')} name="arrow-left" />,
this.leftText && <span class={bem('text')}>{this.leftText}</span>
]}
</div>
<div class={[bem('title'), 'van-ellipsis']}>{this.$slots.title || this.title}</div>
<div
class={bem('right')}
onClick={() => {
this.$emit('click-right');
}}
>
{this.$slots.right ||
(this.rightText && <span class={bem('text')}>{this.rightText}</span>)}
</div>
</div>
);
}
});

74
packages/nav-bar/index.vue
View File

@ -1,74 +0,0 @@
<template>
<div
:class="[b({ fixed }), { 'van-hairline--bottom': border }]"
:style="style"
>
<div
:class="b('left')"
@click="$emit('click-left')"
>
<slot name="left">
<icon
v-if="leftArrow"
:class="b('arrow')"
name="arrow-left"
/>
<span
v-if="leftText"
v-text="leftText"
:class="b('text')"
/>
</slot>
</div>
<div
:class="b('title')"
class="van-ellipsis"
>
<slot name="title">{{ title }}</slot>
</div>
<div
:class="b('right')"
@click="$emit('click-right')"
>
<slot name="right">
<span
v-if="rightText"
v-text="rightText"
:class="b('text')"
/>
</slot>
</div>
</div>
</template>
<script>
import create from '../utils/create';
export default create({
name: 'nav-bar',
props: {
title: String,
fixed: Boolean,
leftText: String,
rightText: String,
leftArrow: Boolean,
border: {
type: Boolean,
default: true
},
zIndex: {
type: Number,
default: 1
}
},
computed: {
style() {
return {
zIndex: this.zIndex
};
}
}
});
</script>

8
packages/nav-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -5,16 +5,16 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-nav-bar van-hairline--bottom" style="z-index:1;">
<div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow" style="color:undefined;font-size:undefined;">
<!----></i> <span class="van-nav-bar__text">返回</span></div>
<div class="van-ellipsis van-nav-bar__title">标题</div>
<!----></i><span class="van-nav-bar__text">返回</span></div>
<div class="van-nav-bar__title van-ellipsis">标题</div>
<div class="van-nav-bar__right"><span class="van-nav-bar__text">按钮</span></div>
</div>
</div>
<div>
<div class="van-nav-bar van-hairline--bottom" style="z-index:1;">
<div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow" style="color:undefined;font-size:undefined;">
<!----></i> <span class="van-nav-bar__text">返回</span></div>
<div class="van-ellipsis van-nav-bar__title">标题</div>
<!----></i><span class="van-nav-bar__text">返回</span></div>
<div class="van-nav-bar__title van-ellipsis">标题</div>
<div class="van-nav-bar__right"><i class="van-icon van-icon-search" style="color:undefined;font-size:undefined;">
<!----></i></div>
</div>