@tanzhenxing/zx-toolbar NPM

zx-toolbar 工具条

介绍

zx-toolbar 是一个常用于页面顶部或底部的工具操作条组件。通常用于展示标题、取消和确认等操作按钮。

基本用法

基础示例

<template>
  <zx-toolbar 
    title="标题" 
    @cancel="onCancel" 
    @confirm="onConfirm"
  />
</template>

<script setup>
const onCancel = () => {
  console.log('点击取消');
}

const onConfirm = () => {
  console.log('点击确认');
}
</script>

自定义文字和颜色

<template>
  <zx-toolbar 
    title="自定义文字和颜色" 
    cancelText="返回" 
    confirmText="提交" 
    cancelColor="#ff5500" 
    confirmColor="#07c160"
  />
</template>

使用插槽自定义内容

<template>
  <zx-toolbar>
    <template #left>
      <view class="custom-left">
        <zx-icon name="arrow-left" size="20"></zx-icon>
        <text>返回</text>
      </view>
    </template>
    
    <template #center>
      <view class="custom-title">
        <zx-icon name="home" size="18"></zx-icon>
        <text>自定义标题</text>
      </view>
    </template>
    
    <template #right>
      <view class="custom-right">
        <zx-button type="primary" size="mini">提交</zx-button>
      </view>
    </template>
  </zx-toolbar>
</template>

自定义样式

<template>
  <zx-toolbar 
    title="自定义样式" 
    :customStyle="{ 
      backgroundColor: '#f8f8f8', 
      borderBottom: '1px solid #eee' 
    }"
  />
</template>

API

Props

参数	说明	类型	默认值
show	是否展示工具条	Boolean	true
cancelText	取消按钮的文字	String	'取消'
confirmText	确认按钮的文字	String	'确认'
cancelColor	取消按钮的颜色	String	'#2b85e4'
confirmColor	确认按钮的颜色	String	'#2b85e4'
title	标题文字	String	''
customStyle	自定义样式	Object	{}
bgColor	背景颜色	String	'#ffffff'

Events

事件名	说明	回调参数
cancel	点击取消按钮时触发	-
confirm	点击确认按钮时触发	-

Slots

名称	说明
left	自定义左侧内容
center	自定义中间内容
right	自定义右侧内容

常见问题

如何在页面底部固定工具条？

可以通过外层容器定位来实现：

<template>
  <view class="footer-toolbar">
    <zx-toolbar title="底部工具条" />
  </view>
</template>

<style>
.footer-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 如果有安全区域需求，可以配合 zx-safe-bottom 组件使用 */
}
</style>

zx-toolbar uni-app 工具栏工具栏组件工具栏功能

1 month ago

2 months ago

11 months ago