0.0.5 • Published 5 years ago
vue-simple-widget v0.0.5
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-widgetHow to use
Include plugin your .vue file
import VueSimpleWidget from 'vue-simple-widget';
components: {
VueSimpleWidget;
}Create widget:
<simple-widget
widgetId='Your ElementId'
....
// input your options
></simple-widget>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 |
| Name | Required | Type | Default | Description |
|---|---|---|---|---|
| widgetId | true | String,Number | input your element id | |
| width | false | Number | 330px | widget width, only support px |
| height | false | Number | 360px | widget height, only support px |
| headerAlign | false | String | left | left,right,center |
| contentAlign | false | String | left | left,right,center |
| verticalPostion | false | String | bottom | based on widgetId set vetical postion top,bottom |
| horizontalPostion | false | String | right | based on widgetId set horizontal postion left,right |
| bgcolor | false | String | #ffffff | widget background color you can use css color code |
| borderColor | false | String | #cccccc | widget border color you can use css color code |
| borderStyle | false | String | solid | widget border style you can use css border style |
| borderWeight | false | String | 1px | widget border weight you can use '2' px size |
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>