ow

WebVue/src/md/clipPath.md

@@ -0,0 +1,22 @@
+# clip-path 属性可以使用不同的函数来定义裁剪区域。以下是一些常用的函数：
+
+    circle()：创建一个圆形裁剪区域。参数是半径和圆心的坐标。
+    ellipse()：创建一个椭圆形裁剪区域。参数是横轴和纵轴的半径以及圆心的坐标。
+    polygon()：创建一个多边形裁剪区域。参数是构成多边形的顶点坐标。
+    path()：使用 SVG 路径来定义裁剪区域。参数是路径的字符串表示形式。
+
+ # 四边形裁剪路径 上面的坐标依次表示左上角、右上角、右下角、左下角
+ X轴方向为从左到右，Y轴方向为从上到下。
+ # clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);"
+
+ circle(50% at 50% 50%)
+
+
+# object-fit: cover;
+# object-position: top;
+ //大多数情况下，使用默认值（例如，"center " 或 "50% 50%")。
+
+
+包括像CSS属性、自定义的对象属性，甚至CSS变量和复杂的字符串都可以！我们最常变化的属性其实是transform和opacity。
+
+Transform是动画效果的最好的朋友了。它可以轻松地让元素实现移动、缩放、旋转等等效果。Transform和opacity性能也是非常好的，因为它们不会影响布局（不会引起页面布局重绘），对于浏览器来说是节约性能的。

WebVue/src/md/defineProps.md

@@ -0,0 +1,40 @@
+# 单向传值
+//子组件中定义props
+const props = defineProps({
+    showModal: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+//父组件中使用 :show-modal 传递值
+    <columnModal :show-modal="showColumnModal" @on-change-columns="onChangeColumns" @handle-close="onHandleClose"
+      @on-change-view-option="onChangeViewOption" />
+
+子组件不能改变props.showModal的值，只能通过父组件传递值
+
+如果子组件需要改变props.showModal的值:
+1.可以通过emit方法触发父组件的事件，父组件通过监听事件改变props.showModal的值
+onHandleClose》showColumnModal.value = false;
+
+2.可以通过调用父组件的方法改变props.showModal的父组件的值
+
+
+# 双向通讯v-model
+
+# 父组件传递值给子组件
+     <changePassword v-model:value="layoutProvider.showChangePassword" />
+# 子组件接收值
+const props = defineProps(['value']);
+const emit = defineEmits(['update:value']);
+
+computed({
+  get() {
+    return props.value;
+  },
+  set(value) {
+    emit('update:value', value);
+  }
+});
+
+emit('update:value', false);

WebVue/src/md/fileDirectory.md

@@ -0,0 +1,24 @@
+┌─dist                    生产打包输出目录
+├─node_modules            模块依赖包
+├─public                  静态html和网站图标
+├─src
+│  ┌─assets               静态资源，图标字体、图片、样式表
+│  ├─components           公共组件
+│  ├─data                 由后端生成的数据
+│  ├─hooks                提供的公共接口方法
+│  ├─injections           注入统一的方法
+│  ├─layout               布局组件
+│  ├─plugins              插件
+│  ├─policy               由后端生成的数据
+│  ├─provides             提供的统一的代理方法
+│  ├─router               路由配置
+│  ├─service              由后端生成的接口请求方法
+│  ├─store                vuex状态管理
+│  ├─styles               公共样式
+│  ├─types                类型定义
+│  ├─utils                公共js方法
+│  ├─views                视图组件
+│  ├─App.vue              根组件
+│  └─main.js              vue入口文件
+├─index.html              入口html文件
+└─vite.config.ts           配置文件

WebVue/src/md/injections.md

@@ -0,0 +1,23 @@
+# injections这个目录用来定义常用的类型用于组件通讯
+export type OperationToEnquiryMethod = {
+  getOperationToEnquiryModelOption: () => OperationToEnquiryModelOption;
+};
+
+export const operationToEnquiryMethodKey: InjectionKey<OperationToEnquiryMethod> =
+  Symbol("OperationToEnquiryMethod");
+
+# 父组件给子组件提供方法调用或者传递数据：
+provide(
+    operationToEnquiryMethodKey,
+    {
+        getOperationToEnquiryModelOption,
+    }
+);
+# 子组件：
+const actorOperationMethod = inject(operationToEnquiryMethodKey);
+const modelOption = actorOperationMethod?.getOperationToEnquiryModelOption() as OperationToEnquiryModelOption;
+
+const isModal = ref(modelOption ? modelOption.isModalActor : false);
+
+
+# 父组件调用子组件的方法需要在provides将子组件的方法加入到父组件的items中，然后在父组件中调用子组件的方法。