feat: NavBar component

2025-04-06 03:57:59 +08:00 · 2020-07-06 15:51:20 +08:00 · 2020-07-06 15:51:20 +08:00 · 6567b041b9
commit 6567b041b9
parent 1874b7af60
11 changed files with 522 additions and 16 deletions
--- a/breaking-changes.md
+++ b/breaking-changes.md
@ -1,9 +1,24 @@
 # 不兼容更新

-## Popup
+## 重命名徽标属性

- `v-model` 调整为 `v-model:show`
+在之前的版本中，我们通过 info 属性来展示图标右上角的徽标信息，为了表达更符合社区的命名习惯，我们将这个属性重命名为 badge，影响以下组件：

-## Switch
+- Tab
+- Icon
+- GridItem
+- TreeSelect
+- TabbarItem
+- SidebarItem
+- GoodsActionIcon

- v-model 对应的属性名和事件名由 `value/input` 调整为 `modelValue/update:modelValue`
+同时内部使用的 Info 组件也会重命名为 Badge。
+
+## v-model API 变更
+
+- Popup: `v-model` 调整为 `v-model:show`
+- Switch: v-model 对应的属性名和事件名由 `value/input` 调整为 `modelValue/update:modelValue`
+
+## 废弃个别组件
+
+- SwitchCell: 移除此组件，可以直接使用 Cell 和 Switch 组件代替
--- a/src-next/nav-bar/README.md
+++ b/src-next/nav-bar/README.md
@ -0,0 +1,80 @@
+# NavBar
+
+### Install
+
+```js
+import Vue from 'vue';
+import { NavBar } from 'vant';
+
+Vue.use(NavBar);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-nav-bar
+  title="Title"
+  left-text="Back"
+  right-text="Button"
+  left-arrow
+  @click-left="onClickLeft"
+  @click-right="onClickRight"
+/>
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+  methods: {
+    onClickLeft() {
+      Toast('Back');
+    },
+    onClickRight() {
+      Toast('Button');
+    },
+  },
+};
+```
+
+### Use Slot
+
+```html
+<van-nav-bar title="Title" left-text="Back" left-arrow>
+  <template #right>
+    <van-icon name="search" />
+  </template>
+</van-nav-bar>
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| title | Title | _string_ | `''` |
+| left-text | Left Text | _string_ | `''` |
+| right-text | Right Text | _string_ | `''` |
+| left-arrow | Whether to show left arrow | _boolean_ | `false` |
+| border | Whether to show bottom border | _boolean_ | `true` |
+| fixed | Whether to fixed top | _boolean_ | `false` |
+| placeholder `v2.5.9` | Whether to generage a placeholder element when fixed | _boolean_ | `false` |
+| z-index | Z-index | _number \| string_ | `1` |
+
+### Slots
+
+| Name  | Description               |
+| ----- | ------------------------- |
+| title | Custom title              |
+| left  | Custom left side content  |
+| right | Custom right side content |
+
+### Events
+
+| Event       | Description                       | Arguments |
+| ----------- | --------------------------------- | --------- |
+| click-left  | Triggered when click left button  | -         |
+| click-right | Triggered when click right button | -         |
--- a/src-next/nav-bar/README.zh-CN.md
+++ b/src-next/nav-bar/README.zh-CN.md
@ -0,0 +1,82 @@
+# NavBar 导航栏
+
+### 引入
+
+```js
+import Vue from 'vue';
+import { NavBar } from 'vant';
+
+Vue.use(NavBar);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<van-nav-bar
+  title="标题"
+  left-text="返回"
+  right-text="按钮"
+  left-arrow
+  @click-left="onClickLeft"
+  @click-right="onClickRight"
+/>
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+  methods: {
+    onClickLeft() {
+      Toast('返回');
+    },
+    onClickRight() {
+      Toast('按钮');
+    },
+  },
+};
+```
+
+### 使用插槽
+
+通过插槽自定义导航栏两侧的内容
+
+```html
+<van-nav-bar title="标题" left-text="返回" left-arrow>
+  <template #right>
+    <van-icon name="search" size="18" />
+  </template>
+</van-nav-bar>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 标题 | _string_ | `''` |
+| left-text | 左侧文案 | _string_ | `''` |
+| right-text | 右侧文案 | _string_ | `''` |
+| left-arrow | 是否显示左侧箭头 | _boolean_ | `false` |
+| border | 是否显示下边框 | _boolean_ | `true` |
+| fixed | 是否固定在顶部 | _boolean_ | `false` |
+| placeholder `v2.5.9` | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
+| z-index | 元素 z-index | _number \| string_ | `1` |
+
+### Slots
+
+| 名称  | 说明               |
+| ----- | ------------------ |
+| title | 自定义标题         |
+| left  | 自定义左侧区域内容 |
+| right | 自定义右侧区域内容 |
+
+### Events
+
+| 事件名      | 说明               | 回调参数 |
+| ----------- | ------------------ | -------- |
+| click-left  | 点击左侧按钮时触发 | -        |
+| click-right | 点击右侧按钮时触发 | -        |
--- a/src-next/nav-bar/demo/index.vue
+++ b/src-next/nav-bar/demo/index.vue
@ -0,0 +1,44 @@
+<template>
+  <demo-section>
+    <demo-block :title="t('basicUsage')">
+      <van-nav-bar
+        :title="t('title')"
+        :left-text="t('back')"
+        :right-text="t('button')"
+        left-arrow
+        @click-left="onClickLeft"
+        @click-right="onClickRight"
+      />
+    </demo-block>
+
+    <demo-block :title="t('useSlot')">
+      <van-nav-bar :title="t('title')" :left-text="t('back')" left-arrow>
+        <template #right>
+          <van-icon name="search" size="18" />
+        </template>
+      </van-nav-bar>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      useSlot: '使用插槽',
+    },
+    'en-US': {
+      useSlot: 'Use Slot',
+    },
+  },
+
+  methods: {
+    onClickLeft() {
+      this.$toast(this.t('back'));
+    },
+    onClickRight() {
+      this.$toast(this.t('button'));
+    },
+  },
+};
+</script>
--- a/src-next/nav-bar/index.js
+++ b/src-next/nav-bar/index.js
@ -0,0 +1,105 @@
+// Utils
+import { createNamespace } from '../utils';
+import { BORDER_BOTTOM } from '../utils/constant';
+
+// Components
+import Icon from '../icon';
+
+const [createComponent, bem] = createNamespace('nav-bar');
+
+export default createComponent({
+  props: {
+    title: String,
+    fixed: Boolean,
+    zIndex: [Number, String],
+    leftText: String,
+    rightText: String,
+    leftArrow: Boolean,
+    placeholder: Boolean,
+    border: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  emits: ['click-left', 'click-right'],
+
+  data() {
+    return {
+      height: null,
+    };
+  },
+
+  mounted() {
+    if (this.placeholder && this.fixed) {
+      this.height = this.$refs.navBar.getBoundingClientRect().height;
+    }
+  },
+
+  methods: {
+    genLeft() {
+      const leftSlot = this.$slots.left?.();
+
+      if (leftSlot) {
+        return leftSlot;
+      }
+
+      return [
+        this.leftArrow && <Icon class={bem('arrow')} name="arrow-left" />,
+        this.leftText && <span class={bem('text')}>{this.leftText}</span>,
+      ];
+    },
+
+    genRight() {
+      const rightSlot = this.$slots.right?.();
+
+      if (rightSlot) {
+        return rightSlot;
+      }
+
+      if (this.rightText) {
+        return <span class={bem('text')}>{this.rightText}</span>;
+      }
+    },
+
+    genNavBar() {
+      return (
+        <div
+          ref="navBar"
+          style={{ zIndex: this.zIndex }}
+          class={[bem({ fixed: this.fixed }), { [BORDER_BOTTOM]: this.border }]}
+        >
+          <div class={bem('left')} onClick={this.onClickLeft}>
+            {this.genLeft()}
+          </div>
+          <div class={[bem('title'), 'van-ellipsis']}>
+            {this.$slots.title ? this.$slots.title() : this.title}
+          </div>
+          <div class={bem('right')} onClick={this.onClickRight}>
+            {this.genRight()}
+          </div>
+        </div>
+      );
+    },
+
+    onClickLeft(event) {
+      this.$emit('click-left', event);
+    },
+
+    onClickRight(event) {
+      this.$emit('click-right', event);
+    },
+  },
+
+  render() {
+    if (this.placeholder && this.fixed) {
+      return (
+        <div class={bem('placeholder')} style={{ height: `${this.height}px` }}>
+          {this.genNavBar()}
+        </div>
+      );
+    }
+
+    return this.genNavBar();
+  },
+});
--- a/src-next/nav-bar/index.less
+++ b/src-next/nav-bar/index.less
@ -0,0 +1,66 @@
+@import '../style/var';
+
+.van-nav-bar {
+  position: relative;
+  z-index: @nav-bar-z-index;
+  display: flex;
+  align-items: center;
+  height: @nav-bar-height;
+  line-height: 1.5;
+  text-align: center;
+  background-color: @nav-bar-background-color;
+  user-select: none;
+
+  .van-icon {
+    color: @nav-bar-icon-color;
+  }
+
+  &__arrow {
+    min-width: 1em;
+    margin-right: @padding-base;
+    font-size: @nav-bar-arrow-size;
+  }
+
+  &--fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  &__title {
+    max-width: 60%;
+    margin: 0 auto;
+    color: @nav-bar-title-text-color;
+    font-weight: @font-weight-bold;
+    font-size: @nav-bar-title-font-size;
+  }
+
+  &__left,
+  &__right {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    padding: 0 @padding-md;
+    font-size: @font-size-md;
+    cursor: pointer;
+
+    &:active {
+      opacity: @active-opacity;
+    }
+  }
+
+  &__left {
+    left: 0;
+  }
+
+  &__right {
+    right: 0;
+  }
+
+  &__text {
+    color: @nav-bar-text-color;
+  }
+}
--- a/src-next/nav-bar/test/snapshots/demo.spec.js.snap
+++ b/src-next/nav-bar/test/snapshots/demo.spec.js.snap
@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-nav-bar van-hairline--bottom">
+      <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
+          <!----></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">
+      <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
+          <!----></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="font-size: 18px;">
+          <!----></i></div>
+    </div>
+  </div>
+</div>
+`;
--- a/src-next/nav-bar/test/snapshots/index.spec.js.snap
+++ b/src-next/nav-bar/test/snapshots/index.spec.js.snap
@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`placeholder prop 1`] = `
+<div class="van-nav-bar__placeholder" style="height: 50px;">
+  <div class="van-nav-bar van-nav-bar--fixed van-hairline--bottom">
+    <div class="van-nav-bar__left"></div>
+    <div class="van-nav-bar__title van-ellipsis"></div>
+    <div class="van-nav-bar__right"></div>
+  </div>
+</div>
+`;
+
+exports[`render left & right slot 1`] = `
+<div class="van-nav-bar van-hairline--bottom">
+  <div class="van-nav-bar__left">Custom Left</div>
+  <div class="van-nav-bar__title van-ellipsis"></div>
+  <div class="van-nav-bar__right">Custom Right</div>
+</div>
+`;
+
+exports[`render title slot 1`] = `
+<div class="van-nav-bar van-hairline--bottom">
+  <div class="van-nav-bar__left"></div>
+  <div class="van-nav-bar__title van-ellipsis">Custom Title</div>
+  <div class="van-nav-bar__right"></div>
+</div>
+`;
--- a/src-next/nav-bar/test/demo.spec.js
+++ b/src-next/nav-bar/test/demo.spec.js
@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
--- a/src-next/nav-bar/test/index.spec.js
+++ b/src-next/nav-bar/test/index.spec.js
@ -0,0 +1,60 @@
+import NavBar from '..';
+import { mount, mockGetBoundingClientRect } from '../../../test';
+
+test('render left & right slot', () => {
+  const wrapper = mount(NavBar, {
+    scopedSlots: {
+      left: () => 'Custom Left',
+      right: () => 'Custom Right',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render title slot', () => {
+  const wrapper = mount(NavBar, {
+    scopedSlots: {
+      title: () => 'Custom Title',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('placeholder prop', () => {
+  const restore = mockGetBoundingClientRect({ height: 50 });
+
+  const wrapper = mount(NavBar, {
+    propsData: {
+      fixed: true,
+      placeholder: true,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+
+  restore();
+});
+
+test('click-left event', () => {
+  const wrapper = mount(NavBar, {
+    propsData: {
+      leftText: 'left',
+    },
+  });
+
+  wrapper.find('.van-nav-bar__left').trigger('click');
+  expect(wrapper.emitted('click-left')).toBeTruthy();
+});
+
+test('click-right event', () => {
+  const wrapper = mount(NavBar, {
+    propsData: {
+      rightText: 'right',
+    },
+  });
+
+  wrapper.find('.van-nav-bar__right').trigger('click');
+  expect(wrapper.emitted('click-right')).toBeTruthy();
+});
--- a/vant.config.js
+++ b/vant.config.js
@ -294,10 +294,10 @@ module.exports = {
              //   path: 'index-bar',
              //   title: 'IndexBar 索引栏',
              // },
-              // {
-              //   path: 'nav-bar',
-              //   title: 'NavBar 导航栏',
-              // },
+              {
+                path: 'nav-bar',
+                title: 'NavBar 导航栏',
+              },
              // {
              //   path: 'pagination',
              //   title: 'Pagination 分页',
@ -432,10 +432,10 @@ module.exports = {
                path: 'col',
                title: 'Layout',
              },
-              // {
-              //   path: 'popup',
-              //   title: 'Popup',
-              // },
+              {
+                path: 'popup',
+                title: 'Popup',
+              },
              {
                path: 'style',
                title: 'Built-in style',
@ -628,10 +628,10 @@ module.exports = {
              //   path: 'index-bar',
              //   title: 'IndexBar',
              // },
-              // {
-              //   path: 'nav-bar',
-              //   title: 'NavBar',
-              // },
+              {
+                path: 'nav-bar',
+                title: 'NavBar',
+              },
              // {
              //   path: 'pagination',
              //   title: 'Pagination',