多彩宝移动端 UI 组件库

# NavBar

# 基础渲染

标题



tab1tab2 
<template>
  <div>
    <d-nav-bar title="标题" :safe-top="true" @back="handleClick('back')"/>
    <br/>
    <d-nav-bar :safe-top="false" @back="handleClick('back')"/>
    <br/>
    <d-nav-bar :safe-top="false" @back="handleClick('back')">
      <template #action>
        <d-icon name="search" @click="handleClick('search')"/>
      </template>
    </d-nav-bar>
    <br/>
    <d-nav-bar
      :safe-top="false"
      :tab="tab"
      @back="handleClick('back')"
      @tabIndex="index => handleClick(index)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tab: ['tab1', 'tab2'],
    };
  },
  methods: {
    handleClick(name) {
      alert(name);
    },
  },
};
</script>

<style lang="scss">
.d-icon-search {
  font-size: 22px;
}
</style>

# 使用按钮/ICON

返回
标题
文字按钮

返回
标题
按钮

标题

标题

标题

标题
描述

<template>
  <div>
    <d-nav-bar
      title="标题"
      leftText="返回"
      :safe-top="false"
      @back="handleClick('back')"
    >
      <template #action>
        <span @click="handleClick('按钮')">文字按钮</span>
      </template>
    </d-nav-bar>
    <br/>
    <d-nav-bar
      title="标题"
      leftText="返回"
      :safe-top="false"
      @back="handleClick('back')"
    >
      <template #action>
        <div class="link">
          <d-icon name="link" @click="handleClick('link')"/>
          <span @click="handleClick('按钮')">按钮</span>
        </div>
      </template>
    </d-nav-bar>
    <br/>
    <d-nav-bar
      share
      close
      title="标题"
      :safe-top="false"
      @back="handleClick('back')"
      @share="handleClick('share')"
      @close="handleClick('close')"
    />
    <br/>
    <d-nav-bar
      close
      title="标题"
      :safe-top="false"
      @back="handleClick('back')"
      @close="handleClick('close')"
    />
    <br/>
    <d-nav-bar
      service
      share
      title="标题"
      :safe-top="false"
      @back="handleClick('back')"
      @share="handleClick('share')"
      @service="handleClick('service')"
    />
    <br/>
    <d-nav-bar title="标题" :safe-top="false" @back="handleClick('back')">
      <template #action>
        <div class="service" @click="handleClick('service')">
          <d-icon name="service"/>
          <span>描述</span>
        </div>
      </template>
    </d-nav-bar>
    <br/>
    <d-nav-bar :safe-top="false" @back="handleClick('back')">
      <template #tab>
        <img
          src="http://dcb-frontend.oss-cn-chengdu.aliyuncs.com/img/COUPON.png"
        />
      </template>
    </d-nav-bar>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(name) {
      alert(name);
    },
  },
};
</script>
<style lang="scss">
.service {
  color: #018ff0;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 20px;
  display: flex;

  i {
    margin-right: 6px;
    font-size: 22px;
  }
}

.link {
  @extend .service;
  color: #202020;
}
</style>

# 使用搜索


搜索关键词

观山湖区
搜索关键词

购物车
<template>
  <div>
    <d-nav-bar
      search
      :shamSearch="false"
      :safe-top="false"
      @back="handleClick"
      @searchVal="searchVal"
    />
    <br/>
    <d-nav-bar
      search
      search-bg-color="rgba(255, 255, 255, 0.41)"
      background="linear-gradient(270deg, #FD9A78 0%, #FFA117 51%, #FF7B69 100%)"
      :safe-top="false"
      @back="handleClick"
      @search="handleSearch"
    />
    <br/>
    <d-nav-bar
      :site="site"
      search
      search-bg-color="rgba(255, 255, 255, 0.41)"
      background="linear-gradient(270deg, #FD9A78 0%, #FFA117 51%, #FF7B69 100%)"
      :safe-top="false"
      @back="handleClick"
      @search="handleSearch"
      @areaConfirm="confirm"
      @areaChange="change"
    />
    <br/>
    <d-nav-bar
      search
      :safe-top="false"
      @back="handleClick"
      @search="handleSearch"
      @areaConfirm="confirm"
      @areaChange="change"
    >
      <template #search>
        <div class="nav-search-div">
          <div class="nav-search">
            <d-icon name="search"/>
            <input placeholder="搜索关键词"/>
          </div>
          <span class="nav-search-custom">
            <d-icon name="cart_fill"/>
            <span>购物车</span>
          </span>
        </div>
      </template>
    </d-nav-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      site: '观山湖区',
    };
  },
  methods: {
    handleClick() {
      alert('hello');
    },

    handleSearch() {
      alert('search');
    },
    change(cal) {
      console.log(cal);
    },
    confirm({province, city, country}) {
      this.site = city.districtSimpleName;
      // 选择区划确认赋值
      console.log(
        [
          province.districtSimpleName,
          city.districtSimpleName,
          country.districtSimpleName,
        ].join(''),
      );
    },
    searchVal(v) {
      console.log(v);
    },
  },
};
</script>
<style lang="scss">
.nav-search-div {
  width: 100%;
  display: flex;
  align-items: center;

  .nav-search {
    background-color: rgb(245, 245, 245);
    border-radius: 50px;
    display: flex;
    align-items: center;
    flex: 1;
    padding: 7px 12px;
    margin-left: 12px;

    i {
      color: rgba(104, 106, 110, 1);
      flex: 0 0 22px;
      font-size: 22px;
      height: 22px;
      line-height: 22px;
      width: 22px;
    }

    input {
      font-family: inherit; /* 1 */
      margin: 0; /* 2 */
      -webkit-appearance: none;
      -webkit-tap-highlight-color: rgba(255, 0, 0, 0); // 移除移动端阴影
      border: 0;
      background: none;
      padding-left: 4px;
      color: rgba(104, 106, 110, 1);
      outline: none;

      &::placeholder {
        color: rgba(104, 106, 110, 1);
        font-size: 14px;
        height: 22px;
        line-height: 22px;
      }
    }

    &-custom {
      padding: 0 12px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #018ff0;
      line-height: 20px;
    }
  }
}
</style>

