parent
d7399fc1be
commit
d43f57d419
@ -0,0 +1,144 @@ |
||||
<template> |
||||
<view class="htz-rate-main"> |
||||
<template v-for="(item,index) in count"> |
||||
<image @click="checkItem((index+1))" class="htz-rate-image" :key="index" :style="{'width':size+'rpx','height':size+'rpx','padding-right':gutter+'rpx'}" |
||||
:src="checkedVal<(index+1)?defImgSrc:selImgSrc"></image> |
||||
</template> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'htz-rate', |
||||
props: { |
||||
value: { //受控分值 |
||||
type: Number, |
||||
default: 0, |
||||
}, |
||||
count: { //数量 |
||||
type: Number, |
||||
default: 5, |
||||
}, |
||||
size: { //图标大小 |
||||
type: Number, |
||||
default: 50, |
||||
}, |
||||
gutter: { //图标间距 |
||||
type: Number, |
||||
default: 15, |
||||
}, |
||||
type: { //内置类型 |
||||
type: Number, |
||||
default: 0, |
||||
}, |
||||
disHref: { //自定义默认图片 |
||||
type: String, |
||||
default: '', |
||||
}, |
||||
checkedHref: { //自定义选中图片 |
||||
type: String, |
||||
default: '', |
||||
}, |
||||
readonly: { //是否只读 |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
ImgData: ['/static/htz-rate/rate1_0.png', '/static/htz-rate/rate2_0.png', |
||||
'/static/htz-rate/rate3_0.png', '/static/htz-rate/rate4_0.png', '/static/htz-rate/rate5_0.png', |
||||
'/static/htz-rate/rate6_0.png' |
||||
], |
||||
defImgSrc: '', |
||||
selImgSrc: '', |
||||
checkedVal: 0, |
||||
} |
||||
}, |
||||
mounted: function() { |
||||
this.$nextTick(function() { |
||||
this.checkedVal = this.value; |
||||
if (this.disHref != '') { |
||||
this.defImgSrc = this.disHref; |
||||
this.selImgSrc = this.checkedHref; |
||||
} else { |
||||
//if (this.type != undefined) { |
||||
this.defImgSrc = this.ImgData[this.type]; |
||||
this.selImgSrc = this.ImgData[this.type].replace('_0', '_1'); |
||||
//} |
||||
} |
||||
|
||||
}); |
||||
}, |
||||
watch: { |
||||
value(val, oldVal) { |
||||
this.checkedVal = this.value; |
||||
}, |
||||
}, |
||||
methods: { |
||||
checkItem(index) { |
||||
if (!this.readonly) { |
||||
this.checkedVal = index; |
||||
this.$emit("input", index); |
||||
this.$emit("change", index); |
||||
} |
||||
}, |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.htz-rate-main { |
||||
display: flex; |
||||
justify-content: space-around; |
||||
width: 100%; |
||||
} |
||||
|
||||
.htz-rate-image{ |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
|
||||
.htz-image-upload-list { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
.htz-image-upload-Item { |
||||
width: 160rpx; |
||||
height: 160rpx; |
||||
margin: 13rpx; |
||||
border-radius: 10rpx; |
||||
position: relative; |
||||
} |
||||
|
||||
.htz-image-upload-Item image { |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 10rpx; |
||||
} |
||||
|
||||
.htz-image-upload-Item-add { |
||||
font-size: 105rpx; |
||||
/* line-height: 160rpx; */ |
||||
text-align: center; |
||||
border: 1px dashed #d9d9d9; |
||||
color: #d9d9d9; |
||||
} |
||||
|
||||
.htz-image-upload-Item-del { |
||||
background-color: #f5222d; |
||||
font-size: 24rpx; |
||||
position: absolute; |
||||
width: 35rpx; |
||||
height: 35rpx; |
||||
line-height: 35rpx; |
||||
text-align: center; |
||||
top: 0; |
||||
right: 0; |
||||
z-index: 100; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,13 @@ |
||||
# amap-wx |
||||
高德地图微信小程序SDK |
||||
## 安装 |
||||
``` |
||||
npm install amap-wx --save |
||||
``` |
||||
## 使用 |
||||
```js |
||||
var amapFile = require('amap-wx') |
||||
var myAmapFun = new amapFile.AMapWX({key:'高德Key'}) |
||||
``` |
||||
## 其他API |
||||
参考[高德地图微信小程序SDK文档](http://lbs.amap.com/api/wx/summary/) |
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
@ -0,0 +1,277 @@ |
||||
<template> |
||||
<view class="pagesa"> |
||||
<view class="sencie-name">衡水老白干酒文化旅游景区满意度调查问卷</view> |
||||
<view class="content"> |
||||
<view class="zunjing">尊敬的领导：</view> |
||||
<view class="content-text"> |
||||
为了解您对景区以及此次行程的满意度情况，以便为您提供更优质的服务，特邀您填写这份问卷。您的宝贵意见对我们非常重要，本次问卷采用不记名调查，请如实填写，感谢您的帮助! |
||||
</view> |
||||
<view class="atention atentions"> |
||||
<span class="red">*</span> |
||||
为必选项 |
||||
</view> |
||||
<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData"> |
||||
<view class="atention atention-list"> |
||||
<view class="at-left"> |
||||
<span class="red">*</span> |
||||
1、您对景区的总体印象如何？ |
||||
</view> |
||||
<view class="at-right">{{ valiFormData.star1 | formDataRate }}</view> |
||||
<view class="question-rate"> |
||||
<htz-rate class="full-witdth" v-model="valiFormData.star1"></htz-rate> |
||||
</view> |
||||
</view> |
||||
<view class="atention atention-list"> |
||||
<view class="at-left"> |
||||
<span class="red">*</span> |
||||
2、您觉得景区的导游服务如何？ |
||||
</view> |
||||
<view class="at-right">{{ valiFormData.star2 | formDataPj }}</view> |
||||
<view class="question-rate"> |
||||
<htz-rate class="full-witdth" v-model="valiFormData.star2"></htz-rate> |
||||
</view> |
||||
</view> |
||||
<view class="atention atention-list"> |
||||
<view class="at-left"> |
||||
<span class="red">*</span> |
||||
3、您对景区环境设施是否满意? |
||||
</view> |
||||
<view class="at-right">{{ valiFormData.star3 | formDataRate }}</view> |
||||
<view class="question-rate question-rates"> |
||||
<htz-rate class="full-witdth" v-model="valiFormData.star3"></htz-rate> |
||||
</view> |
||||
</view> |
||||
<view class="atention atention-list"> |
||||
<span class="red">*</span> |
||||
4、您是否有意愿再次来景区或向家人朋友进行推荐? |
||||
<view class="question-rate"> |
||||
<view class="uni-px-5 uni-pb-5"> |
||||
<uni-data-checkbox class="radio-type" v-model="valiFormData.radio" :localdata="yesOrNo"></uni-data-checkbox> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="atention atention-list"> |
||||
5、对于衡水老白干酒文化旅游景区相关工作，您有什么意见和建议。 |
||||
<view class="question-rate"> |
||||
<textarea class="text-area" auto-height v-model="valiFormData.remark" /> |
||||
</view> |
||||
</view> |
||||
</uni-forms> |
||||
<button type="primary" @click="submit('valiForm')">提交</button> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import htzRate from '@/components/htz-rate/htz-rate.vue'; |
||||
export default { |
||||
components: { |
||||
htzRate |
||||
}, |
||||
data() { |
||||
return { |
||||
valiFormData: { |
||||
star1: 5, //总体印象 |
||||
star2: 5, //导游服务 |
||||
star3: 5, //价环境设施 |
||||
radio: 0, //是否推荐 |
||||
remark: '' //备注 |
||||
}, |
||||
rules: { |
||||
star1: { |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
errorMessage: '请评价总体印象' |
||||
} |
||||
] |
||||
}, |
||||
star2: { |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
errorMessage: '请评价导游服务' |
||||
} |
||||
] |
||||
}, |
||||
star3: { |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
errorMessage: '请评价环境设施' |
||||
} |
||||
] |
||||
}, |
||||
star4: { |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
errorMessage: '请选择是否意愿推荐' |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
yesOrNo: [ |
||||
{ |
||||
text: '是', |
||||
value: 0 |
||||
}, |
||||
{ |
||||
text: '否', |
||||
value: 1 |
||||
} |
||||
] |
||||
}; |
||||
}, |
||||
filters: { |
||||
formDataRate(value) { |
||||
switch (value) { |
||||
case 1: |
||||
return '不满意'; |
||||
break; |
||||
case 2: |
||||
return '一般'; |
||||
break; |
||||
case 3: |
||||
return '较满意'; |
||||
break; |
||||
case 4: |
||||
return '满意'; |
||||
break; |
||||
case 5: |
||||
return '非常满意'; |
||||
break; |
||||
} |
||||
}, |
||||
formDataPj(value) { |
||||
switch (value) { |
||||
case 1: |
||||
return '非常差'; |
||||
break; |
||||
case 2: |
||||
return '差'; |
||||
break; |
||||
case 3: |
||||
return '一般'; |
||||
break; |
||||
case 4: |
||||
return '好'; |
||||
break; |
||||
case 5: |
||||
return '非常好'; |
||||
break; |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
submit(ref) { |
||||
let this_ =this |
||||
this.$refs[ref] |
||||
.validate() |
||||
.then((res) => { |
||||
console.log('success', res); |
||||
uni.request({ |
||||
url:this_.$config.ROOTPATH+'/mobile/survey', |
||||
data:this_.valiFormData, |
||||
method:'POST', |
||||
success(res) { |
||||
console.log(res) |
||||
uni.showToast({ |
||||
title: `提交成功` |
||||
}); |
||||
setTimeout(()=>{ |
||||
uni.navigateBack() |
||||
},2000) |
||||
}, |
||||
fail(err) { |
||||
console.log(err) |
||||
} |
||||
}) |
||||
|
||||
}) |
||||
.catch((err) => { |
||||
console.log('err', err); |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.sencie-name { |
||||
color: #0281ff; |
||||
text-align: center; |
||||
width: 58vw; |
||||
margin: 0 auto; |
||||
margin-top: 40rpx; |
||||
font-weight: 700; |
||||
font-size: 36rpx; |
||||
} |
||||
.content { |
||||
margin-top: 40rpx; |
||||
padding: 0 40rpx; |
||||
color: #2f2f2f; |
||||
} |
||||
.zunjing { |
||||
margin-bottom: 10rpx; |
||||
} |
||||
.content-text { |
||||
text-indent: 2em; |
||||
} |
||||
.atention { |
||||
margin-top: 10rpx; |
||||
} |
||||
.atentions { |
||||
font-style: italic; |
||||
margin-left: 20rpx; |
||||
font-size: 24rpx; |
||||
} |
||||
.red { |
||||
color: #ff0000; |
||||
} |
||||
.atention-list { |
||||
margin-top: 80rpx; |
||||
} |
||||
.question-rate { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-top: 42rpx; |
||||
padding-bottom: 10rpx; |
||||
border-bottom: solid 1rpx #d6d6d6; |
||||
} |
||||
.text-area { |
||||
height: 50rpx !important; |
||||
padding: 10rpx 15rpx; |
||||
width: 100%; |
||||
background: #eee; |
||||
margin-bottom: 40rpx; |
||||
} |
||||
.pagesa { |
||||
padding-bottom: 70rpx; |
||||
} |
||||
::v-deep.radio-type .checklist-group { |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
::v-deep.radio-type .checklist-group .checklist-box { |
||||
padding: 0 10vw 0 20rpx; |
||||
height: 70rpx; |
||||
width: 100%; |
||||
text-align: center; |
||||
background: #eee; |
||||
} |
||||
.question-rates { |
||||
width: 100%; |
||||
} |
||||
.full-witdth { |
||||
width: 100%; |
||||
} |
||||
.at-left, |
||||
.at-right { |
||||
display: inline-flex; |
||||
} |
||||
.at-right { |
||||
float: right; |
||||
font-size: 28rpx; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,24 @@ |
||||
## 1.0.11（2023-01-29） |
||||
优化点击，加入点击自己再次点击也会关闭 |
||||
## 1.0.10（2023-01-17） |
||||
优化 |
||||
## 1.0.9（2023-01-17） |
||||
增加注释 |
||||
## 1.0.8（2022-08-18） |
||||
优化细节 |
||||
## 1.0.67（2022-05-09） |
||||
修复安卓报错 |
||||
## 1.0.6（2022-05-07） |
||||
修改默认展示 |
||||
## 1.0.5（2022-04-28） |
||||
进行优化 |
||||
## 1.0.4（2022-04-27） |
||||
进行优化 |
||||
## 1.0.3（2022-04-25） |
||||
去掉多余得注释 |
||||
## 1.0.2（2022-04-25） |
||||
增加自定义主题颜色 |
||||
## 1.0.1（2022-04-25） |
||||
进行优化显示 |
||||
## 1.0.0（2022-04-24） |
||||
初始化 |
||||
@ -0,0 +1,290 @@ |
||||
<template> |
||||
<view class="zb-tooltip" :style="{ |
||||
'--theme-bg-color':color |
||||
}"> |
||||
<view class="zb_tooltip_content" @click.stop="handleClick"> |
||||
<slot></slot> |
||||
<view class="zb_tooltip__popper" |
||||
@click.stop="()=>{}" |
||||
:style="[style,{ |
||||
visibility:isShow?'visible':'hidden', |
||||
color:color==='white'?'':'#fff', |
||||
boxShadow: color==='white'?'0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d':'' |
||||
}]" > |
||||
<slot name="content">{{content}}</slot> |
||||
<view class="zb_popper__icon" :style="[arrowStyle]" :class="[{ |
||||
'zb_popper__up':placement.indexOf('bottom')===0, |
||||
'zb_popper__arrow':placement.indexOf('top')===0, |
||||
'zb_popper__right':placement.indexOf('right')===0, |
||||
'zb_popper__left':placement.indexOf('left')===0, |
||||
}]"> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props:{ |
||||
visible:Boolean, |
||||
color:{ |
||||
type:String, |
||||
default:'#303133', |
||||
}, |
||||
placement:{ |
||||
type:String, |
||||
default:'top', |
||||
}, |
||||
content:{ |
||||
type:String, |
||||
default:'' |
||||
}, |
||||
show:{ |
||||
type:Boolean, |
||||
default:false, |
||||
} |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
isShow :this.visible, |
||||
title: 'Hello', |
||||
arrowLeft:0, |
||||
query:null, |
||||
style:{ |
||||
|
||||
}, |
||||
arrowStyle:{} |
||||
} |
||||
}, |
||||
onLoad() { |
||||
|
||||
}, |
||||
watch:{ |
||||
isShow:{ |
||||
handler(val){ |
||||
this.$emit('update:visible', val) |
||||
}, |
||||
immediate:true, |
||||
}, |
||||
visible:{ |
||||
handler(val){ |
||||
if(val){ |
||||
this.$nextTick(()=>{ |
||||
this.getPosition() |
||||
}) |
||||
} |
||||
this.isShow = val |
||||
}, |
||||
immediate:true, |
||||
} |
||||
}, |
||||
mounted(){ |
||||
// #ifdef H5 |
||||
window.addEventListener('click',()=>{ |
||||
this.isShow = false |
||||
}) |
||||
// #endif |
||||
this.getPosition() |
||||
}, |
||||
methods: { |
||||
close(){ |
||||
this.isShow = false |
||||
}, |
||||
fixedWrap(){ |
||||
this.isShow = false |
||||
}, |
||||
async handleClick(){ |
||||
if(this.isShow){ |
||||
return this.isShow = false |
||||
} |
||||
await this.getPosition() |
||||
this.isShow = true |
||||
}, |
||||
getPosition(){ |
||||
return new Promise((resolve) => { |
||||
uni.createSelectorQuery().in(this).selectAll('.zb_tooltip_content,.zb_tooltip__popper').boundingClientRect(async (data)=>{ |
||||
let {left,bottom,right,top,width,height} = data[0] |
||||
let obj1 = data[1] |
||||
let objStyle = {} |
||||
let objStyle1 = {} |
||||
switch(this.placement){ |
||||
case 'top': |
||||
if(obj1.width > width){ |
||||
objStyle.left = `-${(obj1.width - width)/2}px` |
||||
}else{ |
||||
objStyle.left = `${Math.abs(obj1.width - width)/2}px` |
||||
} |
||||
|
||||
objStyle.bottom =`${height+8}px` |
||||
objStyle1.left = (obj1.width/2-6)+'px' |
||||
break; |
||||
case 'top-start': |
||||
objStyle.left = `0px` |
||||
objStyle.bottom =`${height+8}px` |
||||
break; |
||||
case 'top-end': |
||||
objStyle.right = `0px` |
||||
objStyle.bottom =`${height+8}px` |
||||
objStyle1.right=`8px` |
||||
break; |
||||
case 'bottom': |
||||
if(obj1.width>width){ |
||||
objStyle.left = `-${(obj1.width - width)/2}px` |
||||
}else{ |
||||
objStyle.left = `${Math.abs(obj1.width - width)/2}px` |
||||
} |
||||
objStyle.top =`${height+8}px` |
||||
objStyle1.left = (obj1.width/2-6)+'px' |
||||
break; |
||||
case 'bottom-start': |
||||
objStyle.left = `0px` |
||||
objStyle.top =`${height+8}px` |
||||
objStyle1.left = `8px` |
||||
break; |
||||
|
||||
case 'bottom-end': |
||||
objStyle.right = `0px` |
||||
objStyle.top =`${height+8}px` |
||||
objStyle1.right = `8px` |
||||
break; |
||||
|
||||
case 'right': |
||||
objStyle.left = `${width+8}px` |
||||
if(obj1.height>height){ |
||||
objStyle.top =`-${(obj1.height - height)/2}px` |
||||
}else{ |
||||
objStyle.top =`${Math.abs((obj1.height - height)/2)}px` |
||||
} |
||||
|
||||
objStyle1.top = `${obj1.height/2-6}px` |
||||
break; |
||||
case 'right-start': |
||||
objStyle.left = `${width+8}px` |
||||
objStyle.top =`0px` |
||||
objStyle1.top = `8px` |
||||
break; |
||||
|
||||
case 'right-end': |
||||
objStyle.left = `${width+8}px` |
||||
objStyle.bottom =`0px` |
||||
objStyle1.bottom = `8px` |
||||
break; |
||||
|
||||
case 'left': |
||||
objStyle.right = `${width+8}px` |
||||
|
||||
if(obj1.height>height){ |
||||
objStyle.top =`-${(obj1.height - height)/2}px` |
||||
}else{ |
||||
objStyle.top =`${Math.abs((obj1.height - height)/2)}px` |
||||
} |
||||
|
||||
objStyle1.top = `${obj1.height/2-6}px` |
||||
break; |
||||
|
||||
case 'left-start': |
||||
objStyle.right = `${width+8}px` |
||||
objStyle.top =`0px` |
||||
objStyle1.top = `8px` |
||||
break; |
||||
|
||||
case 'left-end': |
||||
objStyle.right = `${width+8}px` |
||||
objStyle.bottom =`0px` |
||||
objStyle1.bottom = `8px` |
||||
break; |
||||
} |
||||
this.style = objStyle |
||||
// 三角形箭头 |
||||
this.arrowStyle = objStyle1 |
||||
resolve() |
||||
}).exec() |
||||
}) |
||||
|
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
$theme-bg-color: var(--theme-bg-color); |
||||
|
||||
.zb-tooltip{ |
||||
position: relative; |
||||
|
||||
} |
||||
.zb_tooltip_content{ |
||||
height: 100%; |
||||
/* float: left; */ |
||||
position: relative; |
||||
display: inline-block; |
||||
|
||||
// display: flex; |
||||
// flex-direction: row; |
||||
// align-items: center; |
||||
/* overflow: hidden; */ |
||||
} |
||||
.zb_tooltip__popper{ |
||||
/* transform-origin: center top; */ |
||||
background: $theme-bg-color; |
||||
|
||||
visibility: hidden; |
||||
// color:'#fff'; |
||||
position: absolute; |
||||
border-radius: 4px; |
||||
font-size: 12px; |
||||
padding: 10px; |
||||
min-width: 10px; |
||||
word-wrap: break-word; |
||||
display: inline-block; |
||||
white-space: nowrap; |
||||
z-index:9; |
||||
} |
||||
.zb_popper__icon{ |
||||
width: 0; |
||||
height: 0; |
||||
z-index:9; |
||||
position: absolute; |
||||
} |
||||
.zb_popper__arrow{ |
||||
bottom: -5px; |
||||
/* transform-origin: center top; */ |
||||
border-left: 6px solid transparent; |
||||
border-right: 6px solid transparent; |
||||
border-top: 6px solid $theme-bg-color; |
||||
|
||||
} |
||||
.zb_popper__right{ |
||||
border-top: 6px solid transparent; |
||||
border-bottom: 6px solid transparent; |
||||
border-right: 6px solid $theme-bg-color; |
||||
left:-5px; |
||||
} |
||||
|
||||
.zb_popper__left{ |
||||
border-top: 6px solid transparent; |
||||
border-bottom: 6px solid transparent; |
||||
border-left: 6px solid $theme-bg-color; |
||||
right:-5px; |
||||
} |
||||
|
||||
.zb_popper__up{ |
||||
border-left: 6px solid transparent; |
||||
border-right: 6px solid transparent; |
||||
border-bottom: 6px solid $theme-bg-color; |
||||
top:-5px; |
||||
} |
||||
.fixed{ |
||||
position: absolute;width: 100vw; |
||||
height: 100vh; |
||||
position: fixed; |
||||
left: 0; |
||||
top: 0; |
||||
pointer-events: auto; |
||||
background: red; |
||||
z-index:-1; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,83 @@ |
||||
{ |
||||
"id": "zb-tooltip", |
||||
"displayName": "zb-tooltip （文字提示气泡框）", |
||||
"version": "1.0.11", |
||||
"description": "简单的文字提示气泡框,可以自定义皮肤颜色", |
||||
"keywords": [ |
||||
"tooltip", |
||||
"tip", |
||||
"文字提示", |
||||
"气泡框", |
||||
"自定义皮肤颜色、Popover" |
||||
], |
||||
"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", |
||||
"阿里": "y", |
||||
"百度": "y", |
||||
"字节跳动": "y", |
||||
"QQ": "y" |
||||
}, |
||||
"快应用": { |
||||
"华为": "y", |
||||
"联盟": "y" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,30 @@ |
||||
## 介绍 |
||||
基于uni-app开发的一个普通的提示组件，功能点击提示 |
||||
|
||||
|
||||
## 友情链接 |
||||
#### vue-admin-perfect —— [企业级、通用型中后台前端解决方案 预览地址](http://182.61.5.190:8889/) |
||||
#### vue-admin-perfect —— [企业级、通用型中后台前端解决方案（基于vue3.0+TS+Element-Plus 最新版，同时支持电脑，手机，平板)](https://github.com/zouzhibin/vue-admin-perfect) |
||||
|
||||
|
||||
## Tooltip 属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |
||||
| ------ | ------ | ------ | ------ | ------ | |
||||
| visible | 是否显示 tooltip，支持 .sync 修饰符 | Boolean |visible.sync | false | |
||||
| content | 显示的内容，也可以通过 slot#content | String |-- | ' ' | |
||||
| color | 自定义主题颜色| String |'#303133' | '#303133' | |
||||
| placement | Tooltip 的出现位置 | String |top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | top | |
||||
|
||||
|
||||
## Slot 插槽 |
||||
| 参数 | 说明 | |
||||
| ------ | ------ | |
||||
| content | 显示提示框得内容 | |
||||
|
||||
|
||||
``` |
||||
因为uniapp 中小程序中没有window对象，需手动调用 关闭 |
||||
第一种办法关闭：this.$refs.tooltip.close() |
||||
第二种办法关闭：visible.sync = false |
||||
|
||||
``` |
||||
Loading…
Reference in new issue