Tooltip-canmen NPM

tooltip

下载插件：

npm install tooltip-canmen --save

插件使用(全体)：

main.js文件: 
import 'tooltip-canmen/src/index.js'
import 'tooltip-canmen/lib/them-chalk/index.css

插件使用(按需)：

xxx.vue文件: 
import 'tooltip-canmen/src/xxx.js'
import 'tooltip-canmen/lib/them-chalk/xxx.css

插件图标来源：iconfont

使用：在index.html中引入此css
https://at.alicdn.com/t/font_1290583_7cv8iva22hc.css

对话框(messageBox)

字段名	默认值	作用
message	String	对话框内容
htmlTxt	Dom	html内容(dom)
tipTitle	String	对话框头部文字
headerShow	Boolean	是否显示对话框头部
message	String	模态框内容
tipTitle	String	对话框头部文字
headerShow	Boolean	是否显示对话框头部
footerShow	Boolean	是否显示对话框尾部(button)
timer	Boolean	是否定时关闭
duration	Number(毫秒)	对话框显示时长
result	Boolean	对话框操作结果（确定、取消）

使用方法(messageBox)

this.$messageBox({message:'请输入弹框内容'})
.then(res=>{
    <!-- 确定按钮返回值 -->
    console.log(res)
}).catch(cancel=>{
    <!-- 取消|关闭按钮返回值 -->
    console.log(cancel)
})

提示框(message)

字段名	默认值	作用
message	String	提示框内容
htmlTxt	html-String	html内容(dom)
iconShow	Boolean	提示框图标是否显示
timer	Number(毫秒)	弹出框显示时长

使用方法(message)

this.$message({message:'请输入提示内容'})

分页(pages)

字段名	默认值	作用
pageNow	Number	当前页码
pageNum	Number	分页数
dataSum(props)	Number	数据总条数
pageSize(props)	Number	每页条数
turnBtn(props)	Boolean	是否显示页面跳转按钮
countPage(props)	Boolean	是否显示数据总条数

使用方法(pages)

    <y-pages :dataSum="50" :pageSize="10" @getPage="yourFnc" ref="pages" />
    ...
    methods:{
        yourFnc(page){  //获取当前页码
            console.log(page)

            // 修改当前页码
            // this.refs.pages = 3
        }
    }

轮播图(carousel)

字段名	类型	作用
height	Number	高度
carouselData	Array	轮播图数据
autoplay	Boolean	是否自动轮播
interval	Number(ms)	自动切换轮播时间
speed	Number(ms)	切换轮播的最小间隔时间(不大于css-transtion时间)

使用方法(carousel)

    <y-carousel :carouselData="imgs" :autoplay="false"></y-carousel>
    ...
    data(){
        return{
            imgs:[
                {path:'xxx.jpg'},
                {path:'xxx.jpg'}
            ]
        }
    }