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

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

咨询电话 : 010-59478634

亚马逊运营

全部问题

已收录问题

未收录问题

没有找到答案，去提问>>>

该问题已被官方收录

如何事件委托，只点击出现，点击其他，事件委消失

1

1

事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$(function(){
    $('#Oversize').on('click','div',function(event){
        var target = $(event.target);
        $(event.target.parentNode).css("border","3px solid red");
        // console.log(target);
    });
})

该问题已被官方收录

Vue里面的 $event.target.files[0];是什么意思呢

1

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<template>
  <div>
    <main>
      <div>
        <div class="new-data-box">
          <span>|</span>
          <span>新增资料</span>
        </div>
        <div class="Data-options-box">
          <!-- 第一个所属科目 -->
          <div>
            <span>所属科目</span>
            <template>
              <el-select v-model="value" placeholder="数学">
                <el-option v-for="item in options" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </div>
          <!-- 第二个所属科目 -->
          <div>
            <span>所属课程/教材</span>
            <template>
              <el-select v-model="value" placeholder="和差倍问题">
                <el-option v-for="item in optionss" :key="item.valuee" :label="item.labell"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </div>
          <!-- 第三个所属课时 -->
          <div>
            <span>所属课时</span>
            <template>
              <el-select v-model="value" placeholder="全部">
                <el-option v-for="item in optionsss" :key="item.valueee" :label="item.labelll"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </div>
        </div>
        <!-- 第三个新增的资料选项 -->
        <div>
          <!-- 价格部分 -->
          <div>
            <span>价格</span>
            <input type="text" style="width: 30px;">
            <span>元</span>
          </div>
          <!-- 文件上传 -->
          <div>
            <span>文件</span>
            <label class="uupfile" for="upfile">上传</label>
            <input id="upfile"  style="margin-left: 3%;width: 70px;display: none;" type="file" @change="xd">
            <img  :src="PatH" id="upfile"  alt="" style="display: block;margin-left: 9.5%;margin-bottom: 2%;width: 42vw;">
            <table class="image">
              <thead>
                <tr>
                  <th>图片名</th>
                  <th>文件大小</th>
                  <th>进度</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
                <tr v-if="imgData">
                  <td>{{imgname}}</td>
                  <td>{{imgSize}}</td>
                  <td class="con">
                   <el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
                  </td>
                  <td></td>
                  <td>
                    <button style="margin-left: 10%;">上传</button>
                    <button style="margin-left: 10%;">删除</button>
                  </td>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<script>

  export default {
    data() {
      return {
        imgData: false, //未上传图片隐藏图片属性
        PatH:{
          },
          imgUrl:'',
          imgname:'',//图片名字
          imgSize:'',//图片大小
        proBar: 0,
        // 请输入价格的部分
         input: '',
        options: [{
          value: '选项1',
          label: '数学'
        }, {
          value: '选项2',
          label: '语文'
        }, {
          value: '选项3',
          label: '外语'
        }],
        value: '',
        optionss: [{
          valuee: '选项1',
          labell: '和差倍问题'
        }, {
          valuee: '选项2',
          labell: '三年级上册'
        }],
        value: '',
        optionsss: [{
          valueee: '选项1',
          labelll: '全部'
        }, {
          valueee: '选项2',
          labelll: '第一课 标点符号'
        }]
      }
    },
    methods:{
      xd($event){
        let file = $event.target.files[0];//声明
        this.imgData= true//未上传图片隐藏图片属性
        this.imgname=file.name//点击的时候让图片名字显示
      }
    }
  }
</script>
<style lang="scss" scoped>
// 新增资料外部样式
  .new-data-box{
    display: flex;
    align-items: center;
    text-align: left;
    height: 40px;
    background-color: cornflowerblue;
  }
  // 条件新增资料外部盒子
  .Data-options-box{
    height: 170px;
    border: 1px solid;
    padding-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
  }
  .uupfile{
    border: 1px solid;
    background-color: cadetblue;
  }
</style>
}

该问题已被官方收录

新增页面的按钮禁用如何设置

2

1

angular基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <button class="btn btn-default btn-success"
                    ng-click="online()"
                    ng-disabled="!( imgSrc && myForm.title.$valid && myForm.type.$valid   && myForm.link.$valid )" >立即上线
            </button>
            <button class="btn btn-default btn-success"
                    ng-click="draft()"
                    ng-disabled=" !imgSrc|| myForm.title.$invalid || myForm.type.$invalid    || myForm.link.$invalid"  >存为草稿
            </button>

该问题已被官方收录

自定义指令的link方法可有有4个参数，具体这4个参数各有什么用处？

1

1

angular 指令

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

