Skip to content

Latest commit

 

History

History
191 lines (153 loc) · 5.6 KB

README.md

File metadata and controls

191 lines (153 loc) · 5.6 KB
Raw

vi-dialog

使用

npm i vi-dialog

使用微信开发者工具构建NPM并使用NPM模块 

{
  "usingComponents": {
    "vi-dialog": "vi-dialog"
  }
}

示例

组件默认形式

<vi-cell-group>
  <vi-cell title="default" link bind:click="triggerToShowDefaultDialog"></vi-cell>
</vi-cell-group>
<vi-dialog ishide="{{defaultIsHide}}" bind:cancel="triggerToShowDefaultDialog" bind:confirm="triggerToShowDefaultDialog">
  <view style="padding: 20px 0;">Default Dialog</view>
</vi-dialog>
Page({
  data: {
    defaultIsHide: false,
  },
  triggerToShowDefaultDialog() {
    this.setData({
      defaultIsHide: !this.data.defaultIsHide
    })
  },
})

确认会话窗

<vi-cell title="确认会话窗" link bind:click="triggerToShowConfirmDialog" line></vi-cell>
<vi-dialog ishide="{{confirmIsHide}}" confirm title="Confirm" bind:cancel="triggerToShowConfirmDialog" bind:confirm="triggerToShowConfirmDialog">
  <view style="padding: 20px 0;">Confirm Dialog</view>
</vi-dialog>
Page({
  data: {
    confirmIsHide: false,
  },
  triggerToShowConfirmDialog() {
    this.setData({
      confirmIsHide: !this.data.confirmIsHide
    })
  },
})

警告会话窗

<vi-cell title="警告会话窗" link bind:click="triggerToShowAlertDialog" line></vi-cell>
<vi-dialog ishide="{{alertIsHide}}" alert title="alert" bind:cancel="triggerToShowAlertDialog" bind:confirm="triggerToShowAlertDialog">
  <view style="padding: 20px 0;">Alert Dialog</view>
</vi-dialog>
Page({
  data: {
    alertIsHide: false,
  },
  triggerToShowAlertDialog() {
    this.setData({
      alertIsHide: !this.data.alertIsHide
    })
  },
})

自定义按钮

<vi-cell title="自定义按钮" link bind:click="triggerToShowCustomDialog" line></vi-cell>
  <vi-dialog ishide="{{customIsHide}}" placeholder="请输入支付金额" custom input title="custom button" bind:confirm="triggerToShowCustomDialog">
  <view style="padding: 20px 0;">Custom Button Dialog</view>
  <view slot="customButton" style="text-align: center; width:100%;display:flex;flex-flow:row nowrap;justify-content:space-between;">
    <view style="flex: 1;text-align: center;height: 45px;line-height: 45px;border-right:1px solid #ddd; box-sizing:border-box;color: #5f5f5f;">返回首页</view>
    <view style="flex: 1;text-align: center;height: 45px;line-height: 45px;border-right:1px solid #ddd; box-sizing:border-box;color: green;">去支付</view>
    <view style="flex: 1;text-align: center;height: 45px;line-height: 45px;color: #bbb;" bindtap="triggerToShowCustomDialog">取消支付</view>
  </view>
</vi-dialog>
Page({
  data: {
    customIsHide: false,
  },
  triggerToShowCustomDialog() {
    this.setData({
      customIsHide: !this.data.customIsHide
    })
  },
})

输入会话窗

<vi-cell title="输入会话窗" link bind:click="triggerToShowInputDialog" line></vi-cell>
<vi-dialog ishide="{{inputIsHide}}" input title="input" bind:cancel="triggerToShowInputDialog" bind:confirm="triggerToShowInputDialog"></vi-dialog>
Page({
  data: {
    inputIsHide: false,
  },
  triggerToShowInputDialog() {
    this.setData({
      inputIsHide: !this.data.inputIsHide
    })
  },
})

属性

接口 数据类型 说明 选项 默认值
ishide Boolean 控制组件dialog显示隐藏 必填 false
title String dialog组件title 选填 提示
input Boolean 是否开启输入会话窗,默认不开启 选填 false
confirm Boolean 确认会话窗 选填 false
alert Boolean 警告会话窗 选填 false
custom Boolean 自定义会话窗按钮 选填 false
placeholder String input标签的placeholder属性要和组件的input接口配合使用 选填 请输入内容
value String input标签的value属性要和组件的input接口配合使用 选填 ''
inputType String input标签的type属性要和组件的input接口配合使用 选填 文本输入框(text)
maxlength Number input标签的maxlength属性要和组件的input接口配合使用 选填 140
disabled Boolean input标签的disable属性要和组件的input接口配合使用 选填 false
confirmType String 小程序input组件的confirmType属性要和组件的input接口配合使用 选填 done
password Boolean input组件的password属性要和组件的input接口配合使用 选填 false

event

event name description 返回值数据类型 返回值说明
triggerToCancel 取消按钮的事件 String 按钮的标识:'cancel'
triggerToConfirm 确认按钮的事件 String, Object 数据类型为String时是按钮的标识:'confirm'，数据类型为Object时，是输入会话窗的event.detail值
triggerToInput input的输入事件 Object 返回用户输入的值
triggerToFocus input的聚焦事件 Object event.detail
triggerToBlur input的失焦事件 Object event.detail

slot

slot name description
default 默认插槽，会话窗的提示内容
customButton 自定义按钮的插槽，注意需要和组件的custom接口配合使用

Bug&&Tips

  • 该组件的default形式与confirm形式是一样的

版本信息

  • v0.0.1 第一个版本
  • v0.0.6 修改组件层级、更新文档