ACT组件文档

推荐查看git文档： https://github.com/apicloudcom/act/blob/main/widget/components/act/readme.md

Button 按钮

介绍

按钮用于触发一个操作，如提交表单。

引入

import AButton from "../../components/act/a-button.stml";

代码示例

按钮类型

按钮支持 default 、 primary 、 success 、 warning 、 danger 五种类型， 默认为 default 。

<a-button type="primary">主要按钮</a-button>
<a-button type="success">成功按钮</a-button>
<a-button type="default">默认按钮</a-button>
<a-button type="warning">警告按钮</a-button>
<a-button type="danger">危险按钮</a-button>

朴素按钮

通过 plain 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<a-button plain type="primary">主要按钮</a-button>
<a-button plain type="success">成功按钮</a-button>
<a-button plain type="warning">警告按钮</a-button>
<a-button plain type="danger">危险按钮</a-button>

细边框

设置 hairline 属性可以展示 0.5px 的细边框。

 <a-button plain hairline type="primary">主要按钮</a-button>
 <a-button plain hairline type="success">成功按钮</a-button>

禁用状态

通过 disabled 属性来禁用按钮，禁用状态下按钮不可点击。

<a-button disabled type="primary">主要按钮</a-button>
<a-button disabled type="success">成功按钮</a-button>

按钮形状

通过 square 设置方形按钮，通过 round 设置圆形按钮。

<a-button square type="primary">主要按钮</a-button>
<a-button round type="success">成功按钮</a-button>

按钮图标

通过 icon 属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。

<a-button icon="search" type="primary"/>
<a-button icon="add" type="success"/>
<a-button plain icon="https://img.yzcdn.cn/vant/user-active.png" type="primary"/>

按钮尺寸

支持 large、normal、small、mini 四种尺寸，默认为 normal。

 <a-button type="primary" size="large">大号按钮</a-button>
 <a-button type="primary" size="normal">普通按钮</a-button>
 <a-button type="primary" size="small">小型按钮</a-button>
 <a-button type="primary" size="mini">迷你按钮</a-button>

API

props 属性

参数 说明 类型 默认值
type 类型，可选值为 primary success warning danger string default
size 尺寸，可选值为 large small mini string normal

icon |左侧图标名称或图片链接| string| - plain |是否为朴素按钮 |boolean |false square |是否为方形按钮 |boolean |false round |是否为圆形按钮 |boolean |false disabled |是否禁用按钮| boolean |false hairline |是否使用 0.5px 边框 |boolean |false

events 事件

继承通用事件

Badge 徽标

介绍

在右上角展示徽标数字或小红点。

引入

import AButton from "../../components/act/a-badge.stml";

代码示例

基础用法

设置 content 属性后， Badge 会在子元素的右上角显示对应的徽标，也可以通过 dot 来显示小红点。

<a-badge :content="5">
    <div class="child"/>
</a-badge>

<a-badge :content="10">
    <div class="child"/>
</a-badge>

<a-badge content="Hot">
    <div class="child"/>
</a-badge>

<a-badge dot>
    <div class="child"/>
</a-badge>

最大值

设置 max 属性后，当 content 的数值超过最大值时，会自动显示为 max+ 。

<a-badge :content="20" max="9">
    <div class="child"/>
</a-badge>

<a-badge :content="50" max="20">
    <div class="child"/>
</a-badge>

<a-badge :content="200" max="99">
    <div class="child"/>
</a-badge>

自定义颜色

通过 color 属性来设置徽标的颜色。

<a-badge :content="5" color="#1989fa">
    <div class="child"/>
</a-badge>

<a-badge :content="10" color="#1989fa">
    <div class="child"/>
</a-badge>

<a-badge dot color="#1989fa">
    <div class="child"/>
</a-badge>

独立展示

当 Badge 没有子元素时，会作为一个独立的元素进行展示。

<a-badge :content="20"/>

<a-badge :content="200" max="99"/>

API

Props

参数 说明 类型 默认值
content 徽标内容 number string_ -
color 徽标背景颜色 string #ee0a24
dot 是否展示为小红点 boolean false
max 最大值，超过最大值会显示 {max}+，仅当 content 为数字时有效 number / string -

Calendar 日历

介绍

日历组件用于选择日期或日期区间。

引入

import ACalendar from "../../components/act/a-calendar.stml";

注意:该组件展示的时候为全屏形态，请将组件最好放置于根节点下。

