无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/meta.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubcss.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/menu.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/top.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/head.htm

[ lyuif-dialog ] 弹出层

时间:2020-09-19 23:22来源:www.lyuid.com 作者:前沿视觉网 点击:
V1.1.1 [ lyuif-dialog ] 弹出层 # 效果预览 Demo 参数说明 API 支持上下左右定位,内容自定义的自由弹出层 参数 说明 类型 默认值 ui 组件容器-外部class类 Strting / css 组件容器-style样式 Strting / show 显示

V1.1.1 [ lyuif-dialog ] 弹出层#

效果预览 Demo

 
参数说明 API
支持上下左右定位,内容自定义的自由弹出层
参数 说明 类型 默认值
ui 组件容器-外部class类 Strting /
css 组件容器-style样式 Strting /
show 显示或隐藏弹出层 Boolean false
gps 弹框定位(t/r/b/r/c 上/右/下/左/居中) Strting c
ani 弹出动画类型(center /居中弹出) Strting center
show-tit 是否显示-标题 Boolean true
show-val 是否显示-内容 Boolean true
show-foot 是否显示-底部 Boolean true
foot-ui 底部-外部class类 Strting /
foot-css 底部-style样式 Strting /
show-cancel 是否显示-取消按钮文本 Boolean true
cancel 取消按钮文本 Strting 取消
cancel-ui 取消按钮-外部class类 Strting /
cancel-css 取消按钮-style样式 Strting /
show-confirm 是否显示-确定按钮文本 Boolean true
confirm 确定按钮文本 Strting 确定
tabbar 是否留出tabbar距离 Boolean false
z z-index 层级 Strting 123456
w-max 最大宽度 Strting 600
h-max 最大高度 Strting 600
rd 圆角大小 Strting 24
mask 显示遮罩层 Boolean true
mask-on-close 是否-点击遮罩层关闭 Boolean true
mask-o 遮罩层-透明度 Strting 0.5
mask-ui 遮罩层-外部class类 Strting /
mask-css 遮罩层-style样式 Strting /
sha 弹出层-是否显示-投影 Boolean true
tit 标题 Strting 标题
tit-ui 标题-外部class类 Strting /
tit-css 标题-style样式 Strting /
val 内容 Strting /
val-ui 内容-外部class类 Strting /
val-css 内容-style样式 Strting /
cancel-open-type 取消按钮配置-微信开发能力 open-type Strting /
cancel-form-type 取消按钮配置-用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件 Strting /
cancel-form 取消按钮配置-会话来源,open-type="contact"时有效 Strting /
cancel-title 取消按钮配置-会话内消息卡片标题,open-type="contact"时有效 Strting /
cancel-path 取消按钮配置-会话内消息卡片点击跳转小程序路径,open-type="contact"时有效 Strting /
cancel-img 取消按钮配置-会话内消息卡片图片,open-type="contact"时有效 Strting /
cancel-card 取消按钮配置-是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效 Boolean false
cancel-app 取消按钮配置-打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效 Strting /
confirm-open-type 确定按钮配置-微信开发能力 open-type Strting /
confirm-form-type 确定按钮配置-用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件 Strting /
confirm-form 确定按钮配置-会话来源,open-type="contact"时有效 Strting /
confirm-title 确定按钮配置-会话内消息卡片标题,open-type="contact"时有效 Strting /
confirm-path 确定按钮配置-会话内消息卡片点击跳转小程序路径,open-type="contact"时有效 Strting /
confirm-img 确定按钮配置-会话内消息卡片图片,open-type="contact"时有效 Strting /
confirm-card 确定按钮配置-是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效 Boolean false
confirm-app 确定按钮配置-打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效 Strting /
    Boolean Strting  

Lyuif组件源码展示

  1. <lyuif-dialog
  2.     show="{{true}}"
  3.     gps="c"
  4.     ani="center"
  5.     cancel="取消"
  6.     confirm="确定"
  7.     tabbar="{{true}}"
  8. />
  9.  
自定义 Slot
自定义弹出层内容区域
参数 说明 类型 默认值
slot-root 自定义弹出层内容 Boolean false

Lyuif组件源码展示

  1. <lyuif-dialog
  2.     slot="left"
  3. >
  4. <view slot="left">自定义左侧区域内容</view>
  5. <view slot="left">自定义左侧区域内容</view>
  6. </lyuif-dialog>
  7.  
事件 Events
 
参数 说明 类型 默认值
bind:cancel 取消按钮点击事件 eventhandle /
bind:cancel-bindgetuserinfo 点击取消触发-微信开放能力-用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致,open-type="getUserInfo"时有效 eventhandle /
bind:cancel-bindcontact 点击取消触发-微信开放能力-客服消息回调,open-type="contact"时有效 eventhandle /
bind:cancel-bindgetphonenumber 点击取消触发-微信开放能力-获取用户手机号回调,open-type=getPhoneNumber时有效 eventhandle /
bind:cancel-binderror 点击取消触发-微信开放能力-当使用开放能力时,发生错误的回调,open-type=launchApp时有效 eventhandle /
bind:cancel-bindlaunchapp 点击取消触发-微信开放能力-微信开放能力-打开 APP 成功的回调,open-type=launchApp时有效 eventhandle /
bind:cancel-bindopensetting 点击取消触发-微信开放能力-在打开授权设置页后回调,open-type=openSetting时有效 eventhandle /
bind:confirm 确定按钮点击事件 eventhandle /
bind:confirm-bindgetuserinfo 点击确定触发-微信开放能力-用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致,open-type="getUserInfo"时有效 eventhandle /
bind:confirm-bindcontact 点击确定触发-微信开放能力-客服消息回调,open-type="contact"时有效 eventhandle /
bind:confirm-bindgetphonenumber 点击确定触发-微信开放能力-获取用户手机号回调,open-type=getPhoneNumber时有效 eventhandle /
bind:confirm-binderror 点击确定触发-微信开放能力-当使用开放能力时,发生错误的回调,open-type=launchApp时有效 eventhandle /
bind:confirm-bindlaunchapp 点击确定触发-微信开放能力-微信开放能力-打开 APP 成功的回调,open-type=launchApp时有效 eventhandle /
bind:confirm-bindopensetting 点击确定触发-微信开放能力-在打开授权设置页后回调,open-type=openSetting时有效 eventhandle /

Lyuif组件源码展示

  1. <lyuif-dialog
  2.     bind:cancel="cancel"
  3.     bind:confirm="confirm"
  4. />
  5.  
  6. 容器内容
  7.  
  8. </lyuif-dialog>
  9.  
  10.  
  11. ({Page
  12.     cancel(){
  13.     console.log('cancel')
  14.     },
  15.     confirm(){
  16.     console.log('confirm')
  17.     }
  18. })
  19.  
前端UI框架,UI框架组件,小程序组件,Lyuif前端框架专注于高效UI解决方案.lyuif是一款HTML/CSS前端框架,高效组件搭配lyui基因碎片化组合完美适配设计稿以及迭代更新,高效前端开发解决方案
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footer.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/side.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footbar.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubjs.htm