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'}
]
}
}
Customize configuration
See Configuration Reference.