前言
持续更新 一、UI框架
推荐 Elemnet ui 二、图表
vue-schart
npm install vue-schart -S
代码语言：javascript复制<template>
<div id="app">
<schart :canvasId="canvasId"
:type="type"
:width="width"
:height="height"
:data="data"
:options="options"
></schart>
</div>
</template>
<script>
import Schart from 'vue-schart';
export default {
data() {
return {
canvasId: 'myCanvas',
type: 'bar',
width: 500,
height: 400,
data: [
{name: '2014', value: 1342},
{name: '2015', value: 2123},
{name: '2016', value: 1654},
{name: '2017', value: 1795},
],
options: {
title: 'Total sales of stores in recent years'
}
}
},
components:{
Schart
}
}
</script>
123456789101112131415161718192021222324252627282930313233343536三、富文本编辑器
代码语言：javascript复制vue-quill-editor
npm install vue-quill-editor
npm install quill
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
<template>
<div class="edit_container">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
<button v-on:click="saveHtml">保存</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
content: `<p>hello world</p>`,
editorOption: {}
}
},computed: {
editor() {
return this.$refs.myQuillEditor.quill;
},
},methods: {
onEditorReady(editor) { // 准备编辑器
},
onEditorBlur(){}, // 失去焦点事件
onEditorFocus(){}, // 获得焦点事件
onEditorChange(){}, // 内容改变事件
saveHtml:function(event){
alert(this.content);
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667更多内容请见原文，原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119328459
