<template>
<div class="hello">
<el-button>默认按钮</el-button>
<el-button type="primary" @click="goto('/Homepage')">点击跳转至Homepage</el-button>
<el-button type="success" @click="downloadxls()">下载表单二</el-button>
<el-button type="info" @click="handleDownload()">下载表单一</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<!--老式v-for写法！建议不使用-->
<!--<div v-for="h in HelloList">-->
<!--<button>{{h.name}}</button>-->
<!--</div>-->
<!--新式v-for写法！，融入了下标-->
<div v-for="(item,index) in HelloList" :key="index">
<span>{{item.name}}</span><span>下标：{{index}}</span>
</div>
<!--点赞v-if实现变色-->
<div v-if="conditions" @click="supports()"><img src="../../static/img/assist.png" height="20" width="20"/></div>
<div v-if="statuss" @click="assists()"><img src="../../static/img/praise.png" height="20" width="20"/></div>
<!--富文本编辑器-->
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</div>
</template>
<script>
//调用
import XLSX from 'xlsx'
import { saveAs } from 'file-saver/FileSaver';
//调用编辑器
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
//名称！每个vue文件都是必要的！
name: 'HelloWorld',
//调用组件的地方（需要用到组件的时候才声明）
components : {
quillEditor,
XLSX
},
//数据存放的地方（数据也是变量）
data () {
return {
//富文本
content: ``,
editorOption: {},
//状态
conditions : true,
statuss : false,
//变量
todoList: [],
HelloList : [
{
name:'遍历出数组1'
},
{
name:'遍历出数组2'
}
]
}
},
//函数（也就是存放function的地方，这里是vue所以不用写function）
methods : {
//跳转函数（参数）---自己封装的方法
goto(val) {
//加入到指定路径
this.$router.push({path: val})
},
// 格式化数据 如2018-07-04 14:09:30
formatDateTime(inputTime) {
var date = new Date(inputTime);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
},
//elenemt封装的Checkbox
handleSelectionChange(val) {
this.multipleSelection = val;
},
//第一种方法点击导出excl表单数据
downloadxls(){
let workBook = {
SheetNames:["helloSheet"],
Sheets:{
"helloSheet":{
"!ref": "A1:A3",
A1: { left:0.7, t:'n', v:1202 ,z: "0%",s:"red"},
A2: { t:'d', v:2 ,},
A3: { t:'e', v:'#NULL!'}
}
}
}
var excelData = XLSX.write(workBook, { bookType: "xlsx", bookSST: false, type: "binary" });
var blob = new Blob([this.string2ArrayBuffer(excelData)], { type: "" });
saveAs(blob, "hello.xlsx");
},
string2ArrayBuffer(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
},
//第二种方法点击导出excl表单数据
handleDownload() {
require.ensure([], () => {
const {
export_json_to_excel
} = require('vendor/Export2Excel');
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间'];
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'];
const list = [
{id: 1, title: 2, author: 3, pageviews: 4, display_time: 5},
{id: 6, title: 7, author: 8, pageviews: 9, display_time: 10},
{id: 11, title: 12, author: 13, pageviews: 14, display_time: 15},
];
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
//点击一次变色
supports(){
this.conditions = false
this.statuss = true
},
//点击一次复原
assists(){
this.conditions = true
this.statuss = false
},
//富文本准备编辑器
onEditorReady(editor) {
},
// 失去焦点事件
onEditorBlur(){},
// 获得焦点事件
onEditorFocus(){},
// 内容改变事件
onEditorChange(){},
},
//调用（执行）函数的地方
mounted () {
},
//监听数据的地方
watch : {
},
//计算函数
computed : {
//富文本
editor() {
return this.$refs.myQuillEditor.quill;
},
},
}
</script>
<!--限定CSS的作用域scoped-->
<style scoped>
</style>
===========================================================================
router下面的index（路由存放的代码）
===========================================================================
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
// 这里的路由我采用的是榄加载的方式
export default new Router({
routes: [
{
path: '/',
component: resolve =>require(['@/components/HelloWorld'], resolve),
name: '主页',
redirect:'/Home',
children:[
{
path: '/Home',
component: resolve => require(['@/page/Home/index'], resolve),
name: '首页',
}
],
},
{
path: '/Homepage',
component: resolve => require(['@/page/Home/Homepage/index'], resolve),
name: '点击跳转Homepage',
},
{
path: '/Homeroom',
component: resolve => require(['@/page/Home/Homeroom/index'], resolve),
name: '点击跳转Homeroom',
}
]
})