代码演示

选择单个日期

下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发 confirm 事件。

<a-cell-group round>
    <a-cell is-link @click="open" title="选择单个日期" :value="value"/>
</a-cell-group>

<a-calendar style="height: 500px;" $show="show" @confirm="myConfirm"/>

export default {
    name: "simple-calendar",
    data(){
        return {
            show:false,
            value:''
        }
    },
    methods: {
        open(){
            this.data.show = true;
        },
        myConfirm({detail}) {
          this.data.value = detail;
          Toast(`onConfirm: ${detail}`)
        }
    }
}

双向绑定

演示了使用 $default-date 来做双向绑定，自动接管数据变化绑定。

<a-cell-group round>
    <a-cell is-link @click="open" title="双向绑定" :value="value"/>
</a-cell-group>

<a-calendar style="height: 500px;" $show="show" $default-date="value"/>

export default {
    name: "simple-calendar",
    data(){
        return {
            show:false,
            value:''
        }
    },
    methods: {
        open(){
            this.data.show = true;
        }
    }
}

选择多个日期

设置 type 为 multiple 后可以选择多个日期，此时 confirm 事件返回的 date 为数组结构，数组包含若干个选中的日期。

<a-cell-group round>
    <a-cell is-link @click="open" title="选择多个日期" :value="value"/>
</a-cell-group>

<a-calendar style="height: 500px;" $show="show" @confirm="myConfirm" type="multiple"/>

export default {
    name: "simple-calendar",
    data(){
        return {
            show:false,
            value:''
        }
    },
    methods: {
        open(){
            this.data.show = true;
        },
        myConfirm({detail}) {
            this.data.value = `选择了${detail.length}个日期`;
            Toast(`onConfirm: 选择了${detail.length}个日期`)
        }
    }
}

选择日期区间

设置 type 为 range 后可以选择日期区间，此时 confirm 事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。

<a-cell-group round>
    <a-cell is-link @click="open" title="选择日期区间" :value="value"/>
</a-cell-group>

<a-calendar style="height: 500px;" $show="show" @confirm="myConfirm3" type="range"/>

export default {
    name: "simple-calendar",
    data(){
        return {
            show:false,
            value:''
        }
    },
    methods: {
        open(){
            this.data.show = true;
        },
        myConfirm3({detail}) {
          this.data.value = `${detail[0]} - ${detail[1]}`;
          Toast(`onConfirm: ${detail[0]} - ${detail[1]}`)
        }
    }
}

快捷选择

将 show-confirm 设置为 false 可以隐藏确认按钮，这种情况下选择完成后会立即触发 confirm 事件。

<a-calendar style="height: 500px;" $show="show" :show-confirm="false" $default-date="value"/>

自定义日期范围

通过 min-date 和 max-date 定义日历的范围。

<a-calendar style="height: 500px;" $show="show" $default-date="value"
    :min-date="new Date('2009/12/15')"
    :max-date="new Date('2010/3/9')"/>

自定义按钮文字

通过 confirm-text 设置按钮文字，通过 confirm-disabled-text 设置按钮禁用时的文字。

<a-calendar style="height: 500px;" 
    $show="show" 
    type="range" 
    $default-date="value" 
    confirm-text="完成"
    confirm-disabled-text="请选择结束时间"
/>

自定义日期文案

通过传入 formatter 函数来对日历上每一格的内容进行格式化。

    <a-calendar style="height: 500px;" $show="show" 
                :formatter="this.formatter"
                type="range" @confirm="myConfirm9"
                :min-date="new Date('2021/5/1')"
                :max-date="new Date('2021/6/25')"
    />

export default {
    name: "simple-calendar",
    data(){
        return {
            show:true,
            value:''
        }
    },
    methods: {
        open(){
            this.data.show = true;
        },
        myConfirm9({detail}) {
            this.data.value = `${detail[0]} - ${detail[1]}`;
            Toast(`onConfirm: ${detail[0]} - ${detail[1]}`)
        },
        formatter(day) {
          const month = day.date.getMonth() + 1;
          const date = day.date.getDate();

          if (month === 5) {
            if (date === 1) {
              day.topInfo = '劳动节';
            } else if (date === 4) {
              day.topInfo = '青年节';
            } else if (date === 11) {
              day.text = '今天';
            }
          }


          if (day.type === 'start') {
            day.bottomInfo = '入住';
          } else if (day.type === 'end') {
            day.bottomInfo = '离店';
          }

          return day;
        }
    }
}

