更新记录

1.0.1(2020-07-14)

更新插件包内容; 更新插件使用文档

1.0.0(2020-06-29)

aui-actionsheet操作弹窗首次发布


平台兼容性

actionsheet操作弹窗

使用时请下载查看完整示例

参数 类型 描述 默认值 必选
items arr 菜单列表[{name: "", color: "", fontSize: "", textAlign: ""}] []
mask boolean 是否显示遮罩蒙版 true
maskTapClose boolean 触摸遮罩是否关闭模态弹窗 true
cancle string 取消按钮 ''
location string 位置
bottom:位于底部,从底部弹出显示
middle:位于页面中心位置
'bottom'
theme number 主题样式(1: 非全屏宽度; 2: 全屏宽度) 1

插件显示:

_this.$refs.actionsheet.show();

插件引入示例:

<button class="aui-btn aui-btn-blue" @click.top="showActionsheet($event)" data-title="上传图片" data-location="bottom" data-theme="1" data-cancel="取消">底部弹出操作菜单(上传图片)</button>
<button class="aui-btn aui-btn-blue" @click.top="showActionsheet($event)" data-title=" " data-location="middle" data-theme="2">页面中心弹出操作菜单(上传图片)</button>
<button class="aui-btn aui-btn-blue" @click.top="showActionsheet($event)" data-title=" " data-location="bottom" data-theme="2" data-cancel="取消">底部弹出操作菜单(全屏宽度)</button>
<aui-actionsheet
    ref="actionsheet"
    :title="auiActionsheet.title"
    :mask="auiActionsheet.mask"
    :maskTapClose="auiActionsheet.maskTapClose"
    :items="auiActionsheet.items"
    :location="auiActionsheet.location"
    :theme="auiActionsheet.theme"
    :cancel="auiActionsheet.cancel"
    @callback="actionsheetCallback"
></aui-actionsheet>
<!-- 简单调用actionsheet -->
<!-- <aui-actionsheet
    ref="actionsheet"
    :items="auiActionsheet.items"
    @callback="actionsheetCallback"
></aui-actionsheet> -->
import {aui} from '@/common/aui/js/aui.js';
import auiActionsheet from '@/components/aui-actionsheet/aui-actionsheet.vue';
export default {
    components: {
        auiActionsheet
    },
    data() {
        return {
            auiActionsheet: {
                title: '',
                mask: true,
                theme: 1,
                location: 'bottom',
                items: [
                    {name: "拍照", color: "#333", fontSize: "16px", textAlign: "center"},
                    {name: '从相册选择'}
                ],
                cancel: '取消'
            }
        }
    },
    methods: {
        showActionsheet(e){
            var _this = this;
            aui.isDefine(e.currentTarget.dataset.title) ? _this.auiActionsheet.title = e.currentTarget.dataset.title : _this.auiActionsheet.title = '';
            aui.isDefine(e.currentTarget.dataset.location) ? _this.auiActionsheet.location = e.currentTarget.dataset.location : _this.auiActionsheet.location = 'bottom';
            aui.isDefine(e.currentTarget.dataset.theme) ? _this.auiActionsheet.theme = Number(e.currentTarget.dataset.theme) : _this.auiActionsheet.theme = 1;
            aui.isDefine(e.currentTarget.dataset.cancel) ? _this.auiActionsheet.cancel = e.currentTarget.dataset.cancel : _this.auiActionsheet.cancel = '';
            _this.$refs.actionsheet.show();
        },
        actionsheetCallback(e){
            var _this = this;
            console.log(e); 
        }
    }
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问