IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

ts报错TS2307: Cannot find module 'vue'

0

1

组件

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

求学大作战，视频播放时，向下滚动时，视频播放窗口会保持不动，内容会随着下拉而展示

1

vue相关

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  // handleScroll为页面滚动的监听回调
    window.addEventListener(
      "scroll",
        this.handleScroll);
    // 监听dom渲染完成
    this.$nextTick(function() {
      // 这里fixedHeaderRoot是吸顶元素的ID
      let header = document.getElementById("fixedHeaderRoot");
      // fixHead是固定头部的id
      let mtHeader = document.getElementById("fixHead");
      // 获取固定头部的高度
      this.mtoffsetHeight = mtHeader.offsetHeight;
      // 这里要得到吸顶元素的距离和元素自身的高度
      this.offsetTop = header.offsetTop;
      this.offsetHeight = header.offsetHeight;
      console.log(
        "offsetTop:" +
          this.offsetTop +
          "," +
          this.offsetHeight +
          "," +
          this.mtoffsetHeight
      );
 handleScroll() {
      // 得到页面滚动的距离
      let scrollTop = this.$refs.viewBox.scrollTop;
      console.log(scrollTop);
      // 判断页面滚动的距离是否大于吸顶元素的位置
      if (scrollTop > this.offsetTop - this.mtoffsetHeight) {
        this.headerFixed = true;
        this.topHeight = this.offsetHeight + this.mtoffsetHeight;
      } else {
        this.headerFixed = false;
        this.topHeight = 0;
      }
    }

在使用日期过滤器的时候出现了问题，列表显示的时间是12小时制，而不是24小时？

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="list" ng-controller="ListCtrl">
    <div class="title">
        <form class="form-inline">
            <div class="form-group form-ctrl">
                <label for="exampleInputName2">标题</label>
                <input type="text" class="form-control" ng-model="title" id="exampleInputName2">
            </div>
            <div class="form-group form-ctrl">
                <label for="exampleInputEmail2">创建者</label>
                <input type="text" class="form-control" ng-model="author" id="exampleInputEmail2">
            </div>
            <div class="form-group form-ctrl">
                <label for="exampleInputName2">修改时间</label>
                <input type="text" ng-click="open1()" ng-model="startAt" class="form-control" uib-datepicker-popup
                    is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" clear-text="清空"
                    current-text="今天" close-text="关闭" />
            </div>
            <div class="liner"></div>
            <div class="form-group form-ctrl">
                <input type="text" ng-click="open2()" ng-model="endAt" class="form-control" uib-datepicker-popup
                    is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" clear-text="清空"
                    current-text="今天" close-text="关闭" />
            </div>
            <div class="form-group form-ctrl">
                <label for="exampleInputName2">状态</label>
                <select class="form-control" ng-model="status" ng-options="v.id as v.name for v in a_data" ng-change="a_change(a)">
                    <option value="">全部</option>
                </select>
            </div>
            <div class="form-group form-ctrl">
                <label for="exampleInputName2">类型</label>
                <select class="form-control" ng-model="type" ng-options="v.id as v.name for v in b_data" ng-change="b_change(b)">
                    <option value="">全部</option>
                </select>
                <button type="button" class="btn btn-success" ng-click="search()">搜索</button>
                <button type="button" class="btn btn-danger" ng-click="empty()">清空</button>
            </div>
        </form>
    </div>
    <div class="article">
        <div class="top">
            <span>Article列表</span>
            <button type="button" class="btn btn-success btn-xs" ng-click="added()">+新增</button>
        </div>
        <table class="table table-hover">
            <tbody>
                <tr class="thead">
                    <th>序号</th>
                    <th>图片</th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>创建者</th>
                    <th>创建时间</th>
                    <th>修改时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                <tr class="thead" ng-repeat="tab in tabs">
                    <th ng-bind="$index + 1"></th>
                    <th><img src="{{tab.img}}" width="50px"></th>
                    <th>{{tab.title}}</th>
                    <th>{{tab.type | typeFilter}}</th>
                    <th>{{tab.author}}</th>
                    <th>{{tab.createAt | date:"yyyy/MM/dd      hh:mm:ss"}}</th>
                    <th>{{tab.updateAt | date:"yyyy/MM/dd      hh:mm:ss"}}</th>
                    <th>{{tab.status | statusFilter}}</th>
                    <th>
                        <button type="button" class="btn btn-success btn-xs" ng-click="online()">{{btnStatus()}}</button>
                        <button type="button" class="btn btn-info btn-xs" ng-click="edit()">编辑</button>
                        <button type="button" class="btn btn-danger btn-xs" ng-click="delete()">删除</button>
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="pages">
        <div>
            <span>每页显示</span>
            <input class="form-control input-sm" ng-model="size" type="text">
            <span>条</span>
        </div>
        <ul uib-pagination ng-change="pageChange()" total-items="bigTotalItems" ng-model="bigCurrentPage"
            boundary-link-numbers="false" items-per-page="size" first-text="第一页" previous-text="上一页" next-text="下一页"
            last-text="最后页" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false"></ul>
        <div>
            <span>去第</span>
            <input class="form-control input-sm" ng-model="page" type="text">
            <span>页</span>
        </div>
        <button type="button" class="btn btn-default" ng-click="sizeGo()">确认</button>
    </div>
</div>

复选框的全选后下一页不全选

0

1

angular model

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

'use strict';
angular.module('admin')
    .controller('handoverStudentCtrl', ['$state', 'userService', '$rootScope', 'checkboxArray', materialListCtrl]);
function materialListCtrl($state, userService, $rootScope, checkboxArray) {
    var vm = this;

    //2018.06.05
    vm.allChecked = JSON.parse(sessionStorage.getItem('all'));

    var userId = JSON.parse(sessionStorage.getItem('userId'));
    if (userId === null || userId === undefined) {
        var userId = [];
    }
    console.log(userId);
    //2018.06.05

    vm.id = $state.params.id;
    vm.name = $state.params.name;
    vm.type = "move";
    vm.params = {
        page: $state.params.page||1,
        size: $state.params.size||10
    };

    //获取用户师弟列表
    var uids = [];
    vm.get = function(){
        vm.promise = userService.studentList(vm.id, vm.params);
        vm.promise.then(function (res) {
            if (res.data.code == 0) {
                vm.totalPage = res.data.totalPage;
                vm.data = res.data.data.users;
                if (vm.allChecked) {
                    vm.data = checkboxArray.checkAllOrNot(vm.data, vm.allChecked);
                    vm.push();
                }
            } else {
                $rootScope.alert(res.data.message);
            }
        });
    }
    vm.get();

    
    // 单选
    vm.check = function (li) {
        li.$checked = !li.$checked;
    };
    
    
    // 全选
    vm.checkAll = function (isChecked) {
        vm.data = checkboxArray.checkAllOrNot(vm.data, isChecked);
        sessionStorage.setItem('all',JSON.stringify(vm.allChecked))
    };

    //阻止冒泡
    vm.preventCheck = function (e) {
        if (e && e.stopPropagation) {//非IE浏览器
            e.stopPropagation();
        }
        else {//IE浏览器
            window.event.cancelBubble = true;
        }
    };

    console.log(vm.teacherTypeList)


    //移交师弟
    vm.push = function push(){
        var uids = [];
        angular.forEach(vm.data, function (item, index) {
            if (item.$checked) {
                uids.push(item.id);
            }
            console.log(uids);
        });
    }
    vm.handover = function () {
        
        if (vm.allChecked) {
            vm.params = {
                page: $state.params.page||1,
                size: 255
            }
            vm.get(uids);
        } else {
            vm.push();
        }
        // function push(){
        //     angular.forEach(vm.data, function (item, index) {
        //         if (item.$checked) {
        //             uids.push(item.id);
        //         }
        //         console.log(uids);
        //     });
        // }
        

        $rootScope.confirm("确定移交师弟吗？", function () {
            userService.handoverStudent(vm.type, vm.uid, uids).then(function (res) {
                if (res.data.code == 0) {
                    $rootScope.alert("移交成功!", function () {
                        $state.go($state.current, {id: vm.id, name: vm.name}, {reload: true})
                    });
                } else {
                    $rootScope.alert(res.data.message);
                }
            })
        });
    }
}

placeholder属性在IOS中存在兼容性的问题

0

1

其他

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

&::placeholder {
            color: #bda969;
            font-size: 5vw;
        }

闭包到底如何触发

0

1

事件

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

问题已解决

所谓的微信网页授权code码，到底具体指的是什么？

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

找了好久，找到一个师兄的代码，可是看不懂啊。。

 //获取code码
        let vm = this;
        function getQueryString(name) {
            let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            let r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURI(r[2]);
            }
            return null;
        }
        //如果code码有值并且sessionStroage的token没有值时（即第一次进入页面），发送code，获取token
        if(getQueryString('code')&& !sessionStorage.getItem('token')){
            let code = getQueryString('code');
            projectService.getToken(code).then(function (res) {
                if(res.data.code === 0){

angular6时间选择器如何使用

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

1. ngx-daterangepicker-material时间选择器angular6组件使用：

1.1安装组件

    npm install ngx-daterangepicker-material --save



1.2引入依赖：

    ...
    import { FormsModule } from '@angular/forms';
    import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
    import { App } from './app';
    
    @NgModule({
        imports:      [... , FormsModule, NgxDaterangepickerMd],
        declarations: [App],
        bootstrap:    [App]
    })
    export class AppModule {}

1.3html设置

         <div>                                                                                      
          <input type="text"                                                                         
             ngxDaterangepickerMd                                                                   
             [isInvalidDate]="isInvalidDate"                                                         
             [isCustomDate]="isCustomDate"                                                           
             [locale]="{format: 'DD/MM/YYYY', firstDay: 1}"                                         
             [(ngModel)]="selected"                                                                 
             [singleDatePicker]="true"                                                               
             [autoApply]="true"                                                                     
             [maxDate]="maxDate"                                                                     
              [minDate]="minDate"  />                             
           </div>                                                                                              

1.4ypescript:

    import { Component, OnInit } from '@angular/core';
    import * as moment from 'moment';
    
    @Component({
      selector: 'single-datepicker',
      templateUrl: './single-datepicker.component.html',
      styleUrls: ['./single-datepicker.component.scss']
    })
    export class SingleDatepickerComponent implements OnInit {
      selected = moment();
      maxDate: moment.Moment;
      minDate: moment.Moment;
      constructor() { }
      ngOnInit() {
      this.maxDate = moment().add(1);
      }
      isInvalidDate(date) {
        return date.weekday() === 0;
      }
      isCustomDate(date) {
        return  (
          date.weekday() === 0 || date.weekday() === 6
        )  ? 'mycustomdate' : false;
      }
    
    }

####

点击查看身份，再点击隐藏身份，再点击查看下一个身份，而且图片和序号也对应的在变

1

事件

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var num=1;
$('#circle').text(num);
$('#num').text(num);

$(document).ready(function () {
    $('#deliver').click(function () {
        $('#icon').text(player[num])
     if($('#image').attr('src')=='../img/myking.png'){
         $('#image').attr('src',"../img/headicon.png")
     }else{
         $('#image').attr('src','../img/myking.png')
     }

    })
});

typeof 疑问

0

1

js基础变量

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var name;
name = 'jin';
console.log(typeof name);
name=1;
console.log(typeof name);