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

相同路由跳转并不会刷新

0

1

url传参

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div>
        <div class="navBar">
            <div class="sideBar-title">萝卜多后台管理系统</div>
            <ul class="topNav">
                <li id="character" v-on:click='quit'>
                    <font-awesome-icon :icon="['fas', 'power-off']" class="power" />
                </li><span>|</span>
                <li id="character-name">{{manager}}</li><span>|</span>
                <li>{{role}}</li>
            </ul>
        </div>
        <div class="content">
            <ul class='sideBar'>
                <li v-for="(l,index) in lists" :key="index">
                    <a v-on:click="toggle(l,index)" v-bind:class="{ active: l.show }">
                        <font-awesome-icon :icon="['fas', 'pencil-alt']" class="pencil" />{{l.name}}
                        <font-awesome-icon :icon="['fas', 'angle-down']" v-if="l.show" class="angle" />
                        <font-awesome-icon v-else :icon="['fas', 'angle-left']" class="angle" />
                    </a>
                    <ul class="backstage-manage" v-show="l.show">
                        <li v-for="(item,index) in l.list" :key="index" @click="go($event,index,l)"
                            :class="{active:l.bgc[index]}">
                            <a>{{item}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="main-content">
                <!-- <keep-alive> -->
                <transition>
                    <router-view></router-view>
                </transition>
                <!-- </keep-alive>
                <router-view v-if='!$route.meta.keepAlive'></router-view> -->
            </div>

        </div>

如何使用input：radio实现绑定点击状态对应的值

0

1

angular view angular model

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <ul class="search_wrap">
                    <li class="keyword">
                        <p>关 键 词：</p>
                        <input type="text" v-model="postKeywordModel" maxlength="38">
                        <p>当前关键词：{{this.$route.query.postKeyword}}</p>
                    </li>
                    <li>
                        <p>所在地区：</p>
                        <div v-for="(city, index) in filter.city" :key="index">
                            <input type="radio" name="city" :id="city.id" :value="city.value" v-model="cityModel">
                            <label :for="city.id">{{city.name}}</label>
                        </div>
                    </li>
                    <li>
                        <p>所属行业：</p>
                        <div v-for="(industry, index) in filter.industry" :key="index">
                            <input type="radio" name="industry" :id="industry.id" :value="industry.value" v-model="industryModel">
                            <label :for="industry.id">{{industry.name}}</label>
                        </div>
                    </li>
                    <li>
                        <p>学历要求：</p>
                        <div v-for="(education, index) in filter.education" :key="index">
                            <input type="radio" name="education" :id="education.id" :value="education.value" v-model="educationModel">
                            <label :for="education.id">{{education.name}}</label>
                        </div>
                    </li>
                    <li>
                        <p>工作经验：</p>
                        <div v-for="(experience, index) in filter.experience" :key="index">
                            <input type="radio" name="experience" :id="experience.id" :value="experience.value" v-model="experienceModel">
                            <label :for="experience.id">{{experience.name}}</label>
                        </div>
                    </li>
                    <li>
                        <p>薪资水平：</p>
                        <div v-for="(compensation, index) in filter.compensation" :key="index">
                            <input type="radio" name="compensation" :id="compensation.id" :value="compensation.value" v-model="compensationModel">
                            <label :for="compensation.id">{{compensation.name}}</label>
                        </div>
                    </li>
                    <li>
                        <p>发布时间：</p>
                        <div v-for="(updateAt, index) in filter.updateAt" :key="index">
                            <input type="radio" name="updateAt" :id="updateAt.id" :value="updateAt.value" v-model="updateAtModel">
                            <label :for="updateAt.id">{{updateAt.name}}</label>
                        </div>
                    </li>
                    <li class="buttons">
                        <button class="clear" @click="clear ()">清空</button>
                        <button class="search" @click="search ()">搜索</button>
                    </li>
                </ul>

进入杀人页面，在杀人后再跳回法官台本页面，会导致状态机重置无法正常运行下去

0

1

本地储存

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 fsm = new StateMachine({
        init: "ready",
        transitions: [
            {name: 'stepOne', from: 'ready', to: 'stepOne'},
            {name: 'stepTwo', from: 'stepOne', to: 'stepTwo'},
            {name: 'stepThree', from: 'stepTwo', to: 'stepThree'},
            {name: 'stepFour', from: 'stepThree', to: 'stepFour'}
        ],
        methods: {
            onStepOne: function () {
                switch (fsm.state==="stepOne") {
                    case "stepOne":
                        $("#kill").css("background","green");
                        break;
                }
            },
            onStepTwo: function () {
                switch (fsm.state==="stepTwo") {
                    case "stepTwo":
                        alert("请死者亮明身份并且发表遗言");
                        break;
                }
            }
        }
    });
    $("#kill").click(function () {
        fsm.stepOne();
        window.location.href = '../html/task13_2.html';
        sessionStorage.setItem("state",fsm.state);
    });

    $("#words").click(function () {
        fsm.stepTwo();
    });
console.log(sessionStorage.getItem("state"));

在使用日期过滤器的时候出现了问题，列表显示的时间是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>

列表展示页，改变双数据的page和size的值，页面数据毫变化

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<table class="table table-striped f14">
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>类型</th>
            <th>发布时间</th>
            <th>修改时间</th>
            <th>发布者</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item, key) in message" :key="item.id">
            <td>{{ key + 1 }}</td>
            <td>{{ item.title }}</td>
            <td>{{ reset[item.type].type }}</td>
            <td>{{ item.createAt }}</td>
            <td>{{ item.updateAt }}</td>
            <td>{{ item.author }}</td>
            <td>{{ reset[item.status].status }}</td>
            <td><a>上线</a><a>编辑</a><a>删除</a></td>
          </tr>
        </table>

data() {
    return {
      message: [],
      reset: [
        { val: 0, type: "首页Banner" },
        { val: 1, type: "找职位Banner", status: "草稿" },
        { val: 2, type: "找精英Banner", status: "上线" },
        { val: 3, type: "行业大图" }
      ]
    };
  },
  methods: {
    requestData() {
      let data = {
        page: 2,
        size: 8,
        total: 30,
        list: 3
      };
      this.$axios({
        method: "get",
        url: "/carrots-admin-ajax/a/article/search",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: this.qs.stringify(data)
      })
        .then(resp => {
          this.message = resp.data.data.articleList;
          for (var a = 0; a < this.message.length; a++) {
            this.message[a].createAt = new Date(
              this.message[a].createAt
            ).toLocaleString("chinese", { hour12: false });
            this.message[a].updateAt = new Date(
              this.message[a].updateAt
            ).toLocaleString("chinese", { hour12: false });
          }
          console.log(resp);
          console.log(data);
          console.log(this.qs.stringify(data));
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    this.requestData();
  }

如何取到数组前几位的值?

1

数据类型操作DOM

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

success: function (res) {
					let resd = res.data.data;
					console.log(resd.review.list);
					let lists = resd.review.list;
					console.log(lists.slice(0, 2));
					let xinlist = lists.slice(0, 2);

					that.setData({
						total: resd.review.total,
						total_percent: resd.review.total_percent,
						list: resd.review.list,
						xinlist: xinlist
					})

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

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;
      }
    }

小程序的背景图片怎么设置？

0

1

小程序语言基础小程序界面构建

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

随机生成颜色（十六进制）

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var color = '#' + Math.random().toString(16).substr(-6);

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;
      }
    
    }

####