vue-cli4中使用element

1 drawer不能用

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

vue add element

2 svg使用

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

---

<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

---

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）使用组件

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

3 全屏

1）在package.json中添加依赖

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

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

---

<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）调用

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

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

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