vue表单校验
毓壞孩紙 2019-1-18 6:47 转存

clipboard.png

clipboard.png

这里是个动态增减的表单,证件号这里公用的一个证件号校验

export function identityNoValidatorByType (rule, value, callback, type) {

console.log(type)
if (type) {
    let reg = ''
    switch (type) {
    case '身份证':
        reg = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/
        break
    case '护照':
        // reg = /^([a-zA-z]|[0-9]){5,17}$/
        reg = /^[a-zA-z](\d{8})$/
        break
    case '驾照':
        reg = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/
        break
    case '户口薄':
        reg = /^[0-9]{9}$/
        break
    case '律师执业证':
        reg = /^[0-9]{17}$/
        break
    case '实习律师证':
        reg = /^[0-9]{14}$/
        break
    case '军官证':
        reg = /(南字第(\d{8})号|北字第(\d{8})号|沈字第(\d{8})号|兰字第(\d{8})号|成字第(\d{8})号|济字第(\d{8})号|广字第(\d{8})号|海字第(\d{8})号|空字第(\d{8})号|参字第(\d{8})号|政字第(\d{8})号|后字第(\d{8})号|装字第(\d{8})号){1}/
        break
    default:

校验规则里根据证件类型判断采用的正则

这样如何传入每个证件号自己的证件类型啊

var identityNoValidator = (rule, value, callback) => {
            return identityNoValidatorByType(rule, value, callback, this.identityType)
        }

这里我开始定义的变量标记类型 但是在最后提交的时候会把所有表单校验一遍这个时候多个身份传入的证件类型就是一个type 如何在校验函数里增加另一个证件类型字段

原文阅读

百度网盘是怎么实现拖拽文件夹上传的?
悄然篱笆 2019-1-18 3:41 转存

我想做类似百度云拖拽文件/文件夹上传的功能。目前用到的webuploader上传插件,这个插件用<input type="file"/>的方式选择文件夹的话,是可以获取到文件夹里面的文件相对于文件夹的路径的。但是当我使用拖拽上传的方式,获取到文件的路径为空。想请问一下百度网盘是怎么实现,拖拽文件夹上传,并保持文件相对文件夹的路径不变的呢?关于我使用webuploader的配置可以看我上一个问题https://segmentfault.com/q/10...

原文阅读

webuploader拖拽上传文件/文件夹,如何获取文件的路径
悄然篱笆 2019-1-17 12:33 转存

webuploader拖拽上传文件或文件夹时,怎么获取到文件的路径webkitRelativePath。如果通过<input type="file"/>的方式,是可以获取到里面文件的路径,但是拖拽的话,看到里面的路径为空的。

// 当有文件被添加进队列的时候
        uploader.on('fileQueued', function( file ) {
            console.log(file);
            uploader.md5File( file )

           // 及时显示进度
           .progress(function(percentage) {
               console.log('Percentage:', percentage);
           })
            // 完成
            .then(function(val) {
                // console.log('md5 result:', val);
            });
        });

        uploader.on('uploadBeforeSend',function(object,data,headers){
            console.log(object);

            data.webkitRelativePath=object.file.source.source.webkitRelativePath?object.file.source.source.webkitRelativePath:"";
            console.log(data);
            data.fileId="";
        });

当我用input控件上传的时候,fileQueued事件触发和uploadBeforeSend事件触发打印均可以获取到文件的路径,而使用拖拽上传的时候则获取到的路径为空。
clipboard.png
clipboard.png

原文阅读

const声明的变量不得改变值。为什么这样值变了却可以?
tommyee 2019-1-18 9:55 转存

const scrollTop = document.documentElement.scrollTop
滚动条事件,拖滚动条打印scrollTop每次打印的值不一样!不是说值不能改变吗?为什么这样可以呢?

原文阅读

vue-cli 3.X打包后找不到js文件?
Codermin 2019-1-18 8:44 转存

src/assets/js下有个rem.js

但我执行了npm run build 报了一个警告

clipboard.png

这是main.js的代码:

//rem
import rem from './assets/js/rem.js'
Vue.use(rem);

这是rem.js的代码:

fnResize()
window.onresize = function () {
    fnResize()
}
function fnResize() {
    var deviceWidth = document.documentElement.clientWidth || window.innerWidth
    document.documentElement.style.fontSize = (deviceWidth / 3.75) + 'px'
}

这是vue.config.js代码:

module.exports = {
    lintOnSave: false,
    baseUrl:'./',
    devServer: {
        port: 9001
    }
}

我感觉没问题啊,打包一直出现警告

原文阅读

如何解决微信小程序对于轮播图中高清图片加载很慢问题
Thinker 2019-1-18 10:29 转存

题目描述

在微信小程序开发当中,我们难免会遇到需要渲染比较大的高清图,但是加载特别慢,并且会出现打印机那样一行一行出来的效果,体验不太好。
我已经对静态资源加CDN了,但第一次加载依旧会很慢

题目来源及自己的思路

我想过几种方案:
1.监听图片加载完成事件,等加载完成才显示整个图片,但是用了才发现图片加载监听事件并不能保证图片完全加载完毕才触发,所以效果不明显
2.用骨架图先代替原图,但是问题还是没办法准确监听图片什么时候才能完整显示

我希望做过比较大的项目或者有类似经验的大佬指导一下,我认为这也是性能优化的一个问题
自己还是个个人开发者,开发小项目比较多,关于大项目的一些性能优化问题基本不了解
因此,我想趁此机会学习一下前端性能优化的知识,请各位大佬指导一下

原文阅读

typescript antd List组件 添加style提示不存在该类型
Flands 2019-1-18 8:17 转存

antd的List组件上直接写style={{ width: '300px', marginRight: '20px' }},提示List不存在这个属性。
解决办法只能是在外层套一个div么?有其他解决方式吗?

clipboard.png

原文阅读

TypeScript怎么合理高效地声明类型?
尹光耀 2019-1-18 2:46 转存

问题描述

最近刚在项目中使用TypeScript,发现需要编写大量的类型声明,如果一个变量在几个文件之间传来传去,在每个地方都要声明一下类型,而且大量的类型声明导致了效率大大降低,相当一部分时间在写类型,怎么平衡业务代码和类型代码的时间?编写类型带来的效率提高和收益体现在哪里?

问题出现的环境背景及自己尝试过哪些方法

我将所有的类型都放到types文件夹下面,如果一个变量出现在不同文件中,直接导入对应的type,实现了复用,但是还是不知道该怎么平衡写业务代码和写类型代码的时间,最后为了赶工,不得不在所有地方都写any,感觉失去了用ts的意义。

原文阅读

socket.io建立websocket连接之后为什么还会存在大量的TCP连接?
soccos 2019-1-18 10:12 转存

遇到的问题:

服务器使用了socket.io,浏览器与服务器建立连接之后,虽然polling已经成功升级为websocket且pingInterval设置为了30s,但是通过windows的任务管理器发现,浏览器与服务器正源源不断的交换着数据,发送和接收最后都会稳定在40.0Kbps左右的速度。如下图:
图片描述
通过抓包工具wireshark发现,电脑与服务器存在大量的TCP连接记录,并且以每秒200左右的速度不断增加。如下图:
图片描述

我的尝试:

相同的代码、相同的proxy代理程序,在本地看上去都一切正常。但是连接线上服务器就会出现如上的问题。

其他:

非常确定是应为连接了socket.io的原因,因为在控制台执行手动断开socket之后一切都恢复正常了。

有大佬知道这是什么原因吗??

原文阅读

vue2.0 如何实现页面缓存
zhaoxiaozhang 2019-1-18 9:51 转存

vue新闻项目
图片描述

数据请求,是通过点击上面的分类(所以分类共用一个数据请求页面),监控路由变化,只要路由变化就会请求数据,这样的话页面请求的数据就缓存不了

watch: {
    $route: function() {
      // if (this.routerChange) {
        this.getNews()
      // }
    }
  },
  methods: {
    ...mapActions(['getList', 'dowmLoadmore']),
    getFirstNews(){
      this.getList({
        channel: this.firstName,
        type: this.firstType,
        flag: this.routerChange
      })
    },
    getNews() {
      this.getList({
          channel: this.$route.query.type,
          type: this.$route.params.type,
          flag: this.routerChange
        })

keep-alive也开启了

{
      path: '/header',
      name: 'Header',
      component: Header,
      meta:{  keepAlive: false },
      children: [
        {
          path: '/home/:type',
          name: 'Home',
          component: Home,
          meta:{  keepAlive: true  }
        }
      ]
    },

现在还是只要切换分类,页面就会刷新,不知道该怎么改了

原文阅读

sympy计算方程组的复杂表达式怎么获得数值解?
神圣之风 2019-1-18 5:42 转存

有一道数学题已知
a+b+c=1
a^2+b^2+c^2=2
a^3+b^3+c^3=3
求abc的值。 答案1/6
现在用Python的sympy求解

import sympy
a,b,c=sympy.symbols(['a','b','c'])
rst=sympy.solve(['a+b+c-1','a**2+b**2+c**2-2',"a**3+b**3+c**3-3"],[a,b,c])
print(rst)
p=1
for i in range(0,len(rst[0])):
   p=p*rst[0][i]
print("-=")
print(p)

===
p的结果是一个很复杂的表达式,现在我怎么判断这个p的值与1/6是不是很接近,差异很小呢?

(1/3 + 5/(18(sqrt(26)/36 + 11/54)(1/3)) + (sqrt(26)/36 + 11/54)(1/3))(-6523(3sqrt(26) + 22)(2/3)/3 - 843sqrt(26)(3sqrt(26) + 22)(2/3)/2 - 326152(1/3)/3 - 4215sqrt(13)2(5/6)/2 + 1686sqrt(13)2(1/6)(3sqrt(26) + 22)(1/3) + 130462(2/3)(3sqrt(26) + 22)(1/3)/3 + 222(1/6)sqrt(-2543972(2/3)(3sqrt(26) + 22)(1/3) - 98631sqrt(13)2(1/6)(3sqrt(26) + 22)(1/3) - 3500252(1/3) - 64350sqrt(13)2(5/6) + 25740sqrt(26)(3sqrt(26) + 22)(2/3) + 140010(3sqrt(26) + 22)(2/3)) + 3592(2/3)sqrt(-195692(2/3)(3sqrt(26) + 22)(1/3) - 7587sqrt(13)2(1/6)(3sqrt(26) + 22)(1/3) - 269252(1/3) - 4950sqrt(13)2(5/6) + 1980sqrt(26)(3sqrt(26) + 22)(2/3) + 10770(3sqrt(26) + 22)(2/3))/6)(-42549529(6sqrt(26) + 44)(1/3)/11718750 - 5498889sqrt(13)2(5/6)(3sqrt(26) + 22)(1/3)/7812500 - 2341757(6sqrt(26) + 44)(2/3)/4687500 - 71753sqrt(13)2(1/6)(3sqrt(26) + 22)(2/3)/390625 + 1/3 + 3616472(2/3)(3sqrt(26) + 22)(2/3)/781250 + 302637sqrt(26)(6sqrt(26) + 44)(2/3)/3125000 + 277153112(1/3)(3sqrt(26) + 22)(1/3)/7812500 + 5498889sqrt(26)(6sqrt(26) + 44)(1/3)/7812500 - sqrt(3)sqrt(-65232(2/3)(3sqrt(26) + 22)(1/3) - 2529sqrt(13)2(1/6)(3sqrt(26) + 22)(1/3) - 89752(1/3) - 1650sqrt(13)2(5/6) + 660sqrt(26)(3sqrt(26) + 22)(2/3) + 3590(3sqrt(26) + 22)(2/3))/(6(3sqrt(26) + 22)(4/3)))/((3sqrt(26) + 22)(7/3)(3sqrt(13)2(1/6) + 11*2(2/3)))

原文阅读

怎么在antd List组件里加按钮
白熊大总统 2019-1-18 7:34 转存

我想在list列表组件里加按钮组件如图请问怎么弄

图片描述

               <List
                 size="small"
                 header={<div>个人信息</div>}
                 split={false}
                 gutter={-10}
                 bordered={false}
                 dataSource={data}
                 renderItem={item => (<List.Item>{item}</List.Item>)}
               />
           
           
           求解

原文阅读

微信小程序fillText 设置距离顶部距离的问题?
transform_ 2019-1-18 6:27 转存

clipboard.png

clipboard.png

同样是设置字体距离顶部20
为什么我设置的字距离顶部不是20

如果我设置顶部为0
我的字就看不到了
这是为什么

???

原文阅读

pandas如何删除第二个表中含有第一个表中的部分。
刘早起 2019-1-18 2:36 转存

打个比方,我有两个表。第一个表中有5行 第二个表中也有五行。
两个表的列名都一样。结构完全一样。
第二个表中有三行和第一个表中的三行是重复的
现在有什么快捷方法可以把第二个表中那重复的三行删了。结果只要两行
最好不要来个对每个值每个表遍历搜索一次。因为真实数据框比较大那样执行就太麻烦了。

原文阅读

iview Select 组件报错~
金刚葫芦娃 2019-1-18 9:35 转存

使用iview 里的 Select组件报错啊, 大家有没有人遇到啊....

<template>
  <div id="root">
    <Select
      key="123"
      v-model="model1"
      style="width:200px">
      <Option
        v-for="item in cityList"
        :value="item.value"
        :label="item.label"
        :key="item.value"/>
    </Select>
  </div>
</template>
data () {
    return {
      breadcrumb: [],
      dropdown: [],
      btninfo: {},
      cityList: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        },
        {
          value: 'Ottawa',
          label: 'Ottawa'
        },
        {
          value: 'Paris',
          label: 'Paris'
        },
        {
          value: 'Canberra',
          label: 'Canberra'
        }
      ],
      model1: ''
    }
  }

页面里啥也没写 就这些东西 就报错....
图片描述

谁知道咋回事呀。。。感谢帮助哦

clipboard.png

原文阅读

background-attachmen和background-size一起使用为什么图片显示不全
lzhsmall 2019-1-18 7:18 转存

background-attachmen和background-size一起使用为什么图片显示不全

原文阅读

thinkphp5模板文件里的变量名如何拼接
alexmao 2019-1-17 16:59 转存

问题描述

数据表里有多行,每行有day_1, day_2, day_3, ... , day_10这10个字段,已经获取数据到list数组,需要在模板文件中输出成表格。

问题出现的环境背景及自己尝试过哪些方法

在volist里面使用for循环,希望每一行自动循环10次,每次自动把$vo.day_1, $vo.day_2, $vo.day_3, ... $vo.day_10输出来,但按照以下写法,{$vo.day_$i}会提示报错。

语法错误: unexpected '$i' (T_VARIABLE), expecting ',' or ';'

相关代码

{volist name="list" id="vo"}

{for start="1" end="10"}
    {$vo.day_$i}
{/for}

{/volist}

你期待的结果是什么?实际看到的错误信息又是什么?

请问一下,应该如何才能给让程序自动输出$vo.day_1, $vo.day_2, $vo.day_3, ... $vo.day_10的值?

非常感谢!

原文阅读

() =&gt; () =&gt; {} 这个怎么看呀
不请自来 2019-1-18 7:6 转存

() => () => {} 这个怎么看呀

原文阅读

服务器的请求日志里出现路径不以/开头的日志是什么情况
iblogc 2019-1-18 2:21 转存

请问什么情况下会出现C这种情况。

// 非关键信息已做替换处理

A:正常请求 POST http://www.explame.com/a/b/c

请求日志:[2019-01-17T08:36:53.459Z] "POST /a/b/c/1.1" 200 - 288 89 27 24 "60.159.60.119" "Apache-HttpClient/4.5.2 (Java/1.8.0_171)" "28acr77c-5e90-4104-b260-329220f35b82" "www.explame.com" "176.45.2.111:8080" outbound|8082||aaa-svc.default.svc.cluster.local - 172.20.1.141:443 47.98.166.2:48014

B:测试请求 http://www.explame.com/http://www.explame.com/a/b/c

请求日志:[2019-01-17T08:40:41.133Z] "POST /http://www.explame.com/a/b/cHTTP/1.1" 404 - 0 0 5 3 "60.159.60.119" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36" "9eeaa699-b943-49d8-8e87-3f32a46lo454" "www.explame.com" "176.45.2.111:8080" outbound|8080||aaa-svc.default.svc.cluster.local - 172.20.1.141:80 66.139.61.99:61621

C:未知请求(这种情况怎么出现的?)

请求日志:[2019-01-17T08:47:09.492Z] "POST http://www.explame.com/a/b/c?timestamp=2019-01-17+16%3A47%3A09&amp;sign=FWER541F8A760BB29F6A66DEEEB3496D4&amp;app_key=25536607&amp;method=eeeee.city.listHTTP/1.1" 404 - 0 0 0 - "-" "-" "-" "www.explame.com:80" "-" - - 172.54.11.21:80 201.219.215.217:37946

原文阅读

为什么项目里的依赖更新后,依赖版本还是没有更新
黄尧鑫 2019-1-18 8:53 转存

项目里很多依赖版本都比较老了,但是不管我怎么更新,项目里的版本始终都不变,头都大了

原文阅读

来自 No input file specified 的折磨
_Marlon 2019-1-17 18:8 转存

下载了一个 ThinkPHP5 的完整包 解压, 然后折磨我一晚上

如下面两张图, 如果我把解压的文件包改名为纯数字 434 666 1234123 , 那么OK 一切正常,

如果我把解压的文件夹改名为字母, 那么就永远是 No input file specified , 是win10 的 坑 吗

配置1,文件夹改名为字母
图片描述

配置2,文件夹改名为数字
图片描述

为了表达清楚, 我不得不用图片呀

原文阅读

关于前端渲染性能问题(机器人大哥图里没代码)
菠萝1084 2019-1-18 6:41 转存

遇到一个非常有趣的现象,希望给个人解释一下是怎么回事

图片描述

新建一个ejs,在本地开启express,并且放进去4m的aaaa

访问:
图片描述

因为是本地访问,4k加载应该不需要这么久,那么为什么会这么久呢?

为了防止ejs渲染有干扰,把他改名成html然后扔进去静态资源,得到结果依旧不变

图片描述

如果把4k的aaa放在js一个变量里,加载就瞬间完成了

clipboard.png

clipboard.png

那么问题是,为什么HTML显示4k的文字会需要这么多时间

原文阅读

求推荐服务器可视化运维管理工具
零崎莲实 2019-1-18 9:30 转存

请问有什么服务器可视化运维管理工具?

之前的开发工作是在公司搭建好的环境进行的,对服务器运维管理工作完全不了解。

现在想自己搭建环境

如果大家有什么认为比较好的这方面的资料或者最佳用例也可以分享一下,谢谢

目标实现:

  • 可以通过web访问
  • 监控统计服务器的一些状态数据和日志
  • 数据库的可视化的CRUD
  • 一键由git私有库部署重启服务
  • 可视化环境变量配置修改

原文阅读

动态 ip 如何链接带有 ip 白名单的数据库
aimerforreimu 2019-1-18 2:44 转存

请教一下各位如果服务器的 ip 是动态的,想连接另外一台服务器上面的带有 ip 白名单的数据库,应该怎么办

我尝试了用 ddns 以后的域名填入数据库的白名单,发现并没有什么作用,各位都是怎么解决这个问题的?

原文阅读

如何正确使用绝对路径加载CSS文件?
YEZIHANGISM 2019-1-18 8:50 转存

我希望在index.html中引用style.css,下面是目录结构:
clipboard.png
当我使用相对路径时,样式可以被加载:

<link rel="stylesheet" href="../static/css/style.css" />

使用绝对路径时失败:

<link rel="stylesheet" href="/static/css/style.css" />

又或者无论是/module/static...,还是/python/module/static...都无法加载。
请问这是社么原因?
link中的绝对路径应该怎样正确填写?

原文阅读

react中加载地图
hongye 2019-1-18 8:58 转存

问题描述

在react总怎样引入外部的js文件

问题出现的环境背景及自己尝试过哪些方法

let isLoaded = true

        return new Promise(function (resolve, reject) {
            if (isLoaded) {
              window.AMap.plugin(['AMap.MouseTool', 'AMap.PolyEditor'], () => {
                resolve(window.AMap)
              })
              return
            }                
            var script = document.createElement('script')
            script.type = 'text/javascript'
            script.async = true
            script.src = 'http://webapi.amap.com/maps?v=1.4.3&key=key&callback=$$$maptcinit&plugin=AMap.MouseTool'
            // script.onload = resolve
            script.onerror = reject
            script.onload = function () {
              isLoaded = true
              resolve(window.AMap)
            }
            document.head.appendChild(script)
          })

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
export default class HistoryPath extends React.Component{

    constructor(){
        super();
        this.state={
            useType:'CONTAINER',
            visible: false,
            visibleOder:false,
        };
        
        this.loadUIs();
        this.amapEvents = {
            created: (mapInstance) => {
                   mapInstance.plugin('AMap.Geocoder', function() {
                        
                  })
              }
          };
          this.autoEvents = {
            created: (markerInstance) => {
                  mapInstance.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function() {
                      var autoOptions = {
                          city: "北京市", //城市,默认全国
                          input: "tipinput" //使用联想输入的input的id
                      };
                      autocomplete = new AMap.Autocomplete(autoOptions);
                      var placeSearch = new AMap.PlaceSearch({
                          city: "北京市",
                      })
                      mapInstance.event.addListener(autocomplete, "select", function(e) {
                          //TODO 针对选中的poi实现自己的功能
                          placeSearch.setCity(e.poi.adcode);
                          placeSearch.search(e.poi.name)
                          console.log(e.poi)                            
                      });
                  });
            }
         }
    }
       
    loadUIs() {
          window.AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker) => {
          this.initPage(SimpleMarker);
        })
      }
    initPage(SimpleMarker) {
        const map = this.props.__map__;
        new SimpleMarker({
            //前景文字
            iconLabel: 'A',
            //图标主题
            iconTheme: 'default',
            //背景图标样式
            iconStyle: 'red',
            //...其他Marker选项...,不包括content
            map: map,
            position: [120, 31]
        });
        new SimpleMarker({
            //前景文字
            iconLabel: {
                innerHTML: '<i>B</i>', //设置文字内容
                style: {
                    color: '#fff' //设置文字颜色
                }
            },
            //图标主题
            iconTheme: 'fresh',
            //背景图标样式
            iconStyle: 'black',
            map: map,
            position: [120, 29]
        });
      }        

    show=(value)=>{        
        this.setState({
            useType:'CONTAINER0',
            visible:value?true:false,
            visibleOder:value?true:false,                
        })            
}
 
render(){
    let { useType } = this.state;
    const {listData}=this.props;
    const modalParams = {           
        width: 700,
        mask:false,
        style:{position:'absolute',right:40,top:160},
        visible: this.state.visible,
        footer: null,            
        destroyOnClose:true,
        keyboard:false,
        maskClosable:false,
        onCancel: () => this.setState({ visible: false }),
    };
    const plugins = [
        // 'MapType',
        // 'Scale',
        // 'OverView',//小地图
        // 'ControlBar', // v1.1.0 新增
        {
          name: 'ToolBar',
          options: {
            visible: false,  // 不设置该属性默认就是 true
            onCreated(ins){
              // console.log(ins);
            },
          },
        }
      ]

    return(
        <div>
            <Map amapkey={'89319725fb20f0a726eec92bd584df03'}  events={this.amapEvents} center={this.state.center} useAMapUI>
                <ZoomCtrl events={this.autoEvents} onCreate={this.show}/>                                    
            </Map>
            <Row>
                <OpenModal {...modalParams} >
                    <ViewDetails useType={useType}></ViewDetails>
                      <ElectronicWaybillDetails useType={useType} detailsData={ listData }></ElectronicWaybillDetails>
                </OpenModal>                    
            </Row>
        </div>
    )
}

}

