碼上快樂

相關內容    簡體    繁體

aui移動端UI框架

本文轉載自   查看原文   2020-05-14 11:35   3543    移動端UI框架

aui

logo

簡介

aui 是一套基於原生javascript開發的移動端UI框架。包含常用js API(如：字符校驗、本地定時存儲、數組對象處理、ajax原生封裝、設備信息獲取、手勢事件...)；插件(如：loading加載、dialog模態框、toast消息提示、picker多級聯動...)；UI組件(如：button按鈕、tag標簽、card卡片...)；常用模板(如：側滑菜單、加入購物車動畫、星級評價、圖片上傳預覽裁剪、選項卡...)。

特點

1、標准化，產品化

2、更多復用，更快效率

3、多人協作，更加統一

4、維護方便

5、易於使用

6、減少UI設計時間

引用

<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>

演示

查看演示：https://aui-js.github.io/aui/index.html

文檔

看雲在線文檔地址：https://www.kancloud.cn/chen-wanchun/aui-js

代碼

Github倉庫地址：https://github.com/aui-js/aui

api

extend 對象合並(可實現多層對象深度合並)

參數 類型 描述 默認值 必選
opts Object 原始參數 無 是
opt Object 新參數 無 是
override Boolean 是否合並重置 無 否 
   aui.extend("原始參數", "新參數", true);


isDefine 判斷字符串是否為空

參數 類型 描述 默認值 必選
str string 字符串 無 是 
   aui.isDefine(str);


space 刪除字符串中指定字符

參數 類型 描述 默認值 必選
str string 字符串 無 是
flag Boolean 是否去除前后空格[false: 去除前后空格 \ true: 去除全部空格] 無 否 
   aui.space(str, true);


replaceStr 去除字符串中空格

參數 類型 描述 默認值 必選
str string 字符串 無 是
assignStr string 指定字符串 無 否 
   aui.replaceStr('原字符串', '指定字符');


uniq 數組去重

參數 類型 描述 默認值 必選
array array 去重數組 無 是 
   aui.uniq(array);


getUrlstr 截取URL中參數(可獲取中文內容)

參數 類型 描述 默認值 必選
str string 參數名稱 無 是 
   aui.getUrlstr('id');


random 生成隨機數

參數 類型 描述 默認值 必選
Min number 最小值 無 是
Max number 最大值 無 是 
   aui.random(10, 100);


copy 復制到剪切板

參數 類型 描述 默認值 必選
str string 要復制的文本 無 是 
   aui.copy('213421');


checkIsDeveloper 驗證是否是開發者

參數 類型 描述 默認值 必選
isDeveloper Boolean 是否是開發者 無 否 
   aui.checkIsDeveloper(false);


setLocal 本地存儲(可設置存儲時間)

參數 類型 描述 默認值 必選
key string 存儲的名稱 無 是
value string 存儲的內容 無 是
time number 存儲時間 無 否 
   aui.setLocal('items', items, 1*24*60*60);
   //獲取緩存
   aui.getLocal('items');
   //移除緩存，一般情況不手動調用，緩存過期自動調用
   aui.removeLocal('items');
   //清空所有緩存
   aui.clearLocal();


import 引入 js / css 文件

參數 類型 描述 默認值 必選
url string / array 文件path 無 是 
   aui.import('aui.js')
   aui.import(['aui.js', 'aui.css'])


組件


loading加載動畫

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
type number 1: 常用風格;
2: 點擊按鈕后在按鈕內顯示加載動畫;
3: 四個方塊旋轉;
4: 圓點放大縮小動畫(全屏首次加載過度動畫);
5: 圓點背景過度動畫-微信小程序效果(全屏首次加載過度動畫)		 1 否
msg string 提示內容 '' 否
mask boolean 是否顯示遮罩蒙版 true 否
direction string 橫向("row")或縱向("col")控制 'col' 否
theme number type=3時，控制全屏或小窗展示（1：小窗; 2：全屏） 1 否
style object {
bg: '背景',
color: '文字顏色',
maskBg: '遮罩層顏色',
zIndex: '層級'
}		 '' 否

顯示loading加載：

aui.showload({
    msg: "加載中"
});

隱藏loading加載：

aui.hideload();

toast消息提示彈窗

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
msg string 提示內容 '' 是
icon string 圖標 '' 否
direction string 橫向("row")或縱向("col")控制 'col' 否
location string （icon參數未配置時可配置）位置
bottom:位於底部，從底部彈出顯示
middle:位於頁面中心位置		 'bottom' 否
duration number 顯示時間 2000 否

