vue-testwidget v1.1.2

Vue.js Simple widget

Simple use, Easy custom

If you find bug / suggest some idea

use issue

or

contect me(desktop@kakao.com)

install

# Use npm
npm install vue-simple-widget --save

# Use yarn
yarn add vue-simple-widget

How to use

Include plugin your .vue file

import SimpleWidget from 'vue-simple-widget';

components: {
  SimpleWidget;
}

Create widget:

<simple-widget
    widgetId='Your ElementId'
    ....
  // input your options
></simple-widget>

or Include your main.js

import Vue from 'vue';
import SimpleWidget from 'vue-simple-widget';

Vue.use(SimpleWidget);

Input your content:

<simple-widget>
  <template v-slot:header>
    <p>vue-simple-widget</p>
  </template>
  <template v-slot:content>
    <p> Input your text! </p>
  </template>
</simple-widget>

Properties

| Name | Required | Default | Description |

Example

<template>
  <div>
    <button id="showWidget" @click="show = true">
      show
    </button>

    <simple-widget
      v-if="show"
      widgetId="showWidget"
      headerAlign="center"
      contentAlign="right"
      width="400"
      height="200"
      verticalPostion="top"
      horizontalPostion="left"
      @close="show = false"
    >
      <template v-slot:header>
        header
      </template>
      <template v-slot:content>
        content
      </template>
    </simple-widget>
  </div>
</template>

<script>
export defult{
  data(){
    return{
      show: false
    }
  }
}
</script>