网站建设开发制作设计海南,wordpress 以前文章灯箱,网站pc和手机端分离怎么做,网站开发公司排行本组件用于从底部弹出一个操作菜单#xff0c;供用户选择并返回结果。 本组件功能类似于uni的uni.showActionSheetAPI#xff0c;配置更加灵活#xff0c;所有平台都表现一致。
#平台差异说明
App#xff08;vue#xff09;App#xff08;nvue#xff09;H5小程序√√…本组件用于从底部弹出一个操作菜单供用户选择并返回结果。 本组件功能类似于uni的uni.showActionSheetAPI配置更加灵活所有平台都表现一致。
#平台差异说明
AppvueAppnvueH5小程序√√√√
#基本使用
通过title(设置标题)cancelText(取消按钮的文字不为空时显示按钮)description(选项上方的描述信息)通过actions设置需要显示的菜单该值为一个数组元素为对象对象至少要提供name属性另外可选的有subname(描述)disabled(是否禁用)loading(加载动画) color(字体颜色)fontSize(字体大小)通过show绑定一个值为布尔值的变量控制组件的弹出与收起show的值是双向绑定的
templateviewu-action-sheet :actionslist :titletitle :showshow/u-action-sheetu-button clickshow true打开ActionSheet/u-button/view
/templatescript
export default {data() {return {title:标题,list: [{name:选项一,subname:选项一描述,color:#ffaa7f,fontSize:20},{name: 选项二禁用,disabled:true},{name: 开启load加载, //开启后文字不显示loading:true}],show: false};}
};
/scriptcopy
#配置点击遮罩关闭和点击某个菜单项时关闭弹窗
通过closeOnClickAction参数来配置点击某个菜单项时是否关闭弹窗。通过closeOnClickOverlay参数配置点击遮罩是否允许关闭注意关闭事件需要自行处理只会在开启closeOnClickOverlay后点击遮罩层执行close回调
templateviewu-action-sheet :actionslist :closeOnClickOverlaytrue :closeOnClickActiontrue :titletitle :showshow/u-action-sheetu-button clickshow true打开ActionSheet/u-button/view
/templatescript
export default {data() {return {title:标题,list: [{name:选项一},{name: 选项二}],show: false};},onLoad() {},methods: {}
};
/scriptcopy
#点击获取所点击选项name
select回调事件带有一个object值这个索引值为传递的select数组的name值根据回调事件能获得点击了 该项的内容
templateviewu-action-sheet :actionslist selectselectClick :titletitle :showshow/u-action-sheetu-button clickshow true打开ActionSheet/u-button/view
/templatescript
export default {data() {return {title:标题,list: [{name:选项一},{name: 选项二}],show: false};},onLoad() {},methods: {selectClick(index){console.log(index)}}
};
/script
