vue-cli4中使用element

1 drawer不能用

现象：示例代码直接显示出来，点击按钮无关闭。
原因：不明。
解决：控制台命令行执行此命令之后，以插件的形式使用element之后OK了。

1	vue add element

2 svg使用

1）在src下创建icons目录，在icons下创建svg目录，将.svg文件放入此文件夹。
2）在components文件夹下串讲SvgIcon文件夹，在此下创建index.vue文件。
index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"/>
</svg>
</template>

<script>
export default {
name: "SvgIcon",
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ""
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`;
},
svgClass() {
if (this.className) {
return "svg-icon " + this.className;
} else {
return "svg-icon";
}
}
}
}
</script>

<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

3）在icons目录下创建index.js文件。
index.js

1
2
3
4
5
6
7
8
9

import Vue from "vue";
import SvgIcon from "@/components/SvgIcon";

// register globally
Vue.component("svg-icon", SvgIcon);

const req = require.context("./svg", false, /.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);

4）使用组件

1	<svg-icon :icon-class="svgiconname'" @click.native="clickfunction" />

3 全屏

1）在package.json中添加依赖

1
2
3
4
5
6

// 添加依赖
"dependencies": {
"screenfull": "^5.0.0"
},
// 然后命令行执行
npm install

2）创建全屏切换icon。将.svg文件放入上边的svg文件夹中。这里名称定义为fullscreen.svg和exit-fullscreen.svg。
3）创建组件ScreenFull。在components文件夹下创建ScreenFull文件夹，在此创建index.vue文件。
index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<template>
<div>
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click.native="maxwindow" />
</div>
</template>

<script>
import screenfull from "screenfull";

export default {
name: "Screenfull",
data() {
return {
isFullscreen: false
};
},
mounted() {
this.init();
},
beforeDestroy() {
this.destroy();
},
methods: {
maxwindow() {
if (!screenfull.isEnabled) {
this.$message({
message: "you browser can not work",
type: "warning"
});
return false;
}
screenfull.toggle();
},
change() {
this.isFullscreen = screenfull.isFullscreen;
},
init() {
if (screenfull.isEnabled) {
screenfull.on("change", this.change);
}
},
destroy() {
if (screenfull.isEnabled) {
screenfull.off("change", this.change);
}
}
}
}
</script>

<style scoped>
.screenfull-svg {
display: inline-block;
cursor: pointer;
fill: #5a5e66;;
width: 20px;
height: 20px;
vertical-align: 10px;
}
</style>

3）调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<screenfull id="screenfull" class="right-menu-item hover-effect" />

<script>
import Screenfull from "@/components/Screenfull";

export default {
components: {
Screenfull
},
data() {
return {};
},
methods: {}
};
</script>