tiny-vue/examples/sites/demos/mobile/app/modal/webdoc/modal.js

export default {
  column: '2',
  owner: '',
  demos: [
    {
      demoId: 'base',
      name: {
        'zh-CN': '基础用法',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>基础用法</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['base.vue']
    },
    {
      demoId: 'cancel-event',
      name: {
        'zh-CN': '取消事件',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>取消事件</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['cancel-event.vue']
    },
    {
      demoId: 'close-event',
      name: {
        'zh-CN': '关闭事件',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>关闭事件</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['close-event.vue']
    },
    {
      demoId: 'confirm-event',
      name: {
        'zh-CN': '确认事件',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>确认事件</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['confirm-event.vue']
    },
    {
      demoId: 'duration',
      name: {
        'zh-CN': '持续时间',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>持续时间</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['duration.vue']
    },
    {
      demoId: 'id',
      name: {
        'zh-CN': '不允许重复点击',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>不允许重复点击</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['id.vue']
    },
    {
      demoId: 'esc-closable',
      name: {
        'zh-CN': 'ESC键关闭',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>ESC键关闭</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['esc-closable.vue']
    },
    {
      demoId: 'footer-slot',
      name: {
        'zh-CN': '尾部插槽',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>尾部插槽</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['footer-slot.vue']
    },
    {
      demoId: 'fullscreen',
      name: {
        'zh-CN': '铺满全屏',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>铺满全屏</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['fullscreen.vue']
    },
    {
      demoId: 'grid',
      name: {
        'zh-CN': '网格',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>网格</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['grid.vue']
    },
    {
      demoId: 'hide-event',
      name: {
        'zh-CN': '隐藏事件',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>隐藏事件</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['hide-event.vue']
    },
    {
      demoId: 'is-form-reset',
      name: {
        'zh-CN': '重置表单数据',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>关闭弹窗，默认重置表单数据</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['is-form-reset.vue']
    },
    {
      demoId: 'lock-scroll',
      name: {
        'zh-CN': '禁止页面滚动',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>是否锁住滚动条，不允许页面滚动</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['lock-scroll.vue']
    },
    {
      demoId: 'lock-view',
      name: {
        'zh-CN': '锁住页面',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>是否锁住页面，不允许窗口之外的任何操作</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['lock-view.vue']
    },
    {
      demoId: 'mask-closable',
      name: {
        'zh-CN': '点击遮罩层关闭',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>点击遮罩层关闭</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['mask-closable.vue']
    },
    {
      demoId: 'message',
      name: {
        'zh-CN': '自定义提示框的内容',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>自定义提示框的内容</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['message.vue']
    },
    {
      demoId: 'min-height',
      name: {
        'zh-CN': '提示框最小高度为300',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>提示框最小高度为300</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['min-height.vue']
    },
    {
      demoId: 'min-width',
      name: {
        'zh-CN': '提示框最小宽度为700',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>提示框最小宽度为700</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['min-width.vue']
    },
    {
      demoId: 'resize',
      name: {
        'zh-CN': '可以拖动调整窗口大小',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>可以拖动调整窗口大小</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['resize.vue']
    },
    {
      demoId: 'show-event',
      name: {
        'zh-CN': '在窗口显示时触发事件',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>在窗口显示时触发事件</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['show-event.vue']
    },
    {
      demoId: 'showFooter',
      name: {
        'zh-CN': '是否显示底部',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>是否显示底部</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['showFooter.vue']
    },
    {
      demoId: 'showHeader',
      name: {
        'zh-CN': '是否显示头部',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>是否显示头部</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['showHeader.vue']
    },
    {
      demoId: 'status',
      name: {
        'zh-CN': '模态框提示图标',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>模态框提示图标</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['status.vue']
    },
    {
      demoId: 'title',
      name: {
        'zh-CN': '自定义标题',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>自定义标题</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['title.vue']
    },
    {
      demoId: 'top',
      name: {
        'zh-CN': '距离顶部的位置',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>距离顶部的位置</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['top.vue']
    },
    {
      demoId: 'type',
      name: {
        'zh-CN': '模态框类型',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>模态框类型</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['type.vue']
    },
    {
      demoId: 'value',
      name: {
        'zh-CN': '模态框按钮的值',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>模态框按钮的值</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['value.vue']
    },
    {
      demoId: 'zIndex',
      name: {
        'zh-CN': '模态框层级',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>模态框层级</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['zIndex.vue']
    },
    {
      demoId: 'zoom-event',
      name: {
        'zh-CN': '窗口缩放时触发事件',
        'en-US': 'button type'
      },
      desc: {
        'zh-CN': '<p>窗口缩放时触发事件</p>',
        'en-US': '<p>button type</p>'
      },
      codeFiles: ['zoom-event.vue']
    }
  ],
  apis: [
    {
      name: 'Modal', // 组件名称展示使用
      type: 'component', // API 类型
      properties: [
        {
          name: 'modelValue / v-model',
          type: 'Boolean',
          defaultValue: 'false',
          desc: {
            'zh-CN': '<p>绑定值</p>',
            'en-US': 'display different button'
          },
          demoId: 'cancel-event'
        },
        {
          name: 'id',
          type: 'String',
          defaultValue: '',
          desc: {
            'zh-CN': '<p>只对 type=message 有效，如果不想窗口重复点击，可以设置唯一的 id 防止重复提示</p>',
            'en-US': 'display different button'
          },
          demoId: 'id'
        },
        {
          name: 'is-form-reset',
          type: 'Boolean',
          defaultValue: 'true',
          desc: {
            'zh-CN': '<p>关闭弹窗，默认重置表单数据</p>',
            'en-US': 'display different button'
          },
          demoId: 'is-form-reset'
        },
        {
          name: 'title',
          type: 'String',
          defaultValue: 'true',
          desc: {
            'zh-CN': '<p>窗口的标题（支持开启国际化）</p>',
            'en-US': 'display different button'
          },
          demoId: 'title'
        },
        {
          name: 'type',
          type: 'String',
          defaultValue: 'alert',
          desc: {
            'zh-CN': '<p>窗口类型;该属性的可选值为 alert, confirm, message</p>',
            'en-US': 'display different button'
          },
          demoId: 'type'
        },
        {
          name: 'status',
          type: 'String',
          defaultValue: 'info',
          desc: {
            'zh-CN':
              '<p>只对 type=alert | confirm | message 有效，消息状态;该属性的可选值为 info, success, warning, error, loading</p>',
            'en-US': 'display different button'
          },
          demoId: 'status'
        },
        {
          name: 'message',
          type: 'String | Function | VNode]',
          defaultValue: '',
          desc: {
            'zh-CN': '<p>窗口的内容，类型为：纯文本/VNode，或返回纯文本/VNode的函数</p>',
            'en-US': 'display different button'
          },
          demoId: 'message'
        },
        {
          name: 'show-header',
          type: 'Boolean',
          defaultValue: 'true',
          desc: {
            'zh-CN': '<p>是否显示头部</p>',
            'en-US': 'display different button'
          },
          demoId: 'showHeader'
        },
        {
          name: 'showFooter',
          type: 'Boolean',
          defaultValue: 'true',
          desc: {
            'zh-CN': '<p>是否显示底部</p>',
            'en-US': 'display different button'
          },
          demoId: 'showFooter'
        },
        {
          name: 'lock-view',
          type: 'Boolean',
          defaultValue: 'true',
          desc: {
            'zh-CN': '<p>是否锁住页面，不允许窗口之外的任何操作</p>',
            'en-US': 'display different button'
          },
          demoId: 'lock-view'
        },
        {
          name: 'lock-scroll',
          type: 'Boolean',
          defaultValue: 'true',
          desc: {
            'zh-CN': '<p>是否锁住滚动条，不允许页面滚动</p>',
            'en-US': 'display different button'
          },
          demoId: 'lock-scroll'
        },
        {
          name: 'mask',
          type: 'Boolean',
          defaultValue: 'true',
          desc: {
            'zh-CN': '<p>是否显示遮罩层</p>',
            'en-US': 'display different button'
          },
          demoId: 'mask-closable'
        },
        {
          name: 'mask-closable',
          type: 'Boolean',
          defaultValue: 'true',
          desc: {
            'zh-CN': '<p>是否允许点击遮罩层关闭窗口</p>',
            'en-US': 'display different button'
          },
          demoId: 'mask-closable'
        },
        {
          name: 'esc-closable',
          type: 'Boolean',
          defaultValue: 'true',
          desc: {
            'zh-CN': '<p>是否允许按 Esc 键关闭窗口</p>',
            'en-US': 'display different button'
          },
          demoId: 'mask-closable'
        },
        {
          name: 'resize',
          type: 'Boolean',
          defaultValue: 'false',
          desc: {
            'zh-CN': '<p>是否允许拖动调整窗口大小</p>',
            'en-US': 'display different button'
          },
          demoId: 'resize'
        },
        {
          name: 'duration',
          type: 'Number | String',
          defaultValue: '3000',
          desc: {
            'zh-CN': '<p>只对 type=message 有效，自动关闭的延时</p>',
            'en-US': 'display different button'
          },
          demoId: 'duration'
        },
        {
          name: 'width',
          type: 'Number | String',
          defaultValue: '3000',
          desc: {
            'zh-CN': '<p>窗口的宽度</p>',
            'en-US': 'display different button'
          },
          demoId: 'grid'
        },
        {
          name: 'height',
          type: 'Number | String',
          defaultValue: '',
          desc: {
            'zh-CN': '<p>窗口的高度</p>',
            'en-US': 'display different button'
          },
          demoId: ''
        },
        {
          name: 'min-width',
          type: 'Number | String',
          defaultValue: '',
          desc: {
            'zh-CN': '<p>窗口的最小宽度</p>',
            'en-US': 'display different button'
          },
          demoId: 'min-width'
        },
        {
          name: 'min-height',
          type: 'Number | String',
          defaultValue: '',
          desc: {
            'zh-CN': '<p>窗口的最小高度</p>',
            'en-US': 'display different button'
          },
          demoId: 'min-height'
        },
        {
          name: 'top',
          type: 'Number | String',
          defaultValue: '15',
          desc: {
            'zh-CN': '<p>只对 type=message 有效，消息距离顶部的位置</p>',
            'en-US': 'display different button'
          },
          demoId: 'top'
        },
        {
          name: 'zIndex',
          type: 'Number',
          defaultValue: '3000',
          desc: {
            'zh-CN': '<p>自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）</p>',
            'en-US': 'display different button'
          },
          demoId: 'zIndex'
        },
        {
          name: 'fullscreen',
          type: 'Boolean',
          defaultValue: 'false',
          desc: {
            'zh-CN': '<p>默认最大化显示</p>',
            'en-US': 'display different button'
          },
          demoId: 'fullscreen'
        }
      ],
      events: [
        {
          name: 'show',
          type: 'Function(params)',
          defaultValue: '',
          desc: {
            'zh-CN': '<p>在窗口显示时会触发该事件;params: { type // 事件类型，$modal // 组件实例 }</p>',
            'en-US': 'display different button'
          },
          demoId: 'show-event'
        },
        {
          name: 'hide',
          type: 'Function(params)',
          defaultValue: '',
          desc: {
            'zh-CN': '<p>在窗口关闭时会触发该事件;params: { type // 事件类型，$modal // 组件实例 }</p>',
            'en-US': 'display different button'
          },
          demoId: 'hide-event'
        },
        {
          name: 'confirm',
          type: 'Function(params)',
          defaultValue: '',
          desc: {
            'zh-CN':
              '<p>点击确定按钮时会触发该事件;params: { type // 事件类型，$modal // 组件实例 }，event: 原生事件</p>',
            'en-US': 'display different button'
          },
          demoId: 'confirm-event'
        },
        {
          name: 'close',
          type: 'Function(params)',
          defaultValue: '',
          desc: {
            'zh-CN':
              '<p>点击关闭按钮时会触发该事件;params: { type // 事件类型，$modal // 组件实例 }，event: 原生事件</p>',
            'en-US': 'display different button'
          },
          demoId: 'close-event'
        },
        {
          name: 'cancel',
          type: 'Function(params)',
          defaultValue: '',
          desc: {
            'zh-CN':
              '<p>点击取消按钮时会触发该事件;params: { type // 事件类型，$modal // 组件实例 }，event: 原生事件</p>',
            'en-US': 'display different button'
          },
          demoId: 'cancel-event'
        },
        {
          name: 'zoom',
          type: 'Function(params)',
          defaultValue: '',
          desc: {
            'zh-CN': '<p>窗口缩放时会触发该事件;params: { type // 事件类型，$modal // 组件实例 }，event: 原生事件</p>',
            'en-US': 'display different button'
          },
          demoId: 'zoom-event'
        }
      ],
      slots: [
        {
          name: 'default',
          type: '',
          defaultValue: '',
          desc: {
            'zh-CN': '<p>默认插槽</p>',
            'en-US': 'display different button'
          },
          demoId: 'cancel-event'
        },
        {
          name: 'footer',
          type: '',
          defaultValue: '',
          desc: {
            'zh-CN': '<p>窗口底部的模板</p>',
            'en-US': 'display different button'
          },
          demoId: 'footer-slot'
        }
      ]
    }
  ]
}