@jdorg/jnotice

    0.1.4 • Public • Published

    jnotice

    安装

    npm install @jdorg/jnotice --save

    使用

    先引入:

    import JNotice from '@jdorg/jnotice'
    
    import '@jdorg/jnotice/dist/jnotice.css'
    
    Vue.use(JNotice)

    然后在vue实例中:

    this.$jnotice(setup:jnoticeSetup) // setup 为jnoticeSetup类型的对象

    说明

    接口:

    interface jnoticeSetup {
      text?:string;   // 要显示的文字
      duraiton?:number; // 多久会消失
      position?:'top'|'bottom'|'t-left'|'b-left'|'t-right'|'b-right'; // 所在位置
      background?:string; // 与css一致
      color?:string; // 与css一致
      width?:string; // 与css一致
      mheight?:string; // 与css min-height一致
      type?:'info'|'success'|'error';  // icon 类型
    }

    默认值:

    const jnoticeDefaultSetup:jnoticeSetup = {
      text: 'This is jnotice!',
      duraiton: 3000,
      position: 'top',
      background: '#ddd',
      color: '#000',
      width: '400px',
      mheight: '50px',
      type: 'info'
    }

    example

    <div id="app">
      <button class="btn" @click="click">Click to jnotice!</button>
    </div>
    export default class App extends Vue {
      public click() {
        this.$jnotice({
          background: '#424242',
          color: '#fff',
          position: 'top'
        })
      }
    }
    #app {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .btn {
      width: 200px;
      height: 80px;
    }

    example

    others

    @jdorg是一个开源前端组件的社区,如果你有开源组件的想法,欢迎加入我们

    qqgroup

    Install

    npm i @jdorg/jnotice

    DownloadsWeekly Downloads

    16

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    327 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar