0.1.2 • Published 2 years ago

vue-message-yanxing v0.1.2

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

m-message

颜星做的基于 Vue 的信息提示插件。

import Vue from 'vue'
import App from './App.vue'
import Message from 'vue-message-yanxing'
import 'vue-message-yanxing/lib/vue-message-yanxing.css'

// will mount `Vue.prototype.$message`
Vue.use(Message) 
// or
// will mount `Vue.prototype.$msg`
// Vue.use(Message, { name: 'msg' }) 

// 在vue实例中使用
const app = new Vue({
  render: h => h(App),
  data () {
    return {
     
    }
  },
  mounted () {
    setTimeout(() => {
      this.$message({
        title: 'Hi !',
        message: 'Welcome to use this plug-in !',
        iconImg: 'https://img1.baidu.com/it/u=2251659035,1886525937&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1000',
        duration: -1
      })
    }, 2000)
  }
}).$mount('#app')

window.app = app

Message API

  • Message(options) 显示信息
  • Message.info(msg | options) 普通信息
  • Message.success(msg | options) 成功信息
  • Message.error(msg | options) 错误信息
  • Message.warning(msg | options) 警告信息
  • Message.loading(msg | options) 加载信息
  • Message.closeAll() 清空所有消息
  • Message.globals.optionskey = value 全局默认设置,请看 options

options

参数说明类型可选值默认值
options消息配置对象object
options.type消息类型string'info', 'success', 'error', 'warning', 'loading'info
options.title消息标题string''
options.message消息内容string''
options.collapsable是否可折叠booleantrue
options.isCollapsed是否折叠消息内容booleanfalse
options.width消息块宽度,默认自动宽string''
options.showClose显示close按钮booleanfalse/truefalse
options.className消息块类名string
options.wrapperClassName包裹层类名string
options.supportHTML消息内容是否支持htmlbooleanfalse
options.onClose关闭回调function
options.duration消息显示时长,单位ms;-1时不会自定关闭number3000
options.zIndex堆叠顺序number1010
options.iconImg图片图标urlstring
options.hasMask是否含有遮罩层booleanfalse
options.position消息展示位置string'top-left', 'top-center', 'top-right', 'center', 'bottom-left', 'bottom-center', 'bottom-right'