全拼半拼切来切去
我一直觉得有个东西反程序员，用中文输入后,符号也变成全拼,但是转到输代码又要切回半拼
现在只需要ctrl + .,就可以进行中文拼音输入+符号半拼,可以一遍敲代码一遍写中文了,爽爆
3.22
我的毕设
先下个md文本编辑器https://www.jianshu.com/p/514c40614aa4
npm install mavon-editor --save --registry=https://registry.npm.taobao.org
然后在单个vue中
<template>
<mavon-editor></mavon-editor>
</template>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
name: "QaIndex",
components: {
QaTag,
mavonEditor
},
- 其有个
@change属性可以看看调整后的html代码
// 所有操作都会被解析重新渲染
change(value, render) {
// render 为 markdown 解析后的结果[html]
this.html = render;
},
重点
直接复制md就好啦
改的代码
<template>
<div>
<el-tabs type="border-card">
<el-tab-pane label="最新问答列表">
<el-card class="box-card" shadow="hover" v-for="problem in problemNewList">
<div slot="header" class="clearfix">
<router-link :to="'/user/'+problem.userid">{{problem.nickname}}</router-link> 于
{{problem.createtime}} 提出
<el-divider direction="vertical"></el-divider>
{{problem.updatetime}}更新问题
<span style="float: right; padding: 3px 0">最新回复： <router-link
:to="'/user/name/'+problem.replyname">{{problem.replyname}}</router-link>
于
{{problem.replytime}} 回复</span>
</div>
<div class="text item">
<router-link :to="'/qa/'+problem.id">{{problem.title}}</router-link>
</div>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="text item">
<QaTag :id="problem.id"></QaTag>
</div>
</el-col>
<el-col :offset="6" :span="6">
<div>
<i class="el-icon-view">浏览量：{{problem.visits}}</i>
<el-divider direction="vertical"></el-divider>
<i class="el-icon-thumb">点赞数：{{problem.thumbup}}</i>
<el-divider direction="vertical"></el-divider>
<i class="el-icon-chat-dot-round">回复数：{{problem.reply}}</i>
</div>
</el-col>
</el-row>
</el-card>
</el-tab-pane>
<el-tab-pane label="热门问答列表">
<el-card class="box-card" shadow="hover" v-for="problem in problemHotList">
<div slot="header" class="clearfix">
<router-link :to="'/user/'+problem.userid">{{problem.nickname}}</router-link> 于
{{problem.createtime}} 提出
<el-divider direction="vertical"></el-divider>
{{problem.updatetime}}更新问题
<span style="float: right; padding: 3px 0">最新回复： <router-link
:to="'/user/name/'+problem.replyname">{{problem.replyname}}</router-link>
于
{{problem.replytime}} 回复</span>
</div>
<div class="text item">
<router-link :to="'/qa/'+problem.id">{{problem.title}}</router-link>
</div>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="text item">
<QaTag :id="problem.id"></QaTag>
</div>
</el-col>
<el-col :offset="6" :span="6">
<div>
<i class="el-icon-view">浏览量：{{problem.visits}}</i>
<el-divider direction="vertical"></el-divider>
<i class="el-icon-thumb">点赞数：{{problem.thumbup}}</i>
<el-divider direction="vertical"></el-divider>
<i class="el-icon-chat-dot-round">回复数：{{problem.reply}}</i>
</div>
</el-col>
</el-row>
</el-card>
</el-tab-pane>
<el-tab-pane label="等待回答列表">
<el-card class="box-card" shadow="hover" v-for="problem in problemWaitList">
<div slot="header" class="clearfix">
<router-link :to="'/user/'+problem.userid">{{problem.nickname}}</router-link> 于
{{problem.createtime}} 提出
<el-divider direction="vertical"></el-divider>
{{problem.updatetime}}更新问题
<span style="float: right; padding: 3px 0">最新回复： <router-link
:to="'/user/name/'+problem.replyname">{{problem.replyname}}</router-link>
于
{{problem.replytime}} 回复</span>
</div>
<div class="text item">
<router-link :to="'/qa/'+problem.id">{{problem.title}}</router-link>
</div>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="text item">
<QaTag :id="problem.id"></QaTag>
</div>
</el-col>
<el-col :offset="6" :span="6">
<div>
<i class="el-icon-view">浏览量：{{problem.visits}}</i>
<el-divider direction="vertical"></el-divider>
<i class="el-icon-thumb">点赞数：{{problem.thumbup}}</i>
<el-divider direction="vertical"></el-divider>
<i class="el-icon-chat-dot-round">回复数：{{problem.reply}}</i>
</div>
</el-col>
</el-row>
</el-card>
</el-tab-pane>
<el-tab-pane label="提出问题">
<el-card>
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"
style="height: 31.25rem;"></ckeditor>
</div>
</el-card>
</el-tab-pane>
<el-tab-pane label="md编辑器">
<el-input placeholder="请输入标题" v-model="title"></el-input>
<div id="app">
<mavon-editor class="mavon" codeStyle="atom-one-dark" v-model="content" :ishljs="true"
ref="md" @change="change" />
</div>
<el-button type="primary" @click="submit">发布</el-button>
<article v-html="value" ></article>
</el-tab-pane>
<el-tab-pane label="单纯展示">
<div id="app">
<mavon-editor class="md" :value="content" :subfield="false" :defaultOpen="'preview'"
:toolbarsFlag="false" :editable="false" :scrollStyle="true" :ishljs="true" />
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import QaTag from '../../components/qa/QaTag.vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
//md
import {
mavonEditor
} from "mavon-editor";
import "mavon-editor/dist/css/index.css";
// Vue.use(CKEditor);
export default {
name: "QaIndex",
components: {
QaTag,
mavonEditor
},
data() {
return {
editor: ClassicEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
// The configuration of the editor.
},
title: "",
problemNewList: [{
"id": "1",
"title": "我是标题",
"content": "我是内容",
"createtime": "2021-02-09",
"updatetime": "2021-02-09",
"userid": "1",
"nickname": "啊强",
"visits": "1",
"thumbup": "1",
"reply": "1",
"solve": "是？",
"replyname": "LRZ",
"replytime": "2021-02-09"
}, {
"id": "1",
"title": "我是标题",
"content": "我是内容",
"createtime": "2021-02-09",
"updatetime": "2021-02-09",
"userid": "1",
"nickname": "啊强",
"visits": "1",
"thumbup": "1",
"reply": "1",
"solve": "是？",
"replyname": "LRZ",
"replytime": "2021-02-09"
}],
problemHotList: [{
"id": "1",
"title": "我是标题",
"content": "我是内容",
"createtime": "2021-02-09",
"updatetime": "2021-02-09",
"userid": "1",
"nickname": "啊强",
"visits": "1",
"thumbup": "1",
"reply": "1",
"solve": "是？",
"replyname": "LRZ",
"replytime": "2021-02-09"
}],
problemWaitList: [{
"id": "1",
"title": "我是标题",
"content": "我是内容",
"createtime": "2021-02-09",
"updatetime": "2021-02-09",
"userid": "1",
"nickname": "啊强",
"visits": "1",
"thumbup": "1",
"reply": "1",
"solve": "是？",
"replyname": "LRZ",
"replytime": "2021-02-09"
}],
content: `|column1|column2|column3|
|-|-|-|
|content1|content2|content3|
==asd==`,
html:"",
value: `<blockquote>
<p>你好</p>
</blockquote>
<p><code>java</code></p>`,
}
},
methods: {
// 所有操作都会被解析重新渲染
change(value, render) {
// render 为 markdown 解析后的结果[html]
this.html = render;
},
submit(value, render) {
console.log(this.content);//md格式
console.log(this.html);//html格式
this.content+=`123`;
}
},
created() {
}
}
</script>
<style scoped>
.text {
font-size: 14px;
}
.item {
margin-bottom: 0.3125rem;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 100%;
margin-bottom: 0.625rem;
}
</style>
python 下载库
py -m pip install xxxx
也是像java一样有个本地仓库的
前端H5做成刮刮乐效果
公司要求啊，没办法
然后上网找，还真的找到个刮刮乐的插件
vue-scratchable
直接下载这个示例，看示例就行，或者npm i vue-scratchable下下来自己用
然后这个只有刮刮乐而已，但一般来说刮到30%就显示全部了，这里面有个参数percentage是现实刮了百分比，接下来用if-else就行
js、css和官方示例一样
<template>
<div id="app">
<h1>A beautiful parrot got trapped behind some paper.</h1>
<h2>Scratch them free!</h2>
<vue-scratchable
v-slot="{ init }"
:brushOptions="brush"
:hideOptions="hide"
getPercentageCleared
@percentage-update="updatePoints"
style="height: 200px; width: 200px"
v-if="percentage <= 30"
>
<div class="wrapper">
<img
:src="require('./assets/mehmet-turgut-kirkgoz-vnayhPykN5Q-unsplash.jpg')"
@load="init()"
style="height: 200px; width: 200px"
>
<!-- <h3>{{ subline }}</h3>-->
</div>
</vue-scratchable>
<div class="wrapper" v-if="percentage > 30">
<img
:src="require('./assets/mehmet-turgut-kirkgoz-vnayhPykN5Q-unsplash.jpg')"
@load="init()"
style="height: 200px; width: 200px"
>
<!-- <h3>{{ subline }}</h3>-->
</div>
<p>You scratched {{ percentage }}% free.</p>
<pre>Photo by <a href="https://unsplash.com/@tkirkgoz?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mehmet Turgut Kirkgoz</a> on <a href="https://unsplash.com/t/animals?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></pre>
</div>
</template>
9231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