angular.module('myApp')
    //分页指令api接口
    // $scope.option = {
    //     curr: 1,
    //     count: 10,
    //     all: 20,
    //     listSize: 10,
    //     click: function (page, size) {
    //         //page 当前页数
    //         //size 每页显示条数
    //         console.log('页数' + page)
    //         console.log('显示' + size)
    //     }
    // }
    .directive('myPage', function () {
        return {
            restrict: 'AE',
            priority: 0,
            scope: {
                option: '='
            },
            templateUrl: 'js/directive/mypage/my-page.html',

            link: function (scope, element, attrs) {

                var option = scope.option
                
                //监听option对象变化 更新page模型
                scope.$watch('option', function (newValue, oldValue) {
                    scope.page = getRange(option.curr, option.all, option.count)
                    if (option.curr == undefined) {
                        option.curr = 1
                    }
                }, true)

                //直接点击页数进行页数变化功能
                scope.click = function () {
                    var item = this.item
                    //如果点击相同页数返回
                    if (item == option.curr) {
                        return
                    }
                    switch (true) {
                        case item == '首页':
                            option.curr = 1
                            break
                        case item == '末页':
                            option.curr = option.all
                            break
                        case item == '<': //上一页
                            if (option.curr > 1) {
                                --option.curr
                            }
                            break
                        case item == '>': //下一页
                            if (option.curr < option.all) {
                                ++option.curr
                            }
                            break;
                        case (typeof item) == 'number':
                            option.curr = item
                            break
                    }
                    //回调函数 传递当前点击页数
                    option.click(option.curr, option.listSize)
                }

                //确定按钮逻辑  首先进行表单验证  成功执行回掉函数
                scope.confirm = function () {
                    if (scope.form.goTo.$error.number || scope.form.goTo.$error.pattern) {
                        alert('请输入正确的页数')
                        return
                    }
                    if (scope.goTo > option.all) {
                        scope.goTo = option.all
                        alert('超过最大页数')
                        return
                    }
                    if (scope.form.listSize.$error.number || scope.form.listSize.$error.pattern) {
                        alert('请输入正确的每页显示数量')
                        return
                    }
                    option.curr = scope.goTo
                    //回调函数 传递当前点击页数和每页显示条数
                    option.click(option.curr, option.listSize)
                }


                function getRange(curr, all, count) {
                    var arr = []
                    //计算显示的页数
                    curr = parseInt(curr)
                    all = parseInt(all)
                    count = parseInt(count)
                    var from = curr - parseInt(count / 2)
                    var to = curr + parseInt(count / 2) + (count % 2) - 1
                    //显示的页数容处理
                    if (from <= 0) {
                        from = 1
                        to = from + count - 1;
                        if (to > all) {
                            to = all
                        }
                    }
                    if (to > all) {
                        to = all
                        from = to - count + 1;
                        if (from <= 0) {
                            from = 1
                        }
                    }
                    arr.push('首页')
                    arr.push('<')
                    for (var i = from; i <= to; i++) {
                        arr.push(i)
                    }
                    arr.push('>')
                    arr.push('末页')
                    return arr
                }

            }
        }
    })

该问题已被官方收录

如何使用url 传参

1

1

url传参

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var routerApp = angular.module('routerApp')
    .controller('content', function ($scope, $http, $state) {
        $scope.main = $state.params
        http()
         
        function http() {
            $http({
                method: "get",
                params: $scope.main,
                url: "/carrots-admin-ajax/a/article/search" 
            }).then(function (res) {
                console.log(res)
                if (res.data.code === 0) {
                    $scope.article = res.data.data.articleList
                }
            })
        }

该问题已被官方收录

1

1

vue相关

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods(){
    asdasd:{
          console.log(this.msg)

    }
  }
}

该问题已被官方收录

vue 怎么动态调试css样式

1

1

vue相关

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<template lang="html">
  <div class="productlist">
    <Title v-bind:titleValue="title"></Title>
    <img class="titleimg" src="../assets/product/slide.png" alt="">
    <ul class="productlist-list">
      <li v-for="item in productList">
        <div class="incomelist">
          <span class="list-title"> {{item.productName}}</span>   <span class="income orange">{{item.expectedRate|incomeChange}}</span>
        </div>

        <div class="list-days">
          <span>投资周期  <span class="orange">{{item.investmentCycle|daysChange}}</span>
            <span class="income-div" :style="'width:'+percent+'%'">
          </span>
          <span class="list-right">预计年化收益</span>
        </span>
        </div>

      </li>
    </ul>
  </div>
</template>

该问题已被官方收录

获取三个不会重复的背景颜色

1

1

控制流程语句 js基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 //获取rgb的随机颜色
        function color(){
            var rgb;
             r = Math.floor(Math.random()*256);
             g = Math.floor(Math.random()*256);
             b = Math.floor(Math.random()*256);
            rgb ="rgb("+r+","+g+","+b+")"
            console.log(rgb);
            return rgb;
        }
        //获取三个随机盒子
        function box(){
             //当第一个盒子和第二个盒子相同的时候，或者第……，会重新获取三个盒子
             while(first == second || second == third || first==third){
                var first = Math.floor(Math.random()*9);
                var second =  Math.floor(Math.random()*9);
                var third =  Math.floor(Math.random()*9);
                console.log(first,second,third);
            }
            //给随机的三个盒子赋值上随机背景颜色rgb
            itme[first].style.backgroundColor = color()
            itme[second].style.backgroundColor = color()
            itme[third].style.backgroundColor = color()
        }

该问题已被官方收录

state.go传的参数为空时，用$stateParams. 是获取不到

1

1

angular router

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  $scope.arr1 = [
        {id: "", name: "全部"},
        {id: 0, name: "首页banner"},
        {id: 1, name: "找职位banner"},
        {id: 2, name: "找精英banner"},
        {id: 3, name: "行业大图"}
    ];

该问题已被官方收录

在路由文件之中如何配置懒加载

1

1

angular基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

myApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.when("", "home/hello");
  $stateProvider
    // 登录页
    .state("login", { url: "/login", templateUrl: "./html/Login.html" })
    // 列表主页
    .state("home", {
      url: "/home",
      templateUrl: "./html/Home.html",
      controller: "homeCtrl",
      resolve: {
        loadMyCtrl: function($ocLazyLoad) {
          return $ocLazyLoad.load(["./JS/Home.js", "./style/Home.css"]);
        }
      }
    })

去第页

Copyright ©2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1