amilytom

amilytom 查看完整档案

武汉编辑武汉工业学院  |  非计算机 编辑长航信达技术开发公司  |  前端工程师 编辑 www.mbfan.com 编辑
编辑

雁过留声,人去留名

个人动态

amilytom 回答了问题 · 1月21日

javascript:if在条件为false的情况下仍然执行代码是为什么?

find和findIndex方法都是es6针对数组的方法。但是两者是有区别的。
find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined。
findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。

所以如果没有找到符合条件的的时候
changeNum === undefined
changeNumIndex === -1
此时 changeNum !== undefined && changeNumIndex !== undefined 为false

关注 3 回答 2

amilytom 回答了问题 · 1月21日

vue+element ui v-for怎么生成如下页面

设置你的数据为data数组,按照数据的特点进行三次循环。
tagType.vue

// 其他代码省略
<el-form-item v-for="(item,index) in data" :label="data.name" :key="index">
    <div v-for="itemChild in item.children" :key="itemChild.id">
        <el-tag>{{itemChild.name}}</el-tag>
        <tag-child :tag-data="itemChild.children"></tag-child>
    </div>
</el-form-item>

tagChild.vue

<template>
    <el-tag type="success" v-for="typeItem in tagData" :key="typeItem.id">{{typeItem.name}}</el-tag>
</template>
<script>
export default {
   props: ['tagData']
   data() {
    return {
        typeItem: {}
    }
   }
}
</script>

关注 4 回答 3

amilytom 赞了回答 · 1月21日

flexbox中align-items的异常行为解释

这种时候你要学会学习的方法。

  1. 首先到 MDN 上查找 align-items 的默认属性是什么:https://developer.mozilla.org...
  2. 得知是 normal,在你的场景下等效于 stretch
  3. 了解 stretch 的意思是按照容器的宽高缩放,所以滚动是正常
  4. 再看 center/flex-start/flex-end 的意思,只规定了起止位置,没有限制尺寸,所以撑开也是正常的
  5. 容器默认都是 overflow: visible,所以伸出去也是正常的。

关注 2 回答 1

amilytom 回答了问题 · 1月21日

为啥vue中a标签下载点击一次会加载两次下载的情况(刷新的情况下)

猜测可能的原因是刷新之后,vuex中token被清空了。导致

let baseHref = `${url.export}?token=${token}`;

这句话的地址改变了,所以向服务器又请求了一次。

关注 2 回答 1

amilytom 回答了问题 · 1月21日

想用vue实现多标签打开功能,为什么这么写显示不了标签功能

我大致看了一下你的代码,真正关键的pageList看到你并没有赋值。我猜想你是想把router里面的部分二级菜单赋值给pageList给pageList吧

 {
                path: '/index',
                // component: Index,
                component: () => import('src/views/index'),
                meta: { title: '首页' }
            },
            {
                path: '/user_add',
                name: 'AddUser',
                component: AddUser,
            },
            {
                path: '/task_list',
                name: 'TaskList',
                component: TaskList
            },
            {
                path: '/data_tmp',
                name: 'DataTmp',
                component: DataTmp
            },
            {
                path: '/user_list',
                name: 'UserList',
                component: resolve => require(['src/views/userManage/userList/userList'], resolve),
                meta: { title: '用户列表' }
            },
            {
                path: '/customContainer',
                name: 'CustomContainer',
                component: CustomContainer
            },
            {
                path: '/partDraggable',
                name: 'PartDraggable',
                component: PartDraggable
            },
            {
                path: '/article',
                name: 'Article',
                component: Article
            },
            {
                path: '/tenant_message',
                name: 'TenantMessage',
                component: TenantMessage,
                meta: { title: '租房信息' }
            },
            {
                path: '/gallery',
                name: 'Gallery',
                component: Gallery,
                meta: { title: '精美图库' }
            },
            {
                path: '/studentList',
                name: 'StudentList',
                component: StudentList
            },
            {
                path: '/studentAdd',
                name: 'StudentAdd',
                component: StudentAdd
            },
            {
                path: '/studentGridContainer',
                name: 'StudentGridContainer',
                component: resolve => require(['src/views/student/studentGridContainer'], resolve)
            },
            {
                path: '/studentGridContainer',
                name: 'StudentGridContainer',
                component: resolve => require(['src/views/student/studentGridContainer'], resolve)
            },
            {
                path: '/music',
                name: 'Music',
                component: resolve => require(['src/views/music/music'], resolve),
                meta: { title: '歌曲列表' }
            },
            {
                path: '/tableOperation',
                name: 'TableOperation',
                component: resolve => require(['src/views/student/tableOperation'], resolve)
            },
            {
                path: '/formOperation',
                name: 'FormOperation',
                component: resolve => require(['src/views/student/formOperation'], resolve)
            }