你期待的结果是什么?实际看到的错误信息又是什么?

外部引入的js放在什么位置合适?

原文阅读

vue base64流文件
Asd528099 2019-1-18 8:42 转存

vue 项目中 拿到base64 图片 如何解析渲染img标签

原文阅读

el-input又tabindex,el-select怎么修改顺序呢
笑看是人是狗 2019-1-18 9:24 转存

1.我的表单有el-input和el-select,现在需要修改tab是获取焦点的顺序,
el-input有tabindex,el-select怎么解决呢

原文阅读

secureCRT如何保存某几条命令或者路径?
swnuv 2019-1-18 7:43 转存

有的路径经常用,每次都要输入太麻烦了

原文阅读

如何获取上传文件的路径
不系之舟 2019-1-17 13:45 转存

clipboard.png

我要做一个如图所示的功能,不过图上是app的截图,但我要做成移动web版的。

第一步到第二步我想直接利用 上传文件 的方式来选择本地文件。
这个方式是很容易通过 获取上传文件的名字 获取到第三步需要的名字,但是怎么获取不到路径啊。
(浏览器安全机制,使得路径被fakepath代替,获取不到。pc端的话可以修改浏览器的设置获取。但是我这个是移动web,要用手机来演示。手机浏览器没找到相关的设置啊)

