IndicatorsFilter.nvue

<template>
	<uv-popup ref="indicatorsFilterRef" @change="handleChange">
		<view class="pop_header">
			<view style="width: 22px;"></view>
			<text class="pop_header_text">{{ defaultTitle }}</text>
			<uv-icon name="close" size="22" class="pop_header_icon" @tap="close"></uv-icon>
		</view>
    <scroll-view scroll-y="true" style="height: 240px;">
      <view class="l_type">
      	<view class="l_type_item" v-for="(item,index) in options" :key="item[optionsProps.value]"
      		:class="{'l_type_item_active':index === checkIndex}" @tap="handleChangeCheckType(index)">
      		<text class="l_type_item_text"
      			:class="{'l_type_item_active_text':index === checkIndex}">{{ item[optionsProps.label] }}</text>
      	</view>
      </view>
    </scroll-view>
	</uv-popup>
</template>

<script setup>
	import {
    computed,
		ref
	} from 'vue'
  import {
    t 
  } from '@/plugins/index.js'
	const emit = defineEmits(['change','modalChange'])
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		options: {
			type: Array,
			default: () => []
		},
		optionsProps: {
			type: Object,
			default: () => ({
				label: 'name',
				value: 'key'
			})
		},
	})
  const defaultTitle = computed(()=>{
    return props.title || t('app.title.kpiSelect')
  })
  
	const checkIndex = ref(0)
	const indicatorsFilterRef = ref(null)
	const open = () => {
		indicatorsFilterRef.value?.open('bottom')
	}
	const close = () => {
		indicatorsFilterRef.value?.close()
	}
	const handleChangeCheckType = (index) => {
		checkIndex.value = index
		emit('change', props.options[index])
		close()
	}
  const handleChange = (e)=>{
    emit('modalChange',e.show)
  }
  
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	@import '../styles/normal.scss';
</style>