refactor(nav-bar): refactor nav-bar

re Tencent#347
TingShine · Oct 10, 2022 · 3338bf9 · 3338bf9
1 parent d51ab81
commit 3338bf9
Show file tree

Hide file tree

Showing 9 changed files with 269 additions and 104 deletions.
diff --git a/src/navbar/demos/base.vue b/src/navbar/demos/base.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="tdesign-demo-block">
-      <t-navbar> 界面标题 </t-navbar>
+      <t-navbar title="标题" />
     </div>
   </div>
 </template>

diff --git a/src/navbar/demos/event.vue b/src/navbar/demos/event.vue
@@ -1,10 +1,9 @@
 <template>
   <div>
     <div class="tdesign-demo-block">
-      <t-navbar @click-text="onClickText" @click-right="onClickMore">
-        界面标题
-        <template #left>
-          <t-icon name="close" @click="onClickLeft"></t-icon>
+      <t-navbar title="标题" home-icon @home-click="onClickHome">
+        <template #right-icon>
+          <t-ellipsis-icon @click="onClickRight" />
         </template>
       </t-navbar>
     </div>
@@ -13,24 +12,22 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { EllipsisIcon as TEllipsisIcon } from 'tdesign-icons-vue-next';
 
 export default defineComponent({
+  components: { TEllipsisIcon },
   setup() {
-    return {};
-  },
-  methods: {
-    onClickMore() {
-      this.$toast('Click More');
-      console.log('on click more');
-    },
-    onClickText() {
-      this.$toast('Click Text');
-      console.log('on click Text');
-    },
-    onClickLeft() {
-      this.$toast('Click close');
-      console.log('on click left');
-    },
+    const onClickHome = () => {
+      console.log('on click home');
+    };
+    const onClickRight = () => {
+      console.log('on click right');
+    };
+
+    return {
+      onClickHome,
+      onClickRight,
+    };
   },
 });
 </script>
diff --git a/src/navbar/demos/icon.vue b/src/navbar/demos/icon.vue
@@ -1,16 +1,15 @@
 <template>
   <div>
     <div class="tdesign-demo-block">
-      <t-navbar>
-        导航栏 - 带icon
-        <template #right>
-          <sound-icon></sound-icon>
+      <t-navbar title="导航栏 - 带icon" left-icon home-icon>
+        <template #right-icon>
+          <ellipsis-icon />
         </template>
       </t-navbar>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { SoundIcon } from 'tdesign-icons-vue-next';
+import { EllipsisIcon } from 'tdesign-icons-vue-next';
 </script>
diff --git a/src/navbar/demos/mobile.vue b/src/navbar/demos/mobile.vue
@@ -1,24 +1,31 @@
 <template>
-  <div class="t-navbar-base-demo">
-    <p class="divide-line"></p>
-    <t-navbar :right-show="false">界面标题</t-navbar>
-    <p class="divide-line"></p>
-    <t-navbar :right-show="false">
-      <template #left>
-        <t-icon size="24px" name="close" />
-      </template>
-      界面标题
-      <template #right>
-        <t-icon size="24px" name="app" />
-      </template>
-    </t-navbar>
-    <p class="divide-line"></p>
-    <t-navbar>
-      界面标题
-      <template #right>
-        <t-icon size="24px" name="app" />
-      </template>
-    </t-navbar>
+  <div class="tdesign-mobile-demo">
+    <h1 class="title">NavBar 导航栏</h1>
+    <p class="summary">用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。</p>
+    <tdesign-demo-block title="01 类型" summary="基础导航栏">
+      <t-navbar title="标题" left-icon @left-click="handleClick"> </t-navbar>
+    </tdesign-demo-block>
+
+    <tdesign-demo-block summary="左侧双操作导航栏">
+      <t-navbar title="标题">
+        <template #left-icon>
+          <t-icon size="24px" name="chevron-left" class="btn-left" />
+          <t-icon size="24px" name="close" />
+        </template>
+        <template #right-icon>
+          <t-icon size="24px" name="ellipsis" />
+        </template>
+      </t-navbar>
+    </tdesign-demo-block>
+
+    <tdesign-demo-block summary="右侧双操作导航栏">
+      <t-navbar title="标题" left-icon>
+        <template #right-icon>
+          <t-icon size="24px" name="notification" class="btn-left" />
+          <t-icon size="24px" name="ellipsis" />
+        </template>
+      </t-navbar>
+    </tdesign-demo-block>
   </div>
 </template>
 