日期区间最大范围

选择日期区间时，可以通过 max-range 属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案。

<a-calendar style="height: 500px;" $show="show" @confirm="myConfirm10" type="range"
                :max-range="5"

API

Props

参数 说明 类型 默认值
type 选择类型:
single 表示选择单个日期，
multiple 表示选择多个日期，
range 表示选择日期区间		 string single
title 日历标题 string 日期选择
min-date 可选择的最小日期 Date 当前日期
max-date 可选择的最大日期 Date 当前日期的六个月后
default-date 默认选中的日期，type 为 multiple 或 range 时为数组，传入 null 表示默认不选择 Date / Date[] / null 今天
formatter 日期格式化函数 (day: Day) => Day -
show-confirm 是否展示确认按钮 boolean true
confirm-text 确认按钮的文字 string 确定
confirm-disabled-text 确认按钮处于禁用状态时的文字 string 确定

Range Props

当 Canlendar 的 type 为 range 时，支持以下 props:

参数 说明 类型 默认值
max-range 日期区间最多可选天数 number / string 无限制
range-prompt 范围选择超过最多可选天数时的提示文案 string 选择天数不能超过 xx 天

Multiple Props

当 Canlendar 的 type 为 multiple 时，支持以下 props:

参数 说明 类型 默认值
max-range 日期最多可选天数 number / string 无限制
range-prompt 选择超过最多可选天数时的提示文案 string 选择天数不能超过 xx 天

Day 数据结构

日历中的每个日期都对应一个 Day 对象，通过formatter属性可以自定义 Day 对象的内容

键名 说明 类型
date 日期对应的 Date 对象 Date
type 日期类型，可选值为 selected、start、middle、end、disabled string
text 中间显示的文字 string
topInfo 上方的提示信息 string
bottomInfo 下方的提示信息 string
className 额外类名 string

Events

事件名 说明 回调参数
select 点击并选中任意日期时触发 value: Date / Date[]
confirm 日期选择完成后触发，若 show-confirm 为 true，则点击确认按钮后触发 value: Date / Date[]

Cell 单元格

介绍

单元格为列表中的单个展示项。

引入

import ACellGroup from "../../components/act/a-cell-group.stml";
import ACell from "../../components/act/a-cell.stml";

代码演示

基础用法

Cell 可以单独使用，也可以与 CellGroup 搭配使用，CellGroup 可以为 Cell 提供上下外边框。

<a-cell-group>
    <a-cell title="单元格" value="内容"/>
    <a-cell title="单元格" value="内容" label="描述信息"/>
</a-cell-group>

单元格大小

通过 size 属性可以控制单元格的大小。

<a-cell-group>
    <a-cell title="单元格" value="内容" size="large"/>
    <a-cell title="单元格" value="内容" size="large" label="描述信息"/>
</a-cell-group>

展示图标

通过 icon 属性在标题左侧展示图标。

<a-cell title="单元格" icon="map"/>

快捷标题

子节点是纯文本的时候被理解成 title 。

<a-cell>单元格</a-cell>

展示箭头

设置 is-link 属性后会在单元格右侧显示箭头，并且可以通过 arrow-direction 属性控制箭头方向。

<a-cell-group>
    <a-cell title="单元格" is-link/>
    <a-cell title="单元格" is-link value="内容"/>
    <a-cell title="单元格" is-link arrow-direction="down" value="内容"/>
</a-cell-group>

页面导航

可以通过 url 属性进行 URL 跳转，或通过 to 属性进行路由跳转。

<a-cell title="URL 跳转" is-link url="../simple-button/simple-button.stml"/>
<a-cell title="路由跳转" is-link to="simple-button"/>

分组标题

通过 CellGroup 的 title 属性可以指定分组标题。

<a-cell-group title="分组1">
    <a-cell title="单元格" value="内容"/>
</a-cell-group>

<a-cell-group title="分组2">
    <a-cell title="单元格" value="内容"/>
</a-cell-group>

分组圆角

通过 round 属性让一个 cell-group 组变成圆角。

<a-cell-group round>
    <a-cell title="单元格"/>
</a-cell-group>

使用插槽

如以上用法不能满足你的需求，可以使用插槽来自定义内容。

