一、vue实战

6.创建图标

<el-icon :size=;20; class=;svg_container;>
     <Edit />
</el-icon>

import { Edit } from ;;element-plus/icons-vue;

可以去官网自己选样式element-plus官网
7.修改样式
使用了 ElementUI 组件且样式 style 使用了 scoped 属性;当想要修改组件样式;发现直接修改不了;需去掉 scoped 属性或者使用深度选择器才能修改成功。

<style lang=;scss; scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
$cursor: #fff;

.login-container {
  min-height: 900px;
  width: 100%
  background-color: $bg;
  Overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;

    ::v-deep .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }

    ::v-deep .el-input {
      display: inline-block;
      height: 47px;
      width: 85%

      input {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;
      }
      
    }
   .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    display: inline-block;
  }
  }

 
</style>

<el-button type=;primary; class=;login-button;>登录</el-button>

.login-button {
      width: 100%
      box-sizing: border-box;
    }

<template>
  <svg class=;svg-icon; aria-hidden=;true;>
    <!-- xlink:href 属性 通过传值的方式;修改图标名字 -->
    <use :xlink:href=;icon;></use>
  </svg>
</template>

<script setup>
import { defineProps, computed } from ;vue;
const props = defineProps({
  icon: {
    type: String,
    required: true
  }
})
const iconName=computed(() => {
  return ;#icon-${props.icon};
})
</script>

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

import SvgIcon from ;;/components/svgIcon;
// require.context(要匹配的目录;是否检索子文件夹;匹配名字的正则)
const SvgRequired=require.context(;./svg;,false,/.svg$/)
//require.context.keys()返回一个数组,数组中的每个元素传入require.context方法中,就可以导出相应的文件
SvgRequired.keys().array.forEach(element => SvgRequired(element));
export default app=>{
    //app.component()方法;让组件在当前 Vue 应用中全局可用 注册组件svg-icon
    app.component(;svg-icon;,SvgIcon)
}
import SvgIcon from ;;/components/svgIcon;

import SvgIcon from ;;/icons;
const app=create(App)
SvgIcon(app)
app.use(store).use(router).use(ElementPlus).mount(;#app;)

npm i --save-dev svg-sprite-loader;6.0.9

const path = require(;path;)
function resolve(dir) {
  return path.join(__dirname, dir)
}

 chainWebpack(config) {
    // 设置 svg-sprite-loader
    // config 为 webpack 配置对象
    // config.module 表示创建一个具名规则;以后用来修改规则
    config.module
      // 规则
      .rule(;svg;)
      // 忽略
      .exclude.add(resolve(;src/icons;))
      // 结束
      .end()
    // config.module 表示创建一个具名规则;以后用来修改规则
    config.module
      // 规则
      .rule(;icons;)
      // 正则;解析 .svg 格式文件
      .test(/.svg$/)
      // 解析的文件
      .include.add(resolve(;src/icons;))
      // 结束
      .end()
      // 新增了一个解析的loader
      .use(;svg-sprite-loader;)
      // 具体的loader
      .loader(;svg-sprite-loader;)
      // loader 的配置
      .options({
        symbolId: ;icon-[name];
      })
      // 结束
      .end()
    config
      .plugin(;ignore;)
      .use(
        new webpack.ContextReplacementPlugin(/moment[/]locale$/, /zh-cn$/)
      )
    config.module
      .rule(;icons;)
      .test(/.svg$/)
      .include.add(resolve(;src/icons;))
      .end()
      .use(;svg-sprite-loader;)
      .loader(;svg-sprite-loader;)
      .options({
        symbolId: ;icon-[name];
      })
      .end()
  }
}

const rules = ref({
  name: [
    { required: true, message: ;Please input Activity name;, trigger: ;blur; },
    { min: 3, max: 5, message: ;Length should be 3 to 5;, trigger: ;blur; }
  ],
  password: [
    { required: true, message: ;Please input Activity name;, trigger: ;blur; },
    { min: 3, max: 5, message: ;Length should be 3 to 5;, trigger: ;blur; }
  ]
})

<el-form-item prop=;password;>