Skip to content

B
beyond-clouds-front
Commit 9a338ba1 by yanju
Options

Merge branch 'yoona' into 'master' 

finish answer release

See merge request pigbigbig/beyond-clouds-front!11
parents a7e55f5b f0346e39
Showing with 540 additions and 4 deletions
components/pc/cardContainer.vue
......@@ -42,7 +42,7 @@ export default {
width: 4*$length;
height: 16*$length;
background-color: #00AAE6;
@include border-radius(2*$length);
border-radius: 0 2*$length 2*$length 0;
}
> p{
margin-left: 12*$length;
......
components/pc/nav/navWrap.vue
......@@ -37,7 +37,6 @@ export default {
display: inline-block;
background-color: #fff;
padding-top: 21*$length;
padding-bottom: 74*$length;
@include border-radius(4*$length);
}
</style>
components/pc/select/labelWrap.vue 0 → 100644
<template>
<div class="label-box">
<p>{{info}}</p>
<yun-icon name="close2" size="10px" color="#BBB" @click.native="handleDelete"></yun-icon>
</div>
</template>
<script>
export default {
name: "labelWrap",
props: {
info: String,
index: Number
},
methods: {
handleDelete(){
this.$emit('deletelabel', this.index);
}
}
}
</script>
<style lang="scss" scoped>
.label-box{
display: inline-block;
margin-right: 16*$length;
@extend %cursorPointer;
&:hover{
> p{
color: #00AAE6;
}
}
> p {
display: inline-block;
@include fontStyle(12,16,500,#999,left);
}
}
</style>
components/pc/select/selectCard.vue 0 → 100644
<template>
<div>
<div class="select-container" v-if="selectType === '1'">
<div class="select-container__input-box">
<div>
<input
type="text" placeholder="添加标签"
@focus="isShow=true"
@keyup.enter="handleSearch"
v-model="value"
>
<span>{{list.length ? list.length : 0}}</span>
<transition name="fade">
<div class="label-list__wrap" v-if="isShow">
<div class="label-list">
<!--<select-content-->
<!--v-for="(item, index) in labelList" :item="item"-->
<!--:key="`${item}${index}`"-->
<!--&gt;</select-content>-->
<select-content
v-for="(item, index) in labelList"
:item="item"
:key="`${item}${index}`"
@select="handleChange"
></select-content>
</div>
</div>
</transition>
</div>
<button @click="handlePush">添加（{{result.length}}）</button>
</div>
<div class="select-container__label-list">
<label-wrap
v-for="(item, index) in result"
:info="item"
:index="index"
:key="`${index}${item}`"
@deletelabel="handleDelete"
></label-wrap>
</div>
</div>
<div class="select-container" v-if="selectType === '2'">
<div class="input-box" @click="isShow=true">
<input type="text" v-model="value" disabled="true" :placeholder="placeholder">
<div class="icon-box">
<yun-icon name="down_arrow" size="10px" color="#999"></yun-icon>
</div>
</div>
<div class="class-list-box" v-if="isShow" @mouseleave="isShow=false">
<select-content
v-for="(item, index) in classList"
:item="item"
:key="`${item}${index}`"
@select="handleChange2"
></select-content>
</div>
</div>
</div>
</template>
<script>
import SelectContent from "./selectContent.vue";
import LabelWrap from "./labelWrap";
export default {
name: 'selectCard',
components: {SelectContent, LabelWrap},
props: {
selectType: String,
classList: Array,
placeholder: String
},
data(){
return{
isShow: false,
list: ['web', 'java', 'python'],
searchList: [],
result: [],
value: ''
}
},
computed: {
labelList: function () {
if (this.searchList.length) {
return this.searchList
} else {
return this.list
}
},
},
methods: {
// 点击选中标签后 添加标签
handleChange(e){
console.log(e);
this.value = e;
},
// 删除选中的标签
handleDelete(index){
this.result.splice(index, 1);
},
// 回车后，将搜索到的第一个标签选中
handleSearch(){
if (this.searchList.length) {
this.result.push(this.searchList[0])
this.value = '';
this.isShow = false;
setTimeout(()=>{
this.isShow = true
}, 500)
}
},
handlePush(){
this.result.push(this.value);
this.isShow = false;
this.value = '';
},
handleChange2(e){
this.value = e;
this.isShow =false;
}
},
watch: {
value: function (val) {
this.searchList = [];
this.list.forEach((item, index) => {
if (item.indexOf(val) >= 0) {
this.searchList.push(item)
}
});
console.log(this.searchList);
}
}
}
</script>
<style lang="scss" scoped>
.select-container{
.select-container__input-box{
width: 350*$length;
@extend %flex-row-spb;
> div {
position: relative;
> input {
@include fontStyle(14,19,500,#666,left);
width: 279*$length;
height: 46*$length;
padding: 14*$length 16*$length;
box-sizing: border-box;
background-color: #F4F8FA;
@include border-radius(4*$length);
}
> span {
position: absolute;
right: 16*$length;
top: 14*$length;
@extend %cursorPointer;
@include fontStyle(14,19,500,#666,left);
}
.label-list{
position: absolute;
top:56*$length;
left: 2*$length;
z-index: 999;
width: 275*$length;
height: 122*$length;
padding: 5*$length 0;
background-color: #fff;
box-sizing: border-box;
overflow-y: auto;
@include box-shadow(0 6*$length 20*$length rgba(0,0,0,.1));
@include border-radius(4*$length);
&:before{
position: absolute;
display: inline-block;
top: -16*$length;
left: 25*$length;
content: '';
width: 0;
height: 0;
border: 8*$length solid;
border-color: transparent transparent #fff;
}
}
}
> button {
border: none;
@include fontStyle(14,19,500,#999,left);
background-color: #fff;
@extend %animate-transition;
&:hover{
@extend %cursorPointer;
color: #00AAE6;
}
}
}
.select-container__label-list{
margin-top: 12*$length;
margin-left: 4*$length;
}
.input-box{
position: relative;
> input {
@include fontStyle(14,19,500,#666,left);
width: 196*$length;
height: 46*$length;
padding: 14*$length 16*$length;
background-color: #F4F8FA;
@include border-radius(4*$length);
}
.icon-box {
position: absolute;
top: 14*$length;
right: 20*$length;
}
}
.class-list-box{
border: 1*$length solid #F4F8FA;
@include border-radius(4*$length);
}
}
</style>
components/pc/select/selectContent.vue 0 → 100644
<template>
<div>
<p @click="handleClick">{{item}}</p>
</div>
</template>
<script>
export default {
name: "selectContent",
props: {
item: String
},
methods: {
handleClick(){
console.log(this.item);
this.$emit('select', this.item);
}
}
}
</script>
<style lang="scss" scoped>
p {
@include fontStyle(14, 40, 500, #999, left);
padding-left: 20*$length;
@extend %cursorPointer;
&:hover {
background-color: #F4F8FA;
color: #00AAE6;
}
}
</style>
pages/answer/release/index.vue 0 → 100644
<template>
<div class="answer-release-container">
<div class="answer-release-container__l">
<card-container
title="以发布的问题"
width="302px"
height="270px"
></card-container>
<card-container
title="问题草稿箱"
width="302px"
height="400px"
style="margin-top: 16px"
></card-container>
</div>
<div class="answer-release-container__r">
<card-container
title="发布问题"
width="938px"
height="716px"
>
<div class="answer-release">
<div class="answer-release__header">
<span>*</span>
<input type="text" placeholder="请一句话说明问题，并以问号结尾">
</div>
<div class="answer-release__content">
<span>*</span>
<div class="editor-container">
<mavon-editor
v-model="value"
:toolbars="markdownOption"
class="editor"
placeholder="问题详情...."
@imgAdd="imgAdd"
@imgDel="imgDel"
@save="save"
@change="intervalSave"
></mavon-editor>
</div>
</div>
<div class="select-content">
<div>
<span>*</span>
<select-card selectType="1"></select-card>
</div>
<select-card selectType="2" :class-list="classList" placeholder="请选择问题分类"></select-card>
</div>
<div class="answer-release__footer">
<p>已自动存为草稿</p>
<button class="preview" @click="preview">预览</button>
<button class="submit">提交</button>
</div>
</div>
</card-container>
</div>
</div>
</template>
<script>
import CardContainer from "../../../components/pc/cardContainer";
import SelectCard from "../../../components/pc/select/selectCard";
export default {
components: {SelectCard, CardContainer},
data() {
return {
markdownOption: {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
mark: true, // 标记
superscript: true, // 上角标
subscript: true, // 下角标
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
help: false, // 帮助
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: true, // 保存（触发events中的save事件）
navigation: true, // 导航目录
alignleft: true, // 左对齐
subfield: true, // 单双栏模式
preview: true // 预览
},
value: '',
lastSaveTime: new Date(),
classList: ['web', 'java', 'javascript']
}
},
methods: {
imgAdd(pos, file) {
//添加图片，pos为位置
// 第一步.将图片上传到服务器.
let formData = new FormData();
formData.append('image', file);
axios({
url: 'server url',
method: 'post',
data: formdata,
headers: {'Content-Type': 'multipart/form-data'},
}).then((url) => {
// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
/**
* $vm 指为mavonEditor实例，可以通过如下两种方式获取
* 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
* 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
*/
$vm.$img2Url(pos, url);
})
},
imgDel(pos, url) { //删除图片，并不是修改就会触发，仅支持工具栏操作
console.log(pos);
console.log(url);
},
save() { //保存文章内容
},
intervalSave() { //自动保存
let now = new Date();
if (now - this.lastSaveTime >= 2 * 60 * 1000) {
this.lastSaveTime = now;
}
},
preview(){ // 预览
console.log('预览');
}
}
}
</script>
<style lang="scss" scoped>
.answer-release-container {
width: $pageWidth;
margin: 24*$length auto 32*$length auto;
@extend %flex-row-spb;
align-items: start;
.answer-release-container__l {
}
.answer-release-container__r {
.answer-release {
width: 748*$length;
margin: 0 auto;
.answer-release__header {
margin-top: 40*$length;
@extend %flex-row-spb;
> span {
color: #FF7474;
font-size: 6*$length;
}
> input {
@include fontStyle(14, 19, 500, #666, left);
width: 726*$length;
height: 46*$length;
padding: 14*$length 16*$length;
background-color: #F4F8FA;
@include border-radius(4*$length);
}
}
.answer-release__content {
margin-top: 32*$length;
@extend %flex-row-spb;
align-items: start;
> span {
display: inline-block;
margin-top: 18*$length;
color: #FF7474;
font-size: 6*$length;
}
.editor-container {
width: 723*$length;
height: 230*$length;
.editor {
min-height: 230*$length;
min-width: 723*$length;
z-index: 8000;
}
}
}
.select-content {
@extend %flex-row-spb;
align-items: start;
margin-top: 32*$length;
> div {
@extend %flex-row-spb;
align-items: start;
span {
color: #FF7474;
font-size: 6*$length;
margin-right: 16*$length;
margin-top: 18*$length;
}
}
}
}
.answer-release__footer {
margin-top: 162*$length;
@extend %flex-row-spb;
justify-content: flex-end;
> p {
margin-right: 32*$length;
@include fontStyle(12,16,500,#999,left);
}
> button {
@include fontStyle(14,19,500,#fff,center);
width: 100*$length;
height: 40*$length;
background-color: #00AAE6;
border: none;
@extend %cursorPointer;
@include border-radius(4*$length);
}
.preview{
color: #666;
background-color: #fff;
margin-right: 16*$length;
@extend %animate-transition;
&:hover{
color: #fff;
background-color: #00AAE6;
}
}
}
}
}
</style>
pages/index.vue
......@@ -21,7 +21,6 @@
<h2 class="subtitle" @click="showAlert">
beyond-clouds project
</h2>
<nav-wrap></nav-wrap>
</div>
</div>
</template>
......
plugins/mavonEditor.js
import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment