导航栏 NavBar
左侧渲染
<za-nav-bar>
<div slot="left">
<za-icon theme="primary" type="arrow-left" @click="clickHandle"></za-icon>
</div>
<div slot="title">这是标题</div>
<div slot="right"></div>
</za-nav-bar>
右侧渲染
<za-nav-bar>
<div slot="left"></div>
<div slot="title">这是标题</div>
<div slot="right">
<za-icon theme="primary" type="question-round" @click="clickHandle"></za-icon>
</div>
</za-nav-bar>
复数渲染
<za-nav-bar>
<div slot="left">
<za-icon theme="primary" type="arrow-left" @click="clickHandle"></za-icon>
</div>
<div slot="title">这是标题</div>
<div slot="right">
<za-icon theme="primary" type="add" @click="clickHandle"></za-icon>
<za-icon theme="primary" type="question-round" @click="clickHandle"></za-icon>
</div>
</za-nav-bar>
Vue Script
<script name="vue">
export default {
data() {
return {
}
},
methods: {
clickHandle() {
alert('clickHandle');
},
},
};
</script>
API
NavBar Attributes
属性 | 类型 | 默认值 | 可选值/参数 | 说明 |
---|---|---|---|---|
title | html | 导航栏标题渲染 | ||
slot="left" | html | 导航栏左侧渲染 | ||
slot="right" | html | 导航栏右侧渲染 |