Avue.js Documentation

Avue provides a wide range of data-driven components and business capabilities:

Core Components:

• Forms & Tables: avue-form, avue-crud, avue-search
• Input Components: avue-input, avue-select, avue-input-tree, avue-input-table
• Business Components: avue-login, avue-tabs, avue-tree, avue-chat, avue-flow
• Data Display: avue-card, avue-comment, avue-count-up, avue-article

Plugin Capabilities: Export, Print, Screenshot, Clipboard, Watermark, Logs, Image Preview, and Dialog Forms.

Avue.js requires vue >= 3.2.0, element-plus >= 2.2.0, and @element-plus/icons-vue >= 2.0.0 as peer dependencies. You must install these along with @smallwei/avue.

pnpm add vue element-plus @element-plus/icons-vue @smallwei/avue

Or using npm:

npm install vue element-plus @element-plus/icons-vue @smallwei/avue

Or using yarn:

yarn add vue element-plus @element-plus/icons-vue @smallwei/avue

To use Avue, install it as a Vue plugin using app.use(Avue, options). You must also import the Element Plus styles and Avue's own CSS files.

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import Avue from "@smallwei/avue";
import "@smallwei/avue/lib/index.css";
import App from "./App.vue";

const app = createApp(App);

app.use(ElementPlus);
app.use(Avue, {
  size: "default",
  menuType: "text",
  locale: "zh-cn",
});

app.mount("#app");

The tree component is a wrapper around Element Plus's tree component, enhanced with CRUD capabilities (add, edit, delete) via a context menu and integrated form dialogs. It supports lazy loading, drag-and-drop, and filtering.

Key features include:

• CRUD Operations: Right-click a node to show a menu for adding, editing, or deleting nodes.
• Integrated Forms: Uses avue-form within a dialog for data entry.
• Permission Control: Supports fine-grained control over menu items using a permission prop.
• Method Proxying: Most underlying el-tree methods are proxied directly to the Avue component instance.

Avue Upload can automatically trigger image processing if the file is an image and specific options are provided:

1. Cropping: If cropperOption is provided, the component will open an image cropper (using $ImageCropper) before the upload proceeds.
2. Watermarking: If cropperOption is not provided but canvasOption is, the component will apply a watermark (using detailImg) to the image before upload.

Note: These features are triggered automatically during the httpUpload process for image files.

The chat component includes a built-in upload dialog for images, videos, and files.

1. User clicks an upload icon (controlled by tools prop).
2. An el-dialog appears asking for the resource URL/address.
3. Upon clicking submit, the component emits the @submit event with a detail object.

Upload Detail Object

When @submit is triggered by an upload, it returns an object containing:

• type: 'img', 'video', 'file', or 'map'.
• src: The source URL/path.
• name: (For files) The filename.
• address, latitude, longitude: (For maps) Location metadata.

Customizing Upload Behavior

You can intercept the upload process using the beforeOpen prop. This function receives the upload parameters and a done callback to allow for custom logic (like opening a file picker) before proceeding.

The component supports inline cell editing. When a cell is clicked for editing, the component manages a buffer of the row data to allow for cancellation or updates.

• rowCellEdit(row, index): Switches a row into editing mode.
• rowCellUpdate(row, index): Validates the edited fields and then emits either @row-save (if the row is new) or @row-update (if the row exists).
• rowCancel(row, index): Reverts the changes made during the current editing session.

When using cell editing, the component emits @row-save or @row-update with done and loading callbacks to manage the UI state during asynchronous API calls.

Avue Form provides several slot naming conventions to allow deep customization of form elements:

To enable remote searching in the mention component, set the remote prop to true.

When the user types, the component calls handleRemoteMethod, which internally uses sendDic. This utility sends a request containing the column (from the component's context) and the current value (the query string). The component then updates its internal netDic with the response, which is mapped to the suggestion list via the options computed property.

Note: The column property must be available on the component instance (likely provided via mixins) for sendDic to function correctly.

When install is called, Avue attaches several global properties and plugins to the Vue application instance:

Global Properties

• $AVUE: The configuration object used during installation.
• $axios: The axios instance (defaults to the one bundled with Avue if not provided in install).
• $uploadFun: A helper to retrieve upload hooks from a column definition.
• $DialogForm: Plugin for dialog-based forms.
• $ImagePreview: Plugin for image preview functionality.
• $Export: Plugin for data export.
• $Print: Plugin for printing.
• $Clipboard: Plugin for clipboard operations.
• $Watermark: Plugin for adding watermarks.
• $Log: Plugin for logging.
• $Screenshot: Plugin for taking screenshots.

Directives

• v-contextmenu: A directive for handling custom context menus.

The dynamic component allows you to switch between a list of forms (showType: 'form') or a full CRUD table (showType: 'crud'). It manages a collection of data items, providing built-in support for adding and deleting rows.

Key behaviors:

• Form Mode: Renders a vertical list of avue-form components, one for each item in the data array.
• CRUD Mode: Renders an avue-crud component using the provided data.
• Row Management: Supports adding rows via addRow() and deleting rows via delRow(index). You can intercept these actions using the rowAdd and rowDel callback props.