init
This commit is contained in:
63
uni_modules/nutui-uni/components/fixednav/fixednav.ts
Normal file
63
uni_modules/nutui-uni/components/fixednav/fixednav.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
import type { ExtractPropTypes } from 'vue'
|
||||
import { SELECTED_EVENT, UPDATE_VISIBLE_EVENT } from '../_constants'
|
||||
import { commonProps, isBoolean, makeArrayProp, makeStringProp, truthProp } from '../_utils'
|
||||
|
||||
export const fixednavProps = {
|
||||
...commonProps,
|
||||
/**
|
||||
* @description 是否打开
|
||||
*/
|
||||
visible: Boolean,
|
||||
|
||||
/**
|
||||
* @description 悬浮列表内容数据
|
||||
*/
|
||||
navList: makeArrayProp<any>([]),
|
||||
|
||||
/**
|
||||
* @description 选中按钮文案颜色
|
||||
*/
|
||||
activeColor: makeStringProp(''),
|
||||
|
||||
/**
|
||||
* @description 收起列表按钮文案
|
||||
*/
|
||||
activeText: makeStringProp(''),
|
||||
|
||||
/**
|
||||
* @description 展开列表按钮文案
|
||||
*/
|
||||
unActiveText: makeStringProp(''),
|
||||
|
||||
/**
|
||||
* @description 导航方向，可选值 'left'、'right'
|
||||
*/
|
||||
type: makeStringProp<'left' | 'right'>('right'),
|
||||
|
||||
/**
|
||||
* @description 展开时是否显示遮罩
|
||||
*/
|
||||
overlay: truthProp,
|
||||
|
||||
/**
|
||||
* @description fixed 垂直位置
|
||||
*/
|
||||
position: {
|
||||
default: () => {
|
||||
return {
|
||||
top: 'auto',
|
||||
bottom: 'auto',
|
||||
}
|
||||
},
|
||||
type: Object,
|
||||
},
|
||||
}
|
||||
|
||||
export type FixednavProps = ExtractPropTypes<typeof fixednavProps>
|
||||
|
||||
export const fixednavEmits = {
|
||||
[UPDATE_VISIBLE_EVENT]: (val: boolean) => isBoolean(val),
|
||||
[SELECTED_EVENT]: (val: { item: any, event: Event }) => val instanceof Object,
|
||||
}
|
||||
|
||||
export type FixednavEmits = typeof fixednavEmits
|
||||
95
uni_modules/nutui-uni/components/fixednav/fixednav.vue
Normal file
95
uni_modules/nutui-uni/components/fixednav/fixednav.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, defineComponent, ref } from 'vue'
|
||||
import { PREFIX, SELECTED_EVENT, UPDATE_VISIBLE_EVENT } from '../_constants'
|
||||
import { getMainClass, getMainStyle } from '../_utils'
|
||||
import { useTranslate } from '../../locale'
|
||||
import NutIcon from '../icon/icon.vue'
|
||||
import NutOverlay from '../overlay/overlay.vue'
|
||||
import { fixednavEmits, fixednavProps } from './fixednav'
|
||||
|
||||
const props = defineProps(fixednavProps)
|
||||
const emit = defineEmits(fixednavEmits)
|
||||
|
||||
const classes = computed(() => {
|
||||
return getMainClass(props, componentName, {
|
||||
active: props.visible,
|
||||
[props.type]: true,
|
||||
})
|
||||
})
|
||||
|
||||
const styles = computed(() => {
|
||||
return getMainStyle(props, {
|
||||
...props.position,
|
||||
})
|
||||
})
|
||||
|
||||
const current = ref(-1)
|
||||
|
||||
function updateValue(value = !props.visible) {
|
||||
emit(UPDATE_VISIBLE_EVENT, value)
|
||||
}
|
||||
function selected(item: any, event: Event) {
|
||||
emit(SELECTED_EVENT, {
|
||||
item,
|
||||
event,
|
||||
})
|
||||
current.value = item.id
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
const componentName = `${PREFIX}-fixed-nav`
|
||||
const { translate } = useTranslate(componentName)
|
||||
|
||||
export default defineComponent({
|
||||
name: componentName,
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view :class="classes" :style="styles">
|
||||
<NutOverlay
|
||||
v-if="overlay"
|
||||
:visible="visible"
|
||||
:z-index="200"
|
||||
@click="updateValue(false)"
|
||||
/>
|
||||
<slot name="list">
|
||||
<view class="nut-fixed-nav__list">
|
||||
<view
|
||||
v-for="(item, index) in navList"
|
||||
:key="item.id || index"
|
||||
class="nut-fixed-nav__list-item"
|
||||
:class="{ active: item.id === current }"
|
||||
@click="selected(item, $event as any)"
|
||||
>
|
||||
<image :src="item.icon" />
|
||||
<view class="span">
|
||||
{{ item.text }}
|
||||
</view>
|
||||
<view v-if="item.num" class="b">
|
||||
{{ item.num }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
<div class="nut-fixed-nav__btn" @click="updateValue()">
|
||||
<slot name="btn">
|
||||
<NutIcon name="left" custom-color="#fff" />
|
||||
<view class="text">
|
||||
{{ visible ? activeText || translate('activeText') : unActiveText
|
||||
|| translate('unActiveText') }}
|
||||
</view>
|
||||
</slot>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import './index';
|
||||
</style>
|
||||
158
uni_modules/nutui-uni/components/fixednav/index.scss
Normal file
158
uni_modules/nutui-uni/components/fixednav/index.scss
Normal file
@@ -0,0 +1,158 @@
|
||||
@import '../overlay/index';
|
||||
|
||||
.nut-theme-dark {
|
||||
.nut-fixed-nav {
|
||||
&__list {
|
||||
background: $dark-background7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nut-fixed-nav {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: $fixednav-index;
|
||||
display: inline-block;
|
||||
height: 50px;
|
||||
|
||||
&.active {
|
||||
.nut-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.nut-fixed-nav__list {
|
||||
transform: translateX(0%) !important;
|
||||
}
|
||||
|
||||
&.left {
|
||||
.nut-icon {
|
||||
transform: rotate(0deg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: calc($fixednav-index + 1);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 100%;
|
||||
padding-left: 12px;
|
||||
background: $fixednav-btn-bg;
|
||||
border-radius: 45px 0 0 45px;
|
||||
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
|
||||
|
||||
> .text {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
font-size: 10px;
|
||||
line-height: 13px;
|
||||
color: $fixednav-bg-color;
|
||||
}
|
||||
|
||||
.nut-icon {
|
||||
margin-right: 5px;
|
||||
transition: all 0.3s;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: $fixednav-index;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: $fixednav-bg-color;
|
||||
border-radius: 25px 0 0 25px;
|
||||
box-shadow: 2px 2px 8px 0 rgb(0 0 0 / 20%);
|
||||
transition: all 0.5s;
|
||||
transform: translateX(100%);
|
||||
padding: {
|
||||
right: 80px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 50px;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&.active {
|
||||
> .span {
|
||||
color: $fixednav-item-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
> image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
> .span {
|
||||
font-size: 10px;
|
||||
color: $fixednav-font-color;
|
||||
}
|
||||
|
||||
> .b {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 0;
|
||||
min-width: 12px;
|
||||
height: 14px;
|
||||
padding: 0 3px;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
background: $primary-color;
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
|
||||
.nut-fixed-nav__btn {
|
||||
right: auto;
|
||||
left: 0;
|
||||
flex-direction: row-reverse;
|
||||
border-radius: 0 45px 45px 0;
|
||||
|
||||
.nut-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.nut-fixed-nav__list {
|
||||
right: auto;
|
||||
border-radius: 0 25px 25px 0;
|
||||
transform: translateX(-100%);
|
||||
padding: {
|
||||
right: 20px;
|
||||
left: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
uni_modules/nutui-uni/components/fixednav/index.ts
Normal file
1
uni_modules/nutui-uni/components/fixednav/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './fixednav'
|
||||
Reference in New Issue
Block a user