mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-11 12:49:30 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -0,0 +1,210 @@
|
||||
|
||||
<template>
|
||||
<view class="tm-helpTips relative d-inline-block">
|
||||
<view @click.stop="toogle">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view v-show="showMenu" class="tm-menu-block absolute" :class="[direction,mentDirection]">
|
||||
<view v-if="direction==='bottom'" class=" px-32" :class="[tipFangx]">
|
||||
<text class="iconfont icon-sort-up " style="font-size: 46upx;line-height: 0.5;margin-bottom: -4upx;"
|
||||
:class="[!black_tmeme?`text-${color_tmeme} text`:'',black_tmeme?'text-grey-darken-3':'']"></text>
|
||||
</view>
|
||||
<view :class="[color_tmeme,`shadow-${color_tmeme}-1`,black_tmeme?'bk':'']" class=" pa-16 round-2 text-align-left flex-top-start" >
|
||||
<view>
|
||||
<text class="text-size-s">{{label}}</text>
|
||||
</view>
|
||||
<view @click.stop="toogle" class=" text-align-center flex-shrink pl-32">
|
||||
<tm-icons :black="black_tmeme" :size="24" :color="iconColor" dense name="icon-times"></tm-icons>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view v-if="direction==='top'" class=" px-32" :class="[tipFangx]">
|
||||
<text class="iconfont icon-sort-down " style="font-size: 46upx;line-height: 0.5;margin-top: -4upx;"
|
||||
:class="[!black_tmeme?`text-${color_tmeme} text`:'',black_tmeme?'text-grey-darken-3':'']"></text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<tm-maskFlow :blur='false' v-model="showMenu" bgColor='none'></tm-maskFlow>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 弹出菜单
|
||||
* @property {Boolean} black = [true|false] 默认:false,暗黑模式。
|
||||
* @property {Boolean} show = [true|false] 默认:false,始终显示菜单。
|
||||
* @property {String} icon-color = [] 默认:white,关闭图标颜色主题名称
|
||||
* @property {String} color = [] 默认:primary,主题背景色
|
||||
* @property {String} tip-direction = [left | center | right] 默认:center,指示三角形的方向
|
||||
* @property {String} direction = [top | bottom] 默认:bottom,弹出方向，top | bottom
|
||||
* @property {String} ment-direction = [left | center | right] 默认:center,弹出在父组件上的对齐方式，默认居中。可选left,right,center
|
||||
* @property {String} label = [] 默认:[],需要显示的内容
|
||||
* @property {String} rang-key = [] 默认:title,菜单列表数组对象时，需要提供key
|
||||
* @property {Function} change 点击列表项目时触发，返回：{index:index,value:item}
|
||||
* @example tm-helpTips direction="top" label="每点击一次增加一个积分哦,你知道了吗？">
|
||||
<tm-icons name="icon-question-circle"></tm-icons>
|
||||
</tm-helpTips>
|
||||
*
|
||||
*/
|
||||
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
|
||||
import tmMaskFlow from "@/tm-vuetify/components/tm-maskFlow/tm-maskFlow.vue"
|
||||
export default {
|
||||
components:{tmIcons,tmMaskFlow},
|
||||
name: "tm-helpTips",
|
||||
props: {
|
||||
black: {
|
||||
type:Boolean | String,
|
||||
default:null
|
||||
},
|
||||
// 三角形的方向。left | center | right
|
||||
tipDirection: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// 始终显示菜单
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 关闭图标颜色主题名称
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: 'white'
|
||||
},
|
||||
// 主题色
|
||||
color: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
// 弹出方向，top | bottom
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
// 弹出在父组件上的对齐方式，默认居中。可选left,right,center
|
||||
mentDirection: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
// 如果list提供的是对象数组，需要提供对象的key。如果是string对象，无需提供。默认title
|
||||
rangKey: {
|
||||
type: String,
|
||||
default: 'title'
|
||||
},
|
||||
// 跟随主题色的改变而改变。
|
||||
fllowTheme:{
|
||||
type:Boolean|String,
|
||||
default:true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
black_tmeme: function() {
|
||||
if (this.black !== null) return this.black;
|
||||
return this.$tm.vx.state().tmVuetify.black;
|
||||
},
|
||||
color_tmeme:function(){
|
||||
if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
|
||||
return this.$tm.vx.state().tmVuetify.color;
|
||||
}
|
||||
return this.color;
|
||||
},
|
||||
tipFangx: function() {
|
||||
if (this.tipDirection === 'left') return 'flex-start ';
|
||||
if (this.tipDirection === 'center') return 'flex-center';
|
||||
if (this.tipDirection === 'right') return 'flex-end ';
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showMenu: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.showMenu = this.show;
|
||||
},
|
||||
methods: {
|
||||
toogle() {
|
||||
if (!this.label || this.label.length == 0) return;
|
||||
this.showMenu = !this.showMenu;
|
||||
this.$emit("update:show",this.showMenu)
|
||||
},
|
||||
open() {
|
||||
if (!this.label || this.label.length == 0) return;
|
||||
this.showMenu = true;
|
||||
this.$emit("update:show",true)
|
||||
},
|
||||
off() {
|
||||
if (!this.label || this.label.length == 0) return;
|
||||
this.showMenu = false;
|
||||
this.$emit("update:show",false)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tm-helpTips {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
.tm-menu-block {
|
||||
z-index: 502;
|
||||
width: 320upx;
|
||||
|
||||
|
||||
&.bottom {
|
||||
top: 100%;
|
||||
bottom: inherit;
|
||||
animation: roteScale 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
&.top {
|
||||
top: inherit;
|
||||
bottom: 100%;
|
||||
animation: roteScaleTop 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
&.center {
|
||||
left: calc(50% - 160upx);
|
||||
}
|
||||
|
||||
&.left {
|
||||
|
||||
left: 0upx;
|
||||
}
|
||||
|
||||
&.right {
|
||||
right: 0upx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes roteScale{
|
||||
0%{
|
||||
transform: scale(0.9) translateY(-20rpx);
|
||||
opacity: 0;
|
||||
}
|
||||
100%{
|
||||
transform: scale(1) translateY(0rpx);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes roteScaleTop{
|
||||
0%{
|
||||
transform: scale(0.9) translateY(20rpx);
|
||||
opacity: 0;
|
||||
}
|
||||
100%{
|
||||
transform: scale(1) translateY(0rpx);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user