目录
引入依赖
//element-ui 下载
npm install element-ui --save
//echarts、词云、axios
npm install echarts --save
npm install echarts-wordcloud --save
npm install axios --save
// 全局使用element ui 2.x
import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(Element);
// 全局使用echarts
import * as echarts from "echarts";
// 引入词云
import "echarts-wordcloud";
Vue.prototype.$echarts = echarts;
// 全局使用axios
import axios from "axios";
Vue.prototype.$axios = axios;
//请求头前缀
axios.defaults.baseURL = "http://localhost:8088";
//axios请求携带cookie
axios.defaults.withCredentials = true;
//全局样式引入[确认文件是否存在]
import "./assets/css/global.css";
1. element
a. notify
this.$notify({
title: "欢迎你的使用",
// 支持html文本
dangerouslyUseHTMLString: true,
message:
"<text style='color:#00b7c3'>希望您用的开心，有bug欢迎反馈~</text>",
// 自动关闭，0 为点击关闭，>0是到时间关闭
duration: 3 * 1000,
// 提示的分类图标
type: "success"
});
b. el-dropdown-item绑定点击事件点击无效
@click.native 即可
<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
c. 页面重新加载
location. reload()
this.$router.go(0)
d. 路由新页面打开
let src = this.$router.resolve({
path: "/blog?aid=" + item.aid
});
// 打开一个新的页面
window.open(src.href, "_blank");
e.Scrollbar 滚动条
最外层 height: vh单位
el-scrollbar style=“height= xx %”
2. main.js模板
import Vue from "vue";
import App from "./App";
import router from "./router";
// import ElementPlus from "element-plus";
// import "element-plus/dist/index.css";
// 全局使用element ui
import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(Element);
// 全局使用axios
import axios from "axios";
Vue.prototype.$axios = axios;
//axios请求携带cookie
axios.defaults.withCredentials = true;
//全局样式引入
import "./assets/css/global.css";
// mavon-editor
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue,use(mavonEditor)
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: "#app",
router,
components: { App },
template: "<App/>"
});
3.axios post请求参数
4. 数据保存在本地
客户端存储数据的两个对象为：1：sessionStorage 2:localStorage
sessionStroage.setitem(key,JSON.stringify(value))保存数据；
JSON.parse(sessionStroage.getitem(key))获取数据；
sessionStroage.remove(key);删除单个数据；
sessionStroage.clear();清除所有数据；
sessionStroage.keye(index)得到某个索引的key；
LocalStroage和sessionStroage保持数据类似。
LocalStroage在关闭浏览器后仍然保存数据，sessionStorage在关闭浏览器后会删除数据。
5. mavon-editor
安装依赖
cnpm install mavon-editor --save
main.js
//全局注册
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
markdown-IT解析markdown
github-markdown-css美化markdown
cnpm install markdown-it --save
cnpm install github-markdown-css
使用
视屏讲解
// 引入markdown
var markdownIt =require("markdown-it");
// new markdown对象
var md = new markdownIt();
var context =md.render("内容");
<!-- js引入 import "github-markdown-css"; -->
<div class="markdown-body" v-html="blog.content"></div>
6. 获得路由参数
7.远程搜索
<template>
<div class="layout">
<!-- 搜索 -->
<el-autocomplete
class="search"
v-model="search"
:fetch-suggestions="querySearch"
placeholder="搜索"
@select="handleSelect"
/>
</div>
</template>
<script>
export default {
data() {
return {
user: {
avatar: "",
uid: ""
},
search: "",
result: []
};
},
methods: {
querySearch(queryString, cb) {
var res = this.result;
var results = queryString
? res.filter(this.createFilter(queryString))
: res;
cb(results);
},
//这是当输入数据时触发的，筛选出和输入数据匹配的建议输入。
//我这里用的是调用match方法，是模糊匹配；官方调用的是indexOf，是精确匹配，看自身情况选择
createFilter(queryString) {
return item => {
return (
item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
);
};
},
handleSelect(item) {
let src = this.$router.resolve({
path: "/blog?aid=" + item.aid
});
// 打开一个新的页面
window.open(src.href, "_blank");
}
},
created() {
var user = window.sessionStorage.getItem("user");
if (user != null) {
this.user.avatar = user.avatar;
this.user.uid = user.uid;
}
//获得所有博文数据
this.$axios
.post("/article/queryAllArticle")
.then(res => {
this.result = res.data.data;
})
.catch(err => {
console.error(err);
});
}
};
8.参数传入自定义参数
@change="changeStatus($event, (ui= 1))
<el-radio-group v-model="item.status" @change="changeStatus($event, (ui= 1))"
>
<el-radio :label="1">禁言</el-radio>
<el-radio :label="2">正常</el-radio>
<el-radio :label="3">管理员</el-radio>
</el-radio-group>
changeStatus($event, uid) {
console.log($event);
console.log(uid);
}
9.固定屏幕不动
.bg {
no-repeat top;
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
添加背景图片
background: url("http://120.79.198.192:9003/school/2021-11-03/xiaobai.jpg")
10.有时事件触发无效
可以试试 .native
eg: @click.native
像element-ui封装过的ui就要使用.native
11.上传文件
- html
<input type="file" ref="inputFile" />
<el-button type="primary" @click="updateFile">上传</el-button>
2.js
uploadFile() {
//获取ref="inputFile"的对象接收上传的文件数组
var files = this.$refs.inputFile.files;
var fd = new FormData();
//没有遍历文件集合是因为只是上传一个文件，上传多个文件就要遍历集合
fd.append("file", files[0]);
this.$axios
.post("你的上传路径", fd, { "Content-type": "multipart/form-data" })
.then(
res => {
if (res.status == 200) {
// 上传成功后的处理
} else {
//上传失败
}
},
err => {
// 出现错误时的处理
console.log(err);
}
);
}
- 扩展
扩展
12.有时在方法中不能获取全局变量
看看此时this的上下文是否发生了变化，因此this此时不再引用父对象。
要使用对主类的引用this，必须将此引用包装在另一个局部变量中
init(uid) {
var self = this;
***省略
//指定当从服务器接受到信息时的回调函数
this.websocket.onmessage = function (msg) {
//this..new_message_num获取不到变量，因为此时的this的上下文已经变了
self.new_message_num[index]++;
};
***省略
},
13.子组件的样式在父组件中无效
不能在模板的第一个div中添加id/类选择器
- 错误写法
- 正确写法
14.获取视频音频的时长和播放当前的时间
15.有些时候的ref拿不到dom
- 元素的ref是否存在（检查是否ref="名字"是否写对）
- 是否使用了v-if，使用了它是一开始是未创建的
3020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