总之问题就是
如何准确的获取 上传文件的路径

原文阅读

js怎么监听返回按钮的点击事件
侃哥 2019-1-18 2:35 转存

最近项目要求,用户进入一个页面时,要区分是正向跳转进来的还是点击了返回按钮回到的当前页面。
由此我想到了监听用户点击返回按钮的事件。
HTML5有一个历史记录管理方法,包括history.pushState()方法和popstate事件。使用时需要先使用history.pushState()方法把当前页面的状态添加到浏览器的浏览历史记录中。用户点击“后退”或者“返回”按钮访问保存的历史状态时,会触发popstate事件。
但是:不兼容Safari浏览器!!!
求一兼容的监听浏览器后退按钮的点击事件,或者判断当前页面是来自返回的方法。

原文阅读

vue中使用iview修改默认样式时遇到的问题?
FAB1E 2019-1-18 9:11 转存

使用iview的tab组件,其中iview.css中 下边框加了!important导致我修改不了其样式

clipboard.png
尝试过的方法有:

1.加!important
2.在选择器前加多层选择器,试图权重比默认更高
3.iview在APP上方引入(这个图随便找的,用的iview)

clipboard.png
4.修改node_modules里的iview.css,这个倒是暂时解决了问题,不过打包时总不能把node_modules也打进去吧。

