Skip to content

Latest commit

 

History

History
211 lines (174 loc) · 5.07 KB

README.md

File metadata and controls

211 lines (174 loc) · 5.07 KB
Raw

fm-dialog

引用

ES6

import '@/assets/dialog/fm.dialog.min.css'
import { Dlg } from '@/assets/dialog/fm.dialog.min.js'

Global

<link rel="stylesheet" href="/dist/fm-dialog.min.css">
<script src="/dist/fm-dialog.min.js"></script>

或者

<script src="/dist/fm-dialog.min.js"></script>
Dlg.config({
  cssDir: '/dist/fm.dialog.min.css'
});

Demo

http://ifootmark.github.io/fm-dialog/demo.html

使用方法

参数选项

名称 类型 默认值 说明
id String "fmdialog" 对话框标识，可以设置弹出多个对话框
title String "提示" 标题
content String, HTMLElement "" 内容
width String, Number 300 宽度，也可设置为百分比，如： "50%"
showTitle Boolean true 是否显示标题
showClose Boolean false 是否显示右上角的关闭按钮
template Boolean true 使用对话框模板
buttonMaxCount Number 3 展示按钮的上限数目
buttonDirection String "horizontal" 按钮的展示方向，水平和垂直，有 "horizontal", "vertical" 两个取值
button Array [{
name: '取消',
css: '',
callback: null
}, {
name: '确定',
css: '',
callback: null
}]		 按钮对象数组，有几个对象展示几个按钮，最多不超过 buttonMaxCount 数量
name: String, 按钮显示文本
css: String, 按钮样式
callback: Function, 点击按钮时触发事件
lock Boolean true 是否模态方式锁屏
quickClose Boolean false 快速关闭，点击弹窗之外的区域关闭
auto Boolean false 是否自动关闭
timeOut Number 2000 对话框显示时间，以毫秒为单位
isMsg Boolean false 是否以消息的形式展示
msgType String "default" 消息类型，有7种选项：default, inverse, muted, success, info, error, warning
zIndex Number 98 设置 z-index 属性值
boxCss String "" 自定义容器样式
titleCss String "" 自定义标题样式
contentCss String "" 自定义内容样式
footCss String "" 自定义按钮样式
callback Function null 对话框初始化完成后的回调函数

API

Dlg.show(options)

options

  • id: "fmdialog",
  • title: "提示",
  • content: "",
  • width: 300,
  • showTitle: true,
  • showClose: false,
  • template: true,
  • buttonMaxCount: 3,
  • buttonDirection: "horizontal", //"vertical"
  • button: [{ name: '取消', css: '', callback: null }, { name: '确定', css: '', callback: null }],
  • lock: true,
  • quickClose: false,
  • auto: false,
  • timeOut: 2000,
  • isMsg: false,
  • msgType: "default", //success, info, error, warning, inverse, muted
  • zIndex: 98,
  • boxCss: "",
  • titleCss: "",
  • contentCss: "",
  • footCss: "",
  • callback: null

示例：

Dlg.show({
  id: 'icustom',
  content: '<div style="padding:30px;">亲爱的朋友，您好！又要请我吃饭了<br/><br/>我是自定义内容，写你想写的，做你想做的……<br/><br/>点击其他空白处我会消失的，点点看</div>',
  template: false,
  quickClose: true,
  showClose: true,
  callback: function(){}
});

快速调用

若想快速调用，可以用以下方法。

Dlg.confirm(options)

示例：

var buttons = [{
    name: '取消',
    css: 'color: #999999;',
    callback: function() {
      Dlg.close("iconfirm");
    }
  }, {
    name: '确定',
    css: 'color: #DF5658;',
    callback: function() {
      Dlg.msg({
        content: '果然是亲生的朋友，这么爽快就应答了',
        msgType: 'success'
      });
    }
  }]
Dlg.confirm({
  id: "iconfirm",
  content: '点我干什么，要请我吃饭吗？',
  buttonDirection: 'horizontal',//'vertical'
  button: buttons,
  showTitle: false
});

Dlg.msg(options)

content 消息内容 msgType 消息类型，default, success, info, error, warning, inverse, muted

示例：

Dlg.msg({
  content: '有话赶紧讲，2 秒后自动消失',
  msgType: "inverse"
});

示例：

Dlg.msg({
  content: '亲爱的朋友，您好！点击空白处我会消失哦，请试试看',
  msgType: 'inverse',
  lock: true,
  auto: false,
  quickClose: true
});

Dlg.loading(options)

示例：

Dlg.loading({
  id: 'iloading',
  content: '处理中，请稍候…',
  msgType: 'inverse',
  lock: true,
  auto: false,
  quickClose: true
});
setTimeout(function(){
  Dlg.close('iloading');
},2000)

Dlg.close(id)

id 要关闭的对象 id

示例：

Dlg.close('iloading');

Dlg.config(options)

options.cssDir：css 样式表路径

js 调用示例：

Dlg.config({
  cssDir: '/dist/fm.dialog.min.css'
});

License

MIT

© allmeet.net