项目开发过程中的细节问题及解决方法（Vue，Css）（入门级）

Vue开发填坑

方法methods通用

问题描述：

vue开发过程中很多时候，函数方法methods会在各个组件内共用，每个组件都写个比较多余。

解决方法：

1.利用CommonJS思想，单独写，然后每个组件利用import { function } from ‘../..’导入，直接使用。

import { myMethod } from '../../common/scripts/myMethod.js'
myMethod();

2.直接全局注册

Vue.protytpe.$myMethod = function(options) {
console.log("this is my method");
}

组件使用时直接调用this.$myMethod即可。

弹窗背景

问题描述：

弹窗实现背景的毛玻璃效果。

解决方法：

.blur {
filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}

补充1：试了下发现子元素同样处于模糊状态，而且这里子元素的filter并不是继承父元素的值，默认就是不模糊的，但是和重绘有关系。目前的解决方法是重新创建一个层包含子元素，利用占位实现弹窗背景模糊的效果，（伪元素）。

补充2：继续使用了下发现这样简单的调用并没有使得覆盖层背后的背景达到同样的模糊效果。可以给覆盖层添加与底下被遮盖层相同的背景图片达到目的。

相关文档：http://blog.csdn.net/libin_1/article/details/51927430

例子：

.content {
background-position: center top;
background-size: cover;
}
.content::after {
background-image: url(xxx.jpg);
background-position: center top;
background-size: cover;
background-attachment: fixed;
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-ms-filter: blur(20px);
-o-filter: blur(20px);
filter: blur(20px);
}

IOS输入框的边界线

问题描述：

苹果IOS系统下观察，输入框的边界线总是会两边向上翘起。

解决方法：

输入框外层套一个div元素，设置相应的宽高以及边界线，内部input设置为100%宽度

flex布局小问题

问题描述：

有一个简单的输入手机号模态窗口，使用flex，column列向布局。其中窗口上有个X号以及>号放在一个div里，想通过设置这个父div为flex，justify-content来使得这两个符号分布两侧。但是发现这个div好像被设置了浮动似的，底下的元素占用了这个div的位置。

解决方法：

并不是问题，主要是在有限容器内，如果元素过大会出现一些问题。

vue组件开发中css复用

问题描述：

每个组件的css都单独写感觉重用率很低。

解决方法：

Pending…

IOS中button按钮与安卓的差异

问题描述：

苹果机里按钮的内部大小和安卓页面的按钮大小好像不一样，有时候可能相同的按钮大小设置，结果内部能显示的文字不同。

解决方法：

暂时把按钮扩宽点。

倒计时

问题描述：

倒计时重新发送验证码的问题。

解决方法：

export default {
data () {
return {
timer: 30,       //默认倒数30秒
Interval:null    //setInterval的对象
}
},
methods : {
update() {
if (this.timer == 0) {
this.timer = 60;
clearInterval(this.Interval);
} else {
this.timer--;
}
},
startTimer() {
clearInterval(this.Interval);
this.Interval = setInterval(this.update, 1000);
}
}
}

输入框实现有限数字输入

问题描述：

想在输入框里输入一个验证码或者手机号码，而且限制手机号码或者验证码的字符个数。

解决方法：

<input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="14">

注意，maxlength这个input标签属性只能和type为text或者password的输入框联合使用。

vue-resource请求失败

问题描述：

在单个组件里，希望通过mounted()生命钩子函数，通过

this.$http.get('/api/my/route/done').then((response) => {

})

对服务器端请求数据。

而服务器端用的是express()框架模拟。

// app.use('/api', apiRoutes);用express模拟服务器传输数据。
var app = express()

// 通过require获取JSON数据
var appData = require('../personalCenter.json')
var user = appData.user

var routeData = require('../route.json')
var routeDone = routeData.done
var routeCancelled = routeDone.cancel

// 创建express服务器端路由
var apiRoutes = express.Router()

// 客户端请求服务器端的路径，响应res
apiRoutes.get('/myProfile', function(req, res) {
res.json({
data: user
})
})

apiRoutes.get('/my/route/done', function(req, res) {
res.json({
data: routeDone
})
})

apiRoutes.get('/my/route/cancel' function(req, res) {
res.json({
data: routeCancelled
})
})

app.use('/api', apiRoutes)

但是在使用过程中却出现uncaught(in promise)，404Not Found错误。

解决方法：

就算是热加载，如果启动服务器后，直接更改服务器的配置dev-server.js，也不会达到更新的效果。

重新启动npm run dev即可。

组件的show切换

问题描述：

