first

components/JeepayStateSelect/JeepayStateSelect.vue

@@ -0,0 +1,79 @@
+<!--
+  组件作用：  状态筛选器， 一般用作搜索栏右侧。 
+  
+  使用方法：
+  
+  
+  @author terrfly
+  @site https://www.jeequan.com
+  @date 2022/11/26 16:24
+-->
+
+<template>
+	
+	<view>
+		<view class="code-state" @tap="statePopup.open(props.state)">
+			{{ vdata.selected.label || '全部状态' }}
+			<image src="/pageDevice/static/devIconImg/icon-arrow-down.svg" mode="scaleToFill" />
+		</view>
+	</view>
+	
+	<view>
+		  <JSinglePopup :list="stateList" title="按设备状态筛选" ref="statePopup" @confirm="confirmState" />
+	</view>
+	
+	
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+
+
+const emits = defineEmits(['update:state', 'change'])
+
+// 定义组件参数 
+const props = defineProps({
+	
+	// 双向绑定
+	state: { type: [Number, String] },
+	
+})
+
+const vdata = reactive({
+	selected: {} , // 当前选择对象
+})
+
+
+const statePopup = ref(null)
+
+
+const stateList = reactive([
+  { label: '全部状态', value: '' },
+  { label: '启用', value: '1' },
+  { label: '禁用', value: '0' },
+])
+
+
+//按状态筛选
+function confirmState(r){
+	vdata.selected = r || { }
+	emits('update:state', vdata.selected.value)
+	emits('change', vdata.selected.value)
+}
+	
+</script>
+
+<style lang="scss" scoped>
+  .code-state {
+    display: flex;
+    align-items: center;
+    margin-left: 40rpx;
+    font-size: 30rpx;
+    color: #222425;
+    image {
+      margin-left: 10rpx;
+      width: 40rpx;
+      height: 40rpx;
+    }
+  }
+ </style>