组件用.vue还是.js_Vue.js的滑出组件

组件用.vue还是.js

滑出 (SlideOut)

A Slide-Out component for Vue.js 2.0.

Vue.js 2.0的Slide-Out组件。

View demo 查看演示 Download Source 下载源

依存关系 (Dependencies)

• Vue.js 2.x

  Vue.js 2.x

• Less

  减

• v-scroll-lock

  v滚动锁定

安装 (Install)

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

or download archive

或下载档案

用法 (Usage)

<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/

物产 (Properties)

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) and HTMLElement(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 lock body scroll if property appendTo not specified.

注意：幻灯片使用样式position: fixed如果未指定属性appendTo则position: fixed并锁定body滚动。

插槽 (Slots)

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
默认	--	内容
页脚	--	页脚内容

大事记 (Events)

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后发出

发展历程 (Development)

yarn
# start dev server
yarn run serve
# Build library
yarn run release

翻译自: https://vuejsexamples.com/a-slide-out-component-for-vue-js/

组件用.vue还是.js