有时候想要达成点击一个组件，实现另外一个组件show切换的效果。比如对于列表类来说，如果对每项添加一个点击事件，点击后就会展示详情。一般采用的是absolute覆盖的方法。但是如果列表太长，跳出的详情页就就无法完全遮盖列表。

解决方法：

让列表组件和详情组件处于同一级的状态，点击列表组件的单项后，show详情组件，且隐藏列表组件。如果详情组件放在列表组件的子组件里，那么隐藏列表组件也会隐藏详情组件。

父子组件之间的信息传递

记录： 父组件通过prop向子组件传值，子组件通过emit向父组件传递事件，并且可以伴随值。

<component-a  v-on:child-say="listenToMyBoy"></component-a>
<p>Do you like me? {{childWords}}</p>
methods: {
listenToMyBoy: function (somedata){
this.childWords = somedata
}
}

<button v-on:click="onClickMe">like!</button>
methods: {
onClickMe: function(){
this.$emit('child-say',this.somedata);
}
}

补充描述：现在我的两个组件放在同一个组件S里，如下。

<trTasksList></trTasksList>
<trTasksDetail></trTasksDetail>

现在我点击List组件，List组件传递了一个数据到S组件，保存在数据data（）里，绑定给Detail的prop，但是出现了 vaild prop错误。这是为啥？

解决方法：

我晕，找了半天发现是prop类型的问题，我传递的是一个id比如1，还必须使用String()转换成字符串的格式传输。

补充2：

发现多个视图依赖于同一状态，试试vuex吧。

补充3：

对于同个组件映射多个路由，可以试下动态路由，是可以传递信息的。

比如这么玩

给组件A添加一个点击事件，点击后跳转路由渲染另外一个组件B。
假设B组件是个详情组件，需要适配不同的用户数据（根据点击的A组件确认）。
这里就可以用动态路由。
路由修改"XX/:id"
这样'XX/YYY'形式的路径都会跳转到"XX/:id"匹配的组件。
然后数据id，在B组件中只需要通过this.$route.params引用。
mounted()的时候，通过vue-resource加到请求路径里，就成了动态路径了。
动态路径因为是都在使用同一个组件，所以要注意一下生命周期函数的有效性问题。

补充4：

我擦，换了种方法还是出现了数据读取的错误，原来在组件形成的时候，{{}}语法就会在挂载前先访问data()数据的存在，所以有时候可以给标签添加v-if属性进行判断。

补充5：

还是那个动态路径，但是不同路径数据怎么传输老是出现错误、

pending

暂时的解决方法是把两个组件放在一起，通过show来切换…还好组件不多..

路由设置和状态管理(mark)

问题描述：

初次做项目感觉给自己挖了很大的一个坑，现在什么时候用路由渲染什么时候用v-show渲染有点乱，而且状态的管理有点问题。

对项目的生命周期认识还不深刻，主要还是做同步的交互。

解决方法：

积累经验好好学吧…

图片上传与预览

问题描述：

有时候可能会有这样的需求，需要通过

<input type="file">

标签上传一个头像，然后在特定的位置预览头像。

解决方法：

预览

1.添加一个

<img :src="image">

标签，图片路径绑定实例数据

2.给

<input type="file">

添加一个事件

@change="onFileChange"

3.onFileChange方法如下：

onFileChange: function(){
if (typeof FileReader == 'undefined') {
console.log('failed');
return false;
}
var file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
var vm = this;
reader.onload = function(e) {
vm.image = e.target.result;
}
}

上传

列表渲染传递index

问题描述：

写列表渲染的单项组件时，有些元素使用class标记的，这样写相关js的时候就需要class的具体位置[index]

解决方法：

通过列表渲染的index传递

选择框select初次进入无法点击第一项

问题描述：

进入页面后，选择select选择框的第一项并没有反应，因为网页默认选项就是第一项，点击并不触发onchange事件。

解决方法：

添加一个display为none 的第一项

vue transition leave class未启作用

问题描述：

用vue的transition组件实现进入离开的过渡状态，发现进入状态时的class正确加上了，但是离开却没有状态。

解决方法：

这个真的有点郁闷，郁闷了好久才发现原来是css写错了…自己检查下css的类名或者什么其他的东西有没有打错吧。

列表渲染部分数据丢失（疑难杂症）

问题描述：

这里的数据丢失并不是指从后台得到的数据丢失，而是在利用数据进行渲染的过程中，有部分数据渲染的组件并没有渲染出来（这里是最后几个数据），也就是说这些组件占了位置，但是在电脑屏幕上没有显示，而且切换一次路由，这些数据又出来了。因为vue的列表渲染也是利用insert，估计数量太大会引起这类错误。

补充：

手机端没有这个问题….

解决方法（未实验）：

分页。