iview+vue左侧打开抽屉的图标

1、实现效果

2、代码

css

<style>
	.Anchor_fixmain{
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 101;
	    border-left: 1px #ccc solid;
	    width: 0;
	    height: 100%;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	    background:#fff;
    }
    .btnlr_box{
            position: absolute;
            top: 50%;
            right: -15px;
            z-index: 101;
            margin-top: -40px;
            background-color: rgba(0,0,0,0.5);
            -webkit-border-radius: 0 3px 3px 0;
            -moz-border-radius:  0 3px 3px 0;
            border-radius:  0 3px 3px 0;
            width: 15px;
            height: 80px;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 80px;
        }
</style>

html

<!-- 左侧打开抽屉的图标 -->
	<div class="Anchor_fixmain">
		<span v-if="arrowiconobj == 0" class="btnlr_box" @click="ydrightfn($event)">
	        <Icon type="ios-arrow-back" />
	    </span>
	    <span v-if="arrowiconobj == 1" class="btnlr_box" @click="ydrightfn($event)">
	        <Icon type="ios-arrow-forward" />
	    </span>
	</div>
	<!-- 左侧树抽屉指导性培养方案 -->

	
	<Drawer  draggable
	 title="院系学科树" 
	 :mask-closable="false"  //不允许点击遮罩层关闭
	 :closable="true" //实现右上角关闭按钮
	 v-model="modal4"
	  width="340" 
	  :mask="false" //是否显示遮罩层
	   placement="left">
	<i-Form :label-width="50">
	    <row>
			<i-col span="20">
			  <Form-Item label="版本号" prop="bbh" :label-width="80">
		       <inco-i-bbh  :ywdm.sync="queryform.ywdm"   @onselectbbh="queryLike" :cxby.sync="queryform.cxby"  :bbh.sync="queryform.bbh" ></inco-i-bbh>
		      </Form-Item>
			</i-col>
		</row>
		<row>
			<i-col span="24">
		<Tree :data="yxzy_data" style="width:100%" ref="tree1" @on-select-change="queryLike"></Tree>
	        </i-col>
		</row>
	
	</i-Form>
	</Drawer>

js

ydrightfn:function (e){
    	    var self=this;
    	    self.modal4=true;
        },
//加载院系专业树数据
init_yxzy:function(){
     		var self = this
     		$.post(baseUrl + 'pyfacomponent/queryYxZyTree',  {
                sfyxs: '1',
                sfglbm: '1',
                pylx:self.queryform.pylb
                	
            }, function (res) {
            	self.yxzy_data  = self.global_fun_createTree
             	({
             		idkey: 'value',  //所有查询出数据的id  （院系专业）
                    pidkey: 'sjdm',  //父id
                    pid: '0',  //当父id为0则是最上级院系节点
                    data: res.content,  //赋值
                    convert: [   //label是查询出来的专业或者院系的名字作为节点title
                    	{oldkey: 'label', newkey: 'title'},     // key转换
                    ] //
             	})
         	})
     	},
//点击树查询
queryLike:function(res){
     		var self = this;
     		var sss=this.$refs.tree1.getSelectedNodes();
     		if (null != sss && sss.length > 0) {
     			if (sss[0].sjdm == "0") {
         			self.queryform.yxdm=sss[0].value
         		} else {
         			self.queryform.yxdm=sss[0].sjdm
         			self.queryform.zydm=sss[0].value
         		}
     		}
     		
     		self.query(self.page.pageNum)
     	},