<a-cell-group>
    <a-cell value="内容" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template _slot="title">
            <text class="custom-title">自定义标题</text>
            <a-tag type="danger">标签</a-tag>
        </template>
    </a-cell>

    <a-cell title="相机扫码" icon="camera">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template _slot="right-icon">
            <a-icon name="scanning" class="search-icon"/>
        </template>
    </a-cell>
</a-cell-group>

<style>
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
</style>

垂直居中

通过 center 属性可以让 Cell 的左右内容都垂直居中。

<a-cell center title="单元格" value="内容" label="描述信息"/>

API

CellGroup Props

参数 说明 类型 默认值
title 分组标题 string -
round 是否为圆角 boolean false

Cell Props

参数 说明 类型 默认值
title 左侧标题 number / string -
value 右侧内容 number / string -
label 标题下方的描述信息 string -
size 单元格大小，可选值为 large string -
icon 左侧图标名称或图片链接 string -
url 点击后跳转的链接stml路径地址 string -
to 点击后跳转的目标页面简写地址 string / object -
is-link 是否展示右侧箭头并开启点击反馈 boolean false
center 是否使内容垂直居中 boolean false
arrow-direction 箭头方向，可选值为 left up down string right

Cell Events

事件名 说明 回调参数
click 点击单元格时触发 event: MouseEvent

Cell Slots

名称 说明
title 自定义左侧 title 的内容
right-icon 自定义右侧按钮，默认为arrow

Layout 布局

介绍

Layout 提供了 a-row 和 a-col 两个组件来进行行列布局。

引入

import ARow from "../../components/act/a-row.stml";
import ACol from "../../components/act/a-col.stml";

代码演示

基础用法

Layout 组件提供了 24列栅格，通过在 Col 上添加 span 属性设置列所占的宽度百分比。 此外，添加 offset 属性可以设置列的偏移宽度，计算方式与 span 相同。

  <a-row>
    <a-col span="8">
      <text>span: 8</text>
    </a-col>
    <a-col span="8">
      <text>span: 8</text>
    </a-col>
    <a-col span="8">
      <text>span: 8</text>
    </a-col>
  </a-row>

  <a-row>
    <a-col span="4">
      <text>span: 4</text>
    </a-col>
    <a-col span="10" offset="4">
      <text>offset: 4, span: 10</text>
    </a-col>
  </a-row>

  <a-row>
    <a-col offset="12" span="12">
      <text>offset: 12, span: 12</text>
    </a-col>
  </a-row>

设置列元素间距

通过 gutter 属性可以设置列元素之间的间距，默认间距为 0。

<a-row gutter="20">
    <a-col span="8">
      <view><text>span: 8</text></view>
    </a-col>
    <a-col span="8">
      <view><text>span: 8</text></view>
    </a-col>
    <a-col span="8">
      <view><text>span: 8</text></view>
    </a-col>
</a-row>

<a-row gutter="40">
    <a-col span="8">
      <view><text>span: 8</text></view>
    </a-col>
    <a-col span="8">
      <view><text>span: 8</text></view>
    </a-col>
    <a-col span="8">
      <view><text>span: 8</text></view>
    </a-col>
</a-row>

对齐方式

通过 justify 属性可以设置主轴上内容的对齐方式，等价于 flex 布局中的 justify-content 属性。

  <!-- 居中 -->
  <a-row justify="center">
    <a-col span="6"><text>span: 6</text></a-col>
    <a-col span="6"><text>span: 6</text></a-col>
    <a-col span="6"><text>span: 6</text></a-col>
  </a-row>


  <!-- 右对齐 -->
  <a-row justify="end">
    <a-col span="6"><text>span: 6</text></a-col>
    <a-col span="6"><text>span: 6</text></a-col>
    <a-col span="6"><text>span: 6</text></a-col>
  </a-row>

  <!-- 两端对齐 -->
  <a-row justify="space-between">
    <a-col span="6"><text>span: 6</text></a-col>
    <a-col span="6"><text>span: 6</text></a-col>
    <a-col span="6"><text>span: 6</text></a-col>
  </a-row>

  <!-- 每个元素的两侧间隔相等 -->
  <a-row justify="space-around">
    <a-col span="6"><text>span: 6</text></a-col>
    <a-col span="6"><text>span: 6</text></a-col>
    <a-col span="6"><text>span: 6</text></a-col>
  </a-row>

API

Row Props

参数 说明 类型 默认值
gutter 列元素之间的间距（单位为 px） number / string -
justify 主轴对齐方式，可选值为 end center
space-around space-between		 string start

