Skip to main content

自定义组件

示例:如何创建Start类型组件

自定义组件的loadModel属性可以控制组件的加载时机,设置为start时,组件会在项目启动时加载。

1.效果展示

使用启动类型的组件,隐藏详情页右侧部分

2.代码实现

隐藏联系人右侧活动动态Card部分,loadModel要设置为start模式

<template>
  <div></div>
</template>

<script>
console.log("JS脚本可以写在这里,会自动执行")


export default {
  data() {
    return {
      componentInfo: {
        // 组件唯一标识,全局唯一
        component: "cloudcc-demo-a",
        // 组件名称,在页面编辑器显示的名字
        compName: "cloudcc-demo-a",
        // 组件描述信息
        compDesc: "组件描述信息",
        // 设置组件在应用启动的时候加载
        loadModel:"start"
      },
      isLock: false,
    };
  },
};
</script>
<style lang="scss">
// 此样式名称逻辑:detail+对象前缀ID,可以在后台设置对象管理中查看
.detail001 {
   // 此样式选择器仅作示例,不保证一直可用。
  .main.left.scrollBoxUnique {
    width: 100% !important;
  }
   // 此样式选择器仅作示例,不保证一直可用。
  .layoutSwitchBox {
    display: none !important;
  }
   // 此样式选择器仅作示例,不保证一直可用。
  .right.scrollBoxUnique {
    display: none !important;
  }
}
</style>

为了方便实施进行开发,目前平台在dom上添加了devid属性,用于标记dom元素