agengthelper-control v1.0.3

介绍

• 该插件为华云天下所有

使用介绍

1. NPM

     npm i agengthelper-control --save

   下一步

     import A from "agengthelper-control"
     const editor = new A("div1")

2. CDN

      <script
        type="text/javascript"
        src="./dist/gyp.min.js"
      ></script>
      <script type="text/javascript">
        <!-- const E = window.ServiceAssistant
   			    new E('testNpm') -->
        let agentHelper = new ServiceAssistant(mainId, agentParam);
      </script>

项目中使用svg图标

 render() {
   const userIcon = new SvgIcon('user').elem // user为你的icons/svg中的svg名称
   return `
     <div class='center-bottm'>
       ${userIcon}
     </div>
   `
 }

父子组件传值的方式

父传子
第一种方式：在注册子组件的地方，将需要传递的数据也绑定好
           components () {
             return { 
               Header:{
                 comp: Header, // 导入的组件
                 props: {
                   test: [1, 2, 3]
                 }
               }
             }
           }
第二种方式：在render中，写组件的时候加上属性的方式  类似 <Header tetes="${JSON.stringify([1, 2, 3])}" />

后面防止props被修改，所以需要把父组件传给子组件的值，进行保护
保护的方式：
   一种是利用object.defineProperty()
   另一种是设置闭包
     //设置一个闭包，把变量保护起来，通过返回值调用
     function createStore() {
       let appState={
         fontSize:'26px',
         title:{
           text:'标题',
           color:'red'
         },
         content:{
           text:'类容',
           color:'green'
         }
       }
       //保护变量被修改，深克隆
       let getState=()=>JSON.parse(JSON.stringify(appState));
       //改变变量的方法
       let dispatch=(action)=>{
         switch(action.type){
           case CHANGE_FONT_SILE:
             appState.fontSize=action.fontSize;
           default:
             return;
         }
       }
       //返回出去的修改和取值的接口
       return{
         getState,
         dispatch
       }
     }
子传父
  方法一： 依赖nodejs EventEmitter实现
  方法二：采用与vue 中$emit 和 $on 的实现方式  发布订阅者模式

关于框架的使用要点

1. render()中传参，需要使用{{}}包裹，并且若是Object类型，需要JSON.stringify()包裹转为字符串， 例子：

     <p HG_click="titleSelect({{${JSON.stringify(item)}}}, {{${index}}})">

2. 包裹再this.data中的数据，为响应式的数据，也就是修改data中的数据，页面会重新渲染 注意事项： 只有 this.data 中 引用类型 可以使用解构赋值的方式定义，其他 普通类型 的数据不能使用结构赋值出来使用 例子：

     titleSelect (_event, val, index) {
        const { intent } = this.data // intent是一个数组 引用类型 所以可以使用解构赋值定义的方式
        this.data.titleProblem = val.problem  // titleProblem 和 detailContent是字符串，基本类型，不要使用解构赋值的定义方式
        this.data.detatilContent = val.content
        intent[index].isActive = !intent[index].isActive
     }

待解决的问题

1. 当该插件在带有iconfont图标的vue项目中使用, svg图标引入有问题，不会在body下面创建symbol 已解决