我的 代码:

clipboard.png

f12:
clipboard.png

原文阅读

vue获取json数据后怎么动态添加到tbody中?
寒小错 2019-1-16 1:58 转存

下面那段标签是动态生成的tr和td,用jquery是直接append到表格的tbody中,但是用vue的话应该怎么写呢?用组件渲染吗?

    var str=`
           <tr>
           <td class="num"></td>
           <td class="result-content">${txt}</td>
           <td class="pos-st">(${points[0]},${points[1]})</td>
           <td class="pos-st">(${points[2]},${points[3]})</td>
           <td class="pos-st">(${points[4]},${points[5]})</td>
           <td class="pos-st">(${points[6]},${points[7]})</td>
           <tr>`;

         

原文阅读

h5图片压缩上传的问题
小太阳大晴天 2019-1-18 1:37 转存

移动端图片压缩上传的问题

在pc浏览器上模拟手机环境没有问题,在真机测试就不行;

相关代码

    <section class="g-flexview step2">
        <header class="m-navbar fcx-navbar">
            <a href="{:U('/Home/Usercenter/step1')}&uid={$authenticate_uid}" class="navbar-item">
                <i class="back-ico"></i>
            </a>
            <div class="navbar-center">
                <span class="navbar-title">上传资料</span>
            </div>
        </header>
        <div class="g-scrollview">
            <!-- setpbox -->
            <div class="setpbox">
                <ol class="ui-step ui-step-blue ui-step-4">
                    <li class="step-start step-done">
                        <div class="ui-step-line"></div>
                        <div class="ui-step-cont">
                            <span class="ui-step-cont-number">1</span>
                            <span class="ui-step-cont-text"></span>
                        </div>
                    </li>
                    <li class="step-done">
                        <div class="ui-step-line"></div>
                        <div class="ui-step-cont">
                            <span class="ui-step-cont-number">2</span>
                            <span class="ui-step-cont-text"></span>
                        </div>
                    </li>
                    <li class="">
                        <div class="ui-step-line"></div>
                        <div class="ui-step-cont">
                            <span class="ui-step-cont-number">3</span>
                            <span class="ui-step-cont-text"></span>
                        </div>
                    </li>
                    <li class="step-end">
                        <div class="ui-step-line"></div>
                        <div class="ui-step-cont">
                            <span class="ui-step-cont-number">4</span>
                            <span class="ui-step-cont-text"></span>
                        </div>
                    </li>
                </ol>
            </div>
            <!-- /setpbox -->
            <form id="autheform" action="{:U('/Home/Usercenter/step2')}" method="post" enctype="multipart/form-data">
                <input type="hidden" name="authenticate_name" value="{$authenticate_name}">
                <input type="hidden" name="authenticate_sfz" value="{$authenticate_sfz}">
                <input type="hidden" name="authenticate_uid" value="{$authenticate_uid}">

                <div class="upbox" id="fbtn">
                    <div class="bg" style="background-image: url('__WAPIMG__exam/regagent/u1196.png')">
                        <input type="file" name="fimg" class="yasuo" error-msg="请上传身份证正面照" accept="image/jpeg" onchange="fimgclick(this);">
                    </div>
                    <p class="text-center">上传身份证正面照</p>
                </div>

                <div class="upbox" id="rbtn">
                    <div class="bg" style="background-image: url('__WAPIMG__exam/regagent/u1206.png')">
                        <input type="file" name="rimg" class="yasuo" error-msg="请上传身份证反面照" accept="image/jpeg" onchange="fimgclick(this);">
                    </div>
                    <p class="text-center">上传身份证反面照</p>
                </div>

                <div class="upbox" id="pbtn">
                    <div class="bg" style="background-image: url('__WAPIMG__exam/regagent/u1214.png')">
                        <input type="file" name="pimg" class="yasuo" error-msg="请上传执业证头像" accept="image/jpeg" onchange="fimgclick(this);">
                    </div>
                    <p class="text-center">执业证头像(请上传免冠、清晰头像照片)</p>
                </div>

                <div class="pd20">
                    <button id="mysubmit" type="button" class="btn-block fcx-btn">下一步</button>
                </div>
            </form>
        </div>
    </section>
    <script src="__WAPJS__exam/jquery.2.1.4.min.js"></script>
    <script src="__WAPJS__exam/ydui.js"></script>
    <script src="__WAPJS__lib/layer/layer.js"></script>
    <script src="__WAPJS__lib/localResizeIMG/lrz.bundle.js"></script>
    // 这里引用了 localResizeIMG 插件
    <script>
    var imgdata = {
            fimg: {
                "datas": "",
                "type": "",
                "name": ""
            },
            rimg: {
                "datas": "",
                "type": "",
                "name": ""
            },
            pimg: {
                "datas": "",
                "type": "",
                "name": ""
            }
        };
       // 这段代码是 localResizeIMG 
        function fimgclick(obj){
            var _tFile = obj.files[0],
                _tName = $(obj).attr('name'),
                imgarr = _tFile.name.toLowerCase().split('.'),
                imgtype = imgarr.pop(),
                imgname = imgarr.join("");
                lrz(_tFile)
                .then(function(res){
                    imgdata[_tName]['data'] = res.base64;
                    imgdata[_tName]['type'] = imgtype;
                    imgdata[_tName]['name'] = imgname;
                    $(obj).parent('.bg').css('background-image','url('+res.base64+')')
                }).catch(function(err){
                    dialog.toast(err, 'none', 2000);
                })
        }
        $('#mysubmit').click(function(){
                var _self = $(this)
                var errmsg = "", errorobj = "", objname = "", flag = false;
                formData = new FormData($("#autheform")[0]);

                $('.yasuo').each(function(){
                    objname = $(this).attr("name");
                    if(imgdata[objname]['name'] == ''){
                        errmsg = $('input[name='+objname+']').attr('error-msg');
                        dialog.toast(errmsg,'none',2000);
                        return flag = false
                    }else{
                        formData.set(objname,imgdata[objname]['data'],imgdata[objname]['name']+'.'+imgdata[objname]['type']);
                        return flag = true
                    }
                });

                if(flag){
                    _self.attr('disabled',true).removeClass('fcx-btn').addClass('btn-disabled')  
                    $.ajax({
                        url: "{:U('step2')}",
                        type: 'POST',
                        data: formData,
                        contentType: false,
                        processData: false,
                        beforeSend:function(){
                            dialog.loading.open();
                        },
                        complete:function(){
                            dialog.loading.close();
                        },
                        success: function (data) {
                            if (data.result) {
                                //window.location = "{:U('Usercenter/step3')}&id="+data.id;
                            }else{
                                _self.attr('disabled',false).removeClass('btn-disabled').addClass('fcx-btn');
                            }
                            return true;
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            dialog.toast('网络错误', 'none', 3000);
                        }
                    });
                }             
            })
        });
        </script>