# 自定义颜色

标题

标题

标题 
<template>
  <div>
    <d-nav-bar
      background="linear-gradient(270deg, #FD9A78 0%, #FFA117 51%, #FF7B69 100%)"
      title="标题"
      share
      close
      :safe-top="false"
      @back="handleClick('back')"
      @share="handleClick('share')"
      @close="handleClick('close')"
    />
    <br />
    <d-nav-bar
      background="rgba(22, 187, 191, 1)"
      title="标题"
      share
      close
      :safe-top="false"
      @back="handleClick('back')"
      @share="handleClick('share')"
      @close="handleClick('close')"
    />
    <br />
    <d-nav-bar
      background="rgba(0, 0, 0, 1)"
      title="标题"
      share
      close
      :safe-top="false"
      @back="handleClick('back')"
      @share="handleClick('share')"
      @close="handleClick('close')"
    />
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(text) {
      alert(text);
    },
  },
};
</script>

# # API

# # 属性

名称 说明 类型 默认值
title
导航标题 string
tab
tab菜单，最多只能放2个 array function _default() { return []; }
leftText
左侧文案 string
rightText
右侧文案 string
search
是否展示搜索 boolean false
shamSearch
是否展示虚假输入框 boolean true
site
是否展示搜索 string
siteOption
地址配置项 object function _default() { return { visible: false, addressText: '', province: [{ districtCode: 1, districtSimpleName: '北京' }, { districtCode: 2, districtSimpleName: '广西' }, { districtCode: 3, districtSimpleName: '江西' }, { districtCode: 4, districtSimpleName: '岫岩满族自治县' }], // 省 city: [{ districtCode: 7, districtSimpleName: '朝阳区' }, { districtCode: 8, districtSimpleName: '崇文区' }, { districtCode: 9, districtSimpleName: '昌平区' }, { districtCode: 6, districtSimpleName: '岫岩满族自治县' }], // 市 country: [{ districtCode: 3, districtSimpleName: '八里庄街道' }, { districtCode: 9, districtSimpleName: '北苑' }, { districtCode: 4, districtSimpleName: '岫岩满族自治县' }] // 县 }; }
placeholder
搜索默认提示文案 string 搜索关键词
share
是否展示分享 boolean false
more
是否展示更多 boolean false
service
是否展示客服 boolean false
close
是否展示关闭 boolean false
background
导航背景色 string
color
导航栏文案/icon颜色 string
searchBgColor
搜索框背景色 string rgba(245, 245, 245, 1)
fixed
是否浮动布局 boolean false
safeTop
刘海屏安全区，非多彩宝环境设置为false boolean true

# # 插槽

名称 说明 参数
default 自定义导航 无
tab 自定义title位置的标题（当title传值了此插槽不生效） 无
action 自定义操作 无
left 自定义左侧区域内容 无
search 自定义搜索栏 无

# # 事件

名称 说明 参数
back 返回 无
close 关闭 无
share 分享 无
search shamSearch为true时无返回值，反之则返回当前input中的value（回车事件也会触发该方法） 无
searchBlur 搜索失去焦点
名称 说明 类型
event event object
searchFocus 搜索获取焦点
名称 说明 类型
event event object
searchChange 搜索value值改变
名称 说明 类型
value 当前的搜索值 string

# # 贡献者

无

← NavBarPage 滑动渐变导航栏页面 →