feat: vue技巧记录

vue/vue2 下css技巧.md

@@ -0,0 +1,45 @@
+# vue下动态css技巧
+> 该文章主要适用于vue2.x 的项目
+## 不倾入的方式修改style属性
+#c 直接修改style属性  
+在vue 项目中,可以通过`:style`的方式动态修改style的属性.  
+但是这种方法会因为`style`属性在css选择器中的优先级问题,  
+导致后续其它功能无法修改style属性. 所以这种方法在某些情况下,  
+不能满足需求. 虽然可以给后续的属性添加`!important`属性来达到覆盖的目的,  
+但是这样写代码,会增加代码的复杂度.所以我们可以通过`css变量`的方式来达到修改style属性的目的.
+
+#d css变量  
+css变量是css3新特性,通过`--`开头的变量,可以定义变量,
+然后通过`var()`函数,来引用变量.
+
+#e css变量修改style属性  
+示例vue代码, 修改data中的color属性,  
+从而实现文字默认颜色可以根据data中的color属性来修改文字颜色,  
+并且在鼠标移动上去时,字体颜色为蓝色
+```vue
+<script>
+  export default {
+      data(){
+          return {
+              color:'red'
+          }
+      }
+  }
+</script>
+<template>
+  <span class="test"
+       :style="`--color: ${color};`"
+  >
+    hello
+  </span>
+</template>
+<style>
+  .test{
+    --color:red;
+    color:var(--color);
+  }
+  .test:hover{
+    color:blue;
+  }
+</style>
+```

vue/vue下使用SVG.md

@@ -0,0 +1,139 @@
+# 在vue项目中使用SVG
+> 本文包含了在vue项目中使用SVG的方法, 包含vue2.x和vue3.x
+
+## vue2.x使用
+#c 依赖组件介绍
+我们主要使用 `svg-sprite-loader` 来引入组件  
+使用webpack中的require.context来批量引入svg文件
+
+#d 新旧vue cli 差异
+> [新版本vue cli项目无法生效参考文章](https://juejin.cn/post/7133523073680015396)  
+
+在新版本的vue cli项目中更改了svg文件的加载方式  
+所以我们需要将新版本的svg加载项进行更改, 删除新增的内容
+
+
+#e 配置svg文件的加载
+vue.config.js 配置如下
+```js
+
+const path = require('path')
+function resolve(dir) {
+    // console.log(dir);
+    return path.join(__dirname, dir);
+}
+
+
+module.exports = defineConfig({
+    ...outherConfig,
+    chainWebpack: config => {
+        config.plugin('define').tap(args=>{
+            const argv = process.argv
+            const icourt = argv[argv.indexOf('--icourt-mode') + 1]
+            args[0]['process.env'].MODE = `"${icourt}"`
+            return args
+        })
+        const svgRule = config.module.rule('svg')
+        svgRule.uses.clear()
+        // 清除已有的svg loader https://juejin.cn/post/7133523073680015396
+        svgRule.delete('type');
+        svgRule.delete('generator');
+        svgRule.exclude.add(/noe_modules/)
+        svgRule
+            .test(/\.svg/)
+            .use('svg-sprite-loader')
+            .loader('svg-sprite-loader')
+            .options({
+                symbolId: 'icon-[name]'
+            })
+        const imagesRule = config.module.rule('images')
+        imagesRule.exclude.add(resolve('./src/assets/svg'))
+        // console.log('imagesRule',imagesRule)
+        config.module
+            .rule('images')
+            .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
+
+    }
+})
+```
+
+
+#c 注册并引用svg组件
+使用 webpack 中的require.context来批量引入svg文件,  
+并将svg组件注册为vue组件, 这样我们就可以在项目中使用svg了  
+为了能够同时使用网络上的svg图标, 设置组件参数`svgHref`属性,  
+用于直接引入网络上的svg图标  
+
+#e 注册与组件
+这里我们将svg文件统一放置于`src/assets/svg`目录中, `@`为`src`的别名(alias)
+iconIndex.js
+```js
+import Vue from 'vue'
+import SvgIcon from './iconSvg' // svg组件
+
+// 注册到全局
+Vue.component('svg-icon', SvgIcon)
+
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('@/assets/svg', false, /\.svg$/)
+requireAll(req)
+```
+svg-icon.vue
+```vue
+<template>
+  <svg class="svg-icon" aria-hidden="true">
+    <image v-if="svgHref" :xlink:href="svgHref" />
+
+    <use v-else :xlink:href="_iconName"/>
+<!--    使用 链接 加载 svg-->
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      default: '',
+    },
+    svgHref: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    _iconName () {
+      return `#icon-${this.iconClass}`
+    },
+  },
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+.svg-icon image {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+</style>
+```
+
+#e 使用组件
+在对应的svg目录放置好svg文件后, 在需要使用的地方直接调用组件即可  
+例如放置 user.svg, 在使用的时候只需要使用如下代码即可,  
+`icon-class`属性填写svg文件的文件名即可
+```vue
+<template>
+  <div class="div">
+    <svg-icon icon-class="user" />
+  </div>
+</template>
+```