这是我参与「第四届青训营 」笔记创作活动的第1天

如何表示不同组件间的位置

用json脚本表示,

需要配置ts对json的支持，所以在

tsconfig.json里面,将compilerOptions的配置项里面添加下面这两个配置项

 "compilerOptions": {
     。。。。。。。
     "resolveJsonModule": true,
     "esModuleInterop": true
   },

在ts文件里面引入ts组件，会遇到报错

 TS2691: An import path cannot end with a '.tsx' extension. Consider importing '@/layout/Layout.js' instead.

但是可以在每一行引入的地方加入

 // @ts-ignore

来消除影响bobbyhadz.com/blog/typesc…

各种参数表示组件的位置

 {
     //画布的大小
   "container": {
     "width": 1280,
     "height": 1024
   },
     //组件中的物体的位置
   "blocks":[
     {"top": 100,"left": 100,"zIndex": 1,"key": "text"},
     {"top": 200,"left": 200,"zIndex": 1,"key": "button"},
     {"top": 300,"left": 300,"zIndex": 1,"key": "input"}
   ]
 }

拖拽编辑器创建

在Vue文件中动态插入html模板

v-html插值

Vue.component方法创建组件，在对应地方展示组件

在对应组件中导入Vue -> 利用Vue.component("name", {template: <div>...</div>})创建组件 -> 在想要展示的地方插入组件

    <a-modal
       ref="basinModal"
       v-model="basinVisible"
       ok-text="确认"
       @ok="hideModal"
       :width="640"
     >
       <basinModal></basinModal>
     </a-modal>
     
     <script>
     import Vue from "vue";
     import PubSub from "pubsub-js";
     
     export default {
       mounted() {
         PubSub.subscribe("showBasinModal", (msg, template) => {
           Vue.component("basinModal", {
             template: `<div>${template}</div>`,
           })
           this.basinVisible = true;
         });
       }
     }
     </script>

others

在js中定义变量，然后在template中直接使用

 <div :style=containerStyles></div>

div 用:绑定，这样可以读取script里面的变量，

 const containerStyles = computed(() => ({
   width: ExampleProps.data.container.width + 'px',
   height: ExampleProps.data.container.height + 'px',
   margin: "0 auto",
 }))

calc使用

是css里面的方法，可以不同的单位之间进行计算，但是要：

 height:calc(100vh - 100px);

减号两边必须必须有空格！

这个的作用是获得当前视口的高度，然后减去100px（页面的头部）

overflow:auto

这个是对于父一级的组件使用的，子物体超出边界会有滑动的窗口

vue-router传值

和正常的组件间的传值是一样的，vue-router显示的是哪个页面就由哪个页面显示值

\