下载

npm i sharedesign-component

使用演示

<template>
    <div class="page">
    	<div class="top-banner"></div>   // 页面中组件的定位元素
    	........
    </div>
</template>
<script>
import {TopBanner} from 'shareComp-ui/index.js';
    export default {
        data () {
          return {}
        },
        mounted() {
        new TopBanner(
            {
              element: document.querySelector(".top-banner"),
              mode: "dark",
              location: "top",
              callback: () => {
                console.log("########顶部logo按钮的事件回调");
              }
            }
         )
        }
    }
</script>

2.cdn

<!-- 页面中需要引入填写一个空元素 -->
<div class="top-banner">
  <!-- 引入css文件 -->
  <link rel="stylesheet" href="https://xxx.oss.shareComp-ui.min.css" />
  <!-- 引入js文件 -->
  <script src="https://xxx.oss.shareComp-ui.js"></script>
  <!-- 初始化组件 -->
  <script>
    // 使用演示
    new ShareCompUi.TopBanner({
      element: document.querySelector('.top-banner'),
      mode: 'dark',
      location: 'top',
      isFixed: false,
      callback: () => {
        console.log('########顶部logo按钮的事件回调')
      },
    })
  </script>
</div>

组件效果

组件 API

TopBanner

吸顶吸底的 logo banner

| 属性 | 说明 | 类型 | 默认值 | 是否必传 | | --------- | :------------------------------------- | ------------- | ----------- | -------- | | element | 组件标签容器 | 单个 dom 元素 | null | 是 | | isFixed | 是否吸顶吸底，false 表示普通的 div | boolean | true | 否 | | channel | 用作页面中的 channel | string | ShareCompUi | 否 | | channelId | 页面所需的 id | string | 空 | 是 | | location | 吸附类型，可选值 top bottom none | string | top | 否 | | mode | 主题模式 可选值 dark light | string | dark | 否 | | callback | 组件点击事件的回调函数 | function | 无 | 否 |

代码示例：

// html
;<div class="top-banner"></div>
// js
new ShareCompUi.TopBanner({
  element: document.querySelector('.top-banner'),
  mode: 'dark',
  location: 'top',
  isFixed: false,
  callback: () => {
    console.log('########顶部logo按钮的事件回调')
  },
})

VideoMoreButton

查看更多视频按钮

| 属性 | 说明 | 类型 | 默认值 | 是否必传 | | --------- | :-------------------------------- | ------------- | ----------- | -------- | | element | 组件标签容器 | 单个 dom 元素 | null | 是 | | channel | 用作页面中的 channel | string | ShareCompUi | 否 | | channelId | 页面所需的渠道 id（用作数据统计） | string | 空 | 是 | | callback | 组件点击事件的回调函数 | function | 无 | 否 |

代码示例：

// html
;<div class="video-button"></div>
// js
new ShareCompUi.VideoMoreButton({
  element: document.querySelector('.video-button'),
  text: '打开“App”，查看更多精彩视频',
  callback: () => {
    console.log('打开“App”，查看更多精彩视频按钮的事件回调')
  },
})

MoreButton

查看更多文章、更多评论的按钮

| 属性 | 说明 | 类型 | 默认值 | 是否必传 | | --------- | :------------------------------------------------------------------------------------------------------------------------- | -------------- | ----------- | -------- | | element | 组件标签容器 | 单个 node 元素 | null | 是 | | type | 按钮类型，可选值 comment | string | comment | 否 | | channel | 用作页面中的 channel | string | ShareCompUi | 否 | | channelId | 页面所需的渠道 id（用作数据统计） | string | 空 | 是 | | location | 吸附类型，可选值 top bottom | string | top | 否 | | mode | 主题模式 可选值 dark light | string | dark | 否 | | callback | 组件点击事件的回调函数，回调函数中返回一个 string 类型的参数，'expand'表示用户展开了的箭头，'jump'表示用户点击了跳转的按钮 | function | 无 | 否 |

代码示例：

// html
;<div class="more-button"></div>
// js
new ShareCompUi.MoreButton({
  element: document.querySelector('.more-button'),
  type: 'article',
  text: '打开“App”查看全文',
  callback: (key) => {
    if (key === 'expand') {
      console.log('--------》展开按钮的事件回调')
    } else if (key === 'jump') {
      console.log('--------》查看全文按钮的事件回调')
    }
  },
})

EvokeButton

打开 App 的按钮

| 属性 | 说明 | 类型 | 默认值 | 是否必传 | | --------- | :----------------------------------------------------------- | ------------- | ----------- | -------- | | element | 组件标签容器 | 单个 dom 元素 | null | 是 | | type | 按钮类型，可选值 comment commend，comment 类型会显示箭头 | string | comment | 否 | | channel | 用作页面中的 channel | string | ShareCompUi | 否 | | channelId | 页面所需的渠道 id（用作数据统计） | string | 空 | 是 | | callback | 组件点击事件的回调函数 | function | 无 | 否 |

代码示例：

// html
;<div class="more-commet-button"></div>
// js
new ShareCompUi.EvokeButton({
  element: document.querySelector('.more-commet-button'),
  showIcon: true,
  type: 'comment',
  callback: () => {
    console.log('--------》评论唤起按钮的事件回调')
  },
})

Swiper

轮播类组件，最多展示 5 帧

| 属性 | 说明 | 类型 | 默认值 | 是否必传 | | --------- | :-------------------------------------------------- | ------------- | ----------- | -------- | | element | 组件标签容器 | 单个 dom 元素 | null | 是 | | data | 轮播数据 | array | [] | 是 | | type | 按钮类型，可选值 comment article | string | comment | 否 | | threshold | 拖动的临界值（单位为 px），触摸距离小于该值不会切换 | number | 50 | 否 | | duration | 间隔时间 | number | 500 | 否 | | channel | 用作页面中的 channel | string | ShareCompUi | 否 | | channelId | 页面所需的渠道 id（用作数据统计） | string | 空 | 是 | | location | 吸附类型，可选值 top bottom | string | top | 否 | | mode | 主题模式 可选值 dark light | string | dark | 否 | | callback | 组件点击事件的回调函数 | function | 无 | 否 |

代码示例：

// html
;<div class="swiper-box"></div>
// js
new ShareCompUi.Swiper({
  container: document.querySelector('.swiper-box'),
  position: 'bottom',
  type: 'comment',
  data: [
    {
      img: 'https://img.36krcdn.com/20200828/v2_09cbece3aa684ad2a4f3a58daa4f6f10_img_000',
      text: '111热门回复：父母最大的悲哀是年老后在子女面前变得小心翼翼',
      url: 'www.baidu.com',
    },
    {
      img: 'https://img.36krcdn.com/20200401/v2_eaf81d89a62d4cffbe62164ae29503b7_img_000',
      text: '2222热门跟贴：前年去西藏自驾，看到近边境延绵十几公里的野战军临时营房、装备和车辆，和俄罗斯方块一样整齐',
      url: 'www.baidu.com',
    },
    {
      img: 'https://img.36krcdn.com/20200403/v2_443a3bcfe66446ba93a3b0b82a186a16_img_000',
      text: '5555热门回复：父母最大的悲哀是年老后在子女面前变得小心翼翼',
      url: 'www.baidu.com',
    },
  ],
  callback: (index) => {
    console.log('--------》评论回复轮播按钮的事件回调' + index)
  },
})