FLEX去掉蓝色选中状态

本文介绍了一种使用 Flash 中的 Focus Manager 控件来控制输入框焦点显示的方法。通过监听 FOCUS_IN 事件并调用 hideFocus 函数取消选中状态,可以实现更灵活的界面交互效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  3.   initialize="focusCancel(event)">
  4. <mx:Script>
  5.         <![CDATA[
  6.       import flash.events.FocusEvent;
  7.       import mx.managers.FocusManager;
  8.       private function focusCancel(event:Event):void {
  9.             this.addEventListener(FocusEvent.FOCUS_IN, isFocusCancle);
  10.       }
  11.       private function  isFocusCancle(event:FocusEvent):void {
  12.             this.focusManager.hideFocus();
  13.       }
  14.   ]]>
  15. </mx:Script>
  16.   <mx:TextInput  x="109" y="132"/>
  17.   <mx:TextInput x="109" y="192"/>
  18. </mx:Application>

思路:在程序开始初始化的时候,先写一个用focusCanclel,让它监听FOCUS事件,然后再写一个监听事件的FUNCTION:isFocusCancle,直接用focusManager把选中状态给隐藏起来.当然,还能加一段监听事件,在什么情况下,选中状态又恢复.可以用focusManager.showFocus()这个命令.

<template> <div class="checkbox-container"> <h2>Vue Checkbox 全选/单选联动</h2> <!-- 全选控制 --> <div class="select-group"> <input type="checkbox" id="selectAll" v-model="selectAll" :indeterminate="indeterminate" > <label for="selectAll">全选</label> <span class="indicator"> ({{ selectedCount }} / {{ options.length }}) </span> </div> <hr> <!-- 子选项 --> <div class="option-group" v-for="(option, index) in options" :key="option.id"> <input type="checkbox" :id="'option' + index" v-model="option.selected" @change="updateIndeterminate" > <label :for="'option' + index"> {{ option.label }} <span class="option-id">(ID:{{ option.id}})</span> </label> </div> <!-- 操作统计 --> <div class="results"> <h3>当前选中:</h3> <ul> <li v-for="option in selectedOptions" :key="option.id"> {{ option.label }} (ID:{{ option.id }}) </li> <li v-if="selectedOptions.length === 0">没有选中任何选项</li> </ul> </div> </div> </template> <script setup> import { ref, computed, reactive } from 'vue' // 选项列表 const options = reactive([ { id: 1, label: '选项A', selected: false }, { id: 2, label: '选项B', selected: false }, { id: 3, label: '选项C', selected: false }, { id: 4, label: '选项D', selected: false }, ]) // 计算属性:选中的子选项 const selectedOptions = computed(() => options.filter(option => option.selected) ) // 计算属性:选中的数量 const selectedCount = computed(() => options.reduce((count, option) => count + (option.selected ? 1 : 0), 0) ) // 中间态(当部分选中时) const indeterminate = ref(false) // 更新中间态状态 const updateIndeterminate = () => { indeterminate.value = selectedCount.value > 0 && selectedCount.value < options.length } // 计算属性:全选状态 const selectAll = computed({ get: () => selectedCount.value === options.length, set: (newValue) => { // 当全选状态变化时,更新所有子选项 options.forEach(option => { option.selected = newValue }) indeterminate.value = false // 重置中间态 } }) </script> <style> .checkbox-container { max-width: 500px; margin: 2rem auto; padding: 1.5rem; border-radius: 10px; background: #f8f9fa; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } h2 { color: #2c3e50; text-align: center; margin-bottom: 1.5rem; } .select-group { padding: 0.8rem; background: #e1f5fe; border-radius: 6px; margin-bottom: 1.5rem; font-weight: bold; display: flex; align-items: center; gap: 10px; } .option-group { padding: 0.8rem; background: #fff; border-radius: 6px; margin: 0.5rem 0; display: flex; align-items: center; gap: 10px; transition: background 0.2s; } .option-group:hover { background: #e8f4ff; } .indicator { margin-left: auto; color: #546e7a; font-size: 0.9rem; } .option-id { font-size: 0.8rem; color: #78909c; } .results { margin-top: 2rem; padding: 1rem; border-top: 1px dashed #b0bec5; } .results h3 { margin-top: 0; color: #37474f; } .results ul { padding-left: 20px; list-style-type: square; } .results li { padding: 0.3rem 0; color: #455a64; } hr { border: 0; border-top: 1px solid #e0e0e0; margin: 1rem 0; } </style>逐行中文解释每行代码含义
06-08
<template> <view class="container"> <!-- 登录区域 --> <view v-if="!isLoggedIn" class="login-box"> <view class="login-title">投诉后台管理登录</view> <input v-model="loginForm.username" placeholder="请输入账号" class="login-input" /> <input v-model="loginForm.password" placeholder="请输入密码" type="password" class="login-input" /> <button @click="login" class="login-button">登录</button> <button @click="goToHome" class="home-button">返回首页</button> <text v-if="loginError" class="login-error">{{ loginError }}</text> </view> <!-- 投诉列表区域 --> <view v-else class="complaint-container"> <view class="back-home" @click="goToHome"> <text class="icon">←</text> <text>返回首页</text> </view> <view class="search-bar"> <input v-model="searchForm.category" placeholder="请输入投诉类别" /> <input v-model="searchForm.keyword" placeholder="请输入关键词" /> <view class="dropdown"> <picker mode="selector" :range="statusOptions" range-key="label" :value="searchForm.statusIndex" @change="handleStatusPickerChange"> <view class="dropdown-trigger"> <text>{{ statusOptions[searchForm.statusIndex].label }}</text> <text class="arrow">▼</text> </view> </picker> </view> <button @click="searchComplaints">搜索</button> </view> <view class="complaint-list"> <view class="complaint-item" v-for="item in complaints" :key="item.id"> <view class="title">{{ item.title }}</view> <view class="category">类别:{{ item.category }}</view> <view class="status-container"> <text class="status-label">状态:</text> <picker mode="selector" :range="statusOptions" range-key="label" :value="item.statusIndex" @change="changeStatus($event, item)"> <view :class="['picker-button', getStatusClass(item.statusLabel)]"> <text>{{ item.statusLabel }}</text> </view> </picker> </view> </view> </view> </view> </view> </template> <script setup> import { ref, onMounted } from 'vue'; // 登录相关 const isLoggedIn = ref(false); const loginForm = ref({ username: '', password: '' }); const loginError = ref(''); // 页面加载时检查缓存 onMounted(() => { const cachedLogin = uni.getStorageSync('loginInfo'); if (cachedLogin) { isLoggedIn.value = true; loginForm.value.username = cachedLogin.username; loginForm.value.password = cachedLogin.password; fetchComplaints(); } }); // 返回首页 const goToHome = () => { try { const pages = getCurrentPages(); if (pages.length > 1) { uni.navigateBack(); } else { uni.reLaunch({ url: '/pages/index/index' }); } } catch (error) { uni.reLaunch({ url: '/pages/index/index' }); } }; // 搜索相关 const searchForm = ref({ category: '', keyword: '', statusIndex: 0 // 默认选中“待处理” }); // 投诉列表 const complaints = ref([]); // 状态选择器事件 const handleStatusPickerChange = (event) => { const index = event.detail.value; searchForm.value.statusIndex = index; }; // 状态选项 const statusOptions = ref([ { label: '待处理', value: 0 }, { label: '处理中', value: 1 }, { label: '已完成', value: 2 } ]); //状态颜色 const getStatusClass = (statusLabel) => { if (statusLabel === '待处理') return 'status-pending'; if (statusLabel === '处理中') return 'status-processing'; if (statusLabel === '已完成') return 'status-completed'; return ''; }; // 模拟登录接口 const login = async () => { uni.showLoading({ title: '登录中' }); // 模拟请求接口 setTimeout(() => { if (loginForm.value.username === '' && loginForm.value.password === '') { // 缓存登录信息 uni.setStorageSync('loginInfo', { username: loginForm.value.username, password: loginForm.value.password }); isLoggedIn.value = true; loginError.value = ''; fetchComplaints(); // 登录成功后加载投诉列表 } else { loginError.value = '账号或密码错误'; } uni.hideLoading(); }, 500); }; // 获取投诉列表(模拟) const fetchComplaints = async () => { uni.showLoading({ title: '加载中' }); // 模拟从后台获取数据 setTimeout(() => { complaints.value = [ { id: 1, title: '关于食堂卫生问题的投诉', category: '后勤管理', content: '食堂卫生不达标,影响员工健康', status: 0, statusLabel: '待处理', statusIndex: 0 }, { id: 2, title: '关于办公室空调噪音大', category: '设备问题', content: '空调运行噪音大,影响办公', status: 1, statusLabel: '处理中', statusIndex: 1 } ]; uni.hideLoading(); }, 500); }; // 搜索投诉 const searchComplaints = async () => { uni.showLoading({ title: '搜索中' }); setTimeout(() => { let filtered = complaints.value; // 按类别过滤 if (searchForm.value.category) { filtered = filtered.filter(item => item.category.includes(searchForm.value.category)); } // 按关键词过滤 if (searchForm.value.keyword) { filtered = filtered.filter(item => item.content.includes(searchForm.value.keyword)); } // 按状态过滤 const selectedStatusValue = statusOptions.value[searchForm.value.statusIndex].value; if (selectedStatusValue !== '') { filtered = filtered.filter(item => item.status === selectedStatusValue); } complaints.value = filtered; uni.hideLoading(); }, 300); }; // 状态变更 const changeStatus = async (event, item) => { const index = event.detail.value; const newStatus = statusOptions.value[index].value; item.status = newStatus; item.statusLabel = statusOptions.value[index].label; item.statusIndex = index; // 模拟提交到后台 await updateStatusToServer(item); uni.showToast({ title: '状态已更新' }); }; // 模拟提交到后台 const updateStatusToServer = async (item) => { return new Promise(resolve => { setTimeout(() => { resolve(); }, 300); }); }; </script> <style scoped> .container { padding: 30rpx; background-color: #f9f9f9; } .home-button { background-color: #f0f0f0; color: #333; margin-top: 20rpx; } .back-home { display: flex; align-items: center; font-size: 30rpx; color: #007AFF; padding: 10rpx 20rpx; border-radius: 8rpx; background-color: #f5f5f5; width: fit-content; /* 根据内容自适应宽度 */ cursor: pointer; /* PC端显示手型光标 */ margin-bottom: 20rpx; /* 增加底部间距 */ } .back-home .icon { margin-right: 10rpx; font-weight: bold; } .login-box { background-color: #fff; padding: 40rpx; border-radius: 16rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } .login-title { font-size: 36rpx; font-weight: bold; text-align: center; margin-bottom: 40rpx; color: #333; } .login-input { border: 1rpx solid #ccc; padding: 20rpx; margin-bottom: 30rpx; border-radius: 8rpx; width: 100%; } .login-button { background-color: #007AFF; color: white; } .login-error { color: red; font-size: 24rpx; margin-top: 10rpx; display: block; } .search-bar input { border: 1rpx solid #ccc; padding: 20rpx; margin-bottom: 20rpx; border-radius: 8rpx; } .complaint-list { margin-top: 30rpx; } .complaint-item { background-color: #fff; padding: 30rpx; margin-bottom: 30rpx; border-radius: 12rpx; box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1); } .title { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; } .category { font-size: 28rpx; color: #666; margin-bottom: 20rpx; } .status { font-size: 28rpx; color: #999; } .status-container { display: flex; align-items: center; } .status-label { font-size: 28rpx; color: #999; } .picker-button { padding: 10rpx 20rpx; border-radius: 8rpx; font-size: 28rpx; color: white; } .status-pending { background-color: #ff9900; /* 橙色 */ } .status-processing { background-color: #007AFF; /* 蓝色 */ } .status-completed { background-color: #00cc66; /* 绿色 */ } /* 下拉选择器样式 */ .dropdown { position: relative; width: 100%; margin-bottom: 20rpx; } .dropdown-trigger { background-color: #f0f0f0; padding: 20rpx; border-radius: 8rpx; display: flex; justify-content: space-between; align-items: center; font-size: 28rpx; color: #333; } .dropdown-trigger .arrow { font-size: 24rpx; color: #999; } </style> 我想要去掉登录缓存功能
最新发布
08-14
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值