agentassistant

介绍

• 该插件为华云天下所有

使用介绍

1. NPM

     npm i agentassistant --save

   下一步

     import A from "agentassistant"
     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')
      </script>

项目中使用svg图标

  const userIcon = new SvgIcon('user').elem // user为你的icons/svg中的svg名称
   const titleDiv = createMutilElement(`
   ${userIcon}
   <span>林晓非/021-5223648</span>
   <div class="hah-middle-time">
     <div class="hah-hmt-text">
       <span>聊天中</span>
     </div>
     <div class="vertical"></div>
     <div class="hah-hmt-time">00:00:35</div>
   </div>
   <div class="hah-opera-box">加图标</div>
 `)

项目中数据交互

• 例子：

    fillHeader() {
      const titleDiv = createMutilElement(this.render(), this.methods())
      return titleDiv
    }
    render() {
      const userIcon = new SvgIcon('user').elem
      return `
        <div class="huayun-agent-header">
          <span>${userIcon}</span>
          <span>林晓非/021-5223648</span>
          <div class="hah-middle-time">
            <div class="hah-hmt-text">
              <span>聊天中</span>
            </div>
            <div class="vertical"></div>
            <div class="hah-hmt-time" onmouseover="over()">00:00:35</div>
          </div>
          <div class="hah-opera-box" onclick="add()">加图标</div>
        </div>
      `
    }
    // 注意使用箭头函数
    methods() {
      return {
        add: () => {
          alert('kkkk')
        },
        over: () => {
          alert('over')
        }
      }
    }  

待解决的问题

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