Skip to content

Commit b4f45e0

Browse files
bai3bai3
committed
🚧 增加个性化头像
1 parent 1e6e626 commit b4f45e0

15 files changed

+103
-5
lines changed

‎src/App.vue

+6-1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,11 @@ export default {
3838
body{
3939
margin: 0
4040
}
41+
@media screen and (min-width: 1080px){
42+
#app{
43+
margin: 0 350px
44+
}
45+
}
4146
#app {
4247
font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
4348
-webkit-font-smoothing: antialiased;
@@ -49,7 +54,7 @@ body{
4954
text-decoration: none
5055
}
5156
}
52-
5357
}
5458
59+
5560
</style>

‎src/assets/head.svg

-1
This file was deleted.

‎src/assets/头像女孩(1).png

12.6 KB
Loading

‎src/assets/头像女孩(2).png

13.4 KB
Loading

‎src/assets/头像女孩(3).png

13.5 KB
Loading

‎src/assets/头像女孩(4).png

13.9 KB
Loading

‎src/assets/头像女孩.png

12.5 KB
Loading

‎src/assets/头像男孩(1).png

13.9 KB
Loading

‎src/assets/头像男孩(2).png

13.8 KB
Loading

‎src/assets/头像男孩(3).png

13.8 KB
Loading

‎src/assets/头像男孩(4).png

13.6 KB
Loading

‎src/assets/头像男孩.png

14 KB
Loading

‎src/components/Message.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</el-input>
1515
</el-form-item>
1616
<el-form-item label="留言内容" prop="content" :rules="[{ required: true, message: '请输入内容', trigger: 'blur' }, { required: true, message: '请输入内容', trigger: 'blur' },
17-
{ min: 10, max: 100, message: '长度在 10 到 100 个字符', trigger: 'blur,change' }]">
17+
{ min: 5, max: 100, message: '长度在 5到 100 个字符', trigger: 'blur,change' }]">
1818
<el-input type="textarea":rows="4" placeholder="请填写内容" v-model="form.content" resize="none">
1919
</el-input>
2020
</el-form-item>
@@ -70,6 +70,7 @@
7070
let _self = this;
7171
this.$message({
7272
message: '留言成功，请去留言列表查看',
73+
duration: 1000,
7374
type: 'success',
7475
onClose: function(){
7576
_self.form.name = "";

‎src/components/MessageList.vue

+27-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div>
3-
<div class="main" v-for="todo in comments">
3+
<div class="main" v-for="(todo, index) in comments">
44
<div style="margin-bottom: 15px">
55
<div style="display: inline-block">
6-
<img src="../assets/head.svg" style="width:35px">
6+
<img :src="'/src/assets/'+header(index)" style="width:35px">
77
</div>
88
<div class="info" style="display: inline-block">
99
<span style="font-size: 15px;color: #333;">{{todo.name}}</span><br/>
@@ -41,6 +41,31 @@ export default {
4141
},
4242
getlist(){
4343
alert('6666')
44+
},
45+
header(index){
46+
switch(index%10){
47+
case 0:
48+
return '头像男孩.png';
49+
case 1:
50+
return '头像女孩.png';
51+
case 2:
52+
return '头像男孩(1).png';
53+
case 3:
54+
return '头像女孩(1).png';
55+
case 4:
56+
return '头像男孩(2).png';
57+
case 5:
58+
return '头像女孩(2).png';
59+
case 6:
60+
return '头像男孩(3).png';
61+
case 7:
62+
return '头像女孩(3).png';
63+
case 8:
64+
return '头像男孩(4).png';
65+
case 9:
66+
return '头像女孩(4).png';
67+
}
68+
4469
}
4570
},
4671
beforeMount: function () {

‎test.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
<script src="https://unpkg.com/vue"></script>
9+
<script src="https://unpkg.com/[email protected]"></script>
10+
<script src="https://unpkg.com/[email protected]"></script>
11+
<style>
12+
html, body, #editor {
13+
margin: 0;
14+
height: 100%;
15+
font-family: 'Helvetica Neue', Arial, sans-serif;
16+
color: #333;
17+
}
18+
19+
textarea, #editor div {
20+
display: inline-block;
21+
width: 49%;
22+
height: 100%;
23+
vertical-align: top;
24+
box-sizing: border-box;
25+
padding: 0 20px;
26+
}
27+
28+
textarea {
29+
border: none;
30+
border-right: 1px solid #ccc;
31+
resize: none;
32+
outline: none;
33+
background-color: #f6f6f6;
34+
font-size: 14px;
35+
font-family: 'Monaco', courier, monospace;
36+
padding: 20px;
37+
}
38+
39+
code {
40+
color: #f66;
41+
}
42+
</style>
43+
</head>
44+
<body>
45+
<div id="editor">
46+
<textarea :value="input" @input="update"></textarea>
47+
<div v-html="compiledMarkdown"></div>
48+
</div>
49+
</body>
50+
<script>
51+
new Vue({
52+
el: '#editor',
53+
data: {
54+
input: '# hello'
55+
},
56+
computed: {
57+
compiledMarkdown: function () {
58+
return marked(this.input, { sanitize: true })
59+
}
60+
},
61+
methods: {
62+
update: _.debounce(function (e) {
63+
this.input = e.target.value
64+
}, 300)
65+
}
66+
})
67+
</script>
68+
</html>

0 commit comments

Comments
 (0)