如何在网页中显示组件源代码

有时候我们需要在网页中显示组件源代码方便别人查看，例如在组件库文档或者一些案例文档。那么在vite+react的开发环境中如何实现呢



HOC
对目标组件封装，添加显示源码的按钮
```tsx
import { SourceCodeViewer } from "./code";
const SourceCode = (WrappedComponent: React.FC, code: string) => {
  return function WithSourceCode(props:any) { 
    return (
      <>
        <WrappedComponent {...props}></WrappedComponent>
        <SourceCodeViewer code={code}></SourceCodeViewer>
      </>
    );
  }
};

export default SourceCode
```

```tsx
import { Button } from 'antd'
import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark.min.css'; // 你可以选择其他样式
import { useEffect, useState } from 'react';
export const SourceCodeViewer = ({ code, language = "tsx" }: {code:string,language?:string}) => {
  const [highlightedCode, setHighlightedCode] = useState("");

  const [show, setShow] = useState(false);

  useEffect(() => {
    const result = hljs.highlight(code, { language });
    setHighlightedCode(result.value);
  }, [code, language]);

  return (
    <div style={{borderLeft: '1px solid #ccc',borderRight:'1px solid #ccc',borderBottom:'1px solid #ccc',marginTop:'8px'}}>
      <div style={{padding: '4px 8px',borderTop:'1px dashed #ccc',borderBottom:'1px dashed #ccc'}}>
        <Button type="primary" onClick={() => { setShow(!show)}}>查看源码</Button>
      </div>

      { 
        show ? (<pre style={{backgroundColor:'rgb(20,20,20)',color:'#8590a0',padding:'10px 10px 26px 10px'}}>
        <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
      </pre>) : null
      }
      
    </div>
  );
};

```


使用
```
import SourceCode from "@/components/source_code";
import Base01 from "./code";
import code from "./code.tsx?raw"; // 获取组件代码
export default SourceCode(Base01,code);
```

效果如图
![image.png](/static/img/18ae80dd223734b0523cff4d35ee437e.image.webp)

在网页显示组件源码

# Vue3自定义指令集

在Vue3的日常开发中，难免需要自定义指令，本文展示一些小编用到的一些自定义指令



# 代码目录

![代码目录](https://www.sql668.com/static/img/7537e4155c456c4a04f3bc22b1eff073.clipboard-2025-02-27.webp)

src/directives/make-installer.ts
```ts
import type { App, Plugin } from "@vue/runtime-core";
const INSTALLED_KEY = Symbol("MY_CUSTOM_DIRECTIVES_INSTALLED");

export const makeInstaller = (directives: Plugin[] = []) => {
  const install = (app: App) => {
    if (app[INSTALLED_KEY]) return;
    app[INSTALLED_KEY] = true;
    directives.forEach(directives => { 
      app.directive(directives.name, directives.directive);
    })
  };

  return {
    install,
  };
};
```
src/directives/index.ts
```ts
import { makeInstaller } from "./make-installer";
import Resize from "./resize";

const Directives = [Resize];

export default makeInstaller([...Directives]);
```

main.ts
```ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import directives from './directives';

const app = createApp(App);

app.use(directives);
app.mount("#app");
```

## v-resize

监听dom元素尺寸变化

指令源码
```ts
import type { DirectiveBinding, ObjectDirective } from "vue"

const map = new WeakMap()
const ob = new ResizeObserver(entries => {
  for (const entry of entries) {
    const handler = map.get(entry.target)
    if (handler) {
      const { inlineSize, blockSize } = entry.contentBoxSize[0]
      handler({ width: inlineSize, height: blockSize })
    }
  }
})

const Resize: ObjectDirective = {
  created(el: HTMLElement, binding: DirectiveBinding) {
    console.log(binding)
    map.set(el, binding.value);
    ob.observe(el);
  },
  beforeUnmount(el: HTMLElement) {
    ob.unobserve(el);
  },
};

export default {
  name: "resize",
  directive: Resize,
};
```

使用案例
```vue
<template>

  <div class="w-100">
    <h1>v-resize</h1>
    
    <div class="d-box" v-resize:[form]="ResizeHandler">我是div1</div>
    <div class="d-box">我是div2</div>

  </div>
</template>

<script lang="ts" setup>
import { debounce } from "lodash-unified"
import { reactive } from "vue";
const form = reactive({
  name: "张三",
  age: 23,
})
const ResizeHandler = debounce((size) => { 
  console.log("size: ", size)
},300)
</script>


<style lang="scss" scoped>
  .d-box{
    width: 100%;
    height: 100px;
    border: 1px solid black;
  }
</style>

```

Vue3自定义指令集

Vue3技巧大总结




## reactive数据重置
在实际开发中，我们常常需要对某些数据进行深拷贝，以便于在特定操作时恢复原始数据。比如，当用户对某个表单进行编辑时，我们可能希望在用户放弃编辑时能够重置数据，恢复到原始状态。

这里我们创建了一个 useReactive 的自定义 Hook，它接收一个对象，并使用 reactive 将其变成响应式对象。同时，我们使用 JSON.parse(JSON.stringify(value)) 来进行深拷贝，这样可以避免直接引用原始数据，确保数据重置时不会影响到其他地方的状态。
```ts
ts
复制编辑
import { reactive } from 'vue'

export const useReactive = <T extends Object>(value: T) => {
  // 使用深拷贝确保 state 是原始数据的副本
  const state = reactive(JSON.parse(JSON.stringify(value))) as T

  // 重置 state 数据为原始数据
  const reset = (newData = null) => {
    // 删除现有的属性
    Object.keys(state).forEach((key) => delete state[key])
    if(newData){
        // 重新赋值为原始数据
        Object.assign(state,JSON.parse(JSON.stringify(newData)))
    }else{
        // 重新赋值为原始数据
        Object.assign(state, JSON.parse(JSON.stringify(value)))
    }
    
  }

  return {
    state,
    reset
  }
}

```

Vue3小技巧

angular中的指令分为组件型指令、结构指令和属性指令
- 组件 —— 带有模板的指令。这种指令类型是最常见的指令类型。
- 属性型指令 —— 更改元素、组件或其他指令的外观或行为的指令。
- 结构型指令 —— 通过添加和删除 DOM 元素来更改 DOM 布局的指令,以`*`开头,例如 `*ngIf`由于结构型指令会在 DOM 中添加和删除节点，因此每个元素只能应用一个结构型指令。

angular为我们提供了一些常用的指令,如果这些指令无法满足需求，我们还可以自定义指令。



#  结构型指令 - tlHasRole
作用:判断当前用户是否拥有某个角色，如果有则显示，否则隐藏
```ts
import { Directive, Input, OnChanges, SimpleChanges, TemplateRef, ViewContainerRef } from "@angular/core";


@Directive({
    selector: '[tlHasRole]',
    exportAs: 'tlHasRole',
})
export class TlHasRoleDirective implements OnChanges{

    @Input('tlHasRole')
    roles:string[] = []

    constructor(private templateRef:TemplateRef<any>,private viewContainer: ViewContainerRef){

    }
    ngOnChanges(changes: SimpleChanges): void {
        if(this.roles.length){
            //这里一般需要配合service,获取登录用户的权限信息
            if(当前用户有该角色){
                this.createView()
            }else{
                this.viewContainer.clear()
            }
        }else{
            this.createView()
        }
    }

    // 创建视图
    private createView():void {
        // createEmbeddedView 第二个可选参数是用来设置模版上下文对象的
        this.viewContainer.createEmbeddedView(this.templateRef);
    }
    
}

```

使用
```
<button class="ui-button-primary" label="查询" icon="icon-search2" (click)="queryOK()" *tlHasRole="['admin']"> </button>
```