parent
d2e07d8a6c
commit
63ad31bb3c
25 changed files with 90 additions and 1655 deletions
@ -1,130 +0,0 @@ |
||||
<template> |
||||
<view |
||||
class="u-mask" |
||||
hover-stop-propagation |
||||
:style="[maskStyle, zoomStyle]" |
||||
@tap="click" |
||||
@touchmove.stop.prevent="() => {}" |
||||
:class="{ |
||||
'u-mask-zoom': zoom, |
||||
'u-mask-show': show, |
||||
}" |
||||
> |
||||
<slot /> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
/** |
||||
* mask 遮罩 |
||||
* @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景 |
||||
* @tutorial https://www.uviewui.com/components/mask.html |
||||
* @property {Boolean} show 是否显示遮罩（默认false） |
||||
* @property {String Number} z-index z-index 层级（默认1070） |
||||
* @property {Object} custom-style 自定义样式对象，见上方说明 |
||||
* @property {String Number} duration 动画时长，单位毫秒（默认300） |
||||
* @property {Boolean} zoom 是否使用scale对这招进行缩放（默认true） |
||||
* @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true） |
||||
* @event {Function} click mask-click-able为true时，点击遮罩发送此事件 |
||||
* @example <u-mask :show="show" @click="show = false"></u-mask> |
||||
*/ |
||||
export default { |
||||
name: "u-mask", |
||||
props: { |
||||
// 是否显示遮罩 |
||||
show: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
// 层级z-index |
||||
zIndex: { |
||||
type: [Number, String], |
||||
default: "", |
||||
}, |
||||
// 用户自定义样式 |
||||
customStyle: { |
||||
type: Object, |
||||
default() { |
||||
return {}; |
||||
}, |
||||
}, |
||||
// 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放 |
||||
zoom: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
// 遮罩的过渡时间，单位为ms |
||||
duration: { |
||||
type: [Number, String], |
||||
default: 300, |
||||
}, |
||||
// 是否可以通过点击遮罩进行关闭 |
||||
maskClickAble: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
zoomStyle: { |
||||
transform: "", |
||||
}, |
||||
scale: "scale(1.2, 1.2)", |
||||
}; |
||||
}, |
||||
watch: { |
||||
show(n) { |
||||
if (n && this.zoom) { |
||||
// 当展示遮罩的时候，设置scale为1，达到缩小(原来为1.2)的效果 |
||||
this.zoomStyle.transform = "scale(1, 1)"; |
||||
} else if (!n && this.zoom) { |
||||
// 当隐藏遮罩的时候，设置scale为1.2，达到放大(因为显示遮罩时已重置为1)的效果 |
||||
this.zoomStyle.transform = this.scale; |
||||
} |
||||
}, |
||||
}, |
||||
computed: { |
||||
maskStyle() { |
||||
let style = {}; |
||||
style.backgroundColor = "rgba(0, 0, 0, 0.6)"; |
||||
if (this.show) |
||||
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.mask; |
||||
else style.zIndex = -1; |
||||
style.transition = `all ${this.duration / 1000}s ease-in-out`; |
||||
// 判断用户传递的对象是否为空，不为空就进行合并 |
||||
if (Object.keys(this.customStyle).length) |
||||
style = { |
||||
...style, |
||||
...this.customStyle, |
||||
}; |
||||
return style; |
||||
}, |
||||
}, |
||||
methods: { |
||||
click() { |
||||
if (!this.maskClickAble) return; |
||||
this.$emit("click"); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.u-mask { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
opacity: 0; |
||||
transition: transform 0.3s; |
||||
} |
||||
|
||||
.u-mask-show { |
||||
opacity: 1; |
||||
} |
||||
|
||||
.u-mask-zoom { |
||||
transform: scale(1.2, 1.2); |
||||
} |
||||
</style> |
||||
@ -1,510 +0,0 @@ |
||||
<template> |
||||
<view |
||||
v-if="visibleSync" |
||||
:style="[ |
||||
customStyle, |
||||
{ |
||||
zIndex: uZindex - 1, |
||||
}, |
||||
]" |
||||
class="u-drawer" |
||||
hover-stop-propagation |
||||
> |
||||
<z-mask |
||||
:duration="duration" |
||||
:custom-style="maskCustomStyle" |
||||
:maskClickAble="maskCloseAble" |
||||
:z-index="uZindex - 2" |
||||
:show="showDrawer && mask" |
||||
@click="maskClick" |
||||
></z-mask> |
||||
<view |
||||
class="u-drawer-content" |
||||
@tap="modeCenterClose(mode)" |
||||
:class="[ |
||||
safeAreaInsetBottom ? 'safe-area-inset-bottom' : '', |
||||
'u-drawer-' + mode, |
||||
showDrawer ? 'u-drawer-content-visible' : '', |
||||
zoom && mode == 'center' ? 'u-animation-zoom' : '', |
||||
]" |
||||
@transitionend="transitionend" |
||||
@touchmove.stop.prevent |
||||
@tap.stop.prevent |
||||
:style="[style]" |
||||
> |
||||
<view |
||||
class="u-mode-center-box" |
||||
@tap.stop.prevent |
||||
@touchmove.stop.prevent |
||||
v-if="mode == 'center'" |
||||
:style="[centerStyle]" |
||||
> |
||||
<u-icon |
||||
@click="close" |
||||
v-if="closeable" |
||||
class="u-close" |
||||
:class="['u-close--' + closeIconPos]" |
||||
:name="closeIcon" |
||||
:color="closeIconColor" |
||||
:size="closeIconSize" |
||||
></u-icon> |
||||
<scroll-view class="u-drawer__scroll-view" scroll-y="true"> |
||||
<slot /> |
||||
</scroll-view> |
||||
<slot name="fixedContent" /> |
||||
</view> |
||||
<scroll-view class="u-drawer__scroll-view" scroll-y="true" v-else> |
||||
<slot /> |
||||
</scroll-view> |
||||
<view @tap="close" class="u-close" :class="['u-close--' + closeIconPos]"> |
||||
<u-icon |
||||
v-if="mode != 'center' && closeable" |
||||
:name="closeIcon" |
||||
:color="closeIconColor" |
||||
:size="closeIconSize" |
||||
></u-icon> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
/** |
||||
* popup 弹窗 |
||||
* @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义 |
||||
* @tutorial https://www.uviewui.com/components/popup.html |
||||
* @property {String} mode 弹出方向（默认left） |
||||
* @property {Boolean} mask 是否显示遮罩（默认true） |
||||
* @property {Stringr | Number} length mode=left | 见官网说明（默认auto） |
||||
* @property {Boolean} zoom 是否开启缩放动画，只在mode为center时有效（默认true） |
||||
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false） |
||||
* @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true） |
||||
* @property {Object} custom-style 用户自定义样式 |
||||
* @property {Stringr | Number} negative-top 中部弹出时，往上偏移的值 |
||||
* @property {Numberr | String} border-radius 弹窗圆角值（默认0） |
||||
* @property {Numberr | String} z-index 弹出内容的z-index值（默认1075） |
||||
* @property {Boolean} closeable 是否显示关闭图标（默认false） |
||||
* @property {String} close-icon 关闭图标的名称，只能uView的内置图标 |
||||
* @property {String} close-icon-pos 自定义关闭图标位置（默认top-right） |
||||
* @property {String} close-icon-color 关闭图标的颜色（默认#909399） |
||||
* @property {Number | String} close-icon-size 关闭图标的大小，单位rpx（默认30） |
||||
* @event {Function} open 弹出层打开 |
||||
* @event {Function} close 弹出层收起 |
||||
* @example <u-popup v-model="show"><view>出淤泥而不染，濯清涟而不妖</view></u-popup> |
||||
*/ |
||||
import ZMask from "./mask.vue"; |
||||
export default { |
||||
name: "popup", |
||||
components: { |
||||
ZMask, |
||||
}, |
||||
props: { |
||||
/** |
||||
* 显示状态 |
||||
*/ |
||||
show: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
/** |
||||
* 弹出方向，left|right|top|bottom|center |
||||
*/ |
||||
mode: { |
||||
type: String, |
||||
default: "left", |
||||
}, |
||||
/** |
||||
* 是否显示遮罩 |
||||
*/ |
||||
mask: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
// 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto" |
||||
// 或者百分比"50%"，表示由内容撑开高度或者宽度 |
||||
length: { |
||||
type: [Number, String], |
||||
default: "auto", |
||||
}, |
||||
// 是否开启缩放动画，只在mode=center时有效 |
||||
zoom: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 |
||||
safeAreaInsetBottom: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
// 是否可以通过点击遮罩进行关闭 |
||||
maskCloseAble: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
// 用户自定义样式 |
||||
customStyle: { |
||||
type: Object, |
||||
default() { |
||||
return {}; |
||||
}, |
||||
}, |
||||
value: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
// 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件 |
||||
// 对v-model双向绑定多层调用造成报错不能修改props值的问题 |
||||
popup: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
// 显示显示弹窗的圆角，单位rpx |
||||
borderRadius: { |
||||
type: [Number, String], |
||||
default: 0, |
||||
}, |
||||
zIndex: { |
||||
type: [Number, String], |
||||
default: "10075", |
||||
}, |
||||
// 是否显示关闭图标 |
||||
closeable: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
// 关闭图标的名称，只能uView的内置图标 |
||||
closeIcon: { |
||||
type: String, |
||||
default: "close", |
||||
}, |
||||
// 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角 |
||||
closeIconPos: { |
||||
type: String, |
||||
default: "top-right", |
||||
}, |
||||
// 关闭图标的颜色 |
||||
closeIconColor: { |
||||
type: String, |
||||
default: "#909399", |
||||
}, |
||||
// 关闭图标的大小，单位rpx |
||||
closeIconSize: { |
||||
type: [String, Number], |
||||
default: "30", |
||||
}, |
||||
// 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto" |
||||
// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数 |
||||
width: { |
||||
type: String, |
||||
default: "", |
||||
}, |
||||
// 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto" |
||||
// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数 |
||||
height: { |
||||
type: String, |
||||
default: "", |
||||
}, |
||||
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效 |
||||
negativeTop: { |
||||
type: [String, Number], |
||||
default: 0, |
||||
}, |
||||
// 遮罩的样式，一般用于修改遮罩的透明度 |
||||
maskCustomStyle: { |
||||
type: Object, |
||||
default() { |
||||
return {}; |
||||
}, |
||||
}, |
||||
// 遮罩打开或收起的动画过渡时间，单位ms |
||||
duration: { |
||||
type: [String, Number], |
||||
default: 250, |
||||
}, |
||||
// 中间弹窗的背景颜色值 |
||||
centerPupBg: { |
||||
type: String, |
||||
default: "#fff", |
||||
}, |
||||
bgColor: { |
||||
type: String, |
||||
default: "#fff", |
||||
}, |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
visibleSync: false, |
||||
showDrawer: false, |
||||
timer: null, |
||||
closeFromInner: false, // value的值改变，是发生在内部还是外部 |
||||
}; |
||||
}, |
||||
computed: { |
||||
// 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom) |
||||
style() { |
||||
let style = {}; |
||||
// 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏 |
||||
if (this.mode == "left" || this.mode == "right") { |
||||
style = { |
||||
width: this.width |
||||
? this.getUnitValue(this.width) |
||||
: this.getUnitValue(this.length), |
||||
height: "100%", |
||||
transform: `translate3D(${ |
||||
this.mode == "left" ? "-100%" : "100%" |
||||
},0px,0px)`, |
||||
background: this.bgColor, |
||||
}; |
||||
} else if (this.mode == "top" || this.mode == "bottom") { |
||||
style = { |
||||
width: "100%", |
||||
height: this.height |
||||
? this.getUnitValue(this.height) |
||||
: this.getUnitValue(this.length), |
||||
transform: `translate3D(0px,${ |
||||
this.mode == "top" ? "-100%" : "100%" |
||||
},0px)`, |
||||
background: this.bgColor, |
||||
}; |
||||
} |
||||
style.zIndex = this.uZindex; |
||||
// 如果用户设置了borderRadius值，添加弹窗的圆角 |
||||
if (this.borderRadius) { |
||||
switch (this.mode) { |
||||
case "left": |
||||
style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`; |
||||
break; |
||||
case "top": |
||||
style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`; |
||||
break; |
||||
case "right": |
||||
style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`; |
||||
break; |
||||
case "bottom": |
||||
style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`; |
||||
break; |
||||
default: |
||||
} |
||||
// 不加可能圆角无效 |
||||
style.overflow = "hidden"; |
||||
} |
||||
if (this.duration) |
||||
style.transition = `all ${this.duration / 1000}s linear`; |
||||
return style; |
||||
}, |
||||
// 中部弹窗的特有样式 |
||||
centerStyle() { |
||||
let style = {}; |
||||
style.width = this.width |
||||
? this.getUnitValue(this.width) |
||||
: this.getUnitValue(this.length); |
||||
// 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开高度 |
||||
style.height = this.height ? this.getUnitValue(this.height) : "auto"; |
||||
style.zIndex = this.uZindex; |
||||
// style.marginTop = `-${this.$u.addUnit(this.negativeTop)}`; |
||||
style.background = this.centerPupBg; |
||||
if (this.borderRadius) { |
||||
style.borderRadius = `${this.borderRadius}rpx`; |
||||
// 不加可能圆角无效 |
||||
style.overflow = "hidden"; |
||||
} |
||||
return style; |
||||
}, |
||||
// 计算整理后的z-index值 |
||||
uZindex() { |
||||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup; |
||||
}, |
||||
}, |
||||
watch: { |
||||
value(val) { |
||||
if (val) { |
||||
this.open(); |
||||
} else if (!this.closeFromInner) { |
||||
this.close(); |
||||
} |
||||
this.closeFromInner = false; |
||||
}, |
||||
}, |
||||
mounted() { |
||||
// 组件渲染完成时，检查value是否为true，如果是，弹出popup |
||||
this.value && this.open(); |
||||
}, |
||||
methods: { |
||||
// 动画结束回调 |
||||
transitionend(e) { |
||||
// console.log(e, "动画结束popup"); |
||||
}, |
||||
// 判断传入的值，是否带有单位，如果没有，就默认用rpx单位 |
||||
getUnitValue(val) { |
||||
if (/(%|px|rpx|auto)$/.test(val)) return val; |
||||
else return val + "rpx"; |
||||
}, |
||||
// 遮罩被点击 |
||||
maskClick() { |
||||
this.close(); |
||||
}, |
||||
close() { |
||||
// 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close |
||||
// 造成@close事件触发两次 |
||||
this.closeFromInner = true; |
||||
this.change("showDrawer", "visibleSync", false); |
||||
}, |
||||
// 中部弹出时，需要.u-drawer-content将居中内容，此元素会铺满屏幕，点击需要关闭弹窗 |
||||
// 让其只在mode=center时起作用 |
||||
modeCenterClose(mode) { |
||||
if (mode != "center" || !this.maskCloseAble) return; |
||||
this.close(); |
||||
}, |
||||
open() { |
||||
this.change("visibleSync", "showDrawer", true); |
||||
}, |
||||
// 此处的原理是，关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件 |
||||
// 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用 |
||||
change(param1, param2, status) { |
||||
// 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件 |
||||
if (this.popup == true) { |
||||
this.$emit("input", status); |
||||
} |
||||
this[param1] = status; |
||||
if (status) { |
||||
// #ifdef H5 || MP |
||||
this.timer = setTimeout(() => { |
||||
this[param2] = status; |
||||
this.$emit(status ? "open" : "close"); |
||||
}, 50); |
||||
// #endif |
||||
// #ifndef H5 || MP |
||||
this.$nextTick(() => { |
||||
this[param2] = status; |
||||
this.$emit(status ? "open" : "close"); |
||||
}); |
||||
// #endif |
||||
} else { |
||||
this.timer = setTimeout(() => { |
||||
this[param2] = status; |
||||
this.$emit(status ? "open" : "close"); |
||||
}, this.duration); |
||||
} |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
@mixin vue-flex($direction: row) { |
||||
/* #ifndef APP-NVUE */ |
||||
display: flex; |
||||
flex-direction: $direction; |
||||
/* #endif */ |
||||
} |
||||
.u-drawer { |
||||
/* #ifndef APP-NVUE */ |
||||
display: block; |
||||
/* #endif */ |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.u-drawer-content { |
||||
/* #ifndef APP-NVUE */ |
||||
display: block; |
||||
/* #endif */ |
||||
position: absolute; |
||||
z-index: 1003; |
||||
transition: all 0.25s linear; |
||||
} |
||||
|
||||
.u-drawer__scroll-view { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.u-drawer-left { |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
.u-drawer-right { |
||||
right: 0; |
||||
top: 0; |
||||
bottom: 0; |
||||
} |
||||
|
||||
.u-drawer-top { |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
} |
||||
|
||||
.u-drawer-bottom { |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
} |
||||
|
||||
.u-drawer-center { |
||||
@include vue-flex; |
||||
flex-direction: column; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
top: 0; |
||||
justify-content: center; |
||||
align-items: center; |
||||
opacity: 0; |
||||
z-index: 99999; |
||||
} |
||||
|
||||
.u-mode-center-box { |
||||
min-width: 100rpx; |
||||
min-height: 100rpx; |
||||
/* #ifndef APP-NVUE */ |
||||
display: block; |
||||
/* #endif */ |
||||
position: relative; |
||||
} |
||||
|
||||
.u-drawer-content-visible.u-drawer-center { |
||||
transform: scale(1); |
||||
opacity: 1; |
||||
} |
||||
|
||||
.u-animation-zoom { |
||||
transform: scale(1.15); |
||||
} |
||||
|
||||
.u-drawer-content-visible { |
||||
transform: translate3D(0px, 0px, 0px) !important; |
||||
} |
||||
|
||||
.u-close { |
||||
position: absolute; |
||||
z-index: 3; |
||||
} |
||||
|
||||
.u-close--top-left { |
||||
top: 30rpx; |
||||
left: 30rpx; |
||||
} |
||||
|
||||
.u-close--top-right { |
||||
top: 30rpx; |
||||
right: 30rpx; |
||||
} |
||||
|
||||
.u-close--bottom-left { |
||||
bottom: 30rpx; |
||||
left: 30rpx; |
||||
} |
||||
|
||||
.u-close--bottom-right { |
||||
right: 30rpx; |
||||
bottom: 30rpx; |
||||
} |
||||
</style> |
||||
@ -1,155 +0,0 @@ |
||||
## 导入即用 全端支持 |
||||
|
||||
### 有问题 + wx : zy597172583 标注来意 可评论 看到及时回复 |
||||
1.使用方式 |
||||
|
||||
```javascript |
||||
<template> |
||||
<filter-popup :data="filterData" :form.sync="filterForm" v-model="popup.filter" title="全部筛选" height="1104rpx" @finsh="subFinsh"></filter-popup> |
||||
</template> |
||||
<script> |
||||
import FilterPopup from "@/components/filter-popup/filter-popup"; |
||||
export default { |
||||
components: { |
||||
FilterPopup, |
||||
}, |
||||
data() { |
||||
return { |
||||
//筛选表单数据 |
||||
filterData: [ |
||||
{ |
||||
children: false,//是否有子项 |
||||
title: "意向度", |
||||
key: "intention_type", //键名 接收对象名字 |
||||
keyValue: "value", //获取的值是哪个 |
||||
isRadio: true, //是否单选 否则多选 |
||||
data: [ |
||||
{ |
||||
title: "一般意向", |
||||
id: 1, |
||||
value: 1, |
||||
}, |
||||
{ |
||||
title: "中意向度", |
||||
id: 2, |
||||
value: 2, |
||||
}, |
||||
{ |
||||
title: "高意向度", |
||||
id: 3, |
||||
value: 3, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
children: false,//是否有子项 |
||||
title: "手机号码", |
||||
key: "is_bind_phone", //键名 接收对象名字 |
||||
keyValue: "value", //获取的值是哪个 |
||||
isRadio: true, //是否单选 否则多选 |
||||
data: [ |
||||
{ |
||||
title: "未绑定", |
||||
value: 0, |
||||
}, |
||||
{ |
||||
title: "已绑定", |
||||
value: 1, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
children: false,//是否有子项 |
||||
title: "企微好友", |
||||
key: "is_work_customer", //键名 接收对象名字 |
||||
keyValue: "value", //获取的值是哪个 |
||||
isRadio: true, //是否单选 否则多选 |
||||
data: [ |
||||
{ |
||||
title: "未添加", |
||||
value: 0, |
||||
}, |
||||
{ |
||||
title: "已添加", |
||||
value: 1, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
children: true,//是否有子项 |
||||
isRadio: false, //是否单选 |
||||
title: "标签内容", |
||||
key: "label", //键名 接收对象名字 |
||||
keyValue: "id", //获取的值是哪个 |
||||
data: [ |
||||
{ |
||||
title: "客户重要程度", |
||||
id: 22, |
||||
children: [ |
||||
{ |
||||
title: "一般意向2", |
||||
id: 32, |
||||
value: 1, |
||||
}, |
||||
{ |
||||
title: "一般意向3", |
||||
id: 12, |
||||
value: 1, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
title: "客户重要程度2", |
||||
id: 122, |
||||
children: [ |
||||
{ |
||||
title: "一般意向2", |
||||
id: 43, |
||||
value: 1, |
||||
}, |
||||
{ |
||||
title: "一般意向3", |
||||
id: 23, |
||||
value: 1, |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}, |
||||
], //筛选数据 |
||||
filterForm: {}, //选中的表单 |
||||
}; |
||||
}, |
||||
} |
||||
``` |
||||
|
||||
2.组件props |
||||
|
||||
| 参数名 | 类型 | 介绍 | |
||||
| ---------- | ------- | ------------------------------------------------- | |
||||
| form | Object | .sync双向绑定的表单值 ， 可传入显示初始哪些被选中 | |
||||
| data | Array | 动态渲染选项的数据数组 | |
||||
| title | String | 标题 | |
||||
| height | String | 弹出层高度 单位 rpx px upx 百分比 vw等 | |
||||
| themeColor | String | 组件主体颜色 默认：\#0066ff | |
||||
| mask | Boolean | 是否显示弹出遮盖层 | |
||||
|
||||
3.data 参数 |
||||
|
||||
| 参数名 | 类型 | 是否必填 | 介绍 | |
||||
| -------- | ------- | -------- | ------------------------------------------------------------ | |
||||
| children | Boolean | 是 | 是否有子项 | |
||||
| data | Array | 是 | 渲染出来的选项数据 | |
||||
| isRadio | Boolean | 是 | 是否单选 单个选项指定，单选还是多选 | |
||||
| title | String | 是 | 标签内容标题 | |
||||
| key | String | 是 | 接收对象名字 会作为@finsh返回对象的键名 | |
||||
| keyValue | String | 是 | 获取的值是哪个 自定义指定获取哪个键值 value还是id或者自己定义的 | |
||||
|
||||
4.事件 |
||||
|
||||
| 事件名 | 返回参数 | 简介 | |
||||
| ------ | -------- | ----------------------------------------- | |
||||
| finsh | Object | 点击确定时触发 返回参数为选中值的对象数组 | |
||||
| close | 无 | 组件点击关闭时触发 | |
||||
|
||||
 |
||||
@ -1,596 +0,0 @@ |
||||
<template> |
||||
<popup |
||||
:mask="mask" |
||||
border-radius="50" |
||||
v-model="acceptValue" |
||||
mode="bottom" |
||||
class="filter-popup" |
||||
:height="height" |
||||
@close="close" |
||||
:style="{ '--color': themeColor }" |
||||
:mask-custom-style="{ background: 'rgba(0, 0, 0, 0.7)' }" |
||||
> |
||||
<view class="top-title flex-row-sb" v-if="showTop"> |
||||
<view class="popup-title flex-row-c-c">{{ title }}</view> |
||||
<text class="saasIcon flex-row-c-c" @click="close"></text> |
||||
</view> |
||||
|
||||
<scroll-view class="select-scroll" scroll-y :style="{ height: `calc( ${height} - 120rpx - 152rpx )` }"> |
||||
<view class="select-main"> |
||||
<view v-if="showCategory" class="select-item"> |
||||
<view class="title">学科专业</view> |
||||
<view class="category-wrap"> |
||||
<picker mode="multiSelector" v-model="category" @change="change" @columnchange="columnchange" :range="categories" range-key="title"> |
||||
<view class="category">{{categoryName ? categoryName : '请选择'}}</view> |
||||
</picker> |
||||
<uni-icons v-if="categoryName" class="icon" type="closeempty" size="16" color="#333" @click.stop="delCatagory"></uni-icons> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="select-item" v-for="(item, index) in data" :key="index"> |
||||
<view class="title"> {{ item.title }} </view> |
||||
<view class="tag-list" v-if="!item.children"> |
||||
<view |
||||
class="tag-item" |
||||
:class="[acceptForm[item.key].includes(item2.value) ? 'select-on' : '']" |
||||
v-for="(item2, index2) in item.data" |
||||
:key="index2" |
||||
@click="selectTagBuyValueOrId(item2, item.key, item.keyValue, item.isRadio)" |
||||
> |
||||
{{ item2.title }} |
||||
</view> |
||||
</view> |
||||
<!-- 有childer --> |
||||
<view class="select-childer" v-else v-for="item2 in item.data" :key="item2.id"> |
||||
<view class="childer-title flex-row--c">{{ item2.title }}</view> |
||||
<view class="tag-list"> |
||||
<view |
||||
class="tag-item" |
||||
:class="[acceptForm[item.key].includes(item3.id) ? 'select-on' : '']" |
||||
v-for="item3 in item2.children" |
||||
:key="item3.id" |
||||
@click="selectTagBuyValueOrId(item3, item.key, item.keyValue, item.isRadio)" |
||||
> |
||||
{{ item3.title }} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
|
||||
<view class="filter-button flex-row-c"> |
||||
<view class="btn flex-row"> |
||||
<view class="btn-1 flex-row-c-c" @click="reset">重置</view> |
||||
<view class="btn-2 flex-row-c-c" @click="finsh">完成</view> |
||||
</view> |
||||
</view> |
||||
</popup> |
||||
</template> |
||||
|
||||
<script> |
||||
import { courseDiscipline, courseProfessionalClass, courseProfessional } from '@/apis/modules/product.js' |
||||
import Popup from './components/popup.vue'; |
||||
export default { |
||||
components:{ |
||||
Popup |
||||
}, |
||||
name: "filter-popup", |
||||
props: { |
||||
//选中的表单 |
||||
form: { |
||||
type: Object, |
||||
default: () => {}, |
||||
}, |
||||
//主题颜色 |
||||
themeColor: { |
||||
type: String, |
||||
default: "#0066ff", |
||||
}, |
||||
//渲染数据 |
||||
data: { |
||||
type: Array, |
||||
default: () => [], |
||||
}, |
||||
//标题 |
||||
title: { |
||||
type: String, |
||||
default: "请选择", |
||||
}, |
||||
value: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
mask: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
height: { |
||||
type: String, |
||||
default: "600rpx", |
||||
}, |
||||
//是否显示退出按钮 |
||||
showTop: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
//是否显示学科专业选择 |
||||
showCategory: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
}, |
||||
computed: { |
||||
// 接收表单 |
||||
acceptForm: { |
||||
get() { |
||||
this.originForm = JSON.parse(JSON.stringify(this.form)) |
||||
if (Object.keys(this.form).length) { |
||||
return this.form; |
||||
} else { |
||||
let obj = {}; |
||||
this.data.forEach((item) => { |
||||
obj[item.key] = []; |
||||
}); |
||||
return obj; |
||||
} |
||||
}, |
||||
set(nval) { |
||||
// console.log("set Form :>> ", nval); |
||||
this.$emit("update:form", nval); |
||||
}, |
||||
}, |
||||
acceptValue: { |
||||
get() { |
||||
return this.value; |
||||
}, |
||||
set(nval) { |
||||
this.$emit("input", nval); |
||||
}, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
originForm: {}, |
||||
|
||||
categoryName:'', |
||||
categoryId: '', |
||||
professionalCategoryId: '', |
||||
professionalId: '', |
||||
categories:[], |
||||
category: [] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getDis() |
||||
}, |
||||
methods: { |
||||
//选择存value 还是id |
||||
selectTagBuyValueOrId(item, key, keyValue, isRadio) { |
||||
//如果是单选 |
||||
if (isRadio) { |
||||
if (keyValue == "value") { |
||||
if (this.acceptForm[key].some((value) => value === item.value)) { |
||||
this.acceptForm[key] = this.acceptForm[key].filter((value) => value !== item.value); |
||||
return; |
||||
} |
||||
this.acceptForm[key] = []; |
||||
this.acceptForm[key].push(item.value); |
||||
} else { |
||||
if (this.acceptForm[key].some((id) => id === item.id)) { |
||||
this.acceptForm[key] = this.acceptForm[key].filter((id) => id !== item.id); |
||||
return; |
||||
} |
||||
this.acceptForm[key] = []; |
||||
this.acceptForm[key].push(item.id); |
||||
} |
||||
} else { |
||||
if (keyValue == "value") { |
||||
this.acceptForm[key].some((value) => value === item.value) |
||||
? (this.acceptForm[key] = this.acceptForm[key].filter((value) => value !== item.value)) |
||||
: this.acceptForm[key].push(item.value); |
||||
} else { |
||||
this.acceptForm[key].some((id) => id === item.id) |
||||
? (this.acceptForm[key] = this.acceptForm[key].filter((id) => id !== item.id)) |
||||
: this.acceptForm[key].push(item.id); |
||||
} |
||||
} |
||||
|
||||
this.acceptForm = this.acceptForm; |
||||
}, |
||||
|
||||
// 查询学科类别 |
||||
async getDis() { |
||||
const { list } = await courseDiscipline() |
||||
list.map(e => { |
||||
e.id = e.disciplineId |
||||
e.title = e.disciplineName |
||||
}) |
||||
this.categories.push(list) |
||||
|
||||
const res = await courseProfessionalClass(1) |
||||
res.list.map(e => { |
||||
e.id = e.professionalClassId |
||||
e.title = e.professionalClassName |
||||
}) |
||||
this.categories.push(res.list) |
||||
|
||||
const res1 = await courseProfessional(1) |
||||
res1.list.map(e => { |
||||
e.id = e.professionalId |
||||
e.title = e.professionalName |
||||
}) |
||||
this.categories.push(res1.list) |
||||
}, |
||||
// 学科专业确定回调 |
||||
change(e) { |
||||
const i0 = e.detail.value[0] |
||||
const i1 = e.detail.value[1] |
||||
const i2 = e.detail.value[2] |
||||
const i1IsNumber = typeof i1 === 'number' |
||||
const i2IsNumber = typeof i2 === 'number' |
||||
const list = this.categories |
||||
this.categoryId = list[0][i0].id |
||||
this.categoryName = list[0][i0].title |
||||
|
||||
this.professionalCategoryId = '' |
||||
this.professionalId = '' |
||||
if (i1IsNumber && list[1].length > 0) { |
||||
this.professionalCategoryId = list[1][i1].id |
||||
this.categoryName += '/' + list[1][i1].title |
||||
} |
||||
if (i2IsNumber && list[2].length > 0) { |
||||
this.professionalId = list[2][i2].id |
||||
this.categoryName += '/' + list[2][i2].title |
||||
} |
||||
}, |
||||
// 学科专业切换回调 |
||||
async columnchange(e) { |
||||
const { column } = e.detail |
||||
if (column == 0) { |
||||
const { list } = await courseProfessionalClass(this.categories[0][e.detail.value].id) |
||||
list.map(e => { |
||||
e.id = e.professionalClassId |
||||
e.title = e.professionalClassName |
||||
}) |
||||
this.categories[1] = list |
||||
this.categories[2] = [] |
||||
this.$set(this.categories, 1, list) |
||||
console.log('inner',this.categories) |
||||
} else |
||||
if (column == 1) { |
||||
const { list } = await courseProfessional(this.categories[1][e.detail.value].id) |
||||
list.map(e => { |
||||
e.id = e.professionalId |
||||
e.title = e.professionalName |
||||
}) |
||||
this.categories[2] = list |
||||
this.$set(this.categories, 2, list) |
||||
} |
||||
}, |
||||
// 删除学科专业 |
||||
delCatagory() { |
||||
this.category = [] |
||||
this.categoryName = '' |
||||
this.categoryId = '' |
||||
this.professionalCategoryId = '' |
||||
this.professionalId = '' |
||||
}, |
||||
|
||||
// 点击完成 |
||||
finsh() { |
||||
if (this.showCategory) { |
||||
this.acceptForm.categoryId = this.categoryId |
||||
this.acceptForm.professionalCategoryId = this.professionalCategoryId |
||||
this.acceptForm.professionalId = this.professionalId |
||||
this.acceptForm.categoryName = this.categoryName |
||||
} |
||||
this.$emit("finsh", this.acceptForm); |
||||
this.$emit("input", false); |
||||
}, |
||||
close() { |
||||
this.$emit("input", false); |
||||
this.$emit("close"); |
||||
}, |
||||
//重置 |
||||
reset() { |
||||
this.acceptForm = {} |
||||
this.categoryId = '' |
||||
this.professionalCategoryId = '' |
||||
this.professionalId = '' |
||||
this.categoryName = '' |
||||
this.$nextTick(() => { |
||||
this.$emit("finsh", this.acceptForm); |
||||
this.$emit("input", false); |
||||
}) |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
@font-face { |
||||
font-family: 'iconfont'; /* Project id 2729410 */ |
||||
src: url('https://at.alicdn.com/t/font_2729410_3nhq3ibbcqg.woff2?t=1628330097695') format('woff2'), |
||||
url('https://at.alicdn.com/t/font_2729410_3nhq3ibbcqg.woff?t=1628330097695') format('woff'), |
||||
url('https://at.alicdn.com/t/font_2729410_3nhq3ibbcqg.ttf?t=1628330097695') format('truetype'); |
||||
} |
||||
.saasIcon { |
||||
font-family: "iconfont" !important; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-webkit-text-stroke-width: 0.2px; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
.filter-popup { |
||||
color: #000000; |
||||
.top-title { |
||||
font-weight: bold; |
||||
height: 90rpx; |
||||
margin-left: 70rpx; |
||||
font-size: 30rpx; |
||||
margin-top: 20rpx; |
||||
.popup-title { |
||||
height: 100%; |
||||
} |
||||
.saasIcon { |
||||
// width: 150rpx; |
||||
height: 100%; |
||||
padding-right: 70rpx; |
||||
} |
||||
} |
||||
.select-scroll { |
||||
} |
||||
.category-wrap { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-top: 10rpx; |
||||
.icon { |
||||
margin-left: 10rpx; |
||||
} |
||||
} |
||||
.category { |
||||
font-size: 28rpx; |
||||
} |
||||
.select-main { |
||||
padding: 0 32rpx; |
||||
.select-item { |
||||
.title { |
||||
font-weight: bold; |
||||
font-size: 28rpx; |
||||
color: #000000; |
||||
padding-top: 30rpx; |
||||
} |
||||
.tag-list { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
margin-left: -12rpx; |
||||
.tag-item { |
||||
margin-top: 20rpx; |
||||
padding: 10rpx 40rpx; |
||||
font-size: 26rpx; |
||||
background: #f5f5f5; |
||||
color: #484848; |
||||
border-radius: 36rpx; |
||||
margin-left: 12rpx; |
||||
&.select-on { |
||||
background: var(--color); |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.select-childer { |
||||
.childer-title { |
||||
color: #484848; |
||||
font-size: 28rpx; |
||||
border-bottom: 1px solid #f5f5f5; |
||||
height: 80rpx; |
||||
} |
||||
} |
||||
} |
||||
.filter-button { |
||||
width: 100%; |
||||
height: 152rpx; |
||||
background: #ffffff; |
||||
box-shadow: 0px -3px 12px rgba(0, 0, 0, 0.06); |
||||
position: fixed; |
||||
bottom: 0; |
||||
.btn { |
||||
border-radius: 100rpx; |
||||
margin-top: 26rpx; |
||||
width: 680rpx; |
||||
height: 80rpx; |
||||
color: #ffffff; |
||||
font-size: 28rpx; |
||||
overflow: hidden; |
||||
.btn-1 { |
||||
flex: 1; |
||||
background: linear-gradient(271deg, #2698fb 0%, #84c6ff 100%); |
||||
} |
||||
.btn-2 { |
||||
flex: 1; |
||||
background: linear-gradient(90deg, #0066ff 0%, #1371ff 100%); |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 自定义css |
||||
.flex-row { |
||||
display: flex; |
||||
} |
||||
|
||||
.flex-row-c { |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.flex-row--c { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.flex-row-c-c { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.flex-row-sb-c { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
|
||||
.flex-row-sb-t { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-start; |
||||
} |
||||
|
||||
.flex-row-sb-b { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-end; |
||||
} |
||||
|
||||
.flex-row-c-sb { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: space-between; |
||||
} |
||||
|
||||
.flex-row-sb { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.flex-row-l { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
} |
||||
|
||||
.flex-row-l-c { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
} |
||||
|
||||
.flex-row-c-t { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: flex-start; |
||||
} |
||||
|
||||
.flex-row-r-c { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
} |
||||
|
||||
.flex-row-r { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
} |
||||
|
||||
.flex-row--b { |
||||
display: flex; |
||||
align-items: flex-end; |
||||
} |
||||
|
||||
.flex-col { |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.flex-col-c { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.flex-col--c { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
} |
||||
|
||||
.flex-col-c-c { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.flex-col-sb-c { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
|
||||
.flex-col-c-sb { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: space-between; |
||||
} |
||||
|
||||
.flex-col-sb { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.flex-col-t-c { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
} |
||||
|
||||
.flex-col-c-l { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: flex-start; |
||||
} |
||||
|
||||
.flex-col-t { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
} |
||||
|
||||
.flex-col-b { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-end; |
||||
} |
||||
|
||||
.flex-col-b-c { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
} |
||||
|
||||
.flex-col-c-l { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: flex-end; |
||||
} |
||||
|
||||
.flex-col--l { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
} |
||||
|
||||
.flex-col--r { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-end; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,10 +0,0 @@ |
||||
/** |
||||
/** |
||||
* 产品 配置文件 |
||||
* @author yujialong |
||||
*/ |
||||
|
||||
export default { |
||||
normalIcon: 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220609/png/1534733700683030528.png', // 通用图标
|
||||
dataIcon: 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220627/png/1541256164447641600.png' // 数据图标
|
||||
} |
||||
@ -1,39 +0,0 @@ |
||||
/** |
||||
* @file 百度移动统计配置文件 |
||||
*/ |
||||
|
||||
module.exports = { |
||||
/** |
||||
* 从百度移动统计获取的AppKey |
||||
* @type {string} |
||||
*/ |
||||
appKey: 'ce2fa79380', |
||||
|
||||
/** |
||||
* 是否使用了插件 |
||||
* @type {boolean} |
||||
*/ |
||||
hasPlugin: false, |
||||
|
||||
/** |
||||
* 是否获取当前的地理位置和速度信息 |
||||
* @type {boolean} |
||||
*/ |
||||
getLocation: false, |
||||
|
||||
/** |
||||
* 是否获取组件滚动信息 |
||||
* @type {boolean} |
||||
*/ |
||||
getComponentScroll: false, |
||||
/** |
||||
* 是否开启了A/B 测试 |
||||
* @type {boolean} |
||||
*/ |
||||
hasABTest: false, |
||||
/** |
||||
* 是否开启热力图功能 |
||||
* @type {boolean} |
||||
*/ |
||||
hasHeatmap: false, |
||||
}; |
||||
File diff suppressed because one or more lines are too long
@ -1,18 +0,0 @@ |
||||
|
||||
import uma from 'umtrack-wx'; |
||||
uma.init({ |
||||
appKey: '64cc98d5a1a164591b62da3e', // 由友盟分配的APP_KEY
|
||||
useOpenid: true, |
||||
// 使用Openid进行统计，此项为false时将使用友盟+uuid进行用户统计。
|
||||
// 使用Openid来统计微信小程序的用户，会使统计的指标更为准确，对系统准确性要求高的应用推荐使用Openid
|
||||
autoGetOpenid: true, |
||||
// 使用openid进行统计时，是否授权友盟自动获取Openid，
|
||||
// 如若需要，请到友盟后台"设置管理-应用信息"(https://mp.umeng.com/setting/appset)中设置appId及secret
|
||||
debug: true,// 是否打开调试模式
|
||||
uploadUserInfo: true, // 自动上传用户信息，设为false取消上传，默认为false
|
||||
enableVerify: true |
||||
}); |
||||
uma.install = function(Vue) { |
||||
Vue.prototype.$uma = uma; |
||||
} |
||||
export default uma; |
||||
@ -1,32 +0,0 @@ |
||||
@font-face { |
||||
font-family: "iconfont";
src: url('/static/iconfont/iconfont.ttf') format('truetype'); |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-qrcode:before { |
||||
content: "\e7dd"; |
||||
} |
||||
|
||||
.icon-dingdan:before { |
||||
content: "\e601"; |
||||
} |
||||
|
||||
.icon-product:before { |
||||
content: "\e788"; |
||||
} |
||||
|
||||
.icon-edit:before { |
||||
content: "\e621"; |
||||
} |
||||
|
||||
.icon-filter:before { |
||||
content: "\e6b9"; |
||||
} |
||||
|
||||
Binary file not shown.
Loading…
Reference in new issue