vue.js城市选择框组件_响应式Vue.js日期选择器组件

最新推荐文章于 2024-04-24 09:45:21 发布

cuk5239

最新推荐文章于 2024-04-24 09:45:21 发布

阅读量254

点赞数

文章标签： vue html web python java ViewUI

原文链接：https://vuejsexamples.com/a-responsive-vue-js-datepicker-component/

版权

vue.js城市选择框组件

TRVLPicker (TRVLPicker)

TRVLPicker is a responsive Vue.js datepicker component. From mobile to desktop it has a full-screen vertical layout, a single month layout, a double month layout, and a triple month layout.

TRVLPicker是一个响应式Vue.js日期选择器组件。从移动设备到台式机，它具有全屏垂直布局，单月布局，双月布局和三月布局。

安装 (Install)

npm install @trvl/picker

import TRVLPicker from '@trvl/picker'

export default {
    // …
    components: {
        TRVLPicker,
    },
    // …
}

用法 (Usage)

基本的 (Basic)

In its most basic form, TRVLPicker only requires the checkin and checkout props. Both should be a Date object and have a sync modifier:

在最基本的形式中，TRVLPicker仅需要checkin和checkout道具。两者都应为Date对象并具有sync修饰符：

<template>
    <TRVLPicker
        :checkin.sync="checkin"
        :checkout.sync="checkout"
    />
</template>

<script>
    import TRVLPicker from '@trvl/picker'

    export default {
        components: {
            TRVLPicker,
        },
        data() {
            return {
                checkin: new Date(2019, 2, 13),
                checkout: new Date(2019, 2, 15),
            }
        },
    }
</script>

高级 (Advanced)

To ensure a correct positioning of the datepicker in the full-screen layout it makes use of a Portal. Although not required, it is recommended to place a Portal target element outside your Vue app:

为了确保日期选择器在全屏布局中的正确位置，它使用Portal 。尽管不是必需的，但建议将Portal目标元素放置在Vue应用程序外部：

<body>
    <div id="app">
        …
    </div>

    <div id="portal"></div>
</body>

道具 (Props)

Prop	Type	Default	Description
`breakpointSingle`	Number	`580`	Point at which the layout goes to a single month layout
`breakpointDouble`	Number	`740`	Point at which the layout goes to a double month layout
`breakpointTriple`	Number	`0` (disabled)	Point at which the layout goes to a triple month layout
`checkin`	Date		Check-in date
`checkout`	Date		Check-out date
`maxDate`	Date	`new Date()` + 1 year	Last possible check-out date
`maxStay`	Number	`30`	Maximum date range in days
`minDate`	Date	`new Date()`	First posssible check-in date
`portal`	String	`portal`	The ID of the portal

Struts	类型	默认	描述
`breakpointSingle`	数	`580`	布局转到单月布局的位置
`breakpointDouble`	数	`740`	布局转到双月布局的位置
`breakpointTriple`	数	`0` (禁用)	布局转到三个月布局的位置
`checkin`	日期		登记日期
`checkout`	日期		离开日期
`maxDate`	日期	`new Date()` + 1年	最后可能的退房日期
`maxStay`	数	`30`	最大日期范围(天)
`minDate`	日期	`new Date()`	第一次可能的入住日期
`portal`	串	`portal`	门户的ID

插槽 (Slots)

All slots are optional, but the checkin and checkout slots are highly recommended so as to customize their appearance.

所有插槽都是可选的，但强烈建议checkin和checkout插槽以自定义外观。

报到 (Check-in)

The template used for the check-in button.

用于签入按钮的模板。

<template slot="checkin" slot-scope="{ isActive, value }">
    <div :class="{ active: isActive }">
        <label for="checkin">Check-in</label>
        <input id="checkin" type="text" :value="value">
    </div>
</template>

The following data is available in the slot-scope:

slot-scope提供以下数据：

Data	Type	Description
`isActive`	Boolean	Whether the check-in input is active
`value`	Date	The raw check-in value

数据	类型	描述
`isActive`	布尔型	值机输入是否处于活动状态
`value`	日期	原始值机值

退房 (Check-out)

The template used for the check-out button.

用于签出按钮的模板。

<template slot="checkout" slot-scope="{ isActive, value }">
    <div :class="{ active: isActive }">
        <label for="checkout">Check-in</label>
        <input id="checkout" type="text" :value="value">
    </div>
</template>

The following data is available in the slot-scope:

slot-scope提供以下数据：

Data	Type	Description
`isActive`	Boolean	Whether the check-out input is active
`value`	Date	The raw check-out value

数据	类型	描述
`isActive`	布尔型	结帐输入是否处于活动状态
`value`	日期	原始结帐值

关 (Close)

The template used for the close button in the vertical layout.

垂直布局中用于关闭按钮的模板。

<template slot="close">
    <icon name="close" />
</template>

下一个 (Next)

The template used for the navigation button to go to the next month.

用于导航按钮的模板转到下个月。

<template slot="next">
    <icon name="next" />
</template>

以前 (Previous)

The template used for the navigation button to go to the previous month.

用于导航按钮的模板可以转到上个月。

<template slot="previous">
    <icon name="previous" />
</template>

方法 (Methods)

By adding a ref to the datepicker a couple of methods can be accessed:

通过将ref添加到日期选择器，可以访问以下两种方法：

<template>
    <TRVLPicker
        ref="picker"
        …
    />
</template>

<script>
    export default {
        mounted() {
            this.$refs.picker.callMethod()
        },
    }
</script>

Method	Parameters	Description
`close`		Close the datepicker
`open`	`checkin` \| `checkout`	Open the datepicker on the given input (defaults to `checkin`)

方法	参量	描述
`close`		关闭日期选择器
`open`	`checkin` \| `checkout`	在给定的输入上打开日期选择器(默认为`checkin` )

大事记 (Events)

Event	Description
`close`	The datepicker is closed
`open`	The datepicker is opened

事件	描述
`close`	日期选择器已关闭
`open`	日期选择器已打开

贡献 (Contributing)

# Project setup
npm install

# Compiles and hot-reloads for development
npm run serve

# Compiles and minifies for production
npm run build

# Lints and fixes files
npm run lint

# Runs unit tests
npm run test:unit

翻译自: https://vuejsexamples.com/a-responsive-vue-js-datepicker-component/

vue.js城市选择框组件

cuk5239

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js城市选择框组件_响应式Vue.js日期选择器组件

vue.js城市选择框组件 TRVLPicker (TRVLPicker)TRVLPicker is a responsive Vue.js datepicker component. From mobile to desktop it has a full-screen vertical layout, a single month layout, a double month layout,...
复制链接

扫一扫