Vue长按事件/长按无效事件/line-clamp无效/H5键盘按钮

line-clamp打包发布后无效问题

今天客户提出项目中页面的超出行数隐藏的功能需求，发现之前已经写过的效果在真机上居然没有生效。在开发工具上各种调试都觉得没有问题，在开发工具上是正常的效果：

正常效果.png

无法找到原因的情况下查找了资料，发现了解决办法：

1. 项目安装依赖

cnpm i -S optimize-css-assets-webpack-plugin

2. 找到 /build/webpack.prod.conf.js，注释掉这段代码

  new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),

3. 重新编辑，打开查看显示正常。注：尝试未安装依赖直接注释配置项无效。

查了一下相关资料，正确的配置是：

//压缩提取出的css，并解决ExtractTextPlugin分离出的js重复问题(多个文件引入同一css文件)
new OptimizeCSSPlugin(), 

参考资料用的是webpack 2.2.1：
打开传送门

H5键盘按钮

之前做iOS开发时经常遇到需要修改键盘按钮和自定义键盘弹出视图的情况，在原声app中可以跟方便的处理键盘的。但H5这块就很有限了，input打开键盘默认是 换行 。
想根据input的类型实现不同的文本，首先需要使用form包含这个input元素，当然action阻止一下:

   // 搜索
    //前往

Vue元素长按无效

处理长按按钮录音发送语音的功能时，出现了在开发工具和安卓上都能正常的长按触发事件，使用的是
touchStart和touchEnd事件，处理了user-select: none; 后来发现在ios上长安的时候，没有触发：

   
请按住说话

此时除了iphone其他的都OK，后来测试发现在iOS上没有出发touchstart事件，想着是是不是因为p元素在div之上，而导致事件被阻止传递下去了呢？简单搜索，查到有穿透dom传递事件的样式：

语音评论.png

测试后正常全部都能正常触发事件。