xo_user_client/components/nav-more/nav-more.vue

102 lines
3.0 KiB
Vue

<template>
<view :class="theme_view">
<view class="more cr-black padding-top-main padding-bottom-sm flex-row flex-wrap align-c" :class="propClass" @tap="open_popup">
<text v-if="isMoreText">{{ $t('common.more_null') }}</text>
<iconfont name="icon-category-more"></iconfont>
</view>
<!-- 弹窗 -->
<component-popup :propShow="popup_status" :propIsBar="propIsBar" propPosition="top" :propMask="true" :propTop="propTop" @onclose="quick_close_event">
<view class="padding-top-lg">
<view class="padding-left-main padding-bottom-main">{{ $t('recommend-form.recommend-form.7gc30l') }}</view>
<view class="divider-b">
<slot></slot>
</view>
<view class="tc padding-vertical-lg" @tap="quick_close_event">
<text class="padding-right-sm">{{ $t('nav-more.nav-more.h9g4b1') }}</text>
<iconfont name="icon-arrow-top" color="#ccc"></iconfont>
</view>
</view>
</component-popup>
</view>
</template>
<script>
const app = getApp();
import componentPopup from '@/components/popup/popup';
export default {
name: 'more',
components: {
componentPopup,
},
props: {
propData: {
type: Array,
default: () => {
return [];
},
},
// 顶部定位的距离
propTop: {
type: String,
default: '',
},
propStatus: {
type: Boolean,
default: false,
},
propClass: {
type: String,
default: '',
},
themeBtn: {
type: String,
default: '1',
},
isMoreText: {
type: Boolean,
default: true,
},
},
watch: {
propStatus(newVal, oldVal) {
if (newVal !== oldVal) {
this.setData({
popup_status: newVal,
});
}
},
},
data() {
return {
theme_view: app.globalData.get_theme_value_view(),
popup_status: false,
propIsBar: false,
};
},
methods: {
// 打开弹窗
open_popup() {
this.$emit('open-popup', true);
},
// 关闭弹窗
quick_close_event(e) {
this.$emit('open-popup', false);
},
},
};
</script>
<style scoped>
.more {
width: 30rpx;
padding: 15rpx 20rpx;
position: absolute;
top: 0;
bottom: 0;
right: 0;
z-index: 101;
white-space: normal;
word-break: break-all;
}
</style>