easier-ui v1.0.7

特性

• 具有toast,loading,dialog三种场景
• 相对其他主流ui框架体积较小，适合不想自己手写却有这种交互需求的简单页面

安装

npm i easier-ui

引入

import easierUI from 'easier-ui'
import 'easier-ui/easier-ui.css'

Vue.use(easierUI)

基础用法

<template>
  <div id="app">
  <ea-dialog
      :show="visible"
      @close="cancel"
    >
      ddd
    </ea-dialog>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
  },
  data () {
    return {
      visible: true
    }
  },
  mounted () {
    // this.$eaLoading.show()
    
    this.$eaToast('333')
    this.$eaToast({
        message: '2222'
    })
  },
  methods: {
    cancel () {
      this.visible = false
    }
  }
}
</script>
<style>
  html,
  body,
  #app{
    height: 100%;
    padding: 0;
    margin: 0;
  }
</style>

Loading

调用方法：

this.$eaLoading.show()  // 展示
this.$eaLoading.hide() // 隐藏

options配置项

Toast

调用方法：

this.$eaToast('xxxxx')
// 或者
this.$eaToast（{
    message: 'xxxx',
    duration: 2000
}）

options配置项

Dialog组件

调用方法：

<template>
    <div id="app">
        <ea-dialog
            :show="visible"
            @close="cancel"
        >
            <!-- your content -->
        </ea-dialog>
    </div>
</template>

属性

方法