示例：

aui.toast({
    icon: "../../img/success.png",
    msg: "支付成功！",
    direction: "col"
},function(ret){

});

dialog提示窗

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
title string 標題 '' 否
msg string 提示內容 '' 是
btns arr 按鈕，默認按鈕為“確定” 分別可設置btns值為
1：['按鈕1', '按鈕2']
2：[{name: '按鈕1', color: ''},{name: '按鈕2', color: ''}]		 ["確定"] 否
mask boolean 是否顯示遮罩蒙版 true 否
touchClose boolean 觸摸遮罩是否關閉模態彈窗 true 否
theme number 主題樣式，控制模態彈窗按鈕顯示風格(1: 大按鈕; 2: 小按鈕-居右分布; 3: 按鈕寬度等於父級寬度100%，適用於按鈕文字過多情況) 'col' 否
items arr prompt--input框列表配置
[{label: '姓名：', type: 'text', value: '(可選)', placeholder: '請輸入姓名'}]		 [] 否
duration number 顯示時間 2000 否
style object {
w: '', //--可選參數，模態窗寬度，默認80%
h: '', //--可選參數，模態窗高度，默認"auto"自適應
bg: '',//--可選參數，模態窗背景色，默認白色
zIndex: '', //--可選參數，模態窗層級
title: {
bg: "",
color: "",
lineHeight: "",
textAlign: "",
fontSize: "",
padding: ""
}}		 '' 否

1、alert單按鈕提醒彈窗

aui.alert({
    title: "提示", //可選
    msg: "您點擊了alert單按鈕模態彈窗！",
    mask: true,
    touchClose: true, //可選
    btns: ["確定"], //可選
    //或btns: [{name: '按鈕1', color: '#f00'},{name: '按鈕2', color: '#00f'}], //可選
    theme: 1, //可選
    style: { //可選
        w: "75%",
        h: "auto",
        bg: '#FFF',
        zIndex: 999,
        animate: "aui-scale-in-tosmall-dialog",
        title: {
            bg: "#FFF",
            color: "#333",
            lineHeight:"55px",
            fontSize: "17px",
            textAlign: "center",
            padding: "0px"
        }
    }
},function(ret){
    console.log(ret.index);
    if(ret.index == 0){
        aui.toast({msg: "您點擊了確定"});
    }
});

2、confirm雙按鈕提醒彈窗

aui.confirm({
    msg: "您點擊了confirm雙按鈕模態彈窗！",
    btns: ["取消", "確定"],
},function(ret){
    console.log(ret.index);	
    if(ret.index == 1){
        aui.toast({msg: "您點擊了確定"});
    }
});

3、delete刪除提醒彈窗

aui.delete({
    msg: "您點擊了delete刪除模態彈窗！",
    btns: ["取消", "刪除"],
},function(ret){
    console.log(ret.index);	
    if(ret.index == 1){
        aui.toast({msg: "您點擊了刪除"});
    }
});

4、prompt輸入彈窗

aui.prompt({
    items: [{
        label: '姓名：', 
        type: 'text', 
        value: '', 
        placeholder: '請輸入姓名'
    },{
        label: '年齡：', 
        type: 'number', 
        value: '', 
        placeholder: '請輸入年齡'
    }],
    btns: ["取消", "確定"],
},function(ret){
    console.log(ret.data);	
    if(ret.index == 1)
    {
        aui.alert({
            title: "輸入結果：",
            msg: "<div style='text-align: left;'>姓名：" + ret.data[0] + "</br>年齡：" + ret.data[1]+"</div>",
            btns: ["確定"],
        }, function(ret){
            if(ret.index == 0){
                aui.toast({msg: "您點擊了確定"});
            }
        });
    }
});

5、confirm帶圖標雙按鈕提醒彈窗

aui.confirm({
    msg: "<div style='text-align: center;'>"
        +"<img src='../../img/success-green.png' style='width: 60px; margin: 0 auto;'>"
        +"<p style='width: 100%; line-height: 25px; color: 15px;'>帶圖標模態彈窗</p>"
    +"</div>",
    btns: ["取消", "確定"],
},function(ret){
    console.log(ret.index);	
    if(ret.index == 1){
        aui.toast({msg: "您點擊了確定"});
    }
});

6、多按鈕彈窗

