vue项目一些插件的引用，以及插槽的使用

插件

第一个插件 view-design，

https://iviewui.com/view-ui-plus/component/form/switch

如果用现在官网的安装步骤，是vue3的使用方法，下面代码是vue2可以用的

import ViewUI from "view-design"
import 'view-design/dist/styles/iview.css'


Vue.use(ViewUI);

第二个插件 echarts，安装跟着管网安装及可以，官网链接

https://echarts.apache.org/handbook/zh/basics/download/

下面是引入，以及例子，一定要写在mount，要不会报错，获取不到dom

import * as echarts from 'echarts';


methods: {
    // 柱状图
    category() {
      let myChart = echarts.init(document.getElementById('main'))
      let option;
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: ['今日', '本周', '总1', '总2'],
          axisTick: {		//x轴刻度线
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(82,255,255,0.5)',
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(82,255,255,0.5)', //更改坐标轴文字颜色
              fontSize: 12      //更改坐标轴文字大小
            }
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          // max: 20000,
          interval: 400,
          axisLine: {show: false},// y轴坐标轴，false为隐藏，true为显示
          axisLabel: {show: false}, // 显示y轴的数值
          axisTick: {show: false},// y轴刻度线
          splitLine: {show: false}, // 背景线
        },
        series: [
          {
            data: [325, 2325, 25345, 18613],
            type: 'bar',
            barWidth: 45,
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = ['#2DE041', '#F29961', '#407FFF', '#E15D68'];
                  return colorList[params.dataIndex]
                },
                label: {
                  show: true,		//开启显示
                  position: 'top',	//在上方显示
                  textStyle: {	    //数值样式
                    color: 'rgba(82,255,255,0.8)',
                    fontSize: 12
                  }
                }
              }
            },
          }
        ]
      })
    },
}

第三个插件  element-ui，官网链接

https://element.eleme.cn/#/zh-CN/component/popover

import Element from 'element-ui'
import './styles/element-variables.scss'
// import enLang from 'element-ui/lib/locale/lang/en' // 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖


Vue.use(Element, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
  // locale: enLang // 如果使用中文，无需设置，请删除
})

插槽

需求：每个页面头部样式文字很多都一样，只有几个东西变化，就可以用插槽，插槽起名字，可以用好几个插槽不至于乱

 代码如下，这是定义好插槽

<template>
  <div class="header">
    <div class="now_time">
      <span style="cursor: pointer;" @click="go_back">返回</span>
      <span>{{ time }}</span>
    </div>
    <slot name="s1"></slot>
    <div class="exit">
      <div>
        <span @click="setup">设置</span>
        <span @click="exit">退出</span>
      </div>
    </div>
  </div>
</template>

下面是如何使用插槽：

先引入这个组件，script部分代码如下

import Header from "@/components/Header";
export default {
  name: "home",
  components: {Header},


}

template代码如下

<Header>
  <template v-slot:s1>
     <div>12345</div>
  </template>
</Header>

插槽多个使用时，只要名字不一样就可以