demo 原始链接:https://vux.li/demos/v2/#/component/x-header
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <br>\n <x-header>This is the page title.</x-header>\n <br>\n <x-header title=\"use prop:title\"></x-header>\n <br>\n <x-header :left-options=\"{showBack: false}\">do not show Back</x-header>\n <br>\n <x-header :left-options=\"{backText: ''}\">set empty back text</x-header>\n <br>\n <x-header :right-options=\"{showMore: true}\" @on-click-more=\"showMenus = true\">with more menu</x-header>\n <br>\n <x-header>with right link<a slot=\"right\">Feedback</a></x-header>\n <br>\n <x-header>long long long long long long long text<a slot=\"right\">Feedback</a></x-header>\n <br>\n <x-header>with left slot<a slot=\"left\">Close</a></x-header>\n <br>\n <x-header>\n <span>overwrite-left</span>\n <x-icon slot=\"overwrite-left\" type=\"navicon\" size=\"35\" style=\"fill:#fff;position:relative;top:-8px;left:-3px;\"></x-icon>\n </x-header>\n <br>\n <x-header style=\"background-color:#000;\">custom background color</x-header>\n <br>\n <x-header title=\"slot:overwrite-title\">\n <div class=\"overwrite-title-demo\" slot=\"overwrite-title\">\n <button-tab>\n <button-tab-item selected>A</button-tab-item>\n <button-tab-item>B</button-tab-item>\n </button-tab>\n </div>\n </x-header>\n <div v-transfer-dom>\n <actionsheet :menus=\"menus\" v-model=\"showMenus\" show-cancel></actionsheet>\n </div>\n </div>\n</template>\n\n<script>\nimport { XHeader, Actionsheet, TransferDom, ButtonTab, ButtonTabItem } from 'vux'\n\nexport default {\n directives: {\n TransferDom\n },\n components: {\n XHeader,\n Actionsheet,\n ButtonTab,\n ButtonTabItem\n },\n data () {\n return {\n menus: {\n menu1: 'Take Photo',\n menu2: 'Choose from photos'\n },\n showMenus: false\n }\n }\n}\n</script>\n\n<style>\n.overwrite-title-demo {\n margin-top: 5px;\n}\n</style>\n\n
\n