Compare commits
12 Commits
Author | SHA1 | Date |
---|---|---|
yujialong | 872f96d9d4 | 2 weeks ago |
yujialong | 1a7f42cc24 | 6 months ago |
yujialong | b1b7840730 | 1 year ago |
yujialong | 045748284c | 1 year ago |
yujialong | bb1ed11a1d | 1 year ago |
yujialong | 61d2383593 | 1 year ago |
yujialong | 5a441a2188 | 1 year ago |
yujialong | fc2fc8bb17 | 1 year ago |
yujialong | 60e10283cd | 1 year ago |
yujialong | 7aa59bf42d | 1 year ago |
wangchenguang | c75afe4844 | 2 years ago |
wangchenguang | 5d86d49479 | 2 years ago |
43 changed files with 1836 additions and 851 deletions
@ -0,0 +1,14 @@ |
|||||||
|
import request from '@/apis/request.js' |
||||||
|
const { get, post } = request |
||||||
|
|
||||||
|
export const queryClassificationByType = id => { |
||||||
|
return post('nakadai/nakadai/partner/article/classification/queryClassificationByType?typeId=' + id) |
||||||
|
} |
||||||
|
|
||||||
|
export const schemeList = data => { |
||||||
|
return post('nakadai/nakadai/partner/schemeManagement/schemeList', data) |
||||||
|
} |
||||||
|
|
||||||
|
export const schemeFindById = id => { |
||||||
|
return post('nakadai/nakadai/partner/schemeManagement/findById?id=' + id) |
||||||
|
} |
File diff suppressed because it is too large
Load Diff
@ -1,199 +0,0 @@ |
|||||||
<template> |
|
||||||
<view> |
|
||||||
<view class="filter"> |
|
||||||
<uni-search-bar class="search" radius="30" placeholder="请输入方案名称" clearButton="auto" cancelButton="none" @confirm="search" /> |
|
||||||
</view> |
|
||||||
|
|
||||||
<ul class="tab"> |
|
||||||
<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li> |
|
||||||
</ul> |
|
||||||
|
|
||||||
<view v-if="list.length" class="list"> |
|
||||||
<view v-for="(item, i) in list" class="item" @click="toDetail(i + 2)"> |
|
||||||
<view class="c-name">{{ item.name }}</view> |
|
||||||
<view class="content"> |
|
||||||
<view class="info"> |
|
||||||
<view class="line"> |
|
||||||
<view class="name">产品:</view> |
|
||||||
<view class="val ell-wrap"> |
|
||||||
<view :class="{ell: !item.toggle}" v-html="item.product"></view> |
|
||||||
<view v-if="item.product.length > 14" class="toggle" @click.stop="toggle(item)">{{ item.toggle ? '收起' : '展开' }}</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
<view class="line"> |
|
||||||
<view class="name">更新日期:</view> |
|
||||||
<view class="val">{{ item.date }}</view> |
|
||||||
</view> |
|
||||||
<view class="line"> |
|
||||||
<view class="name">适用专业:</view> |
|
||||||
<view class="val">{{ item.major }}</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
<view class="detail" @click.stop="toEmail(i)">下载</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
<empty v-else></empty> |
|
||||||
</view> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
curTab: '', |
|
||||||
tabs: [ |
|
||||||
{ |
|
||||||
name: '不限', |
|
||||||
id: '' |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '标准方案', |
|
||||||
id: 1 |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '智信云方案', |
|
||||||
id: 2 |
|
||||||
} |
|
||||||
], |
|
||||||
list: [], |
|
||||||
all: [ |
|
||||||
{ |
|
||||||
type: 1, |
|
||||||
toggle: false, |
|
||||||
name: '人工智能实验室建设方案-2020.1', |
|
||||||
product: `python程序设计实验教学系统<br> |
|
||||||
Docker技术实验教学系统<br> |
|
||||||
JAVA语言程序设计实验教学系统<br> |
|
||||||
大数据开发实验教学系统<br> |
|
||||||
Openstack云计算实验教学系统`, |
|
||||||
date: '2022-06-02', |
|
||||||
major: '人工智能方向' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 1, |
|
||||||
toggle: false, |
|
||||||
name: '大数据管理与应用专业建设方案', |
|
||||||
product: `python程序设计实验教学系统<br> |
|
||||||
量化投资实验教学系统<br> |
|
||||||
区块链数字货币交易实验系统<br> |
|
||||||
大数分析实验教学系统<br> |
|
||||||
数据可视化实验教学系统<br> |
|
||||||
大数据实证科研平台<br> |
|
||||||
全球宏观经济<br> |
|
||||||
数据库,全球金融交易数据库 `, |
|
||||||
date: '2022-06-02', |
|
||||||
major: '大数据方向' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 1, |
|
||||||
toggle: false, |
|
||||||
name: '金融科技实验室建设方案V2.0', |
|
||||||
product: `python程序设计实验教学系统<br> |
|
||||||
量化投资实验教学系统<br> |
|
||||||
区块链数字货币交易实验教学系统<br> |
|
||||||
大数据采集实验教学系统<br> |
|
||||||
大数据分析实验教学系统<br> |
|
||||||
金融建模实验教学系统<br> |
|
||||||
互联网小贷实验教学系统<br> |
|
||||||
互联网支付实验教学系统<br> |
|
||||||
R语言实验教学系统<br> |
|
||||||
供应链金融实验教学系统<br> |
|
||||||
Python数据清洗实验教学系统<br> |
|
||||||
数据可视化实验教学系统<br> |
|
||||||
金融随机过程实验教学系统<br> |
|
||||||
银行综合系统<br> |
|
||||||
大数据实证科研平台<br> |
|
||||||
财经数据库`, |
|
||||||
date: '2022-06-02', |
|
||||||
major: '金融科技,大数据方向' |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
onShow() { |
|
||||||
this.list = JSON.parse(JSON.stringify(this.all)) |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
search(res) { |
|
||||||
uni.showToast({ |
|
||||||
title: '搜索:' + res.value, |
|
||||||
icon: 'none' |
|
||||||
}) |
|
||||||
}, |
|
||||||
// tab切换 |
|
||||||
tabChange(tab) { |
|
||||||
const { id } = tab |
|
||||||
const { all } = this |
|
||||||
this.curTab = id |
|
||||||
this.list = id ? all.filter(e => e.type === id) : all |
|
||||||
}, |
|
||||||
// 跳转详情 |
|
||||||
toDetail(id) { |
|
||||||
this.$util.openFile(id) |
|
||||||
}, |
|
||||||
// 发送邮箱 |
|
||||||
toEmail(id) { |
|
||||||
this.$util.to(`../send/send?id=${id}`) |
|
||||||
}, |
|
||||||
// 展开 |
|
||||||
toggle(item) { |
|
||||||
item.toggle = !item.toggle |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped lang="scss"> |
|
||||||
.list { |
|
||||||
background-color: #fff; |
|
||||||
.item { |
|
||||||
padding: 20rpx 40rpx; |
|
||||||
border-bottom: 1px solid #f1f1f1; |
|
||||||
} |
|
||||||
.c-name { |
|
||||||
font-size: 30rpx; |
|
||||||
color: #333; |
|
||||||
} |
|
||||||
.line { |
|
||||||
display: flex; |
|
||||||
padding: 10rpx 0; |
|
||||||
} |
|
||||||
.content { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: center; |
|
||||||
margin-top: 20rpx; |
|
||||||
} |
|
||||||
.name { |
|
||||||
width: 140rpx; |
|
||||||
margin-right: 10rpx; |
|
||||||
white-space: nowrap; |
|
||||||
font-size: 28rpx; |
|
||||||
color: #999; |
|
||||||
} |
|
||||||
.val { |
|
||||||
max-width: 88%; |
|
||||||
font-size: 28rpx; |
|
||||||
color: #333; |
|
||||||
} |
|
||||||
.ell { |
|
||||||
height: 38rpx; |
|
||||||
white-space: nowrap; |
|
||||||
text-overflow: ellipsis; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
.toggle { |
|
||||||
margin-top: 10rpx; |
|
||||||
white-space: nowrap; |
|
||||||
font-size: 24rpx; |
|
||||||
color: #0e92ef; |
|
||||||
} |
|
||||||
.detail { |
|
||||||
margin-left: 20rpx; |
|
||||||
font-size: 26rpx; |
|
||||||
color: #1f83ff; |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
After Width: | Height: | Size: 843 B |
After Width: | Height: | Size: 197 B |
@ -0,0 +1,272 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<view class="filter"> |
||||||
|
<uni-search-bar class="search" radius="30" placeholder="请输入方案名称" clearButton="auto" cancelButton="none" v-model="keyword" /> |
||||||
|
</view> |
||||||
|
|
||||||
|
<ul class="tab"> |
||||||
|
<li v-for="(tab, i) in classifications.slice(0, 4)" :class="{active: active === tab.id}" @click="tabChange(tab)">{{ tab.classificationName }}</li> |
||||||
|
<image class="unfold" src="@/static/image/unfold.png" mode="widthFix" @click="typeVisible = true"></image> |
||||||
|
</ul> |
||||||
|
|
||||||
|
<view v-if="list.length" class="list"> |
||||||
|
<view v-for="(item, i) in list" class="item" @click="toDetail(item)"> |
||||||
|
<view class="c-name ell">{{ item.title }}</view> |
||||||
|
<view class="content"> |
||||||
|
<view class="info"> |
||||||
|
<view class="line"> |
||||||
|
<view class="name">产品:</view> |
||||||
|
<view class="val ell-wrap"> |
||||||
|
<view :class="['product', {ell: !item.toggle}]">{{ item.productNames }}</view> |
||||||
|
<view v-if="item.productNames && item.productNames.length > 24" class="toggle" @click.stop="toggle(item)">{{ item.toggle ? '收起' : '展开' }}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="line"> |
||||||
|
<view class="name">更新日期:</view> |
||||||
|
<view class="val">{{ item.updateTime }}</view> |
||||||
|
</view> |
||||||
|
<view class="line"> |
||||||
|
<view class="name">适用专业:</view> |
||||||
|
<view class="val">{{ item.applicableMajor }}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<empty v-else></empty> |
||||||
|
|
||||||
|
<view class="type-popup" v-show="typeVisible"> |
||||||
|
<uni-icons class="close" type="closeempty" size="20" color="#757575" @click="closeType"></uni-icons> |
||||||
|
<view class="title">所属分类</view> |
||||||
|
<view class="types"> |
||||||
|
<view v-for="(item, i) in classifications" :key="i" :class="['item', {active: active == item.id}]" @click="classificationClick(item)">{{ item.classificationName }}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { schemeList, queryClassificationByType } from '@/apis/modules/article.js' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
active: '', |
||||||
|
typeVisible: false, |
||||||
|
classifications: [], |
||||||
|
reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据 |
||||||
|
status: 'more', // 上拉加载状态 more|loading|noMore |
||||||
|
searchTimer: null, |
||||||
|
articleNameSort: 'desc', |
||||||
|
keyword: '', |
||||||
|
list: [], |
||||||
|
page: 1, |
||||||
|
pageSize: 10, |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
keyword () { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.initList() |
||||||
|
}, 500) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 下拉刷新 |
||||||
|
onPullDownRefresh() { |
||||||
|
this.initList() |
||||||
|
setTimeout(() => { |
||||||
|
uni.stopPullDownRefresh() |
||||||
|
}, 1500) |
||||||
|
}, |
||||||
|
// 上拉加载 |
||||||
|
onReachBottom() { |
||||||
|
if (this.reachBottom >= 0) { |
||||||
|
this.reachBottom = 1 |
||||||
|
this.status = 'loading' |
||||||
|
this.getList() |
||||||
|
} |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
this.keyword = '' |
||||||
|
this.active = '' |
||||||
|
this.initList() |
||||||
|
this.getClassification() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getList() { |
||||||
|
uni.showLoading({ |
||||||
|
title: '加载中' |
||||||
|
}) |
||||||
|
schemeList({ |
||||||
|
keyWord: this.keyword, |
||||||
|
pageNum: this.page, |
||||||
|
pageSize: this.pageSize, |
||||||
|
querySource: 4, |
||||||
|
classificationId: this.active |
||||||
|
}).then(({ data }) => { |
||||||
|
uni.hideLoading() |
||||||
|
// 未加载完所有数据,并且不是筛选,则拼接list,否则直接赋值 |
||||||
|
const list = data.records |
||||||
|
list.forEach(e => { |
||||||
|
if (e.productNames) e.toggle = e.productNames.length < 24 // 超过了14个字才需要显示展开按钮 |
||||||
|
}) |
||||||
|
this.list = this.reachBottom > 0 ? [...this.list, ...list] : list |
||||||
|
this.page++ // 每次获取了数据后page+1 |
||||||
|
const noMore = this.list.length === data.total // 是否加载完所有数据 |
||||||
|
this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore |
||||||
|
this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1 |
||||||
|
}).catch(e => { |
||||||
|
uni.hideLoading() |
||||||
|
}) |
||||||
|
}, |
||||||
|
initList() { |
||||||
|
this.page = 1 |
||||||
|
this.reachBottom = 0 |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
// 获取所属分类 |
||||||
|
getClassification() { |
||||||
|
queryClassificationByType(3).then(({ data }) => { |
||||||
|
this.classifications = [ |
||||||
|
{ |
||||||
|
id: '', |
||||||
|
classificationName: '不限' |
||||||
|
} |
||||||
|
] |
||||||
|
this.classifications.push(...data) |
||||||
|
}).catch(e => {}) |
||||||
|
}, |
||||||
|
// 所属分类点击回调 |
||||||
|
classificationClick(item, query) { |
||||||
|
this.active = item.id |
||||||
|
query && this.initList() |
||||||
|
}, |
||||||
|
// 关闭所属分类弹框 |
||||||
|
closeType() { |
||||||
|
this.typeVisible = false |
||||||
|
this.initList() |
||||||
|
}, |
||||||
|
// tab切换 |
||||||
|
tabChange(tab) { |
||||||
|
this.active = tab.id |
||||||
|
this.initList() |
||||||
|
}, |
||||||
|
// 跳转详情 |
||||||
|
toDetail(item) { |
||||||
|
this.$util.to(`/team/scheme/scheme?id=` + item.id) |
||||||
|
}, |
||||||
|
// 展开 |
||||||
|
toggle(item) { |
||||||
|
item.toggle = !item.toggle |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.tab { |
||||||
|
position: relative; |
||||||
|
justify-content: flex-start; |
||||||
|
li { |
||||||
|
padding: 0 30rpx; |
||||||
|
} |
||||||
|
.unfold { |
||||||
|
position: absolute; |
||||||
|
top: 32rpx; |
||||||
|
right: 12rpx; |
||||||
|
right: 44rpx; |
||||||
|
width: 40rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.list { |
||||||
|
background-color: #fff; |
||||||
|
.item { |
||||||
|
padding: 20rpx 40rpx; |
||||||
|
border-bottom: 1px solid #f1f1f1; |
||||||
|
} |
||||||
|
.c-name { |
||||||
|
font-size: 30rpx; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.line { |
||||||
|
display: flex; |
||||||
|
padding: 10rpx 0; |
||||||
|
} |
||||||
|
.content { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
margin-top: 20rpx; |
||||||
|
} |
||||||
|
.name { |
||||||
|
width: 140rpx; |
||||||
|
margin-right: 10rpx; |
||||||
|
white-space: nowrap; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
.val { |
||||||
|
font-size: 28rpx; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.product { |
||||||
|
max-width: 67vw; |
||||||
|
white-space: pre-wrap; |
||||||
|
&.ell { |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
} |
||||||
|
.toggle { |
||||||
|
margin-top: 10rpx; |
||||||
|
white-space: nowrap; |
||||||
|
font-size: 24rpx; |
||||||
|
color: #0e92ef; |
||||||
|
} |
||||||
|
.detail { |
||||||
|
margin-left: 20rpx; |
||||||
|
font-size: 26rpx; |
||||||
|
color: #1f83ff; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type-popup { |
||||||
|
z-index: 10; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
padding: 10rpx; |
||||||
|
background-color: #fff; |
||||||
|
.close { |
||||||
|
position: absolute; |
||||||
|
top: 50rpx; |
||||||
|
right: 50rpx; |
||||||
|
} |
||||||
|
.title { |
||||||
|
margin: 150rpx 20rpx 30rpx; |
||||||
|
font-size: 30rpx; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.types { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
.item { |
||||||
|
width: calc((100% - 80rpx) / 3); |
||||||
|
margin: 10rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
line-height: 3; |
||||||
|
text-align: center; |
||||||
|
color: #1f1f1f; |
||||||
|
background-color: #dbebff; |
||||||
|
border-radius: 2px; |
||||||
|
&.active { |
||||||
|
color: #fff; |
||||||
|
background-color: #007EFF; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,83 @@ |
|||||||
|
<template> |
||||||
|
<view class="wrap"> |
||||||
|
<view class="title">{{ form.title }}</view> |
||||||
|
|
||||||
|
<view class="text">{{ form.applicableMajor }}</view> |
||||||
|
<view class="text">{{ form.schemeIntroduction }}</view> |
||||||
|
<view class="text">{{ form.product }}</view> |
||||||
|
<template v-if="form.fileName"> |
||||||
|
<view class="file">{{ form.fileName }}</view> |
||||||
|
<view class="detail" @click.stop="download">下载</view> |
||||||
|
</template> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { schemeFindById } from '@/apis/modules/article.js' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
id: '', |
||||||
|
form: { |
||||||
|
totalBrowsing: '' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
const pages = getCurrentPages() |
||||||
|
const { options } = pages[pages.length - 1] |
||||||
|
this.id = options.id |
||||||
|
this.getInfo() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取详情 |
||||||
|
getInfo() { |
||||||
|
uni.showLoading({ |
||||||
|
title: '加载中' |
||||||
|
}) |
||||||
|
schemeFindById(this.id).then(({ data }) => { |
||||||
|
if (data.productList) data.product = data.productList.map(e => e.productName).join('、') |
||||||
|
this.form = data |
||||||
|
uni.hideLoading() |
||||||
|
}).catch(e => { |
||||||
|
uni.hideLoading() |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 下载方案文件 |
||||||
|
download() { |
||||||
|
uni.setStorageSync('files', { |
||||||
|
copyWriting: this.form.title, |
||||||
|
fileName: [this.form.fileName], |
||||||
|
urls: [this.form.schemeFile] |
||||||
|
}) |
||||||
|
this.$util.to(`/team/send/send`) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.wrap { |
||||||
|
padding: 30rpx; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
.title { |
||||||
|
font-size: 34rpx; |
||||||
|
font-weight: 600; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.text { |
||||||
|
margin: 20rpx 0; |
||||||
|
font-size: 28rpx; |
||||||
|
line-height: 1.6; |
||||||
|
} |
||||||
|
.file { |
||||||
|
margin: 20rpx 0; |
||||||
|
font-size: 26rpx; |
||||||
|
word-break: break-all; |
||||||
|
} |
||||||
|
.detail { |
||||||
|
font-size: 30rpx; |
||||||
|
color: #1f83ff; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,10 @@ |
|||||||
|
## 0.2.1(2022-05-09) |
||||||
|
- 修复 content 为空时仍然弹出的bug |
||||||
|
## 0.2.0(2022-05-07) |
||||||
|
**注意:破坏性更新** |
||||||
|
- 更新 text 属性变更为 content |
||||||
|
- 更新 移除 width 属性 |
||||||
|
## 0.1.1(2022-04-27) |
||||||
|
- 修复 组件根 text 嵌套组件 warning |
||||||
|
## 0.1.0(2022-04-21) |
||||||
|
- 初始化 |
@ -0,0 +1,70 @@ |
|||||||
|
<template> |
||||||
|
<view class="uni-tooltip"> |
||||||
|
<slot></slot> |
||||||
|
<view v-if="content || $slots.content" class="uni-tooltip-popup"> |
||||||
|
<slot name="content"> |
||||||
|
{{content}} |
||||||
|
</slot> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
|
||||||
|
<script> |
||||||
|
/** |
||||||
|
* Tooltip 提示文字 |
||||||
|
* @description 常用于展示鼠标 hover 时的提示信息。 |
||||||
|
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-tooltip |
||||||
|
* @property {String} content 弹出层显示的内容 |
||||||
|
* @property {String} placement出现位置, 目前只支持 left |
||||||
|
*/ |
||||||
|
|
||||||
|
|
||||||
|
export default { |
||||||
|
name: "uni-tooltip", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
content: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
|
||||||
|
placement: { |
||||||
|
type: String, |
||||||
|
default: 'bottom' |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
.uni-tooltip { |
||||||
|
position: relative; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.uni-tooltip-popup { |
||||||
|
z-index: 1000; |
||||||
|
display: none; |
||||||
|
position: absolute; |
||||||
|
top: 40rpx; |
||||||
|
left: 0; |
||||||
|
max-width: 90%; |
||||||
|
background-color: #333; |
||||||
|
border-radius: 8px; |
||||||
|
color: #fff; |
||||||
|
font-size: 12px; |
||||||
|
text-align: left; |
||||||
|
line-height: 16px; |
||||||
|
padding: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.uni-tooltip:hover .uni-tooltip-popup { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,83 @@ |
|||||||
|
{ |
||||||
|
"id": "uni-tooltip", |
||||||
|
"displayName": "uni-tooltip", |
||||||
|
"version": "0.2.1", |
||||||
|
"description": "Tooltip 提示文字", |
||||||
|
"keywords": [ |
||||||
|
"uni-tooltip", |
||||||
|
"uni-ui", |
||||||
|
"tooltip", |
||||||
|
"tip", |
||||||
|
"文字提示" |
||||||
|
], |
||||||
|
"repository": "", |
||||||
|
"engines": { |
||||||
|
}, |
||||||
|
"dcloudext": { |
||||||
|
"category": [ |
||||||
|
"前端组件", |
||||||
|
"通用组件" |
||||||
|
], |
||||||
|
"sale": { |
||||||
|
"regular": { |
||||||
|
"price": "0.00" |
||||||
|
}, |
||||||
|
"sourcecode": { |
||||||
|
"price": "0.00" |
||||||
|
} |
||||||
|
}, |
||||||
|
"contact": { |
||||||
|
"qq": "" |
||||||
|
}, |
||||||
|
"declaration": { |
||||||
|
"ads": "无 ", |
||||||
|
"data": "无", |
||||||
|
"permissions": "无" |
||||||
|
}, |
||||||
|
"npmurl": "" |
||||||
|
}, |
||||||
|
"uni_modules": { |
||||||
|
"dependencies": [], |
||||||
|
"encrypt": [], |
||||||
|
"platforms": { |
||||||
|
"cloud": { |
||||||
|
"tcb": "y", |
||||||
|
"aliyun": "y" |
||||||
|
}, |
||||||
|
"client": { |
||||||
|
"Vue": { |
||||||
|
"vue2": "y", |
||||||
|
"vue3": "y" |
||||||
|
}, |
||||||
|
"App": { |
||||||
|
"app-vue": "y", |
||||||
|
"app-nvue": "u" |
||||||
|
}, |
||||||
|
"H5-mobile": { |
||||||
|
"Safari": "y", |
||||||
|
"Android Browser": "y", |
||||||
|
"微信浏览器(Android)": "y", |
||||||
|
"QQ浏览器(Android)": "y" |
||||||
|
}, |
||||||
|
"H5-pc": { |
||||||
|
"Chrome": "y", |
||||||
|
"IE": "y", |
||||||
|
"Edge": "y", |
||||||
|
"Firefox": "y", |
||||||
|
"Safari": "y" |
||||||
|
}, |
||||||
|
"小程序": { |
||||||
|
"微信": "y", |
||||||
|
"阿里": "u", |
||||||
|
"百度": "u", |
||||||
|
"字节跳动": "u", |
||||||
|
"QQ": "u" |
||||||
|
}, |
||||||
|
"快应用": { |
||||||
|
"华为": "u", |
||||||
|
"联盟": "u" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,8 @@ |
|||||||
|
## Badge 数字角标 |
||||||
|
> **组件名:uni-tooltip** |
||||||
|
> 代码块: `uTooltip` |
||||||
|
|
||||||
|
数字角标一般和其它控件(列表、9宫格等)配合使用,用于进行数量提示,默认为实心灰色背景, |
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-tooltip) |
||||||
|
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 |
Loading…
Reference in new issue