说明

此组件是对网易新闻移动端页面的三个部分抽离出来封装成组件,包括顶部栏TopBanner、底部栏ExpandMore、按钮MoreButton

如何使用

1.npm i jszujian1

2.通过import 按需引用引入

import { TopBanner, MoreButton, ExpandMore } from '../../../node_modules/jszujian1/build/js/built'

3.模板事例:

1.TopBanner:

     new TopBanner({
          slot1: { type: 'span', event: () => { }, text: '', id: '' },
          slot2: { type: 'span', event: () => { }, text: '新闻频道', id: '' },
          slot3: {
            type: 'button',
            event: () => {
              const btn2 = document.getElementById('btn2')
              btn2.addEventListener('click', () => {
                window.location.href = 'https://www.baidu.com'
              })
            },
            text: '打开app',
            id: 'btn2',
          },
        },
        'box1'
      ) 

传入两个参数 第一个参数是一个对象,里面有三个插槽,每个插槽分别是一个对象,根据需要传参. 第一个参数是一个对象,里面有三个插槽,每个插槽分别是一个对象,根据需要传参. type:标签类型即标签名 event:可以根据自身需要写出逻辑,执行回调. text:可以添加文本. id:为添加的元素绑定id

第二个参数是要往哪个父元素里面插入,值为父元素的class

2.MoreButton

new MoreButton({
        text: '打开网易新闻,阅读体验更加',
        event: () => {
          const btn1 = document.getElementById('btn1')
          btn1.addEventListener('click', () => {
            window.location.href = 'https://www.baidu.com'
          })
        },
        id: 'btn1',
      },
        'box1')

也是两个参数,用法跟TopBanner类似

3.ExpandMore

new MoreButton({
        text: '打开网易新闻,阅读体验更加',
        event: () => {
          const btn1 = document.getElementById('btn1')
          btn1.addEventListener('click', () => {
            window.location.href = 'https://www.baidu.com'
          })
        },
        id: 'btn1',
      },
        'box1')

用法跟上面类似,不再描述