霍梦林的个人博客

去掉display:inline-block产生的留白间距

时间：2017年10月08日
项目：《钱隆归来》
问题：使用display: inline-block后一行元素之间存在间距，导致给定宽度后一行占不下挤到下一行。
描述：元素间留白间距出现的原因是标签段之间的空格，因此去掉html中的空格就可以去除间距。
解决办法：
<div class="investTabs tac">
  <span class="investUser dib">用户</span
  ><span class="investMoney dib">购买金额(元)</span
  ><span class="investTime dib">时间</span>
</div>

去除表格以及单元格边框

时间：2017年10月08日
项目：《钱隆归来》
问题：使用table布局后，再使用border:0只能去除表格并不能去除表格以及单元格的边框
解决办法：给table加 cellspacing="0" cellpadding="0"

<table class="investTabs" border="0" cellspacing="0" cellpadding="0">

vue计算属性不能先在data中定义

时间：2017年10月13日
项目：《钱隆归来》
问题：在写计算属性的时候提示该属性已被定义
描述：先在data里定义后再写的计算机属性，计算属性是被处理经过运算后的值，可以直接用在页面中显示中，不能先定义
computed: {
  rateWidth: function() {
    return parseInt(`${this.data.sale_rate*100}%`)
  }
},

vue中绑定行内样式

时间：2017年10月13日
项目：《钱隆归来》
问题：为元素写行内样式时不生效
描述：未用vue重构前，行内样式写法是<div style="width: 8px"></div>
      用vue重构后，此行内样式的值为计算属性中处理后的值，不能用html的文本插值来显示
解决办法：为元素绑定自定义样式。
1.直接引用单个的属性值
//单位要用引号引起来
<div :style = {width: rateWidth + '%'}></div>
<div :style = {width: rateWidth + 'px'}></div>
<div :style = {width: rateWidth + 'rem'}></div>
2.绑定一个对象样式
//此处注意样式写法，可以用驼峰也可以用短横线分隔，但短横线分隔要用引号引起来
<div :style = "styleObject"></div>
data: {
  styleObject: {
    'background-color': '#fff';
    fontSize: '12px'
  }
}

不直接在组件中改变props值

项目：《钱隆归来》
问题: 验证码倒计时操作Props报错
描述: vue中父组件如果使用props向子组件传递数据后,一般不对props值作操作或改变,因为虽然父组件向子组件传递是单向数据流,但如果Props是一个数组或者对象时,共同引用同一个地址,在子组件改变props值会影响父组件的状态
解决办法: 在data中定义一个局部变量,用Props的值初始化它,操作这个变量,然后再在页面中显示出来
### js:

props: [
  'btnname',
],
data (){
  return {
    showName: this.btnname,
  }
},
function() {
  this.showName = `${time}秒后重新获取短信验证码`
}

### html :

<button>{showName}</button>

vue-router使用params参数要给路由加name属性

项目：《钱隆归来》
问题: vue路由传递参数时传不过去
描述：使用<router-link :to="{ path: '/signup', params: {userPhone: myphone}}"><u>快速注册</u></router-link>传递参数错误，应该给router一个name，链接到命名路由，接收params参数,这是使用vue-router传递参数的第一种办法
解决办法：
//router.js
{
  path: '/login',
  name: 'login',
  component: Login,
}
//login.tpl 实现从登录页跳转到注册页把手机号传过去,此方法要把 to 写成 :to
<router-link :to="{ name: 'signup', params: {userPhone: myphone}}"><u>快速注册</u></router-link>

//signup.tpl 可直接显示此参数
{{$router.params}}


项目：《钱隆归来》
问题：注册页to属性来接收路由传递的参数后未能正常显示在组件中
描述：因注册页是引用input组件，所以要将路由传递的参数通过props传到input子组件中，而在input子组件中使用value值接收v-model传递的参数，所以要将value显示赋值给子组件中input中显示的初始值myvalue.(myvalue是经过运算的props -- value值)
解决办法：
//signup.js
props: [
  'value',
]
data() {
  return {
    myvalue: this.value,
  }
}

使用url方法传递路由参数格式

项目：《钱隆归来》
问题：使用url传递参数的办法来传递路由时，跳转的路由不对
描述：路由中定义参数格式错误，写成了
{
  path: '/signup: phone',
  component: Login
}
解决办法： 路径中参数前应该有"/"
{
  path: '/signup/:phone',
  component: Login,
}
此为使用路由传递参数的第二种方法，登录页处a标签应为
<router-link to="/signup/18713575939">快速注册</router-link>

