# agengthelper-control

> 华云天下智能助手监控的插件

Latest version **1.0.3** (published 2022-07-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install agengthelper-control
pnpm add agengthelper-control
yarn add agengthelper-control
bun add agengthelper-control
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-07-15 |
| First published | 2022-07-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 2.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 王晓婷 |
| Maintainers | wangmiaomiao0723 |

## Links

- npm: https://www.npmjs.com/package/agengthelper-control
- Repository: http://127.0.0.1:9997/qianduan/AgentAssistant
- npm.io page: https://npm.io/package/agengthelper-control

## Dependencies (2)

- [jquery](https://npm.io/package/jquery.md) ^3.6.0
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1

## Recent versions

- 1.0.3 (latest) — 2022-07-15
- 1.0.2 — 2022-07-15
- 1.0.1 — 2022-07-13
- 1.0.0 — 2022-07-13

## README

## 介绍
- 该插件为华云天下所有

## 使用介绍
1. ### NPM
   ```bash
     npm i agengthelper-control --save
   ```
   **下一步**
   ```js
     import A from "agengthelper-control"
     const editor = new A("div1")
   ```
2. ### CDN
   ```js
      <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图标
   ```js
    render() {
      const userIcon = new SvgIcon('user').elem // user为你的icons/svg中的svg名称
      return `
        <div class='center-bottm'>
          ${userIcon}
        </div>
      `
    }
   ```

## 父子组件传值的方式
   ```bash
   父传子
   第一种方式：在注册子组件的地方，将需要传递的数据也绑定好
              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()包裹转为字符串，
      例子：
      ```js
        <p HG_click="titleSelect({{${JSON.stringify(item)}}}, {{${index}}})">
      ```
  2. 包裹再this.data中的数据，为响应式的数据，也就是修改data中的数据，页面会重新渲染
     **注意事项：** 只有 this.data 中 引用类型 可以使用解构赋值的方式定义，其他 普通类型 的数据不能使用结构赋值出来使用
     例子：
     ```js
       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 已解决

---
_Source: https://npm.io/package/agengthelper-control · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._