sharedesign-component

下载

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)
  },
})