精华内容
下载资源
问答
  • 1、 <el-form :inline="true" class="demo-form-inline padding-top-20"> <el-form-item label="年份"> <div class="block"> <el-date-picker v-model="searchYear" type="daterange" align=...

    1、

    <el-form :inline="true" class="demo-form-inline padding-top-20"> 
    <el-form-item label="年份"> <div class="block"> 
    <el-date-picker 
    v-model="searchYear"
    type="daterange" 
    align="right" 
    value-format="yyyy-MM-dd" 
    unlink-panels range-separator="至" start-placeholder="开始日期" 
    end-placeholder="结束日期" 
    :picker-options="Shortcut">
    </el-date-picker>
    </div>
    </el-form-item>
    

    需要加入
    value-format=“yyyy-MM-dd” 这个就可以了,我选择的是年月日

    2、
    通过@on-change事件来绑定

     <DatePicker type="date" @on-change="getStartTime" placeholder="选择日期" style="width: 200px">
     </DatePicker>
    
    getStartTime: function (starTime) {
      console.log(startTime)
    },
    
    

    3、
    直接@on-change=“date=$event”,date是data里的数据名

    <DatePicker
    @on-change="search.activityTime=$event" 
    type="date"
    placeholder="Select date"
    style="width: 200px"
    ></DatePicker>
    
    展开全文
  • vue-时间控件以及时间控件校验

    千次阅读 2020-07-20 17:22:25
    :model 数据区域 :rules 规则校验 <el-form ref="form" :model="rulesForm" :rules="rules" label-width="30%"> 1.同时出现两个日期选择列表 <el-form-item label="止期" prop="endTime">...
    :model 数据区域  :rules 规则校验
    <el-form ref="form" :model="rulesForm" :rules="rules" label-width="30%">
    
    1.同时出现两个日期选择列表
    <el-form-item label="止期" prop="endTime">
                  <el-date-picker
                    v-model="rulesForm.endTime"
                    type="daterange"
                    unlink-panels
                    style="width: 100%;"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
                
    2.每次出现一个日期选择列表
     <el-form-item label="保单止期">
                  <el-date-picker 
                    v-model="rulesForm.endDate1"
                    style="width: 50%;"
                    value-format="yyyy-MM-dd"
                    placeholder="起期"
                  ></el-date-picker>
                  <el-date-picker
                    v-model="rulesForm.endDate2"
                    style="width: 50%;"
                    value-format="yyyy-MM-dd"
                    placeholder="止期"
                  ></el-date-picker>
                </el-form-item>
    
    检验规则 required必须录入  trigger什么时候校验
    endDate1: [
              { required: true, message: "请选择保单止期起期", trigger: ["change", "blur"] }
            ],
            endDate2: [
              { required: true, message: "请选择保单止期止期", trigger: ["change", "blur"] }
            ]
    
    校验方法
     this.$refs.form.validate(valid => {
            if (valid) {
              // this.rulesForm.endDate1 = this.rulesForm.endTime[0];
              // this.rulesForm.endDate2 = this.rulesForm.endTime[1];
              止期不能大于起期
              let timeFlag = new Date(this.rulesForm.endDate1).getTime() > new Date(this.rulesForm.endDate2).getTime()
              if(timeFlag){
                return this.$message({
                    message: "保单止期信息录入有误,请检查录入信息!",
                    type: "warning"
                  });}
    
    展开全文
  • 最近很忙,一直没有时间写文章,接下来的时间,主要通过写一些vue组件的小例子,然后认识到vue中的一些知识,让大家都学会vue框架的使用

    最近很忙,一直没有时间写文章,接下来的时间,主要通过写一些vue组件的小例子,然后认识到vue中的一些知识,让大家都学会vue框架的使用

    了解父子组件的通信,使vue组件化开发的第一步,所以这点很重要,希望这篇文章能后帮助你了解到父子组件中是如何通信的

    <!--父组件-->
    <template>
    <oSelect @changeOption="onChangeOption" :selectData="selectData"></oSelect>
    <!--
    *父组件向组件传递参数首先要在父组件中绑定特定的参数,如:selectData;他等于数据selectData
    *这个数据便是我们要传给子组件的数据
    -->
    </template>
    <script>
    import oSelect from "@/components/select.vue";
    export default{
        name: 'App',
        data(){
            return {
                selectData: {
                    defaultIndex: 0,//默认显示索引值
                    selectStatus: false,//下拉框是否出现
                    selectOptions: [ //下拉框中的数据
                        {
                            name: 'time',
                            context: '按时间排序'
                        },
                        {
                            name: 'view',
                            context: '按浏览量排序'
                        },
                        {
                            name: 'like',
                            context: '按点赞数排序'
                        },
                        {
                            name: 'reply',
                            context: '按回复数排序'
                        },
                        {
                            name: 'reward',
                            context: '按打赏数排序'
                        }
                    ]
                }
            }
        },
        methods:{
            onChangeOption(index){
                /**此处的形参,就是子组件传过来的参数**/
                this.selectData.defaultIndex = index;
                //通过默认索引的改变,来改变选择的数据
            }
        },
        components: {
            oSelect
        }
    }
    </script>
    <!--子组件-->
    <template>
    <div class="select-box" @click="changeStatus">
        <h3 class="select-title"
            :name="selectData.selectOptions[selectData.defaultIndex].name"
            <!--
                这一步主要是传递选择的值
            -->
            :class="{'select-title-active': selectData.selectStatus}"> 
            <!--
                selectData.selectStatus根据此值的改变来联动是否含有class:select-title-active
            -->
            {{ selctData.selectOptions[selectData.defaultIndex].context }} 
        </h3>
        <transition name="slide-down">
        <!--
            这里做一个下拉上拉的动画,主要是为了体验更好
        -->
        <ul class="select-options" v-show="selectData.selectStatus">
            <!--
                根据selectData.selectStatus的值来改变下拉框的显示隐藏
            -->
            <li class="select-option-item" 
                v-for="(item,index) in selectData.selectOptions"
                @click="EmitchangeOption(index)"
                <!--
                    点击时讲当前的索引值(index)传出去
                -->
                :class="{'select-option-active':selectData.defaultIndex===index}">
                <!--
                    判断selectData.defaultIndex是否等于当前index,来增加被选中元素的class,
                    使其有一个高亮的状态
                -->
                {{ selectData.selectOptions[index].context }}
    
            </li>
            <div class="arrow-top"></div>
        </ul>   
        </transition>     
    </div>
    </template>
    <script>>
    export default{
        name: 'oSelect',
        props:{ // 子组件接收父组件传过来的值,使用props
            selectData: {
                type: Object //传过来的必须是对象
            }
        },
        methods:{
            EmitchangeOption(index){
                this.$emit('changeOption',index); 
                //changeOption为父组件中绑定的属性名字,一定要一致
                //改变选择的索引之后,传递个父组件
                //记住,子组件传数据给父组件使用 $emit
            },
            changeStatus(){
                this.selectData.selectStatus = !this.selectData.selectStatus
                //取反,来改变当前this.selectData的值
            }
        }
    }
    </script>

    最后效果如下

    这里写图片描述


    项目中的css,仅供参考吧

    <!--css仅供参考-->
    .select-box{
        position: relative;
        max-width: 250px;
        line-height: 35px;
        margin: 50px auto;
    }
    .select-title{
        position: relative;
        padding: 0 30px 0 10px;
        border: 1px solid #d8dce5;
        border-radius: 5px;
        transition-duration: 300ms;
        cursor: pointer;
    }
    .select-title:after{
        content: '';
        position: absolute;
        height: 0;
        width: 0;
        border-top: 6px solid #d8dce5;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        right: 9px;
        top: 0;
        bottom: 0;
        margin: auto;
        transition-duration: 300ms;
        transition-timing-function: ease-in-out;
    }
    .select-title-active{
        border-color: #409eff;
    }
    .select-title-active:after{
        transform: rotate(-180deg);
        border-top-color: #409eff;
    }
    .select-options{
        position: absolute;
        padding:10px 0;
        top: 45px;
        border:1px solid #d8dce5;
        width: 100%;
        border-radius: 5px;
    }
    .select-option-item{
        padding:0 10px;
        cursor: pointer;
        transition-duration: 300ms;
    }
    .select-option-item:hover,.select-option-active{
        background: #f1f1f1;
        color: #409eff;
    }
    .arrow-top{
        position: absolute;
        height: 0;
        width: 0;
        top: -7px;
        border-bottom: 7px solid #d8dce5;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 99;
    }
    .arrow-top:after{
        content: '';
        position: absolute;
        display: block;
        height: 0;
        width: 0;
        border-bottom: 6px solid #fff;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        left: -6px;
        top: 1px;
        z-index: 99;
    }
    
    <!--下拉动画的css-->
    .slide-down-enter-active,.slide-down-leave{
        transition: all .3s ease-in-out;
        transform-origin:0 top;
        transform: scaleY(1);
    }
    .slide-down-enter{
        transform: scaleY(0);
    }
    .slide-down-leave-active{
        transition: all .3s ease-in-out;
        transform-origin:0 top;
        transform: scaleY(0);
    }

    其实使用vue这类mvvm框架主要的思想,就是忘记DOM的存在,一切都是数据的交互,好了,今天的文章就讲到这里了

    想要了解更多的前端知识,请扫描下面二维码或者搜索微信公众号【大前端js】添加公众号;

    这里写图片描述

    手打不易,原创不易,转载时请注明转载出处,谢谢

    展开全文
  • Vue FlatPickr组件Flatpickr日期时间选择器演示或JSFiddle功能的Vue.js组件vactive model模型值您可以更改flatpickr值Vue FlatPickr组件Flatpickr日期时间选择器演示或JSFiddle功能的Vue.js组件演示vactive v模型值...
  • vue 时间线组件时间组件

    千次阅读 2020-10-09 16:17:49
    vue-时间线组件时间组件)代码 <template> <ul class="timeline-wrapper"> <li class="timeline-item" v-for="t in timelineList" :key="t.id"> <div class="timeline-box"> <...

    效果

    在这里插入图片描述

    vue-时间线组件(时间轴组件)代码

    <template>
        <ul class="timeline-wrapper">
            <li class="timeline-item" v-for="t in timelineList" :key="t.id">
            <div class="timeline-box">
                <div class="out-circle">
                    <div class="in-circle"></div>
                </div>
                <div class="long-line"></div>
            </div>
            <div class="timeline-content">
                <div class="timeline-date">{{t.date}}</div>
                <div class="timeline-title">{{ t.title}}</div>
                <div class="timeline-desc">{{ t.content}}</div>
            </div>
        </li>
        </ul>
    
    </template>
    
    <script type="text/babel">
        import Vue from 'vue'
        export default Vue.component('Timeline',{
            name: "Timeline",
            props: {
                timelineList: {
                    type: Array,
                    default: () => {
                        return []
                    }
                }
            }
        })
    </script>
    
    <style scoped lang="scss">
        ul.timeline-wrapper {
            list-style: none;
            margin: 0;
            padding: 0;
        }
    
        /* 时间线 */
        .timeline-item {
            position: relative;
    
            .timeline-box {
                text-align: center;
                position: absolute;
    
                .out-circle {
                    width: 16px;
                    height: 16px;
                    background: rgba(14, 116, 218, 0.1);
                    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                    /*opacity: 0.1;*/
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
    
                    .in-circle {
                        width: 8px;
                        height: 8px;
                        margin: 0 auto;
                        background: rgba(14, 116, 218, 1);
                        border-radius: 50%;
                        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                    }
                }
    
                .long-line {
                    width: 2px;
                    height: 98px;
                    background: rgba(14, 116, 218, 1);
                    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                    opacity: 0.1;
                    margin-left: 8px;
                }
            }
    
            .timeline-content {
                box-sizing: border-box;
                margin-left: 20px;
                height: 106px;
                padding: 0 0 0 20px;
                text-align: left;
                margin-bottom: 30px;
    
                .timeline-title {
                    font-size: 14px;
                    word-break: break-all;
                    margin-bottom: 16px;
                    color: #333;
                    font-weight: 500;
                    /*display: inline;*/
                }
    
                .timeline-date {
                    font-size: 16px;
                    color: #333;
                    font-weight: 500;
                    margin-bottom: 16px;
                }
                .timeline-desc {
                    font-size: 14px;
                    color: #999999;
                }
            }
    
        }
    
    
        .timeline-item:last-of-type .timeline-content {
            margin-bottom: 0;
        }
    </style>
    

    应用

    // 父组件引用
    <timeline :timeline-list="dongtai"></timeline>
    
    // 引入组件,记得组件路径要根据自己的来
    import Timeline from "./Timeline";
    // 在data()返回的对象里声明数组
    dongtai:[]
    
    展开全文
  • vue时间选择组件.zip

    2020-08-20 13:53:50
    类似头条投放端的时间段选择,最小粒度为半小时。鼠标滑动选择区域内的时间。分星期,粒度为48*7。鼠标也可点击选择。
  • 1 首先在vue项目 npm install moment --save ...在main.js 导入组件 import moment from 'moment' Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {  return moment(dat...
  • vue日期时间选择组件 Vue日期时间选择器 (Vue Datetime Picker) Fast, powerful and easy to use component datetime picker for VueJS. The component includes localization, highlight and disable date, 12/24-...
  • 在 main.js 写入以下内容: import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 以上代码便完成了 Element 的引入。 引用了,当然就需要...
  • vue时间选择器 时间选择器组件

    千次阅读 2019-09-26 20:24:47
    vue时间选择器 时间选择器组件
  • VUE中的UI组件

    2019-09-18 16:07:16
    VUE中的UI组件 组件功能 组件名称 VUE2的web UI工具 element VUE 2的移动UI mint-ui VUEjs 的开源 UI 库 iview ...
  • Vue中时间获取

    万次阅读 2018-07-11 19:03:32
    页面也崩溃了一整天,运行一会儿就崩了,到最后我发现,在任务管理器Chrome浏览器占得内存都出现了几十万k,我真是找不出代码哪里有原因,最后只能一个组件一个组件的排查,当我把第一个时间组件先注释之后,内存...
  • vue2的轻量级时间组件 安装 yarn add vue-light-timeline 如果您更喜欢npm: npm i vue-light-timeline 用法 import Vue from 'vue' ; import LightTimeline from 'vue-light-timeline' ; Vue . use ( ...
  • 主要为大家详细介绍了Vue时间段查询数据组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue+element 时间控件-时间格式转换

    千次阅读 2019-03-27 16:42:05
    vue +element 时间控件-时间格式转换 放到js文件 用法:formatDate(new Date(), “yyyy-MM-dd hh:mm:ss”) 结果:2019-03-27 16:40:36 export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt =...
  • 最近做的一个项目是基于 vue + AntDesign 的。由于项目要求,需要在 Table 组件的行内点右键的时候弹出菜单。在线演示地址及最终效果图如下: 在线演示地址>>   首先新建一个Table组件的实例: <a> { return ...
  • vue中使用ivew的日期组件设置开始时间和结束时间 项目使用开始时间和结束时间来查询时间条件 初次使用ivew的日期组件,需求时结束时间不能小于开始时间并且不能大于当日时间 看ivew文档说明,disabledDate:...
  • Vue.js组件,用于日期时间选择器。 或 版本矩阵 Vue.js版本 套餐版本 科 2.x 8.x 3.x 9.x 主 产品特点 React性v-model值您可以通过编程方式更改Flatpickr值 React性选项 您可以动态更改配置选项 组件将监视任何...
  • vue日历组件 日历时间选择器
  • 先上效果图吧 1、初始化的效果!2、可以拖拽,鼠标放上显示时间 3、播放按钮后,正常播放 左右两个横线可以上一页下一页 下面说VUE接入的步骤: 1、index.html引入js和css...2、写个时间控件组件TimePlay.vue &l
  • Vue营业时间Vue组件,用于在管理面板设置营业时间。 选择使用文字 和 组件带有'au Vue营业时间Vue组件,用于在管理面板设置营业时间。 选择使用文字 和 具有“自动完成”功能的组件,可以更灵活地定义营业时间。...
  • VUE中全局组件的封装与使用方法

    千次阅读 2019-08-23 16:47:30
    最近整理了一下vue的知识点,正好今天有些时间VUE中全局组件的封装与使用方法写一下。 1.自定义组件 <template> <div class="breadcrumb"> 面包屑 <slot/> <!-- 插槽 --> </div...
  • Vue时间组件

    千次阅读 2019-02-13 10:34:00
    github地址:https://github.com/SunshineMibai/vue-timeline 实现思路及步骤: 页面分为四个部分 1、左侧时间 2、中间圆点 3、右侧内容 4、虚线部分 最外层div,relative布局,方便子元素计算尺寸 左侧...
  • vue刻度尺组件

    2019-08-14 04:48:12
    vue刻度尺组件
  • 实现控件 新建活动 限制开始时间 必须大于当前时间20分钟 html <a-range-picker :class="{'has-error':startHasError || endtHasError}" v-model="rangeTime" :disabled-date="disabledDate" :disabled-...
  • Vue中的异步组件

    千次阅读 2019-06-21 14:14:38
    使用过vue 的小伙伴都知道Vue自定义组件,和组件引入方式。今天笔者要记录并介绍vue 组件的三种引入方式。 传统引入方式,即最常见的引入方式 import leftLine from "@/views/admanage/components/stepline"; ...
  • vue中父子组件通信,异步数据传递

    千次阅读 2018-06-08 21:46:01
    用了vue有段时间了,一些知识点做个总结,自己也可回顾 1:父传子  父组件:    子组件:两种写法,这样是最简单的形式,就可以在本组件接收这个参数     2:父传子(父组件是异步数据),可以在子组件...
  • Vue2.0进阶组件篇4 突如其来(时间倒计时组件).pdf
  • vuevue中时间格式化YYYYMMDD

    千次阅读 2020-10-08 01:14:10
    封装 formatLongDate (date) { let myyear = date.getFullYear(); let mymonth = date.getMonth() + 1; let myweekday = date.getDate(); let myHour = date.getHours(); let myMin = date.ge

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,005
精华内容 24,402
关键字:

vue中的时间组件

vue 订阅