Merge pull request #352 from liqiong-lab/next

Next

src/config.ts

@@ -109,6 +109,15 @@ export const nav = [
     name: '导航组件',
     packages: [
       {
+        name: 'Navbar',
+        sort: 3,
+        cName: '导航组件',
+        type: 'componment',
+        show: true,
+        desc: '导航组件',
+        author: 'liqiong43'
+      },
+      {
         name: 'tab',
         sort: 1,
         cName: '标签组件',

src/packages/navbar/demo.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</h2>
+    <nut-navbar leftShow title="订单详情" icon="share"></nut-navbar>
+    <nut-navbar leftShow title="浏览记录" desc="清空"></nut-navbar>
+    <!-- 是否支持自定义属性titIcon -->
+    <nut-navbar :leftShow="false" title="购物车" titIcon="locationg3" desc="编辑" icon="more"></nut-navbar>
+    <h2>增加tab及右侧按钮</h2>
+    <nut-navbar title="商品" desc="编辑" icon="horizontal"></nut-navbar>
+    <h2>多tab切换导航</h2>
+    <nut-navbar title="商品" icon="more"></nut-navbar>
+  </div>
+</template>
+
+<script lang="ts">
+import { createComponent } from '@/utils/create';
+const { createDemo } = createComponent('navbar');
+export default createDemo({
+  props: {},
+  setup() {
+    const testClick = (event: Event) => {
+      alert(event);
+    };
+    return { testClick };
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/packages/navbar/doc.md

@@ -0,0 +1,57 @@
+# Navbar 头部导航
+
+### 介绍 
+
+
+提供导航功能。
+
+### 安装
+
+```javascript
+
+import { createApp } from 'vue';
+import { Navbar } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Navbar);
+
+```
+
+### 代码示例
+
+### 基本用法
+
+```html
+    <nut-navbar leftShow title="订单详情" icon="share"></nut-navbar>
+    <nut-navbar leftShow title="浏览记录" desc="清空"></nut-navbar>
+    <nut-navbar :leftShow="false" title="购物车" titIcon="locationg3" desc="编辑" icon="more"></nut-navbar>
+```
+
+### 增加tab及右侧按钮
+
+```html
+    <nut-navbar title="商品" titIcon="locationg3" desc="编辑" icon="horizontal"></nut-navbar>
+```
+
+### 多tab切换导航
+
+```html
+    <nut-navbar title="商品" titIcon="locationg3" icon="more"></nut-navbar>
+```
+
+### 链接
+
+### 展示图标
+
+### API
+
+### Prop
+
+| 字段            | 说明                                                                                           | 类型    | 默认值  |
+|-----------------|------------------------------------------------------------------------------------------------|---------|---------|
+| title           | 标题名称                                                                                       | String  | -       |
+| desc            | 右侧描述                                                                                       | String  | -       |
+| leftShow        | 是否展示左侧箭头                                                                              | Boolean | false   |
+| icon            | 左侧 [图标名称](#/icon) 或图片链接                                                             | String  | -       |
+
+### Event

src/packages/navbar/index.scss

@@ -0,0 +1,83 @@
+.nut-navbar {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  height: 44px;
+  padding: 13px 16px;
+  background: $white;
+  box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
+  font-size: $cell-title-font;
+  color: $cell-color;
+  margin: 10px 0;
+  &:active::before {
+    opacity: 0.1;
+  }
+  &--clickable {
+    cursor: pointer;
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      height: 100%;
+      background-color: $black;
+      border: inherit;
+      border-color: $black;
+      border-radius: inherit;
+      transform: translate(-50%, -50%);
+      opacity: 0;
+      content: ' ';
+    }
+  }
+
+  .nutui-iconfont {
+    .nut-icon-left {
+      text-align: left;
+    }
+  }
+
+  &__title {
+    max-width: 60%;
+    margin: 0 auto;
+    &.icon {
+      .icon {
+        margin-right: 10px;
+        margin-left: 8px;
+      }
+    }
+    &-desc {
+      font-size: $cell-title-desc-font;
+    }
+  }
+  &__left {
+    font-size: $cell-desc-font;
+    color: $cell-desc-color;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 0 16px;
+
+    left: 0;
+  }
+  &__right {
+    font-size: $cell-desc-font;
+    color: $cell-desc-color;
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+
+    right: 0;
+    padding: 0 16px;
+    cursor: pointer;
+  }
+}

src/packages/navbar/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <view :class="classes" @click="handleClick">
+    <slot>
+      <!-- 左侧  icon-->
+      <view class="nut-navbar__left">
+        <nut-icon v-if="leftShow" color="#979797" name="left"></nut-icon>
+      </view>
+
+      <!-- 中间  title/icon/多个title-->
+      <view class="nut-navbar__title" :class="{ icon: icon }" v-if="title || titIcon">
+        <view v-if="title">{{ title }}</view>
+        <nut-icon v-if="titIcon" class="icon" :name="titIcon"></nut-icon>
+      </view>
+
+      <!-- 右侧  title/icon/多个tit/多个icon-->
+      <view class="nut-navbar__right" :class="{ icon: icon }" v-if="desc || icon">
+        <view v-if="desc" :style="{ 'text-align': descTextAlign }">{{ desc }}</view>
+        <view> <nut-icon v-if="icon" class="icon" :name="icon"></nut-icon></view>
+      </view>
+    </slot>
+  </view>
+</template>
+
+<script lang="ts">
+import { computed } from 'vue';
+import { createComponent } from '@/utils/create';
+import { useRouter } from 'vue-router';
+import Icon from '@/packages/icon/index.vue';
+const { componentName, create } = createComponent('navbar');
+
+export default create({
+  props: {
+    title: { type: String, default: '' },
+    leftShow: { type: Boolean, default: true },
+    icon: { type: String, default: '' },
+    desc: { type: String, default: '' },
+    titIcon: { type: String, default: '' }
+  },
+  components: {
+    [Icon.name]: Icon
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}--clickable`]: props.leftShow
+      };
+    });
+    const router = useRouter();
+
+    return {
+      //handleClick,
+      classes
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>