VUE气球 (vue-balloon)
A zoomable fixed balloon container. Useful for adding tutorial videos or other page specific content.
可缩放的固定气球容器。 对于添加教程视频或其他页面特定内容很有用。
Vue.js plugin to create a floating element that expands when clicked.
Vue.js插件可创建一个浮动元素,单击该元素即可展开。
作者 (Author)
kevinwarne
依存关系 (Dependencies)
This plugin uses font awesome icons so either include that or redefine custom icons for the classes .fa-chevron-up
, .fa-chevron-down
, .fa-expand
, .fa-compress
, .fa-close
.
该插件使用字体超棒的图标,因此可以包括该字体或重新定义类.fa-chevron-up
, .fa-chevron-down
, .fa-expand
, .fa-compress
和.fa-close
自定义图标。
安装和基本用法 (Install & Basic Usage)
Add as dependency with npm or yarn.
使用npm或yarn添加为依赖项。
npm install vue-balloon --save
npm install vue-balloon --save
or
要么
yarn add vue-balloon
yarn add vue-balloon
<template>
<div id = 'demo'>
<balloon
title = 'One Cute Cat'
position = 'bottom-right'
@maximize = 'playVideo'
@minimize = 'pauseVideo'
>
<!-- balloon content goes here.. for example a youtube video with the vue-youtube-embed plugin -->
<youtube video-id = '0Bmhjf0rKe8' ref = 'player'>
</youtube>
</balloon>
</div>
</template>
<script>
import { Balloon } from 'vue-balloon'
export default {
components: { Balloon },
methods: {
playVideo () {
this.$refs.player.player.playVideo()
},
pauseVideo () {
this.$refs.player.player.pauseVideo()
}
}
}
</script>
多个气球 (Multiple Balloons)
To achieve multiple fixed balloons on the same page we use Vue's scoped slot functionality paired with the vue-balloon BalloonSet component.
为了在同一页面上实现多个固定的气球,我们将Vue的作用域插槽功能与vue-balloon BalloonSet组件配对使用。
<template>
<div id = 'demo'>
<balloon-set
position = 'bottom-right'
:balloons = 'balloons'
>
<template scope = 'balloon'>
<!--
The multi balloon content goes here, scoped by the 'balloon' variable.
In this example we will extract the videoId attribute from each
balloon object to use in the video props
-->
<youtube :video-id = 'balloon.videoId' class = 'video'>
</youtube>
</template>
</balloon-set>
</div>
</template>
<script>
import { BalloonSet } from 'vue-balloon'
export default {
components: {
BalloonSet
},
data () {
return {
balloons: [
// Each balloon object can contain any props used in the balloon
// component (other than the position prop that should be set on the
// BalloonSet component instead). Events will also be propagated to
// the balloon component from the nested 'on' object.
{
key: 1,
videoId: '0Bmhjf0rKe8',
title: 'One Cute Cat',
on: {
maximize (balloonRef) { console.log('maximized', balloonRef) },
minimize (balloonRef) { console.log('minimized', balloonRef) }
}
},
{ key: 2, videoId: '28xjtYY3V3Q', title: 'And Some Cute Dogs!' }
]
}
}
}
</script>
注意事项和陷阱 (Caveats and Gotchas)
For multiple balloons with the BalloonSet component:
对于具有BalloonSet组件的多个气球:
Whenever a balloon is
maximized
to take up most of the window it will re-render the slot contents from scratch.每当气球
maximized
以占据大部分窗口时,它将从头开始重新渲染广告位内容。If you need to have reactive data inside each balloon it is recommended to store it inside of a nested balloon object. Otherwise the attributes are considered slot props and cannot be modified. For example:
如果需要在每个气球中包含React性数据,建议将其存储在嵌套的气球对象中。 否则,这些属性将被视为插槽属性,并且无法进行修改。 例如:
<template>
<div id = 'demo'>
<balloon-set
position = 'bottom-right'
:balloons = 'balloons'
>
<template scope = 'balloon'>
<!--
Some balloon with form content
-->
Name: <input v-model = 'balloon.data.name'/>
</template>
</balloon-set>
</div>
</template>
<script>
import { BalloonSet } from 'vue-balloon'
export default {
components: {
BalloonSet
},
data () {
return {
balloons: [
{
key: 1,
title: 'Edit Username',
data: {
name: 'Amelia Pond'
}
},
{
key: 2,
title: 'Edit Username',
data: {
name: 'Rory Williams'
}
}
]
}
}
}
</script>
组件: Balloon
(Component: Balloon
)
methods
(methods
)
These methods are exposed by the balloon component if needed:
如果需要,气球组件会公开以下方法:
methods: {
// closes the balloon as if hitting the X button
// note: closing the balloon merely sets the close data
// attribute and does not remove the component itself or
// remove it from the balloons array
close () {}
// reopen the balloon (reverse of close)
open () {},
// maximizes the balloon (full window)
maximize () {
this.balloonState.maximized = this.balloon
},
// minimizes the balloon (reverse of maximize)
minimize () {
this.balloonState.maximized = null
}
}
events
(events
)
These events are emitted from the balloon component.
这些事件从气球组件发出。
v-on:
close
: when the balloon is closedv-on:
close
:气球关闭时v-on:
open
: when the balloon is openedv-on:
open
v-on:
open
气球时v-on:
maximize
: when the balloon is maximizedv-on:
maximize
:气球最大化时v-on:
minimize
: when the balloon is minimizedv-on:
minimize
:气球最小化时
props
(props
)
props: {
// balloon title
title: {
default: '',
type: String
},
// position: bottom-right, bottom-left, top-right, or top-left
position: {
default: 'bottom-right',
type: String
},
// enable the css transform: scale() effect
zooming: {
default: false,
type: Boolean
},
// hide the close (x) icon on the balloon
hideCloseButton: {
default: false,
type: Boolean
},
// hide the concise (chevron) icons on the balloon
hideConciseButton: {
default: false,
type: Boolean
}
// when balloon is created it will have this initial 'concise' state
initiallyConcise: {
default: false,
type: Boolean
}
}
组件: BalloonSet
(Component: BalloonSet
)
BalloonSet was added in vue-balloon v1.0.18
在vue-balloon v1.0.18中添加了BalloonSet
props
(props
)
props: {
// position: bottom-right, bottom-left, top-right, or top-left
// (overrides the Balloon component position)
position: {
default: 'bottom-right',
type: String
},
// Balloon component data objects array, each object can contain props
// that propagate to their own Balloon component
balloons: {
default: [],
type: Array
},
// keep the minimized ballon when the corresponding balloon is maximized
dockKeepMaximized: {
default: false,
type: Boolean
},
// keep the balloon dock in front of the mask when a balloon is maximized
dockBringToFront: {
default: false,
type: Boolean
}
}
贡献 (Contributing)
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build demo (used to prepare for gitlab pages)
npm run build:demo
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
翻译自: https://vuejsexamples.com/create-a-floating-element-that-expands-when-clicked-with-vue-js/