另外:

    formData.set(objname,imgdata[objname]['data'],imgdata[objname]['name']+'.'+imgdata[objname]    ['type']);
    // 这段代码如果用.set() 数据就提交不上去,用formData.append()就可以提交上去。不知道为什么 。。。。。。。。
   

最后一行一行代码的检查,发现问题出在$('.yasuo').each(function(){}) 里面,但实在是不知道怎么办,真机测试不出来。。。

原文阅读

MyBatis在注解上使用动态SQL(@select使用if)
Good_Morning 2019-1-18 6:1 转存
@Select({
            "<script>",
            "select * from user_info where 1=1",
            "<when test='name!=null and name!='' '>",
            "and name = #{name}",
            "</when>",
            "</script>"})

判断条件是name不为空并且不等于''(空字符串)
这该怎么写呢?上面这个写法是错的

原文阅读

项目有多个模块使用到同一个轮询逻辑,如何优雅的整合在一起并且能够提供轮询开关的api
周小e丶 2019-1-18 9:1 转存

页面A/B/C共享同一个数据, 都需要做轮询,怎么优雅把多个轮询整合在一起并且提供可控制的api

原文阅读

爬虫爬回来的数据,前端所遇到的问题。
小泽摔不倒 2019-1-18 1:54 转存

各位大佬早,遇到一个问题。 就是爬虫爬回来的数据全是标签,有好多table标签。有的table需要加框线,有的不加。这种问题 你们一般怎么处理。怎么判断哪个加框线 哪个不加,需要其它人员怎么配合