如果是那样的话,你可以把这部分单独定义为一个数组,然后export出来,在首页中import进来。并把它赋值给pageList,这样应该就可以出来tab标签了。

关注 2 回答 1

amilytom 回答了问题 · 1月21日

解决TypeScript不允许真假进行计算吗?

typescript是强类型的,是对弱类型的JavaScript的补充,是JavaScript的超集。布尔类型不能做运算,只有数字类型才可以运算。

typescript可以隐式或者显式转换数据类型。

可以把布尔类型转换成数字类型,就可以进行运算。

关注 3 回答 2

amilytom 回答了问题 · 1月20日

解决VUE应在那个生命周期获取后台数据?

mounted或者created都可以。created时dom还没有加载,适合调用一些对dom起作用的方法从后台获取数据。毕竟vue数据即视图嘛。可以把created周期视作js中的load()
其中created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

created() {
  this.$nextTick(() => {
    //dom操作
  })
}

mounted时dom已经加载完毕,适合调用一些对dom起补充作用的方法从后台获取数据。可以把mounted视作jquery中的ready()。

一般来说mounted用的最多,因为大多数都是基于dom树,对视图的的更新和修改。

关注 4 回答 5

amilytom 回答了问题 · 1月20日

解决禁止手动重复提交表单

这个简单啊。
element-ui里面提交按钮有个loading属性,使它的值为变量btnLoading: false。
在用户点击之后,你将btnLoading = true。这时候按钮就不可点击了。loading就一直在那转。
等提交成功了将btnLoading又重置为false。
完美解决!

关注 2 回答 2

amilytom 回答了问题 · 1月20日

el-upload组件如何 阻止 按键backspace 删除 上传的文件

可以在当前页面禁止退格键响应

js 屏蔽Backspace事件
function document.onkeydown() {
    if (event.keyCode == 8) { 
        if (document.activeElement.type == "text") {
            if (document.activeElement.readOnly == false)
                return true; 
            } 
        return false;
    }
}

关注 4 回答 2

amilytom 回答了问题 · 1月20日

vue项目打包后如何部署上线访问?

vue项目打包后部署到服务器上一般使用nginx作为服务器中间件。
因为是前后端分离的项目,在本地是通过node来代理api的。打包之后失去了node环境,所以需要采用nginx作为服务器中间件来部署和代理api。

安装nginx后,使用nginx的反向代理,将api的地址代理到你的前端网址上。比如
你前端访问使用 192.168.10.50(www.a.com)
api地址为:192.168.10.51:8088

server {
        listen 80;     #1.你想让你的这个项目跑在哪个端口
        server_name 192.168.10.50;     #2.当前服务器ip
        location / {
            root   E:/my_project/dist;     #3.dist文件的位置
            try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写)
        }
        location /api {  #4.当请求跨域时配置端口转发
            proxy_pass http://192.168.10.51:8088/api; #5.转发地址
            proxy_set_header Host $http_host;
        }
    }

通过代理api之后,你访问http://192.168.10.51:8088/api就相当于访问http://192.168.10.50:80.
这样既不暴露api的实际地方。既安全又稳定。

关注 5 回答 5

认证与成就

  • 获得 11 次点赞
  • 获得 6 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 6 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-09-07
个人主页被 709 人浏览