Col Props

参数 说明 类型 默认值
span 列元素宽度 number / string -
offset 列元素偏移距离 number / string -

Empty 空状态

介绍

空状态时的占位提示。

引入

import AEmpty from "../../components/act/a-empty.stml";

代码演示

基础用法

  <a-empty description="描述文字"/>

图片类型

Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。

<!-- 通用错误 -->
    <a-empty image="error" description="通用错误"/>
<!-- 网络错误 -->
    <a-empty image="network" description="网络错误"/>
<!-- 搜索提示 -->
    <a-empty image="search" description="搜索提示"/>

自定义图片

需要自定义图片时，可以在 image 属性中传入任意图片 URL。

<a-empty class="custom-image"
    image="https://icon.yangyongan.com/?name=warning&size=64&scale=2&color=_ddd"
    description="描述文字"/>

底部内容

通过默认插槽可以在 Empty 组件的下方插入内容。

<a-empty description="描述文字">
    <a-button round type="danger" class="bottom-button">按钮测试</a-button>
</a-empty>

API

Props

参数 说明 类型 默认值
image 图片类型，可选值为 error network search，支持传入图片 URL string default
image-size 图片大小，默认单位为 px number / string -
description 图片下方的描述文字 string -

Field 输入框

介绍

表单中的输入框组件。

引入

import AField from "../../components/act/a-field.stml";

代码演示

基础用法

可以通过 $value 双向绑定输入框的值，通过 placeholder 设置占位提示文字。

<text class="simple-desc">
   双向绑定测试: {value}{value2}
</text>
<!-- Field 是基于 Cell 实现的，可以使用 CellGroup 作为容器来提供外边框。 -->
  <a-cell-group>
    <a-field $value="value" label="姓氏" placeholder="请输入用户名"/>
    <a-field $value="value2" label="名字" placeholder="请输入用户名"/>
  </a-cell-group>

export default {
  name: "simple-field",
  data() {
    return {
      value: '',
      value2: '阿萨德'
    }
  }
}

自定义类型

根据 type 属性定义不同类型的输入框，默认值为 text。

  <a-cell-group>
    <!-- 输入任意文本 -->
    <a-field $value="state.default" label="文本" placeholder="输入文本"/>
    <!-- 输入整数 -->
    <a-field $value="state.number" type="number" label="输入整数" placeholder="输入整数"/>
    <!-- 带小数的数字 -->
    <a-field $value="state.decimal" type="decimal" label="带小数的数字" placeholder="带小数的数字"/>
    <!-- 输入电话 -->
    <a-field $value="state.tel" type="tel" label="输入电话" placeholder="输入电话"/>
    <!-- 输入email -->
    <a-field $value="state.email" type="email" label="输入email" placeholder="输入email"/>
    <!-- 输入网站url -->
    <a-field $value="state.url" type="url" label="输入网站url" placeholder="输入网站url"/>
    <!-- 输入密码 -->
    <a-field $value="state.password" type="password" label="输入密码" placeholder="输入密码"/>
  </a-cell-group>

自定义按钮 [APP端]

根据 confirm-type 属性定义键盘右下角的按钮文案,默认是完成(done)。

  <a-cell-group>
    <a-field $value="state.default" label="完成" placeholder="done"/>
    <a-field $value="state.default" label="发送" confirm-type="send" placeholder="send"/>
    <a-field $value="state.default" label="搜索" confirm-type="search" placeholder="search"/>
    <a-field $value="state.default" label="下一个" confirm-type="next" placeholder="next"/>
    <a-field $value="state.default" label="前往" confirm-type="go" placeholder="go"/>
  </a-cell-group>

禁用输入框

通过 readonly 将输入框设置为只读状态，通过 disabled 将输入框设置为禁用状态。

<a-cell-group>
    <a-field label="文本" value="输入框只读" readonly/>
    <a-field label="文本" value="输入框已禁用" disabled/>
</a-cell-group>

显示图标

通过 left-icon 和 right-icon 配置输入框两侧的图标，通过设置 clearable 在输入过程中展示清除图标。

<a-cell-group>
  <a-field
      $value="state.value1"
      label="文本"
      left-icon="link"
      right-icon="prompt"
      placeholder="显示图标"
  />
  <a-field
      $value="state.value2"
      clearable
      label="文本"
      left-icon="map"
      placeholder="显示清除图标"
  />
</a-cell-group>