原文阅读

g6-editor保存后,重新读取数据,锚点位置有改变
发帖要保护隐私hl 2019-1-18 8:57 转存

使用g6-editor画图:
保存前界面:

clipboard.png

保存后从数据库中读取数据展示的界面:

clipboard.png

可以看出链接锚点不同。
查了下保存和读取的数据都是一样的。

nodes:[{category: 0,color: "#FA8C16",condType: null,cond_type: null,disease_id: "AWYaUvvf_Xy3-P03CHQR",
grade: null,id: "AWYaUvvf_Xy3-P03CHQR",index: 0,label: "异常子宫出血",level: null,names: undefined,
operator: null,operatorName: undefined,shape: "circle",size: "78*72",source_anchor: null,target_anchor: null,
values: null,x: 174,y: 264},
{category: 1,color: "#1890FF",condType: 1,cond_type: 1,disease_id: "AWYaUvvf_Xy3-P03CHQR",grade: null,
id: "4e0f1d7e",index: 1,label: "年龄=0岁",level: null,names: ["0岁"],operator: "equal",operatorName: "=",
shape: "flow-rect",size: "120*48",source_anchor: 3,target_anchor: 3,values: ["0"],x: 337.56055,y: 559.5}
]

edges:[{id: "ed9361ca",index: 2,shape: "flow-polyline-round",source: "AWYaUvvf_Xy3-P03CHQR",sourceAnchor: 3,
target: "4e0f1d7e",targetAnchor: 3}]

