美文网首页
banner管理上下线时间

banner管理上下线时间

作者: 曹锦花 | 来源:发表于2019-07-31 14:53 被阅读0次

上下线时间

                <Row>
                    <Col span='12'>
                        <!-- 上线时间 -->
                        <FormItem :label='$t("highTime")' >
                            <Date-picker type="datetime" :placeholder="placeholderStartTimer" v-model="userBaseInfo.startTime" 
                            :options="startTimeOption"
                            @on-open-change="onOpenchange(userBaseInfo.startTime,userBaseInfo.endTime,'start')"
                            style="width: 100%;"></Date-picker>
                            <!-- @on-change="onStartTimeChange"  -->
                        </FormItem>
                    </Col>
                    <Col span='12'>
                        <!-- 下线时间 -->
                        <FormItem :label='$t("insertTime")'>
                            <Date-picker type="datetime" :placeholder="placeholderStartTimer" v-model="userBaseInfo.endTime" 
                            @on-open-change="onOpenchange(userBaseInfo.startTime,userBaseInfo.endTime,'end')"
                            :options="endTimeOption"
                            style="width: 100%;"></Date-picker>
                            <!-- @on-change="onEndTimeChange"  -->
                        </FormItem>
                    </Col>
                </Row>
______________________________
        data () {
            return {
           userBaseInfo: {  
                    'startTime': '', // 开始时间
                    'endTime': '', // 结束时间
                },
            }
        }
        //弹出日历和关闭日历时触发
        onOpenchange(startTime,endTime,str){
            if(startTime != ''){
            this.endTimeOption = {
                disabledDate(endTime) {
                    return (
                        // new Date(Date.parse(new Date(endTime)) - 60 * 60 * 1000 * 24)
                        endTime < new Date(Date.parse(new Date(startTime)) - 1000)
                    );
                }
            };

            }
            if(endTime != ''){
                this.startTimeOption = {
                    disabledDate(startTime) {
                        return (
                            startTime > new Date(endTime)
                        );
                    }
                };
            }
            this.send(str);
          },
        send(data){
            let params = {
                type: data
            }
            if(data == 'start') {
                params.timeVal = this.userBaseInfo.startTime
                this.$emit("child", params)
            } else if(data == 'end') {
                params.timeVal = this.userBaseInfo.endTime
                this.$emit("child", params)
            }
            
        },

图片上传


                <Row>
                    <Col span='6'>
                        <!-- 图片 -->
                        <FormItem :label='$t("picture")'>
                            <Upload :action="basicUrl + 'upload'"
                                :on-success = 'uploadSuccessed'
                                :on-error = "uploadFailed"
                                :on-progress = "uploading"
                                :show-upload-list = "false"
                                :headers='uploadHeaders'>
                                <Button icon="ios-cloud-upload-outline"></Button>
                            </Upload>
                        </FormItem>
                    </Col>
                    <Col span='18'>
                        <img :src="userBaseInfo.url" @click='clickPicture(userBaseInfo.url)' style='width:367px;height:115px;'>
                    </Col>
                </Row>
_____________________________________
data() {
  return {
                BASICURL : BASEURL + urlPathAdmin
                uploadHeaders: {'x-auth-token': Cookies.get('token')},
              userBaseInfo: {
                    'url': '', // 图片URL
                },
  }
}
        methods: {
            /* 图片上传时的钩子函数 */
            uploading (event, file, fileList) {
                this.ifShowPercentCircle = true;
                this.percentage = file.percentage;
            },
    
            /* 图片上传成功时的钩子函数 */
            uploadSuccessed (response, file, fileList) {
                this.userBaseInfo.url = response.data;
                this.ifShowPercentCircle = false;
                this.$Message.success('上传成功');
            },
    
            /* 图片上传失败时的钩子函数 */
            uploadFailed (error, file, fileList) {
                this.ifShowPercentCircle = false;
                this.$Message.error('上传失败');
            },
        }

相关文章

  • banner管理上下线时间

    上下线时间 图片上传

  • Banner 管理

    Banner 的用途 Banner 主要体现中心意旨,形象鲜明地表达最主要的情感思想或宣传中心。它的特点是:醒目...

  • springboot管理banner

    Banner的隐藏 Banner的更换 在src/main/resource下添加一个名叫banner.txt的文...

  • 分析活动banner

    一、觉得不错的活动banner 来源:网易云音乐互动话题banner 二、上图banner分析 从组成部分上分析:...

  • 你游戏玩的真好

    你花了大量的时间在游戏上,累计在线时长2000分钟,每天玩到健康管理系统逼你下线,在游戏里你能找到存在感。 是啊,...

  • 仿安居客详情页动画效果

    首先看下安居客房产详情页的效果: 效果解析:1、点击banner或者在banner上垂直滑动,banner布局滚动...

  • 【Banner设计】如何让用户快速获取广告banner信息

    我们通常设计banner考虑的问题很多,比如用户一般在一个banner上停留时间只有3秒,那么我们必须快速抓住用户...

  • Spring源码6:createApplicationConte

    上篇回顾 上一篇printBanner()打印Banner中非了springboot如何打印Banner 目录 1...

  • Django-搭建博客(6-创建数据库)

    有了admin后台后,我们先对前端展示banner进行管理,我们需要添加banner图片,跳转链接,描述,这三部分...

  • 和我一起画张banner

    拿到需求后如何效率完成一张banner?以前看到banner就头疼,两三天硬磨出一张banner,练了一段时间终于...

网友评论

      本文标题:banner管理上下线时间

      本文链接:https://www.haomeiwen.com/subject/ehqtdctx.html