aui.confirm({
    msg: "您點擊了多按鈕彈窗！",
    btns: [{name: '殘忍拒絕', color: ''},{name: '再逛逛', color: ''}, {name: "返回首頁", color: "#909090"}], //可選
    theme: 3, //可選
},function(ret){
    console.log(ret.index);	
    if(ret.index == 0){
        aui.toast({msg: "您點擊了殘忍拒絕"});
    }
    else if(ret.index == 1){
        aui.toast({msg: "您點擊了再逛逛"});
    }
    else if(ret.index == 2){
        aui.toast({msg: "您點擊了返回首頁"});
    }
});

actionsheet操作表

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
items arr 菜單列表[{name: "", color: "", fontSize: "", textAlign: ""}] [] 否
mask boolean 是否顯示遮罩蒙版 true 否
touchClose boolean 觸摸遮罩是否關閉模態彈窗 true 否
cancle string 取消按鈕 '' 否
location string 位置
bottom:位於底部，從底部彈出顯示
middle:位於頁面中心位置		 'bottom' 否
theme number 主題樣式(1: 非全屏寬度； 2: 全屏寬度) 1 否

示例:

aui.actionSheet({
    title: '上傳圖片',
    mask: true,
    touchClose: true,
    items: [{
        name: "從相冊選擇",
    },{
        name: "拍照"
    }],
    cancle: "取消",
    theme: 1,
    location: "bottom"
},function(ret){
    console.log(ret.index);				
});

actionmenu分享彈窗

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
items arr 菜單列表[{name: "", icon: "", iconColor: "", img: ""}] [] 否
mask boolean 是否顯示遮罩蒙版 true 否
touchClose boolean 觸摸遮罩是否關閉模態彈窗 true 否
cancle string 取消按鈕 '' 否
location string 位置
bottom:位於底部，從底部彈出顯示
middle:位於頁面中心位置		 'bottom' 否
theme number 主題樣式(1: 非全屏寬度； 2: 全屏寬度) 1 否 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.actionmenu.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.actionmenu.js"></script>

示例：

aui.actionMenu({
    title: '分享至',
    mask: true,
    touchClose: true,
    items: [
        {name: "微信", img: "../../img/weixin.png"},
        {name: "朋友圈", img: "../../img/pengyouquan.png"},
        {name: "QQ", img: "../../img/QQ.png"},
        {name: "微博", img: "../../img/weibo.png"}
    ],
    cancle: "取消",
    theme: 1,
    location: "bottom"
},function(ret){
    console.log(ret.index);				
});

popover菜單

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
items arr 菜單列表[{name: "", color: "", icon: "iconfont icongfont-right", iconColor: '', img: "", fontSize: "", textAlign: ""}] [] 否
mask boolean 是否顯示遮罩蒙版 false 否
touchClose boolean 觸摸遮罩是否關閉模態彈窗 true 否
location string 位置
top: 設置彈窗顯示到觸發元素“上”方;
bottom: 設置彈窗顯示到觸發元素“下”方;		 'top' 否 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.popover.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.popover.js"></script>

示例：

aui.popover.open({
    warp: '.aui-header-right',
    items: [
        {name: '微信', img: '../../img/weixin.png'},
        {name: '朋友圈', img: '../../img/pengyouquan.png'},
        {name: 'QQ', img: '../../img/QQ.png'},
        {name: '微博', img: '../../img/weibo.png'}
    ],
    mask: true,
    location: 'bottom'
},function(ret){
    console.log(ret);
    aui.toast({msg: ret.el.querySelector("span").innerHTML});
})

picker多級聯動

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
title string 標題 '' 否
layer number 控制幾級聯動 1 否
data arr 數據 如：[{text: '', adcode: '', children: [{text: '', adcode: ''}]}] [] 否 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.picker.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.picker.js"></script>

示例：

aui.picker.open({
    title: '選擇區域',
    layer: 3,
    data: cityData, //城市數據
    select: function(ret){
        console.log(ret);
    }
},function(ret){
    console.log(ret);
    if(ret.status == 1){
        aui.picker.close(function(){
            aui.alert({msg: ret.data.text + " " + ret.data.children.text + ' ' + ret.data.children.children.text});						
        });						
    }
})

poster廣告彈窗

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
mask boolean 是否顯示遮罩蒙版 true 否
touchClose boolean 觸摸遮罩是否關閉模態彈窗 true 否
image string 廣告圖片地址 '' 是 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.poster.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.poster.js"></script>

示例：

aui.poster({
    image: 'https://xbjz1.oss-cn-beijing.aliyuncs.com/upload/default/share.png'
});