请问下这个是什么原因呢?是不是g6-editor 它在绘图的时候会自己调整下锚点?

详细链接:
https://segmentfault.com/a/11...

原文阅读

ant design form实现后台错误信息的回显
Gamehu 2019-1-18 8:55 转存

问题描述

使用ant design Form.create 创建表单,当需要把后台的错误显示在对应的属性上时,报错You cannot set field before registering it.

问题出现的环境背景及自己尝试过哪些方法

自己折腾了半天,发现原因时提交之后,form对象被置为null了,所以无法用form.setFileds方法设置error信息

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

   let FormEle = Form.create({
                fieldNameProp: 'appbir'
            })(CustomizedForm);
            
                <Panel disabled={disabled} header={header} key={index}>
                    <FormEle wrappedComponentRef={(ref) => {
                        formInstance[index]=ref.props.form;
                    }}/>
                </Panel>
            

ref.props.form会返回null

你期待的结果是什么?实际看到的错误信息又是什么?

不把form置为null

原文阅读

laravel中使用import老是路径错误
misterpan 2019-1-18 8:55 转存

blade模板如下
clipboard.png

目录结构如下
clipboard.png

在app.js里引入是正常的

clipboard.png

图一引入后如下
clipboard.png

难道就不能局部引入吗,大神求指点

原文阅读

axios 配置代理后。只能发送get请求。设置method为post后。还是会变成get
Dee_Black 2019-1-14 9:11 转存

axios 配置代理后。只能发送get请求。设置method为post后。还是会变成get

clipboard.png

clipboard.png
clipboard.png

原文阅读

python3 如何遍历以下json数据
ilovelnmp 2019-1-18 7:51 转存

数据如下

{
    "message":"abc","result":{
            "paramtypeitems":[
                {"name":"基本参数","paramitems":[
                    {"id":567,"name":"车型","valueitems":[
                        {"specid":37017,"value":"xDrive40i M运动套装"},
                        {"specid":37018,"value":"xDrive40i 尊享型 M运动套装"},
                        {"specid":33307,"value":"xDrive28i"}]
                    }]
                }]
            }
        }

原文阅读

h5的video标签怎么在iOS里点击自定义的全屏按钮,然后全屏
哈希 2018-12-29 7:13 转存

h5的video标签怎么在iOS里点击自定义的全屏按钮,然后全屏

重点时iOS

原文阅读

vue引入字体太大
一毛一 2018-12-14 9:36 转存

1. vue项目需要根据用户输入生成个性签名字体,不是固定的指定文字,引入的字体文件就有6M多,导致打开很慢,有什么解决办法吗

2. 项目本地可以看到个性签名字体的效果,但是打包后看到的还是默认的字体

原文阅读

spring cloud eureka如果部署到k8s,是否能够通过service之间互相注册访问?
爱伦坡 2019-1-18 8:38 转存

打算将后端微服务化,技术栈就用spring cloud,初想法就是将eureka部署到k8s上面,相互之间通过k8s service去通信。但是某些文档的作者建议标记pod,让pod之间通过dns解析去通信,这让我有点概念模糊,请教有这方面经验的大神,将eureka部署到k8s上面的话,通过service之间去通信有没有什么问题?

原文阅读

如何把centos设置为硬盘启动,启动的时候总是报下面的错误?
swnuv 2019-1-18 8:26 转存
t disconnected.Cannot connect file "C:\Users\suiwei\Downloads\day23-linux\linux资料\软件\CentOS-6.4-i386-bin-DVD1.iso" as a CD-ROM image: Could not find the file

原文阅读

vue+elementUI表单问题,为什么点击label标签,表单控件也会响应?
Meetall 2019-1-18 1:58 转存

问题描述

做的是一行两个表单项,用el-row、el-col分割开,发现点击表单项前面的标签文字,表单项也会获取焦点,尝试了各种方法,都没搞清楚原因是什么,找出以前别的项目的代码对比,几乎一样的表单,一个点击标签没反应,一个就有反应

相关代码

<el-form ref="form1" :model="hangData.baseinfo" :rules="rules" size="mini" label-width="200px"
             :disabled="isDisabled">
        <el-row>
            <el-col :span="12">
                <el-form-item label="产品全称    " prop="productFullName">
                    <el-input id="productFullName" maxlength="100" v-model="hangData.baseinfo.productFullName"
                              auto-complete="off"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="产品代码    " prop="productCode">
                    <el-input id="productCode" maxlength="20" v-model="hangData.baseinfo.productCode" disabled
                              auto-complete="off"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="产品简称    " prop="productShortName">
                    <el-input id="productShortName" maxlength="100" v-model="hangData.baseinfo.productShortName"
                              auto-complete="off"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="业务编号    " prop="productShortName">
                    <el-input id="productBusiCode" maxlength="20" v-model="hangData.baseinfo.productBusiCode"
                              disabled auto-complete="off"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="产品类型    " prop="productType">
                    <el-select id="productType" v-model="hangData.baseinfo.productType" placeholder="请选择">
                        <el-option v-for="item in DictTree.ProductType" :key="item.dictID" :label="item.dictName"
                                   :value="item.dictID">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="本期计划挂牌金额(万元)    " prop="listAmount">
                    <el-input id="listAmount" maxlength="22" v-model="hangData.baseinfo.listAmount"
                              auto-complete="off"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="是否首发    " prop="isFp">
                    <el-select id="isFp" v-model="hangData.baseinfo.isFp" placeholder="请选择">
                        <el-option v-for="item in DictTree.COF_YESORNO" :key="item.dictID" :label="item.dictName"
                                   :value="item.dictID">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>