传递变量应该使用字符串连接

项目：《钱隆归来》
问题: 直接在<router-link> :to 属性中使用url传递参数时，没有传递变量值而是传递变量名了
描述：使用<router-link :to="/signup/myphone"></router-link>，:to后边传递的属性值默认传成了字符串，显示的是"/signup/myphone"
解决办法：属性值用"+"连接
<router-link to="'signup/'+myphone"></router-link>

url传递参数可省需要加？

问题： 使用url传递参数时，如果省略参数则找不到正确的路由
项目：《钱隆归来》
描述：定义url时没有在参数后边加？，代表此参数是可省的
解决办法：
{
  path: '/login/:phone?',
  component: Login,
}

vue自定义checkbox样式与状态

项目：《钱隆归来》
问题：checkbox不能实现正确切换
描述：checkbox要实现的功能是选中背景绿色，未选中无背景色，所以我
1.在checkbox外加了一个div，使用v-on:class="{active: isActive}"为div加背景图（选中状态时），控制背景图的显示隐藏,使用v-model="toggle"来控制是否选中
2.把chekbox隐藏
3.可以实现背景图的显示隐藏，但并没有绑定checkbox.
4.所以应为checkbox添加v-model="toggle"来控制是否选中才对。
5.为checkbox添加@click事件来切换状态
分析：
6.但因为checkbox这时已隐藏并不能实现成功点击click，而且checkbox初始状态为false
7.checkbox状态切换就是v-model的值，v-model初始值为true才可以实现加载时就选中，而div的背景图也要为true才显示
解决办法:
为checkbox和v-model绑定同一个值，实现选中就显示，不选中就隐藏
而click事件就可以绑定在div上了，其实实现的只是简单切换功能。

//chekbox
<div :class="{active: isActive}" @click="isChecked">
  <input type="checkbox" v-model="isActive">
</div>
//js
data() {
  return {
    isActive: true,
  }
},
methods: {
  isChecked() {
    this.isActive = !this.isActive
  }
}

为页面中所用未定义的值赋初始值并监听改变

项目：《钱隆归来》
问题：登录页注册页设置密码页等页面进行相互跳转时，如果不带参数，报错“Uncaught TypeError: Cannot read property 'length' of undefined”
描述：因为在引用的子组件中使用了"length"属性进行了判断，当跳转页面后如果没带参数的话，那么input的value值（路由带过来的）就是undefined，所以应该加上判断，当value值不是undefined时再使用length属性。
解决办法：1.使用时直接判断当this.myvalue值不为undefined，并且长度大于0时，再显示
if(this.myvalue !== undefined && this.myvalue.length > 0) {
  this.deltoshow = true;
}

2.不使用this.value.length来判断，直接把定义文本框输入文本的长度，如果是undefined就赋值为o
data() {
  return {
    valueLength: this.value === undefined ? 0: this.value.length
  }
}  
问题2：此操作还是有问题，因为 valueLength 赋值为0后valueLength不能改变一直是0,所以图标一直不显示，应该要使valueLength的值实时改变，刚开始想要监听valueLength的值，但没起作用
描述：watch是给变化的数据作监听，但valueLength并不是变化的数据，而myvalue才是变化的数据
watch: {
  valueLength(value) {
    this.valueLength = this.value.length
  }
}
解决办法：监听myvalue的值，当myvalue值发生改变时，去改变valueLength的值
watch: {
  myvalue(val) {
    this.$emit('input', val)
    this.valueLength = this.myvalue.length
  }
}

比较运算符 === 和 ==

项目：《钱隆归来》
问题：所有文本框type都变成了password
描述：判断inut的type时如果是password就显示可见密码图标和删除图标，但把"type == password"定成了"type = password"相当于赋值

markdown中不能解析'<'和'>'的方法

问题： markdown不能正确解析
描述： 在<>包含的属性两边没有加``，在markdown中，使用 "&"、" <"、 ">"会被文本默认为html语句，导致尖括号本身及尖括号中的内容都不会被显示
解决办法：
1.使用``代码来标记行内代码
@ font-face {  
   ` font-family: <YourWebFontName>`;   
    `src: <source>[<format>][,<source>[<format>]] *` ;   
    `[font-weight:<weight>]`;   
    `[font-style: <style>]`;  
}
2、使用``来包含<>
@ font-face {  
    font-family: `<YourWebFontName>`;   
    src: `<source>` [<format>][,`<source>` [`<format>`]] * ;   
    [font-weight: `<weight>`];   
    [font-style: `<style>`];  
}
3.使用代码区块```code```来包含这段代码&lt;activity&gt;

