evokeenhance v1.0.1

引入

使用演示

<template>
    <div class="page">
    	<div class="top-banner"></div>   // 页面中组件的定位元素
    	........  
    </div>
</template>
<script>
import {TopBanner} from '../evoke/src/index';
    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://evoke-ui.min.css">
<!-- 引入js文件 -->
<script src="https://evoke/index.js"></script>
<!-- 初始化组件 -->
<script>
  // 使用演示
  new EvokeUi.TopBanner(
   {
     element: document.querySelector(".top-banner"),
     mode: "dark",
     location: "top",
     isFixed: false,
     callback: () => {
       console.log("########顶部logo按钮的事件回调");
     }
   }
 );
</script>

组件效果

组件API

TopBanner

吸顶吸底的logo banner

代码示例：

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

MoreButton

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

代码示例：

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

Swiper

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

代码示例：

 // html
 <div class="swiper-box"></div>
 // js
 new EvokeUi.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);
     },
   }
 );