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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值