Vue中的vxe-table教程15-输入框-日期、时间、数值、密码、整数、小数等

程序员文章站 2022-06-22 16:55:52

效果图：注意：使用图标需引入图标对应的css文件即可使用下载地址：http://www.fontawesome.com.cn/引入方式：1. index.html代码 <...

效果图：

注意： 使用图标需引入图标对应的css文件即可使用
下载地址：http://www.fontawesome.com.cn/
引入方式：
<link rel="stylesheet" href="./css/font-awesome.css">

1. index.html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
    <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
    <!--    使用图标需引入图标对应的css文件即可使用-->
    <!--    下载地址：http://www.fontawesome.com.cn/-->
    <link rel="stylesheet" href="./css/font-awesome.css">
    <!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->
</head>

<body>
<div id="app">
    <template>
        <div style="padding: 20px 50px 0 50px">
            <vxe-input placeholder="默认尺寸"></vxe-input>
            <vxe-input placeholder="可清除的" clearable></vxe-input>
            <vxe-input type="search" placeholder="带图标搜索类型" prefix-icon="fa fa-user" clearable></vxe-input>
            <vxe-input placeholder="密码类型" type="password" clearable></vxe-input>
            <br><br>
            <vxe-input placeholder="日期选择" type="date" clearable></vxe-input>
            <vxe-input v-model="value1" placeholder="周选择" type="week" clearable></vxe-input>
            <vxe-input v-model="value1" placeholder="月选择" type="month" clearable></vxe-input>
            <vxe-input v-model="value1" placeholder="年选择" type="year" clearable></vxe-input>
            <br><br>
            <vxe-input placeholder="时间选择" type="time"></vxe-input>
            <vxe-input placeholder="日期时间选择" type="datetime"></vxe-input>
            <vxe-input v-model="value1" placeholder="禁用日期" type="date" :disabled-method="disabledDateMethod"
                       transfer></vxe-input>
            <vxe-input v-model="value1" placeholder="农历节日" type="date" :festival-method="festivalCalendarMethod"
                       transfer></vxe-input>
            <br><br>
            <vxe-input placeholder="数值类型" type="number"></vxe-input>
            <vxe-input placeholder="数值间隔 1.4" type="number" step="1.4" clearable></vxe-input>
            <vxe-input placeholder="数值范围限制 0-10" type="number" min="0" max="10"
                       clearable></vxe-input>
            <vxe-input placeholder="小数类型" type="float"></vxe-input>
            <br><br>
            <vxe-input placeholder="小数间隔 2.3" type="float" step="2.3" clearable></vxe-input>
            <vxe-input placeholder="小数范围限制 0-50" type="float" min="0" max="50" clearable></vxe-input>
            <vxe-input placeholder="整数类型" type="integer"></vxe-input>
            <vxe-input placeholder="整数间隔 5" type="integer" step="5" clearable></vxe-input>
            <vxe-input placeholder="整数范围限制 0-100" type="integer" min="0" max="100"
                       clearable></vxe-input>
        </div>
    </template>
</div>
</body>

<script src="./js/main.js"></script>
<link rel="stylesheet" href="./css/main.css">
</html>

2. main.css代码

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");

.vxe-textarea--inner {
    line-height: inherit;
}

3. main.js代码

var Main = {
    data() {
        return {
            value1: "",
            tableData: [],
            calendarMaps: {
                20200930: {
                    label: '十四' // 显示节日名称
                },
                20201001: {
                    label: '国庆节,中秋节', // 如果同一天拥有多个节日重叠，用逗号分开
                    important: true, // 是否标记为重要节日
                    extra: '休' // 右上角额外显示的事件名称
                },
                20201002: {
                    label: '十六',
                    extra: '休'
                },
                20201003: {
                    label: '十七',
                    extra: '休'
                },
                20201004: {
                    label: '十八',
                    extra: '休'
                },
                20201005: {
                    label: '十九',
                    extra: '休'
                },
                20201006: {
                    label: '二十',
                    extra: '休'
                },
                20201007: {
                    label: '廿一',
                    extra: '休'
                },
                20201008: {
                    label: '寒霜',
                    important: true,
                    extra: '休'
                },
                20201009: {
                    label: '廿三'
                },
                20201010: {
                    label: '廿四',
                    extra: {
                        label: '班',
                        important: true // 是否标记为重要事件
                    }
                }
            },
        }
    },
    methods: {
        // 禁用日期
        disabledDateMethod({date}) {
            const dd = date.getDate();
            return dd > 13
        },
        // 显示日期农历节假日
        festivalCalendarMethod({date, type}) {
            if (type === 'day') {
                const ymd = XEUtils.toDateString(date, 'yyyyMMdd');
                return this.calendarMaps[ymd] || {label: '无'}
            }
        }
    },
};

var app = new Vue(Main).$mount('#app');

本文地址：https://blog.csdn.net/weixin_42289273/article/details/112564724