chaoz的杂货铺

生命有息、学无止境、折腾不止

0%

vue-前端笔记

vue-获取到了后端数据,如何给其换行?

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.14.1/lib/index.js"></script>
<div id="app">
<div class="block">
<div class="radio">
排序:
<el-radio-group v-model="reverse">
<el-radio :label="true">倒序</el-radio>
<el-radio :label="false">正序</el-radio>
</el-radio-group>
</div>

<el-timeline :reverse="reverse">
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:timestamp="activity.timestamp">
<p class="text" v-html="activity.content"></p>
</el-timeline-item>
</el-timeline>
</div>
</div>

###

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var Main = {
data() {
return {
reverse: true,
activities: [{
content: '活动按\n期开始',
timestamp: '2018-04-15'
}, {
content: '通过审核',
timestamp: '2018-04-13'
}, {
content: ' aaa <br>ccc',
timestamp: '2018-04-11'
}]
};
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

css

1
@import url("//unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css");

mark

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
textareaTo(str) {

let regs = new RegExp("\r", "g");

let reg = new RegExp("\n", "g");

let regSpace = new RegExp(" ", "g");

str = str.replace(reg, "<br/>");

str = str.replace(regs, "<br/>");

str = str.replace(regSpace, "&nbsp;");

return str;

},

vue实现PC端分辨率适配

依赖
项目基础配置使用 vue-cli2 生成
自适应方案核心: 阿里可伸缩布局方案 lib-flexible
px转rem:px2rem,它有webpack的loader px2rem

开始
先使用vue脚手架初始化一个webpack项目

vue init webpack 项目名

项目初始化好了之后,进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loader

npm i lib-flexible -S

npm i px2rem-loader -D

安装好了之后还需要在项目的入口文件 main.js 里引入 lib-flexible

1
2
// main.js
import 'lib-flexible'

mark
mark

接下来为了验证 lib-flexible 是否生效,可以将app.vue中的内容改成:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
这一步可做可不做,毕竟有现成的项目
<template>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</template>

<style>
* {
margin: 0;
padding: 0;
}
</style>

<style scoped>
.wrapper div {
height: 1rem;
}
.box1 {
width: 2rem;
background-color: coral;
}
.box2 {
width: 4rem;
background-color: skyblue;
}
.box3 {
width: 6rem;
background-color: palegreen;
}
.box4 {
width: 8rem;
background-color: wheat;
}
.box5 {
width: 10rem;
background-color: darkred;
}
</style>

mark

但是在实际开发中,我们通过设计稿得到的单位是px,所以要将px转换成rem再进行样式中。但如果都需要手动转的话,就很麻烦,所以需要一个工具替我们完成这项工作,这个时候就需要配置px2rem了,当然,编辑器可能也要对应的插件。

在 vue-cli 生成的 webpack 配置中,vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。我们只需在 cssLoader 后再加上一个 px2remLoader 即可,px2rem-loader 的 remUnit 选项意思是 1rem=多少像素,结合 lib-flexible 的方案,我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10,这里我们假设设计稿宽为 1920px。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//utils.js
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}

const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 192
}
}
//...
remUnit: 这个参数是用来调整自适应的。

放进loaders数组中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
utils.js
说明:这个就是引用上面的两个函数的,注意。修改 utils.js 必须重新启动。
function generateLoaders (loader, loaderOptions) {
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}

修改配置以后重启服务器,将原来app.vue文件中的样式改成:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
说明:
import: 不解释 按照自己的项目来配。
scoped: 对某些组件可能不太优化,自己选择使用否。

<!--<style scoped>-->
<style>
@import "./assets/css/reset.css";
@import "./assets/css/common.css";
@import "./assets/css/animate.css";
@import "./assets/css/login.css";
@import "../static/icon/iconfont.css";

#app {
height: 100%;
background: #f7f7f7;
overflow: hidden;
}

.wrapper div {
height: 1rem;
}
.box1 {
/* 750 * 20% */
width: 150px;
background-color: coral;
}
.box2 {
/* 750 * 40% */
width: 300px;
background-color: skyblue;
}
.box3 {
/* 750 * 60% */
width: 450px;
background-color: palegreen;
}
.box4 {
/* 750 * 80% */
width: 600px;
background-color: wheat;
}
.box5 {
/* 750 * 100% */
width: 750px;
background-color: darkred;
}
</style>

喜欢这篇文章?打赏一下作者吧!

欢迎关注我的其它发布渠道