组件用.vue还是.js
A Slide-Out component for Vue.js 2.0.
Vue.js 2.0的Slide-Out组件。
Vue.js 2.x
Vue.js 2.x
Less
减
v-scroll-lock
v滚动锁定
npm i @hyjiacan/vue-slideout
or
要么
yarn add @hyjiacan/vue-slideout
For the latest code, you can:
对于最新的代码,您可以:
git clone https://github.com/hyjiacan/vue-slideout.git
或下载档案
<slide-out @close="onClose">
<div slot="header" slot-scope="{title}">
</div>
content
</slide-out>
<script>
import SlideOut from '@hyjiacan/vue-slideout'
import from '@hyjiacan/vue-slideout/lib/vue-slideout.css'
export default {
name: 'Foobar',
components: {SlideOut},
methods: {
onClose (e) {
// prevent close and wait
e.wait = true
// close after 3 seconds
setTimeout(() => {
// assign true to close, do nothing or assign false to cancel close.
e.close = true
}, 3000)
}
}
}
</script>
You can register it into global with Vue.component(SlideOut.name, SlideOut)
or Vue.use(SlideOut)
您可以使用Vue.component(SlideOut.name, SlideOut)
或Vue.use(SlideOut)
将其注册到全局
For more usage, see https://hyjiacan.github.io/vue-slideout/
有关更多用法,请参见https://hyjiacan.github.io/vue-slideout/
name | type | required | description | default |
---|---|---|---|---|
size | String/Number | NO | The size of slide, both px and % available | 400px |
zIndex | Number | NO | The z-index of slide | 1997 |
visible | Boolean | YES | Is the slide visible,modifier .sync is available | false |
title | String | NO | Slide title text, if this is empty and slot=header is empty too,the header would be hidden | - |
closeOnMaskClick | Boolean | NO | Whether to close slide while mask clicked | true |
customClass | String | NO | Customized stylesheet class name | - |
showMask | Boolean | NO | Is mask visible | true |
maskColor | String | NO | Mask color | rgba(0, 0, 0, 0.5) |
dock | String | NO | Slide dock position, optional values: top , right , bottom , left | right |
appendTo | String/HTMLElement | NO | Append slide into specified element.Both string (selector) andHTMLElement (DOM object) available | null |
disableAnimation | Boolean | NO | Whether to disable animation | false |
allowResize | Boolean | NO | Whether to allow drag-resize | false |
minSize | Number | NO | The min limit of drag-resize, value in px | 60 |
maxSize | Number | NO | The max limit of drag-resize, value 0 makes no limit, value in px | 0 |
ignoreEsc | Boolean | NO | Whether to ignore esc key, set false or keep default to close slide while press ESC | false |
lockScroll | Boolean | NO | Whether to lock page (affected to body element only) scroll (except slide self) | false |
名称 | 类型 | 需要 | 描述 | 默认 |
---|---|---|---|---|
尺寸 | 字符串/数字 | 没有 | 幻灯片的大小,可用px 和% | 400像素 |
索引 | 数 | 没有 | 幻灯片的Z索引 | 1997年 |
可见 | 布尔型 | 是 | 幻灯片是否可见,修饰符.sync 可用 | 假 |
标题 | 串 | 没有 | 幻灯片title 文本(如果为空且slot=header 也为空), 标头将被隐藏 | -- |
closeOnMaskClick | 布尔型 | 没有 | 单击蒙版时是否关闭幻灯片 | 真正 |
customClass | 串 | 没有 | 自定义样式表类名称 | -- |
显示面具 | 布尔型 | 没有 | 遮罩可见吗 | 真正 |
maskColor | 串 | 没有 | 面膜颜色 | rgba(0,0,0,0.5) |
码头 | 串 | 没有 | 滑动底座位置,可选值: top , right , bottom , left | 对 |
appendTo | 字符串/ HTMLElement | 没有 | 将幻灯片追加到指定的元素中。 string (选择器)和 HTMLElement (DOM对象)可用 | 空值 |
disableAnimation | 布尔型 | 没有 | 是否禁用动画 | 假 |
allowResize | 布尔型 | 没有 | 是否允许拖动调整大小 | 假 |
最小尺寸 | 数 | 没有 | 拖动调整大小的最小限制,以px 值 | 60 |
maxSize | 数 | 没有 | 拖动调整大小的最大限制,值0 无限制,以px 值 | 0 |
ignoreEsc | 布尔型 | 没有 | 在按ESC 是忽略esc 键,设置为false 还是保留默认值以关闭幻灯片 | 假 |
lockScroll | 布尔型 | 没有 | 是否锁定页面(仅影响到body 元素)滚动(幻灯片自身除外) | 假 |
Note: Slide uses style
position: fixed
and lockbody
scroll if propertyappendTo
not specified.注意:幻灯片使用样式
position: fixed
如果未指定属性appendTo
则position: fixed
并锁定body
滚动。
name | scope | description |
---|---|---|
header | {title} | Header content, take all the header bar, title will take no affected(and close button will be removed) if specified this,use slot-scope="{ title }" to get property title |
default | - | Content |
footer | - | Footer content |
名称 | 范围 | 描述 |
---|---|---|
标头 | {title} | 标题内容,占据所有标题栏, 如果指定此 title 则title 将不受影响(并且关闭按钮将被删除), 使用 slot-scope="{ title }" 获取属性title |
默认 | -- | 内容 |
页脚 | -- | 页脚内容 |
name | parameter | description |
---|---|---|
open | - | Invoke after slide opened |
close | e: {close: Boolean, wait: Boolean} | Invoke before slide close, in callback function, assign e.wait=true to prevent close,and assign e.close=true to close (async supported) |
closed | - | Invoke after slide really closed, it's emit after event close |
名称 | 参数 | 描述 |
---|---|---|
打开 | -- | 幻灯片打开后调用 |
关 | e: {close: Boolean, wait: Boolean} | 在幻灯片关闭之前调用,在回调函数中, 分配 e.wait=true 以防止关闭, 并分配 e.close=true 以关闭(支持异步) |
关闭 | -- | 幻灯片真正关闭后调用,事件close 后发出 |
yarn
# start dev server
yarn run serve
# Build library
yarn run release
翻译自: https://vuejsexamples.com/a-slide-out-component-for-vue-js/
组件用.vue还是.js