```@font-face {  
    font-family: <YourWebFontName>;   
    src: <source> [<format>][,<source> [<format>]] * ;   
    [font-weight: <weight>];   
    [font-style: <style>];  
}```

4.使用转义字符,使用"&lt;"代替"<",使用"&gt;"来替代">"
@font-face {  
    font-family: &lt;YourWebFontName&gt;;   
    src: &lt;source&gt;[&lt;format&gt;][,&lt;source&gt; [&lt;format&gt;]] * ;   
    [font-weight: &lt;weight&gt;>];   
    [font-style: &lt;style&gt;];  
}


时间: 2017年10月25号
项目：《钱隆归来》
问题：使用git rebase 时报错，再使用git checkout branch也报错error: cannot stat filename: Permission denied
，说没有权限
描述：可能在windows下试图应用一个补丁的时候阻止git修改文件，也可能是编辑器锁定了该文件
解决办法：将编辑器，命令行全部重启

时间： 2017年10月25号
项目：《钱隆归来》
问题：this指向问题，在methods函数中的嵌套函数中做路由处理，使用this.$router.push({})，报错Cannot read property 'push' of undefined
描述：在vue的嵌套函数中不能使用this,因为在此嵌套函数中直接使用this指的是当前函数,而在当前函数中是没有this.$router.push这个方法的
解决办法：在函数外部将this赋值给一个变量self，就是指的是当前vue实例了
vilidate() {
  var self = this
    this.$dialog.alert('','正在赎回，请注意查收短信',[
      {
        title: '朕知道了',
        onClick() {
          self.$router.push({ path: '/withdraw'})
        }
      }
    ])
},

// console.log(this)结果
{__ob__: Observer}
onClick:ƒ onClick()
title:"朕知道了"
__ob__:Observer {value: {…}, dep: Dep, vmCount: 0}
get onClick:ƒ reactiveGetter()
...

// console.log(self)的结果
VueComponent {_uid: 16, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}


时间： 2017年10月25号
项目：《钱隆归来》
问题：给Img加动态路径,试了<img src=`${imgSrc}`>、<img src=""+imgSrc+"">、<img src={{imgSrc}}>都不管用甚至报错
解决办法： 给img加:src，绑定动态属性，
<img :src="imgsrc">

时间： 2017年10月26日
项目:《钱隆归来》
问题: 使用positon: absolute后再使用float: right 元素位置出现偏差
描述：使用position: absolute后元素已脱离文档流，所以再用float: right是不管用的
解决办法：也使用position: absolute 来固定元素位置。

时间：2017年10月27日
项目：《钱隆归来》
问题: 直接用可提现金额和输入金额做判断，当输入金额大于可提现金额时也不报错
描述：直接比较是字符串比较，只看位数不看大小，应该使用浮点数来比较
解决办法：
if (parseFloat(this.withdrawMoney) > parseFloat(this.data.sum_money)) {

时间：2017年10月27日
项目：《钱隆归来》
问题：<ul @click="toggle(this)">，使用e.target.nodeName找不到
描述： 应该传$event，表示此事件对象


时间：2017年10月30日
项目：《钱隆归来》
问题：在循环中使用了var i,循环结束后i 一直等于7，不能实现正确赋值
解决办法：应使用let，在每次循环中进行赋值
for (let i = 0, length = $li.length; i < length; i++) {}

时间：2017年10月30日
项目：《钱隆归来》
问题：点击列表项时不能显示出相应详情，
描述：li包含列表项和详情项，但给li设置一个高度，导致详情项不显示
li{height: 45px;}

// 提交验证码信息
export function sendCodeInfo(params) {
  return http.post(apis.postCodeInfo, params)
}


requestCodeInfo(
        {
          'mobile': this.phone,(X)
          step: 1
        }
      ).then((resp) => {
        return true
      }).catch((err) => {
        iakit.alert('', err.message, [
          {
            text: '朕知道了'
          }
        ])
      })

← 201711 →

<<<<<<< HEAD ======= <<<<<<< HEAD ======= >>>>>>> 793eb5d4d6fce8bc79f8be300bf90561aa0235d8 >>>>>>> e8dc1f41ef0284cf252dbb410d298e4600ff4ddb