@@ -41,6 +48,12 @@ export default defineComponent({
       Toast('Click close');
       console.log('on click left');
     },
+    handleClick() {
+      console.log('yes');
+    },
+    handleHomeClick() {
+      console.log('home');
+    },
   },
 });
 </script>
@@ -51,4 +64,8 @@ export default defineComponent({
   height: 24px;
   background: #f9f9f9;
 }
+
+.btn-left {
+  margin-right: 8px;
+}
 </style>
diff --git a/src/navbar/navbar.en-US.md b/src/navbar/navbar.en-US.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+### Navbar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+animation | Boolean | true | \- | N
+background | String | - | background | N
+fixed | Boolean | true | \- | N
+homeIcon | Boolean / Slot / Function | - | homeIcon。Typescript：`boolean | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+leftIcon | Boolean / Slot / Function | false | Typescript：`boolean | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+rightIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+title | String / Slot / Function | - | page title。Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+titleMaxLength | Number | - | \- | N
+visible | Boolean | true | \- | N
+onHomeClick | Function |  | Typescript：`() => void`<br/> | N
+onLeftClick | Function |  | Typescript：`() => void`<br/> | N
+
+### Navbar Events
+
+name | params | description
+-- | -- | --
+home-click | \- | \-
+left-click | \- | \-
diff --git a/src/navbar/navbar.md b/src/navbar/navbar.md
@@ -1,25 +1,25 @@
 :: BASE_DOC ::
 
 ## API
+### Navbar Props
 
-| 属性      | 类型    | 默认值 | 必传 | 说明                        |
-| --------- | ------- | ------ | ---- | --------------------------- |
-| title     | String  | 导航栏 | N    | 标题文字                    |
-| leftArrow | Boolean | true   | N    | 是否展示左箭头              |
-| maxLen    | Number  | 6      | N    | 标题文字长度，多余展示`...` |
-| rightShow | Boolean  | true    | N    | 是否展示右侧更多按钮 |
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+animation | Boolean | true | 是否添加动画效果 | N
+background | String | - | 背景 | N
+fixed | Boolean | true | 是否固定在顶部 | N
+homeIcon | Boolean / Slot / Function | - | 首页图标。值为 true 表示显示默认返回图标，值为 false 表示不显示首页图标，值为其他表示自定义图标。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+leftIcon | Boolean / Slot / Function | false | 左侧图标。值为 true 表示显示默认返回图标，值为 false 表示不显示左侧图标，值为其他表示自定义图标。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+rightIcon | Slot / Function | - | 右侧图标，可自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+title | String / Slot / Function | - | 页面标题。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+titleMaxLength | Number | - | 标题文字最大长度，超出的范围使用 `...` 表示 | N
+visible | Boolean | true | 是否显示 | N
+onHomeClick | Function |  | TS 类型：`() => void`<br/>点击 home 图标时触发 | N
+onLeftClick | Function |  | TS 类型：`() => void`<br/>点击左边按钮时触发 | N
 
-## Event
+### Navbar Events
 
-| 事件名      | 说明              | 回调参数 |
-| ----------- | ----------------- | -------- |
-| click-right | 点击右侧更多 icon | event    |
-| click-text  | 点击标题文字      | event    |
-
-## Slot
-
-| 插槽名 | 说明             |
-| ------ | ---------------- |
-| left   | 自定义左侧关闭按钮 |
-| right   | 自定义右侧icon |
-| -   | 默认title文案 |
+名称 | 参数 | 描述
+-- | -- | --
+home-click | \- | 点击 home 图标时触发
+left-click | \- | 点击左边按钮时触发
diff --git a/src/navbar/navbar.vue b/src/navbar/navbar.vue
@@ -1,82 +1,93 @@
 <template>
-  <div :class="name">
-    <div :class="`${name}__back`">
-      <span v-if="leftArrow" :class="`${name}__back--arrow`" @click="handleBack">
+  <div v-show="visible" :class="name" :style="`background: ${background || ''}`">
+    <div v-if="leftIcon || homeIcon || leftContent" :class="`${name}__back`">
+      <span v-if="leftIcon" :class="`${name}__back--arrow`" @click="handleBack">
         <t-chevron-left-icon />
       </span>
-      <slot name="left"> </slot>
+      <span v-if="homeIcon" :class="`${name}__back--arrow`" @click="handleHomeClick">
+        <t-home-icon />
+      </span>
+      <t-node :content="leftContent"></t-node>
     </div>
 
-    <div :class="`${name}__text`" @click="clickText">
-      <slot>{{ nTitleContent }}</slot>
+    <div :class="`${name}__text`">
+      <t-node :content="titleContent"></t-node>
     </div>
 
     <div :class="`${name}__right`">
-      <slot name="right"> </slot>
-      <i v-if="rightShow" :class="`${name}__right--more`" @click="handleMore">
-        <svg
-          t="1614321969302"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="2091"
-          width="24"
-          height="24"
-        >
-          <path
-            d="M512 449.749333a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m-318.805333-1.109333a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m638.677333 0a64 64 0 1 1 0 128 64 64 0 0 1 0-128z"
-            fill="#444444"
-            p-id="2092"
-          ></path>
-        </svg>
-      </i>
+      <t-node :content="rightContent"></t-node>
     </div>
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, SetupContext } from 'vue';
-import { ChevronLeftIcon as TChevronLeftIcon } from 'tdesign-icons-vue-next';
+import { computed, defineComponent, getCurrentInstance, SetupContext, toRefs } from 'vue';
+import { ChevronLeftIcon as TChevronLeftIcon, HomeIcon as THomeIcon } from 'tdesign-icons-vue-next';
 import config from '../config';
