【109】行内元素间的换行符导致出现空隙。Vue用删除标签间换行符解决。
2018-02-15 00:55
471 查看
场景重现
读者可以到 这里写链接内容去阅读整个演示项目的源代码。本文只给出关键代码。
文件结构
blog109 │ ├─.babelrc ├─.npmrc ├─index.template.html ├─package.json ├─webpack.config.js ├─yarn.lock └─src │ ├─App.vue ├─home.vue ├─main.js └─router.js
webpack.config.js
var path = require('path') var webpack = require('webpack') const HTMLPlugin = require('html-webpack-plugin') module.exports = { entry: { app: ['./src/main.js'], // 把共用的库放到vendor.js里 vendor: [ 'babel-polyfill', 'vue', 'vue-router' ] }, output: { path: path.resolve(__dirname, './dist'), // 因为用到了 html-webpack-plugin 处理HTML文件。处理后的HTML文件都放到了 // dist文件夹里。html文件里面js的相对路径应该从使用 html-webpack-plugin 前 // 的'/dist/' 改成 '/' publicPath: '/', // publicPath: '/dist/', filename: '[name].[hash].js' // filename:'build.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { // Since sass-loader (weirdly) has SCSS as its default parse mode, we map // the "scss" and "sass" values for the lang attribute to the right configs here. // other preprocessors should work out of the box, no loader config like this necessary. 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, // font loader { test: /\.(ttf|eot|woff|svg)$/i, loader: 'url-loader' }, // 图片处理 { test: /\.(png|jpg|gif)$/, loader: 'url-loader', options: { limit: '1000', name: '[name].[ext]?[hash]' } }, { test: /\.(docx)$/, loader: 'url-loader', options: { limit: '10', name: '[name].[ext]' } } // { // test: /\.(png|jpg|gif|svg)$/, // loader: 'file-loader', // options: { // name: '[name].[ext]?[hash]' // } // } ] }, plugins:[ // 把共用的库放到vendor.js里 new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}), // 编译HTML。目的:在生产环境下,为了避免浏览器缓存,需要文件按照哈希值重命名。 // 这里编译可以自动更改每次编译后引用的js名称。 new HTMLPlugin({template: 'index.template.html'}) ], resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }
home.vue
<template> <div> <a class="blog109-a">文字1</a> <a class="blog109-a">文字2</a> <a class="blog109-a">文字3</a> <a class="blog109-a">文字4</a> </div> </template> <script> export default { data(){ return { }; } }; </script> <style lang="scss" rel="stylesheet/scss" scoped> .blog109-a{ color: white; background-color: red; padding: 0; margin: 0; border: 0; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: transparent; cursor: pointer; } </style>
效果如图:
产生这个问题的原因在于,a 标签间的空格和换行符被解析成文本节点,产生了空隙。当然,在源代码中删除 a 标签间的空格和换行是可以解决此问题。但是代码格式难以阅读。
解决办法
既要保证代码可以阅读,又要保证效果,可以考虑在编译选项上着手。vue-loader提供了这样的选项来方便开发者。修改方法非常简单,只要在 webpack.config.js配置文件中,对vue-loader加入preserveWhitespace: false就可以了。
修改后的 webpack.config.js 文件内容如下:
var path = require('path') var webpack = require('webpack') const HTMLPlugin = require('html-webpack-plugin') module.exports = { entry: { app: ['./src/main.js'], // 把共用的库放到vendor.js里 vendor: [ 'babel-polyfill', 'vue', 'vue-router' ] }, output: { path: path.resolve(__dirname, './dist'), // 因为用到了 html-webpack-plugin 处理HTML文件。处理后的HTML文件都放到了 // dist文件夹里。html文件里面js的相对路径应该从使用 html-webpack-plugin 前 // 的'/dist/' 改成 '/' publicPath: '/', // publicPath: '/dist/', filename: '[name].[hash].js' // filename:'build.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { // Since sass-loader (weirdly) has SCSS as its default parse mode, we map // the "scss" and "sass" values for the lang attribute to the right configs here. // other preprocessors should work out of the box, no loader config like this necessary. 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' } // other vue-loader options go here ,preserveWhitespace: false // 默认值是true,如果设置为 false,模版中 HTML 标签之间的空格将会被忽略。 } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, // font loader { test: /\.(ttf|eot|woff|svg)$/i, loader: 'url-loader' }, // 图片处理 { test: /\.(png|jpg|gif)$/, loader: 'url-loader', options: { limit: '1000', name: '[name].[ext]?[hash]' } }, { test: /\.(docx)$/, loader: 'url-loader', options: { limit: '10', name: '[name].[ext]' } } // { // test: /\.(png|jpg|gif|svg)$/, // loader: 'file-loader', // options: { // name: '[name].[ext]?[hash]' // } // } ] }, plugins:[ // 把共用的库放到vendor.js里 new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}), // 编译HTML。目的:在生产环境下,为了避免浏览器缓存,需要文件按照哈希值重命名。 // 这里编译可以自动更改每次编译后引用的js名称。 new HTMLPlugin({template: 'index.template.html'}) ], resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }
间隙全部消除后的效果:
注意
虽然preserveWhitespace: false可以删除标签间的空格,但是v-html 配合样式
white-space:pre-wrap还是可以保留DIV 标签中的空格和换行的。
加了v-html后的home.vue 如下:
<template> <div class="blog109-div"> <a class="blog109-a">文字1</a> <a class="blog109-a">文字2</a> <a class="blog109-a">文字3</a> <a class="blog109-a">文字4</a> <div v-html="myHtml" class="blog109-myHtml"></div> </div> </template> <script> export default { data(){ return { myHtml: " sljdldfj\nlsjdflkj" }; } }; </script> <style lang="scss" rel="stylesheet/scss" scoped> .blog109-div{ text-align: center; } .blog109-a{ color: white; background-color: red; padding: 0; margin: 0; border: 0; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: transparent; cursor: pointer; } .blog109-myHtml{ white-space:pre-wrap } </style>
v-html 中的空格和回车依然保留:
相关文章推荐
- Android学习札记10:用SAX解析XML文件时,当标签中出现换行符时可能出现读取内容为空的解决方法
- 【Vue】删除数组元素,导致剩余元素被重新渲染
- CSS HACK tab制表符导致行内元素之间的空隙如何解决
- 关于windows7安装时可能出现的100MB系统保留分区的解释及删除办法以及由此导致的软改激活失败的解决办法
- 关于jquery html()方法获取带有OBJECT标签的元素内容时,出现“类型不匹配。”的解决办法
- [乐意黎原创]因误删除导致Mysql启动时出现system error 1067 has occurred及Plugin FEDERATED is disabled 错误提示的解决方法
- rsync同出出现 IO error encountered导致无法删除文件的解决方法
- py 删除list中重复出现得元素
- 鼠标悬停,出现另一个元素,点击这个元素的解决方法
- android中导入开源项目,常出现的导致编译错误的解决方法
- utils object doesn,t exists中毒后,就删除了.JS文件后台就出现了前面的英文。请问怎么解决
- 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面
- SQL Server 2008R2 数据库出现“可疑”导致无法访问解决办法
- Chrome的bug解决办法:overflow导致a标签无法显示
- 用vue,如何给一个列表中的每个元素标签绑定id
- 解决 hybird 应用中重复获取 WebView,导致页面元素无法识别的问题
- 使用MyEclipse2014从项目中删除东西时出现“Problems encountered while deleting resources”的解决办法。
- ASP.NET 程序中删除文件夹导致session失效问题的解决办法分享
- 归档日志缺少导致ogg同步出现问题,解决办法
- PHP删除HTMl标签的三种解决方法