错误提示

设置 required 属性表示这是一个必填项，可以配合 error 或 error-message 属性显示对应的错误提示。

<a-cell-group>
  <a-field
      $value="username"
      error
      required
      label="用户名"
      placeholder="请输入用户名"
  />
  <a-field
      $value="phone"
      required
      label="手机号"
      placeholder="请输入手机号"
      error-message="手机号格式错误"
  />
</a-cell-group>

插入按钮

通过 button 插槽可以在输入框尾部插入按钮。

  <a-field $value="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
    <template _slot="button" class="demo-button">
      <a-button size="small" type="primary">发送验证码</a-button>
    </template>
  </a-field>

API

Props

参数 说明 类型 默认值
$value 当前输入的值 number / string -
label 输入框左侧文本 string -
type 输入框类型, 可选值为 tel digit
number textarea password 等		 string text
size 大小，可选值为 large string -
maxlength 输入的最大字符数 number / string -
placeholder 输入框占位提示文字 string -
disabled 是否禁用输入框 boolean false
readonly 是否为只读状态，只读状态下无法输入内容 boolean false
colon 是否在 label 后面添加冒号 boolean false
required 是否显示表单必填星号 boolean false
center 是否使内容垂直居中 boolean false
clearable 是否启用清除图标，点击清除图标后会清空输入框 boolean false
autofocus 是否自动聚焦 boolean false
error 是否将输入内容标红 boolean false
error-message 底部错误提示文案，为空时不展示 string -
label-width 左侧文本宽度，默认单位为 px number / string 6.2em
label-align 左侧文本对齐方式，可选值为 center right string left
left-icon 左侧图标名称或图片链接 string -
right-icon 右侧图标名称或图片链接 string -

Events

事件 说明 回调参数
input 输入框内容变化时触发 value: string (当前输入的值)
focus 输入框获得焦点时触发 event: Event
blur 输入框失去焦点时触发 event: Event
clear 点击清除按钮时触发 event: MouseEvent

Slots

名称 说明
button 自定义输入框尾部按钮

Icon 图标

介绍

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。

目前暂不支持自定义字体，故无法引入iconfont字体图标。

目前暂不支持svg渲染，故无法引入svg图片。

临时性的使用服务端渲染替代实现icon组件。

待底层更新后，该组件可以同步更新渲染模式，业务逻辑层不发生变化。

引入

import AIcon from "../../components/act/a-icon.stml";

代码演示

基础用法

Icon 的 name 属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例。

     <a-icon name="good"/>
     <a-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png"/>

图标大小

Icon 的 size 属性用来设置图标的尺寸大小，默认单位为 px。

<a-icon name="good" size="32"/>
<a-icon name="user" size="66"/>

图标颜色

Icon 的 color 属性用来设置图标的颜色。

<a-icon name="good" size="32" color="red"/>
<a-icon name="user" size="32" color="#3af"/>
<a-icon name="map" size="32" color="rgb(123,213,21)"/>

所有图标

目前所支持的图标列表请点击这里：https://icon.yangyongan.com/

支持的图标列表API接口：https://icon.yangyongan.com/api/

并且持续收集中。

Link

介绍

这是一个抽象组件，为组件提供统一的跳转路由功能。

引入

import ALink from "../../components/act/a-link.stml";

代码示例

基础用法

<a-link to="simple-button">
    <view class="link">
        <text class="com-name">Button 按钮</text>
        <a-icon name="arrow-right"/>
    </view>
</a-link>

完整链接

<a-link to="../../simple-button/simple-button.stml" title="按钮示例页面">
    <view class="link">
        <text class="com-name">Button 按钮</text>
        <a-icon name="arrow-right"/>
    </view>
</a-link>

API

Props

参数 说明 类型 默认值
to 路由名称或者完整路径 string -
title 页面的名称 string -

NavBar 导航栏

引入

import ANavBar from "../../components/act/a-nav-bar.stml";

代码演示

基础用法

  <a-nav-bar
      title="标题"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
  />

import {Toast} from "../../components/act";
export default {
  name: "simple-nav-bar",
  components: {AIcon, ANavBar},
  methods: {
    onClickLeft() {
      Toast('返回2');
    },
    onClickRight() {
      Toast('右侧');
    }
  }
}

使用插槽