-import { NavbarProps } from './navbar.interface';
+import { renderTNode, TNode, isNumber, useEmitEvent } from '../shared';
+import NavbarProps from './props';
 
 const { prefix } = config;
 const name = `${prefix}-navbar`;
 
 export default defineComponent({
   name,
-  components: { TChevronLeftIcon },
+  components: { TChevronLeftIcon, TNode, THomeIcon },
   props: NavbarProps,
-  emits: ['click-right', 'click-text'],
+  emits: ['click-text', 'home-click'],
   setup(props, context: SetupContext) {
-    const nTitleContent = computed(() => {
-      const { title, maxLen } = props;
-      if (title && title.trim().length > maxLen) {
-        return `${title.slice(0, maxLen)}...`;
+    const internalInstance = getCurrentInstance();
+    const { title, titleMaxLength } = toRefs(props);
+
+    const titleContent = computed(() => {
+      if (titleMaxLength.value != null && title.value) {
+        if (!isNumber(titleMaxLength.value)) {
+          console.warn('titleMaxLength must be number');
+        } else if (titleMaxLength.value <= 0) {
+          console.warn('titleMaxLength must be greater than 0');
+        } else {
+          return title.value.length <= titleMaxLength.value
+            ? props.title
+            : `${(title.value as string).slice(0, titleMaxLength.value)}...`;
+        }
       }
-      return title;
+
+      return renderTNode(internalInstance, 'title');
     });
 
+    const leftContent = computed(() => renderTNode(internalInstance, 'left-icon'));
+    const rightContent = computed(() => renderTNode(internalInstance, 'right-icon'));
+
+    const emitEvent = useEmitEvent(props, context.emit);
+
     const handleBack = () => {
+      emitEvent('left-click');
+
       if (history.length > 1) {
         history.back();
       }
     };
 
-    const handleMore = (evt: MouseEvent) => {
+    const handleHomeClick = () => {
+      emitEvent('home-click');
+    };
+
+    const handleRightClick = (evt: MouseEvent) => {
       context.emit('click-right', evt);
     };
 
-    const clickText = (evt: MouseEvent) => {
+    const handleTitleClick = (evt: MouseEvent) => {
       context.emit('click-text', evt);
     };
 
     return {
       name,
-      nTitleContent,
+      titleContent,
+      leftContent,
+      rightContent,
       handleBack,
-      handleMore,
-      clickText,
+      handleRightClick,
+      handleTitleClick,
+      handleHomeClick,
     };
   },
 });