sidemenu側滑菜單

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
content string 側滑菜單元素 '' 是
moves arr 跟隨拖動元素；
[header——頁面頭部, .content——頁面內容部分] (moveType設置為"all-move" 或 "menu-move"時，此參數必須配置		 [] 是
moveType string ['main-move': '主頁面移動，側滑菜單固定']
['menu-move': '側滑菜單移動，主頁面固定']
['all-move': '主頁面+側滑菜單都移動']		 'main-move' 否
position string 側滑菜單初始化位置，默認位於頁面左側 [left: '左側', right: '右側'] 'left' 否
mask boolean 是否顯示遮罩蒙版 true 否
maskTapClose boolean 觸摸遮罩是否關閉側滑菜單 true 否
speed number 打開、關閉頁面速度[值越大，速度越快] 10 否
drag object {
use: true, //--可選參數，是否開啟拖動打開、關閉菜單[true: 開啟 , false: 關閉]
start: null, //--可選參數，開始拖動回調
move: null, //--可選參數，拖動中回調
end: null, //--可選參數，拖動結束
}		 {} 否
style object 設置樣式 {
w: '80vw',
h: '100vh',
bg: '#333'
}		 否 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.sidemenu.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.sidemenu.js"></script>

初始化：

aui.sidemenu.init({
    warp: '.aui-container',
    content: '#aui-sidemenu-wapper',
    position: 'left',
    moveType: 'main-move',
    moves: ['.aui-container'],
    mask: true,
    maskTapClose: true,
    drag: {
        use: true,
        //start: _this.dragcallback,
        //move: _this.dragcallback,
        end: function(ret){
            console.log(ret)
        }
    },
    style: {
        w: '70vw',
        h: '100vh',
        bg: '#333'
    },
}).then(function(ret){
    console.log(ret)
});

設置配置數據：

aui.sidemenu.setData({
    moveType: 'all-move',
}).then(function(ret){
    //console.log(ret)
});

打開側滑菜單：

aui.sidemenu.open({
    moveType: 'main-move',
    speed: 10,
}).then(function(ret){
    console.log(ret)
});

關閉側滑菜單：

aui.sidemenu.close({speed: 10}).then(function(ret){
    console.log(ret)
});

selectmenu下拉列表選擇菜單

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
data arr 菜單列表[{value: '', text: ''}] [] 是
layer number 控制組件為幾級 1 是
mask boolean 是否顯示遮罩蒙版 true 否
touchClose boolean 觸摸遮罩是否關閉側滑菜單 true 否
checkedMore boolean 是否多選(多選限制最后一級可多選) false 否
before function 打開彈窗前執行 null 否
select function 一級以上點擊選擇后執行，獲取下級數據並return null 否
style object 樣式 {
width: '',
height: '',
top: '',
left: '',
padding: '',
background: '',
borderRadius: '',
itemStyle:{
textAlign: '',
fontSize: '',
color: '',
isLine: false, //是否顯示分割線
}
}		 否 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.selectmenu.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.selectmenu.js"></script>

打開：

aui.selectMenu.open({
    warp: '.orderby-items',
    layer: layer, // 1,2,3...
    data: [
    	{value: '0', text: '昨天'},
    	{value: '1', text: '本周'},
    	{value: '2', text: '上周'},
    	{value: '3', text: '本月'},
    	{value: '4', text: '上月'},
    ],
    checkedMore: true,
    select: function(ret){ //點擊時獲取下級數據
        //console.log(ret); //{value: '0', text: '昨天'}
        if(ret.pindex == 0){
            //ajax  -- 參數如ret.value
            var data = [
                {value: '1', text: '1點'},
                {value: '2', text: '2點'},
                {value: '3', text: '3點'},
                {value: '4', text: '4點'},
                {value: '4', text: '5點'},
                {value: '4', text: '6點'},
                {value: '4', text: '7點'},
                {value: '4', text: '8點'},
                {value: '4', text: '9點'},
                {value: '4', text: '10點'},
                {value: '4', text: '11點'},
                {value: '4', text: '12點'},
            ];
        }
        else if(ret.pindex == 1){
            var data = [
                {value: '0', text: '10分'},
                {value: '1', text: '20分'},
                {value: '2', text: '30分'},
                {value: '3', text: '40分'},
                {value: '4', text: '50分'},
                {value: '4', text: '60分'},
            ];
        }
        return data						
    },
}, function(ret){
    isShowModal = false;
    for(var i = 0; i < is.parentNode.querySelectorAll('.orderby-item').length; i++){
        is.parentNode.querySelectorAll('.orderby-item')[i].classList.remove('active');				
    }
});

關閉

aui.selectMenu.close(function(){
    if(ret && ret.status == 0){
        console.log(ret);
        if(ret.data.length > 0){
            is.classList.add("selected");
            is.querySelector("span").innerText = '';
            for(var i = 0; i < ret.data[ret.data.length-1].length; i++){
                if(i != ret.data[ret.data.length-1].length - 1){
                    is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text + ',';																								
                }
                else{
                    is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text
                }
            }
        }
        else{
            is.classList.remove("selected");
            is.querySelector("span").innerText = '三級列表';
        }
    }
});

keypad數字鍵盤

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
type string 類型:
"number"—純數字鍵盤
"point"—帶小數點鍵盤
"idcard"—輸入身份證號鍵盤		 'number' 否
value string 鍵盤輸入值 '' 否
num number 控制小數點后保留兩位 2 否
mask boolean 是否顯示遮罩蒙版 true 否
touchClose boolean 觸摸遮罩是否關閉側滑菜單 true 否 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.keypad.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.keypad.js"></script>

示例：

aui.keypad.open({
    type: 'number', //1、number | 2、point | 3、idcard
    mask: false,
    value: document.querySelector('#text1').value
}, function(ret){
    console.log(ret);
    document.querySelector('#text1').value = ret.result;
});

chatbox js聊天輸入框

預覽

參數 類型 描述 默認值 必選
warp string 父容器元素 'body' 否
mask boolean 是否顯示遮罩蒙版 true 否
touchClose boolean 觸摸遮罩是否關閉側滑菜單 true 否
autoFocus boolean 是否自動獲取焦點 false 否
events arr 配置監聽事件(錄音，選擇附加功能...等事件監聽) [] 否
record object 錄音功能配置 record:
{
use: true, //是否開啟錄音功能
MIN_SOUND_TIME: 800 //錄音最短時間限制
}		 否
emotion object 表情功能配置 emotion:
{
use: true, //是否開啟表情功能
path: '' //.json文件路徑
pageHasNum: 27, //一頁顯示按鈕數量(7 * 4 - 1)
}		 否
extras object 附加功能配置 extras:
{
use: true, //是否開啟附加功能
pageHasNum: 8, //一頁顯示按鈕數量(4 * 2)
btns: [ /* {title: '', icon: '', img: ''} */],
}		 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.chatbox.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.chatbox.js"></script>

示例：

aui.chatbox.init({
    warp: 'body',
    autoFocus: true,
    record: {
        use: true,
    },
    emotion: {
        use: true,
        path: '../../img/chat/emotion/',
        file: 'emotion.json'
    },
    extras: {
        use: true,
        btns: [
            {title: '相冊', icon: 'iconimage'},
            {title: '拍攝', icon: 'iconcamera_fill'},
            {title: '語音通話', icon: 'iconvideo_fill'},
            {title: '位置', icon: 'iconaddress1'},
            {title: '紅包', icon: 'iconredpacket_fill'},
            {title: '語音輸入', icon: 'icontranslation_fill'},
            {title: '我的收藏', icon: 'iconcollection_fill'},
            {title: '名片', icon: 'iconcreatetask_fill'},
            {title: '文件', icon: 'iconmail_fill'}						
        ],
    },				
    events: ['recordStart', 'recordCancel', 'recordEnd', 'chooseExtrasItem', 'submit'],
}, function(){

})
//開始錄音
aui.chatbox.addEventListener({name: 'recordStart'}, function(ret){
    console.log(ret);
    //aui.toast({msg: ret.msg})
});
//取消錄音
aui.chatbox.addEventListener({name: 'recordCancel'}, function(ret){
    console.log(ret);
    //aui.toast({msg: ret.msg})
});
//結束錄音
aui.chatbox.addEventListener({name: 'recordEnd'}, function(ret){
    console.log(ret);
    aui.toast({msg: ret.msg})
});
//選擇附加功能
aui.chatbox.addEventListener({name: 'chooseExtrasItem'}, function(ret){
    console.log(ret);
    aui.toast({msg: ret.data.title});
});			
//發送
aui.chatbox.addEventListener({name: 'submit'}, function(ret){
    console.log(ret);
    aui.toast({msg: ret.data.value})
});


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Vue移動端UI框架 優秀的基於VUE移動端UI框架合集 優秀的基於VUE移動端UI框架合集 幾個移動端前端UI框架 優秀的基於VUE移動端UI框架合集 優秀的基於VUE移動端UI框架合集 優秀的基於VUE移動端UI框架合集 VUE PC端框架和移動端UI框架（收集） 基於vue的UI框架集錦(移動端+pc端) vue 移動端PC端選用的ui框架
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM