sharedesign-component v1.0.1

下载

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

代码示例：

// 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

查看更多视频按钮

代码示例：

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

MoreButton

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

代码示例：

// 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 的按钮

代码示例：

// 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 帧

代码示例：

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