虽然并没有影响到功能,但是作为一个强迫症患者,喜欢在页面上鼠标乱点的人,随便点点页面就乱七八糟的各种跳,加上验证后更是一片红,简直不能忍啊!!!

原文阅读

为什么样式中字体大小与浏览器中字体高度不一致
hanyanxx1 2019-1-17 3:10 转存

1.问题描述
css样式里,字体大小设置的是14px,
但在谷歌浏览器和火狐浏览器里,看到高度是19.2px

2.相关图片
图片描述

原文阅读

【求助】上拉回弹效果的,拉动范围限制公式???
兔子舞 2019-1-17 7:45 转存

目前自己写了一个上下拉回弹效果的弹窗组件。在完善功能的时候就想对上下拉动超出范围时,对这个超出范围做个限制。

我是通过控制translateY来控制列表滑动的.
往下拉的时候为正值,滑动距离space>0,则顶部超出范围。
往上拉则为负值,当距离小于space < -200的时候,底部内容超出范围。
现在我要让控制超出范围在 range = 100 ;
所以条件就是:
if(space > 0 ){

// 超出距离 *= 限制距离/(限制距离+超出距离)
space *= range / (range + space);

}

if(space < -200){

//怎么计算???

}

space的值是多少,弹窗就移动多少。

原文阅读

vue 左滑删除时,无法删除而是编辑这是为什么
Nola_jun 2019-1-4 8:1 转存

问题描述

问题出现的环境背景及自己尝试过哪些方法

左滑显示删除,点击进行操作,但是点击删除的时候一直是编辑的方法,搞蒙了

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

<ul>
        <li class="clearfix" v-for="(item, index) in addressList" :key="index">
          <div @touchstart='touchStart($event, index)' @touchmove='touchMove($event, index)' @touchend='touchEnd($event, index)' :style="item.deleteSlider">
              <div class="address-info fl">
                <p>{{item.address}}</p>
                <p>{{item.name}}<span>{{item.mobile}}</span></p>
              </div>
              <div class="edit fl" @click="edit(index)">
                <div v-if="item.default" class="default-address"></div>
                <p>{{ $t('button.modify') }}</p>
              </div>
              <div class="delete fl" @click="del(index)" :key="index" ref="remove">
                <p>{{ $t('button.delete') }}</p>
              </div>
          </div>
        </li>
      </ul>
addressList: [{
        id: 1,
        name: 'Nola',
        address: '嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻寻寻',
        mobile: '18559301258',
        default: 1
      }, {
        id: 2,
        name: 'Caroline',
        address: '是考虑到顺丰快递酸辣粉觉得靠撒了房间打扫啊',
        mobile: '18559301258'
      }],
      delWidth: '56.25',
      startX: 0, // 触摸位置
      endX: 0, // 结束位置
      moveX: 0, // 滑动时的位置
      disX: 0, // 移动距离
      deleteSlider: '' // 滑动时的效果,使用v-bind:style="deleteSlider"
edit (id) {
      console.log('编辑')
      let params = {

      }
      this.$router.push({path: '/addAddress', props: params, component: resolve => require(['@/Address/Add.vue'], resolve)})
    },
    del (id) { // 删除地址
      console.log('删除')
      this.addressList.splice(id, 1)
      console.log(this.addressList)
    },
    touchStart (ev) {
      ev = ev || event
      if (ev.touches.length === 1) { // tounches类数组,等于1时表示此时有只有一只手指在触摸屏幕
        this.startX = ev.touches[0].clientX // 记录开始位置
      }
    },
    touchMove (ev, id) {
      ev = ev || event
      let that = this
      if (ev.touches.length === 1) {
        that.moveX = ev.touches[0].clientX // 滑动时距离浏览器左侧实时距离
        that.disX = that.startX - that.moveX // 起始位置减去 实时的滑动的距离,得到手指实时偏移距离

        let list = deepCopy(that.addressList)
        if (that.disX < 0 || that.disX === 0) { // 如果是向右滑动或者不滑动,不改变滑块的位置
          list[id].deleteSlider = 'transform:translateX(0px)'
        } else if (that.disX > 0) { // 大于0,表示左滑了,此时滑块开始滑动
          list[id].deleteSlider = 'transform:translateX(-' + that.disX * 5 + 'px)'
          if (that.disX * 5 >= that.delWidth) { // 最大也只能等于删除按钮宽度
            list[id].deleteSlider = 'transform:translateX(-' + this.delWidth + 'px)'
          }
        }
        // that.addressList = deepCopy(list)
      }
    },
    touchEnd (ev, id) {
      let that = this
      ev = ev || event
      if (ev.changedTouches.length === 1) {
        let endX = ev.changedTouches[0].clientX
        that.disX = that.startX - endX

        let list = deepCopy(that.addressList)
        if ((that.disX * 5) < (that.delWidth / 2)) { // 如果距离小于删除按钮一半,强行回到起点
          list[id].deleteSlider = 'transform:translateX(0px)'
        } else {
          list[id].deleteSlider = 'transform:translateX(-' + that.delWidth + 'px)' // 大于一半,滑动到最大值
        }
        that.addressList = deepCopy(list)
      }
    }

你期待的结果是什么?实际看到的错误信息又是什么?

我想要点击删除信息,但是点击删除的时候却变成了编辑跳转页面,难道滑动删除的时候实际的点击事件还是在编辑这块

原文阅读

本站作者

每日荐书

在不完美的世界力求正常——读《公司的坏话》

书名:《公司的坏话》

作者:李天田(脱不花妹妹)

出版社:北京大学出版社

赞助商

广告