通过插槽自定义导航栏两侧的内容。

  <a-nav-bar title="标题" left-text="返回" left-arrow>
    <template _slot="right" class="demo-right">
      <a-icon name="search" size="18"/>
      <text>文本</text>
    </template>
  </a-nav-bar>

API

Props

参数 说明 类型 默认值
title 标题 string ''
left-text 左侧文案 string ''
right-text 右侧文案 string ''
left-arrow 是否显示左侧箭头 boolean false

Slots

名称 说明
left 自定义左侧区域内容
right 自定义右侧区域内容

Events

事件名 说明 回调参数
click-left 点击左侧按钮时触发 event: MouseEvent
click-right 点击右侧按钮时触发 event: MouseEvent

Popup 弹出层

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

引入

import APopup from "../../components/act/a-popup.stml";

代码演示

基础用法

通过 $show 控制弹出层是否展示。

  <a-cell is-link @click="showPopup">展示弹出层</a-cell>

  <a-popup $show="show">
    <text  @click="test"> 内容</text>
  </a-popup>

export default {
  name: "simple-popup",
  data() {
    return {
      show: false
    }
  },
  methods: {
    showPopup() {
      this.data.show = true;
    }
  }
}

弹出位置

通过 position 属性设置弹出位置，默认居中弹出，可以设置为 top、bottom、left、right。

  <a-popup $show="show" position="top"> <text> 上 </text> </a-popup>
  <a-popup $show="show" position="bottom"> <text> 下 </text> </a-popup>
  <a-popup $show="show" position="left"> <text> 左 </text> </a-popup>
  <a-popup $show="show" position="right"> <text> 右 </text> </a-popup>

关闭图标

设置 closeable 属性后，会在弹出层的右上角显示关闭图标，并且可以通过 close-icon 属性自定义图标，使用 close-icon-position 属性可以自定义图标位置。

  <a-popup $show="show"
           closeable
           position="bottom"
           style="height: 30%;">
    <text class="demo-content">关闭图标</text>
  </a-popup>


  <a-popup $show="show"
           closeable
           close-icon="success"
           position="bottom"
           style="height: 30%;">
    <text class="demo-content">自定义图标</text>
  </a-popup>


  <a-popup $show="show"
           closeable
           close-icon="close"
           close-icon-position="top-left"
           position="bottom"
           style="height: 30%;">
    <text class="demo-content">关闭图标位置</text>
  </a-popup>


  <a-popup $show="show"
           closeable
           close-icon-color="red"
           position="bottom"
           style="height: 30%;">
    <text class="demo-content">关闭图标颜色</text>
  </a-popup>

圆角弹窗

设置 round 属性后，弹窗会根据弹出位置添加不同的圆角样式。

  <a-popup $show="show"
           closeable
           round
           position="bottom"
           style="height: 30%;">
    <text class="demo-content">圆角弹窗</text>
  </a-popup>

API

Props

参数 说明 类型 默认值
$show 是否显示弹出层 boolean false
position 弹出位置，可选值为 top bottom right left string center
round 是否显示圆角 boolean false
closeable 是否显示关闭图标 boolean false
close-icon 关闭图标名称或图片链接 string cross
close-icon-position 关闭图标位置，可选值为 top-left
bottom-left bottom-right		 string top-right

Events

事件名 说明 回调参数
close 关闭弹出层时触发 -

Stepper 步进器

介绍

步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。

引入

import AStepper from "../../components/act/a-stepper.stml";

代码演示

基础用法

通过 $value 绑定输入值，可以通过 change 事件监听到输入值的变化。

  <a-stepper $value="value" onChange="onChange"/>
  <text>{{ value }}</text>

import {Toast} from "../../components/act";
export default {
  name: "simple-stepper",
  data() {
    return {
      value: 2
    }
  },
  methods: {
    onChange(e) {
      Toast(`onChange:\n${JSON.stringify(e)}`)
    }
  }
}

步长设置

通过 step 属性设置每次点击增加或减少按钮时变化的值，默认为 1。

  <a-stepper $value="value" step="2"/>

限制输入范围

通过 min 和 max 属性限制输入值的范围。

  <a-stepper $value="value" min="5" max="8" />

限制输入整数

设置 integer 属性后，输入框将限制只能输入整数。

  <a-stepper $value="value" integer />

禁用状态

通过设置 disabled 属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。

  <a-stepper $value="value" disabled />

禁用输入框

通过设置 disable-input 属性来禁用输入框，此时按钮仍然可以点击。

  <a-stepper $value="value" disable-input />

