js-component-enhance v1.0.11

JS-组件

作者：likecodeBoy(田浩云)

安装

npm i js-component-enhance

vue

// main.js中
import 'js-component-enhance/enhance-ui.min.css'

// 在其vue文件中
<template>
    <div>
    	<div class="page-title"></div>
    </div>
    </template>
import {Aside} from 'js-component-enhance/index.js'
export default{
    data(){
        return {}
    }
    mounted(){
  new Aside({
    element: document.querySelector('.page-title'),
    color: 'gray',
    position: 'right',
    model:'circle',
    callback: () => { 
        console.log('这是回到顶部的回调');
    	}
	})
    }
}

HTML

    <div class="top-banner">  </div>
    <link  rel="stylesheet" href="./node_modules/js-component-enhance/enhance-ui.min.css">
<script src="./node_modules/js-component-enhance/index.js"></script>
    <script>
               new EnhanceUi.Swiper(){
                element:document.querySelector('.swiper')
                mode:'dark',
                type:'comment'
                data:[
                    {
                        'img':'....',
                        'text':'....',
                        'url':'....'
                    }
                ]
                callback:(index)=>{
                        console.log('swiper 的回调'+index)
                }
            });
       </script> 

JS CSS

// xx.css
	@import 'node_modules/js-component-enhance/enhance-ui.min.css'

//xxx.js
import  './node_modules/js-component-enhance/index.js'
new EnhanceUi.Aside({
    element: document.querySelector('.back-top'),
    color: 'gray',
    position: 'right',
    model:'circle',
    callback: () => { 
        console.log('这是回到顶部的回调');
    }
})

new EnhanceUi.Topbanner({
    element: document.querySelector('.top-banner'),
    mode: 'dark',
    location: 'top',
    isFixed: true,
    callback: () => { 
        console.log('这是顶部导航回调');
    }
})

<script scr =".../xx.js" type="module">

API

（1）Aside

​ 返回至顶部 + 返回至主页

代码示例：

//html
<div class = "page-title"> </div>
// 为了实现淡入淡出效果，您可以在内容填充一部分的时候，再添加此组件，划到底部的时候会显示！
//js
new EnhanceUi.Aside({
    element: document.querySelector('.page-title'),
    color: 'gray',
    position: 'right',
    model:'circle',
    callback: () => { 
        console.log('这是回到顶部的回调');
    }
})

（2）EhanceButton

​ 打开App的按钮

​ 代码示例：

//html
<span class="enhance-button"></span>
//js
new EnhanceUi.EnhanceButton({
    element:document.querySelector('.enhance-button'),
    text: '网易新闻',
    src:'https://www.baidu.com/s?ie=UTF-8&wd=npm',
	callback:()=>{
                console.log('EnhanceButton的回调');
    }
})

（3）Swiper

轮播图

代码示例：

//html
<div class= "swiper"></div>

//js
new  EnhanceUi.Swiper({
    container:document.querySelector('.swiper'),
    mode: 'dark',
    type: 'comment',
    position:'bottom',
    data: [{
        'img': 'https://img.36krcdn.com/20200828/v2_09cbece3aa684ad2a4f3a58daa4f6f10_img_000',
        'text': '111热门文章：父母最大的悲哀是年老后在子女面前变得小心翼翼',
        'url': 'www.baidu.com'
      }],
  callback: (index) => { 
        console.log('这是swiper回调,index为'+index);
    }
})

（4）TextMoreButton

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

代码示例：

// html
<div class = "comment-button"></div>
// js
new EnhanceUi.TextMoreButton({
    element: document.querySelector('.comment-button'),
    text: '打开"App"，查看更多评论',
    type: 'comment',
    color: 'red',
    callback: () => { 
        console.log('这是TextMoreButton回调');
    }
})

（5）TopBanner

吸顶吸底的logo banner

代码示例：

//html
<div class="top-banner"></div>

//js
new EnhanceUi.Topbanner({
    element: document.querySelector('.top-banner'),
    mode: 'dark',
    location: 'top',
    isFixed: true,
    callback: () => { 
        console.log('这是顶部导航回调');
    }
})

（6）VideoButton

查看更多视频按钮

代码示例：

// html;
<div class="video-button"></div>

//js
new EnhanceUi.VideoButton({
    element: document.querySelector('.video-button'),
    mode: 'light',
    color: 'red',
    src: 'https://cms-bucket.ws.126.net/2021/0525/3012c74fp00qtniu0008tc000go006yc.png',
    callback: () => { 
        console.log('这是videoButton回调');
    }
})