首页 > 代码库 > avalon使用笔记

avalon使用笔记

2024-08-27 04:26:57   267人阅读

//保存取消操作（使用双向绑定）
    <div ms-controller=‘test‘>
          <table border="1" style="border-collapse: collapse;">
              <tbody :visible="@showLayer">
                  <tr :for="(k,v) in @data" >
                      <td height="66">
                          <div :visible="v.showCurRow">
                              <input :duplex="v.value" :attr="{‘placeholder‘:v.placeholder,‘type‘:v.type}"/>
                              <div style="text-align: center;padding-top:10px;">
                                  <button :click="v.save" style="margin-right:10px;">保存</button>
                                  <button :click="v.cancel">取消</button>
                              </div>
                          </div>
                      </td>
                      <td>
                          <a href="javsscript:;" :click="v.showCurRow=!v.showCurRow">{{v.showCurRow?‘收缩‘:‘展开‘}}

</a>
                      </td>
                  </tr>
              </tbody>
              <tfoot>
                <tr>
                    <td colspan="2" align="center">
                        <button :click="@showLayer=!@showLayer" :click-1="@console">弹层</button>
                    </td>
                </tr>
              </tfoot>
          </table>
    </div>
</body>
<script>
    var vm=avalon.define({
        $id:"test",
        data:[{‘name‘:‘用户名‘,"value":‘‘,type:‘text‘},{‘name‘:‘密码‘,"value":‘‘,type:‘password‘}],
        showLayer:true,
        init:function(){
            var that=this;
            var newData=vm.data.$model;
            _.each(newData,function(item){
                item[‘saveValue‘]=‘‘;
                item[‘showCurRow‘]=true;
                item[‘placeholder‘]=‘请输入‘+item.name;
                item[‘type‘]=item.type;
                item[‘save‘]=function(){
                    this[‘saveValue‘]=this[‘value‘];
                    this[‘showCurRow‘]=false;
                };
                item[‘cancel‘]=function(){
                    this[‘value‘]=this[‘saveValue‘];
                    this[‘showCurRow‘]=false;
                }
            });
            vm.data=newData
        },
        console:function(){
            console.info(this.data.$model)
        }
    });
    vm.init();

 

 //数据延迟赋值，联动效果
<body>
    <div :controller="haha">
        <form name="leyi">
            <select  name="halo" :duplex="@data.expSelected">
                <option  :for="(k,v) in @data.selectArr" :attr="{‘value‘:v.VALUE}">{{v.DISPLAY_VALUE}}</option>
            </select>
            <select  name="" :visible="@data.expSelected==1" :attr="{‘disabled‘:@data.expSelected!=1}" >
                <option value="0">矩形</option>
                <option value="1">圆形</option>
            </select>
            <select  name="" :visible="@data.expSelected==2" :attr="{‘disabled‘:@data.expSelected!=2}">
                <option value="0">红色</option>
                <option value="1">绿色</option>
            </select>
        </form>
    </div>
<script>
    //数据延迟赋值，联动效果
    var vm=avalon.define({
        $id:‘haha‘,
        data:{
             expSelected:‘‘,
            "selectArr":[]
        },
        init:function(){
          var that=this;
            var selectArrData=[
                {
                    "DISPLAY_VALUE": "其他",
                    "VALUE": "3"
                },
                {
                    "DISPLAY_VALUE": "颜色",
                    "VALUE": "2"
                },
                {
                    "DISPLAY_VALUE": "图形",
                    "VALUE": "1"
                }
            ];
            //that.data.selectArr=selectArrData;
            setTimeout(function(){//数据延迟加载
                that.data.selectArr=selectArrData;
                that.data.expSelected=2
             },1000)
        }
    });
    vm.init();
</script>

 

//查看更多的展开收缩
<body>
    <div :controller=‘test‘>
        <span :for="el in data|limitBy(4)">{{el}}</span>
        <span :for="el in data|limitBy(@data.length-4,4)" :visible="@bool">{{el}}</span>
        <span :visible="@data.length>4" :click="@bool=!@bool">{{@bool?‘收缩‘:‘更多‘}}</span>
    </div>
</body>
<script>
    var vm=avalon.define({
        $id:"test",
        data:[1,2,3,4,5,6,7],
        bool:false
    });
</script>

 

//tab切换
<style>
    .active{color:red}
</style>
</head>
<body>
    <div :controller=‘test‘>
        <div class="tabHeader">
            <span :for="(k,v) in @tabData" :mouseenter="@tabActiveIndex=k" 

:class="[(@tabActiveIndex==k&&‘active‘)]">{{v.tabTitle}}</span>
        </div>
        <ul  class="tabContent">
            <li :for="(k,v) in @tabData" :visible="k==@tabActiveIndex" >{{v.tabContent}}</li>
        </ul>
    </div>
</body>
<script>
    var vm=avalon.define({
        $id:"test",
        tabData:[
            {
                tabTitle:"tab1标题",
                tabContent:"tab1内容"
            },
            {
                tabTitle:"tab2标题",
                tabContent:"tab2内容"
            },
            {
                tabTitle:"tab3标题",
                tabContent:"tab3内容"
            }
        ],
        tabActiveIndex:0
    });
</script>

 

avalon使用笔记


联系
我们