固定小数位数

通过设置 decimal-length 属性可以保留固定的小数位数。

  <a-stepper $value="value" step="0.2" :decimal-length="1" />

自定义大小

通过 input-width 属性设置输入框宽度，通过 button-size 属性设置按钮大小和输入框高度。

  <a-stepper $value="value" input-width="40" button-size="32" />

异步变更

通过 before-change 属性可以在

<van-stepper v-model="value" :before-change="beforeChange" />

import {Toast} from "../../components/act";

export default {
  name: "simple-stepper",
  data() {
    return {
      value: 2
    }
  },
  methods: {
    beforeChange(value) {
      Toast.loading({forbidClick: true, message: `正在提交 : ${value}`});
      return new Promise((resolve) => {
        setTimeout(() => {
          Toast.clear();
          // 在 resolve 函数中返回 true 或 false
          const result = Math.random() > 0.5;
          resolve(result);
          Toast(result ? '成功' : '失败')
        }, 1000);
      });
    }
  }
}

圆角风格

将 theme 设置为 round 来展示圆角风格的步进器。

  <a-stepper $value="value" theme="round" button-size="22" disable-input />

API

Props

参数 说明 类型 默认值
$value 当前输入的值 number / string -
min 最小值 number / string 1
max 最大值 number / string -
step 步长，每次点击时改变的值 number / string 1
input-width 输入框宽度，默认单位为 px number / string 32px
button-size 按钮大小以及输入框高度，默认单位为 px number / string 28px
decimal-length 固定显示的小数位数 number / string -
theme 样式风格，可选值为 round string -
integer 是否只允许输入整数 boolean false
disabled 是否禁用步进器 boolean false
disable-input 是否禁用输入框 boolean false
before-change 输入值变化前的回调函数，返回 false 可阻止输入，支持返回 Promise (value) => boolean / Promise false

Events

事件名 说明 回调参数
change 当绑定值变化时触发的事件 value: string, detail: { name: string }

Tag 标签

引入

import ATag from "../../components/act/a-tag.stml";

代码演示

基础用法

通过 type 属性控制标签颜色。

<a-tag type="primary">标签</a-tag>
<a-tag type="success">标签</a-tag>
<a-tag type="danger">标签</a-tag>
<a-tag type="warning">标签</a-tag>

空心样式

设置 plain 属性设置为空心样式。

<a-tag plain type="primary">标签</a-tag>

圆角样式

通过 round 设置为圆角样式。

<a-tag round type="primary">标签</a-tag>

标记样式

通过 mark 设置为标记样式(半圆角)。

<a-tag mark type="primary">标签</a-tag>

可关闭标签

添加 closeable 属性表示标签是可关闭的，关闭标签时会触发 close 事件，在 close 事件中可以执行隐藏标签的逻辑。

<a-tag :show="show" closeable type="primary" @close="close">
  标签
</a-tag>

export default {
  name: "simple-tag",
  data() {
    return {
      show: true
    }
  },
  methods: {
    close() {
      this.data.show = false;
    }
  }
}

API

Props

参数 说明 类型 默认值
type 类型，可选值为 primary success danger warning string default
show 是否展示标签 boolean true
plain 是否为空心样式 boolean false
round 是否为圆角样式 boolean false
mark 是否为标记样式 boolean false
closeable 是否为可关闭标签 boolean false

Events

事件名 说明 回调参数
close 关闭标签时触发 -

Toast 轻提示

介绍

在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

引入

import {Toast} from "../../components/act";

代码演示

文字提示

Toast('提示内容');

加载提示

使用 Toast.loading 方法展示加载提示，通过 forbidClick 属性可以禁用背景点击。

Toast.loading({
  message: '自动加载中...',
  forbidClick: true,
});

自定义位置

Toast 默认渲染在屏幕正中位置，通过 position 属性可以控制 Toast 展示的位置。

Toast('提示内容', 'top');

Toast({
  message: '底部展示',
  position: 'bottom',
});

API

方法

方法名 说明 参数 返回值
Toast 展示提示 options / message toast 实例
Toast.loading 展示加载提示 options / message toast 实例
Toast.clear 关闭提示 clearAll: boolean void

Options

参数 说明 类型 默认值
position 位置，可选值为 top bottom string middle
message 文本内容，支持通过\n换行 string '' -
forbidClick 是否禁止背景点击 boolean false
duration 展示时长(ms) number 1500