[Flex] Flex 控件&类 的自定义事件添加

NewClass源码摘要:本文记录了Flex中给控件和类加入自定义事件的步骤。

正文:虽然网上已经有很多类似的资料了, 不过还是想自己写一篇,作为存档。

 

(一)给类A加入自定义事件FavPathDelEvt,Appliaction调用A,并响应A的事件

(1)写一个自定义事件as类,类中附带参数Index。

package  NewClass
{
    
import  flash.events.Event;
    
    
public   class  FavPathDelEvt  extends  flash.events.Event
    {
        
private  var _index: int ;
        
        
public  function set Index(index: int ): void
        {
            _index 
=  index;
        }
        
        
public  function get Index(): int
        {
            
return  _index;
        }
        
public  function FavPathDelEvt(type:String, index: int )
        {
            Index 
=  index;
            
super (type);
        }
    }

} 

 

(2)在需要触发这个事件的类(也就是A类)中加上[Event...]的申明,并且写上触发函数。

 

package  NewClass
{
    
import  NewClass.FavPathDelEvt;
    
import  mx.core.Container;
    
import  flash.utils.setTimeout;
    
    [Event(name
= " onDelPath " , type = " NewClass.FavPathDelEvt " )]
    
    
public   class  A  extends  Container
    {    
        
public  function A()
        {
            flash.utils.setTimeout(function():
void {                // 这里设置了一个延时函数,类初始化2000ms后触发事件
                DispatchEventofA();
            },
2000 , null );
        }
        
        
private  function DispatchEventofA(): void
        {
            
this .dispatchEvent( new  NewClass.FavPathDelEvt( " onDelPath " , 1 ));
        }
    }
}

 

 

(3) 最后,在Application所在的mxml中,加上事件处理函数,并将该函数和A的事件绑定。

 <?xml version="1.0" encoding="utf-8"?>

< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  minWidth ="500"  minHeight ="350"  creationComplete ="Init()" >

    
< mx:Script >
        
<![CDATA[
            import NewClass.A;
            
            import mx.controls.Alert;
            
            private function Init():void
            {
                var a:A = new A();
                a.addEventListener("onDelPath",FavPathDelEvt_Handler);//将A的事件和Application中的函数绑定
            }
            private function FavPathDelEvt_Handler(evt:FavPathDelEvt):void
            {
                Alert.show("FavPathDelEvt of A is called, Index is " + evt.Index);
            }
            
        
]]>
    
</ mx:Script >
</ mx:Application >

 

运行程序后,2秒后会出现调用事件的提示对话框。

 

 (二)给自定义组件mxml加入自定义事件

给组件加入自定义事件基本和(一)一致。区别在于,mxml中可以通过加入

< mx:Metadata >  
        [Event(name="onDelPath", type="NewClass.FavPathDelEvt")]
</ mx:Metadata >      

来完成和A中 [Event((name="onDelPath", type="NewClass.FavPathDelEvt")] 相同的功能

--------------------------------

 源码下载链接:NewClass.rar

--------------------------------- 

转载请注明出处,au revoir! 

 

转载于:https://www.cnblogs.com/felixfang/archive/2011/03/02/1969177.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分页器是一个常见的 UI 控件,用于展示数据的分页情况,并提供翻页操作。在 Vue 中,我们可以通过自定义组件的方式来实现分页器。下面是一个简单的分页器组件示例: ```vue <template> <div class="pagination"> <button :disabled="currentPage === 1" @click="prevPage">上一页</button> <span class="page-num">{{ currentPage }} / {{ totalPages }}</span> <button :disabled="currentPage === totalPages" @click="nextPage">下一页</button> </div> </template> <script> export default { props: { currentPage: { type: Number, required: true }, totalPages: { type: Number, required: true } }, methods: { prevPage() { if (this.currentPage > 1) { this.$emit('page-change', this.currentPage - 1); } }, nextPage() { if (this.currentPage < this.totalPages) { this.$emit('page-change', this.currentPage + 1); } } } } </script> <style scoped> .pagination { display: flex; justify-content: center; align-items: center; margin-top: 20px; } button { margin: 0 10px; padding: 5px 10px; border-radius: 5px; border: none; background-color: #007aff; color: #fff; cursor: pointer; } button:disabled { opacity: 0.5; cursor: not-allowed; } .page-num { font-size: 16px; font-weight: bold; margin: 0 10px; } </style> ``` 在这个示例中,我们定义了两个 props:currentPage 和 totalPages,分别表示当前页和总页数。组件中包含上一页、下一页按钮和页码信息。通过点击按钮来触发 page-change 事件,从而更新父组件中的 currentPage 值,实现翻页操作。 使用该组件时,只需在父组件中传入 currentPage 和 totalPages 值,并监听 page-change 事件即可: ```vue <template> <div> <div v-for="item in items">{{ item }}</div> <pagination :current-page="currentPage" :total-pages="totalPages" @page-change="handlePageChange" /> </div> </template> <script> import Pagination from './Pagination.vue'; export default { components: { Pagination }, data() { return { items: ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'], currentPage: 1, totalPages: 2 } }, methods: { handlePageChange(page) { this.currentPage = page; } } } </script> ``` 这里只是一个简单的分页器示例,实际开发中还可以根据需求进行扩展,例如添加页码输入框、每页显示条数控制等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值