项目五遇到的知识点

（一）、vuex保存登录状态

• vue 项目

1、安装 vuex

npm install vuex --save

2、在src下面新建store文件夹

• store文件夹下新建state.js、actions.js、mutations.js、getters.js、index.js

index.js

	import Vue from 'vue'
	import Vuex from 'vuex'
	Vue.use(Vuex)
	
	import state from './state'
	import actions from './actions'
	import mutations from './mutations'
	import getters from './getters'
	
	export default new Vuex.Store({
	  state,
	  actions,
	  mutations,
	  getters
	})

state.js

• state访问状态对象

    export default {
        isLogin: false,
    }
  

mutations.js

• Mutations修改状态

• tools.m.js是封装了一些方法

• 在这里主要是为了移除cookie

• cookie可以用网上的都没关系

    import tools from '../assets/js/tools.m.js';
    export default {
        loginOut(state){
    		//退出登录
            state.isLogin = false;
            tools.cookie.remove('user');
        },
        setLoginState(state){
    		//修改登录状态
            state.isLogin = true;
        }
    }
  

getters.js

• getters计算过滤操作

    export default {
        isLogin(state){
            return state.isLogin;
        }
    }
  

action.js

• actions异步修改状态

    export default {
    
    }
  

3、在main.js中引入store

import Vue from 'vue'
import router from './router'
import store from './store'
import App from './App.vue'


new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
});

4、在APP.vue中一定要初始化数据，要不然一切白搭

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
  name: "app",
  data() {
    return {
    
    };
  },
  created(){
    var user = tools.cookie.get('user');
    if(user){
      this.setLoginState(tools.jsonParse(user));
    }
  },
  methods:{
    ...mapMutations(['setLoginState'])
  }

};
</script>
<style lang="less">
</style>

5、登录页面login.vue中使用

• 下面也是用来封装的方法

• 下面代码就是cookie用户状态，修改，给cookie一个时间期限

    <script>
    	import {mapMutations} from 'vuex;
    	export default{
    		methods: {
    			loginData(){//登录点击事件
    				//...登录过程
    				//最后
    				var expires = new Date();
              		expires.setTime(expires.getTime() + 7*24*60*60*1000);
              		tools.cookie.set("user",tools.toJson(true),expires.toGMTString());//tools.toJson(true)(true)可以保存用户信息现在我还没接，接口就用true替代
              		that.setLoginState(true);
    
    			}
    
    		}
          	...mapMutations(['setLoginState'])
    	}
    </script>
  

6、退出页面loginOut.vue

<script>
	import { mapGetters,mapMutations } from 'vuex'
	export default{
		methods: {
			signOut(){//退出点击事件
				this.loginOut();
			},
	    	...mapMutations(['loginOut'])
		}
	
	}
</script>

结束。。。

（二）、vue中引入echarts

1、安装

npm install echarts --save

2、全局引入

(1)、在main.js中配置

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //引入组件

(2)、echarts.vue中引用

• 柱状图

    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
  

js

<script>
export default {
    name: 'eCharts',
    data () {
        return {
        
        }
    },
    mounted(){
        this.drawLine();
    },
    methods: {
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
                title: { text: '在Vue中使用echarts' },
                tooltip: {},
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        }
    }
}
</script>

3、按需引入

• 如果是在许多页面中都有用到，就写在main.js中

main.js

//引入基本模板
 let echarts = require('echarts/lib/echarts')
 
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件，图例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
Vue.prototype.$echarts = echarts //引入组件

• 在组件中使用同上，如果只在一个地方使用就直接写在.vue文件中就好啦
• 注：这里用 require 不用 import 引入是因为 import 需要详细的路径

This is an 原文地址：

4、项目中使用折线图

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="height:400px;margin-top: 100px;"></div>

js

<script>
    // 引入 ECharts 主模块
    let echarts = require('echarts/lib/echarts');
    // // 引入折线图
    require('echarts/lib/chart/line');

    // // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');
    require('echarts/lib/component/legend');
    require('echarts/lib/component/toolbox');

	export default{
		mounted() {
			this.drawLine();
		},
		methods:{
			// 折线图
            drawLine(){
               //基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'))
                myChart.setOption ({
                    title: {
                        text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    // 图例--折线提示
                    legend: {
                         data:['邮件营销','联盟广告']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    // 右上角的工具箱(下载)
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    // 折线底部
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一','周二','周三','周四','周五','周六','周天']
                    },
                    // 左侧单位
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} (份)'//更改y轴单位，不要就不用写
                        }
                    },
                    // 数据
                    series: [
                        {
                            name:'邮件营销',
                            type:'line',
                            stack: '总量',
                            data:[120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name:'联盟广告',
                            type:'line',
                            stack: '总量',
                            data:[220, 182, 191, 234, 290, 330, 310]
                        }
	                   ]
	               })
            	}
			}
		}
</script>

（三）、点击div空白处隐藏v-show

1、方法1

• 通过监听事件

    document.addEventListener('click',function(e){
        if(e.target.className!='usermessage'){
            that.userClick=false;
        }
    })
  

2、方法2

• 给最外层的div加个点击事件 @click="userClick=false"

• 给点击的元素上面加上：@click.stop="userClick=!userClick"

This is an 原文地址：

3、方法3

• vue 在显示v-show的div外任意点击隐藏v-show

• 核心思想就是监听document的click/touchstart

• 用contains这个方法去判断点击的元素是否在区域外

• this.$el

• this.$el是在mounted中才会出现的

    mounted() {
        document.addEventListener('click', this.handleDocumentClick);
        document.addEventListener('touchstart', this.handleDocumentClick);//移动
    },
    
    methods: {
            handleDocumentClick(e) {
                if (!this.$el.contains(e.target)) {
                    this.isShow = false;
                } 
        }
    }    
  

4、方法4

• 将点击的区域过滤。不需要再阻止冒泡，需要使用到ref属性

• this.$refs

    <template>
    <div ref="box">
        <div @click="isShow"></div>
    </div>    
    </template>
     
     
    mounted(){
            let that=this;
            document.addEventListener('click',function(e){
                if(that.$refs.box && !that.$refs.box.contains(e.target)){
                that.show = false;           
            }
            })
        },
    methods:{
        isShow:function(){
            this.show=true
        }   
    }
  

（四）、vue项目中使用element UI组件

1、安装

npm i element-ui -S

2、完整引入Element

• 在main.js中写入一下内容

    import Vue from 'vue';
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import App from './App.vue';
    
    Vue.use(ElementUI);
    
    new Vue({
      el: '#app',
      render: h => h(App)
    });
  

3、vue+element-ui路由配置

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
        path: '/',
        component: resolve => require(['@/views/index.vue'],resolve),
        redirect: 'home',
        children:[
            {
                path: '/home',
                component: resolve => require(['@/views/home.vue'],resolve)
            },
            {
                path: '/user',
                component: resolve => require(['@/views/user.vue'],resolve),
                children: [
                    {
                        path: 'login',
                        component: resolve => require(['@/components/user/login.vue'],resolve)
                    },
                    {
                        path: 'logout',
                        component: resolve => require(['@/components/user/logout.vue'],resolve)
                    }
                ]
            }
        ]
    }

  ]
})

4、 NavMenu 导航菜单实现点击跳转不同的内容

• 效果图

路由配置

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
            {
                path: '/text',
                component: resolve => require(['@/views/text.vue'],resolve),
                children: [
                    {
                        path: 'trend1',
                        name: 'trend1',
                        component: resolve => require(['@/components/text/trend1.vue'],resolve)
                    },
                    {
                        path: 'task1',
                        name: 'task1',
                        component: resolve => require(['@/components/text/task1.vue'],resolve)
                    }
                ]
            }

  ]
});

views文件夹

• 新建text.vue

    <template>
        <div class="text" >
            <el-aside width="190px">
              <Side />
            </el-aside>
            <el-main >
              <router-view></router-view>
            </el-main>
        </div>
    </template>
    <script>
    	//组件
        import Side from '../components/text/side.vue'
        export default {
            name: 'text',
            data() {
                return{
    
                }
            },
            components: {
                Side
           }
        }
    </script>
    <style lang="less">
    .el-aside {
        float: left;
    }
    </style>
  

components文件夹

• 新建side.vue、task1.vue、trend1.vue

side.vue

<template>
    <el-row class="sidebar" style="width: 190px;">
    <el-col>
      <el-menu
        class="el-menu-vertical-demo"
        :default-active="activeIndex"
        router
        :default-openeds="openeds"
        @open="handleOpen"
        @close="handleClose">
        <el-submenu index="1">
          <template slot="title">
            <i class="iconfont icon-qushifenxi"></i>
            <span>用户设置</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/text/trend1">个人中心</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="iconfont icon-renwuguanli"></i>
            <span>任务管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/text/task1">任务信息</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>
</template>
<script>

  export default {
    data() {
      return {
        tabPosition: 'left',
        openeds: ['1','2','3']
      }
    },
    computed:{
      activeIndex(){
        return this.$route.path.replace('/','')
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

task1.vue

<template>
  <div>
      任务信息内容
  </div>
</template>
<script>
  export default {
    name: 'task1',
    data() {
      return {
      }
    }
  }
</script>

trend1.vue

<template>
  <div>
      个人中心内容
  </div>
</template>
<script>
  export default {
    name: 'trend1',
    data() {
      return {
      }
    }
  }
</script>

（五）、WebSocket

• 协议标识符是ws（如果加密，则为wss，对应 HTTPS 协议），服务器网址就是 URL

• 栗子

    var ws = new WebSocket('wss://echo.websocket.org');
    
    ws.onopen = function(evt) {
      console.log('Connection open ...');
      ws.send('Hello WebSockets!');
    };
    
    ws.onmessage = function(evt) {
      console.log('Received Message: ' + evt.data);
      ws.close();
    };
    
    ws.onclose = function(evt) {
      console.log('Connection closed.');
    };
  

(六)、父组件获取子组件input的值

• 子组件

    <input v-model.trim="msg" ref="msg">
    data(){
    	return {
    		msg: ''
    	}
    }
  

• 父组件

    <inputValue ref="getInput" />
    <button @click="getMsg"></button>
    methods:{
    	getMsg(){
    		console.log(this.$refs.getInput.msg)
    	}
    }
  

• 注意尽量少用ref

(七)、Vue中v-for的使用

• 效果图

• v-for循环之前一直想要实现的内容，终于解决了...

html

<div class="test-content">
    <div class="test-group" v-for="(value,key) in testList">
        <item class="item-left">{{value}}</item>
        <div class="item-right">{{testAjax[key]}}</div>
    </div>
</div>

less

.test-content {
    width: 300px;
    margin-top: 100px;
    border: 1px solid #000;
    .test-group {
        height: 45px;
        line-height: 45px;
        padding: 0 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #000;
        &:last-of-type{
            border-bottom: none;
        }
        .item-left,.item-right {
            display: inline-block;
        }
        .item-left {
            float: left;
        }
        .item-right {
            float: right;
        }
    }
}

js

data() {
	return {
		testList:{
            id: 'ID',
            address: '地址',
            sex: '性别',
            name: '姓名',
            phone: '电话',
        },
      	testAjax: {
            id: '100010',
            address: '上海静安区',
            sex: '男',
            name: '哈哈哈',
            phone: '12345678985',
        }
	}
}

• 实现testAjax一般是后端传的在对应的地方写，this.testAjax = '后端内容'
• 好处省了不少代码

(八)、elementUI 的表单

• 效果图

	<template>
	    <el-table
	        :data="tableData"
	        style="width: 1000px;margin: 100px auto;"
	        border
	    >
	        <el-table-column v-for="(item,index) in items"  :prop="item.prop" :label="item.label" >
	        </el-table-column>
	    </el-table>
	</template>
	<script>
	export default {
	  name: "news",
	  data() {
	    return {
	        items: [
	            {
	                prop: 'date',
	                label: '日期'
	            },
	            {
	                prop: 'name',
	                label: '姓名'
	            },
	            {
	                prop: 'address',
	                label: '地址'
	            }
	        ],
	        tableData: [{
	            date: '2018-05-02',
	            name: '王大虎',
	            address: '上海市静安区高平路 1518 弄'
	          }, {
	            date: '2018-12-25',
	            name: '王二虎',
	            address: '上海市杨浦区金沙江路 563 弄'
	          }, {
	            date: '2018-10-01',
	            name: '王三虎',
	            address: '上海市浦东新区哈哈路 799 弄'
	          }, {
	            date: '2019-01-28',
	            name: '王小虎',
	            address: '上海市普陀区金沙江路 1516 弄'
	          }]
	    };
	  },
	  created() {
	  },
	}
	
	</script>
	<style>
	</style>

展开行

• row-key：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。

• expand-row-keys：可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。

• type="expand"效果图

• 操作按钮效果图

	<template>
	    <el-table
	        :data="tableData"
	        style="width: 1000px;margin: 100px auto;"
	        :row-key='getRowKeys'
	        :expand-row-keys="dataindex"
	        border
	    >
	        <el-table-column v-for="(item,index) in items"  :prop="item.prop" :label="item.label" >
	        </el-table-column>
	        <el-table-column type="expand" label="点击" >
	            <template slot-scope="props">
	                我是展开行
	            </template>
	        </el-table-column>
	        <el-table-column label="操作" >
	            <template slot-scope="scope">
	                <el-button
	                    round
	                    size="mini"
	                    @click="myClickLook(scope.$index, scope.row)"
	                    >查看</el-button>
	                <el-button
	                    round
	                    size="mini"
	                     @click="myClickCommand(scope.$index, scope.row)"
	                    >命令</el-button>
	            </template>
	        </el-table-column>
	    </el-table>
	</template>
	<script>
	export default {
	  name: "news",
	  data() {
	    return {
	        dataindex:[],
	        getRowKeys (row) {
	            return row.id;
	        },
	        items: [
	            {
	                prop: 'date',
	                label: '日期'
	            },
	            {
	                prop: 'name',
	                label: '姓名'
	            },
	            {
	                prop: 'address',
	                label: '地址'
	            }
	        ],
	        tableData: [{
	            id: 0,
	            date: '2018-05-02',
	            name: '王大虎',
	            address: '上海市静安区高平路 1518 弄'
	          }, {
	            id: 1,
	            date: '2018-12-25',
	            name: '王二虎',
	            address: '上海市杨浦区金沙江路 563 弄'
	          }, {
	            id: 2,
	            date: '2018-10-01',
	            name: '王三虎',
	            address: '上海市浦东新区哈哈路 799 弄'
	          }, {
	            id: 3,
	            date: '2019-01-28',
	            name: '王小虎',
	            address: '上海市普陀区金沙江路 1516 弄'
	          }]
	    };
	  },
	  methods: {
	    myClickLook(index,row) {
	        this.dataindex = [];
	        this.dataindex.push(index);
	        console.log(this.dataindex);
	    },
	    myClickCommand(index,row) {
	        this.dataindex = [];
	        this.dataindex.push(index);
	    }
	  },
	  created() {
	  },
	}
	
	</script>
	<style>
	.el-table__expand-icon:after {
	    content: '查看';
	    color: #42c4fe;
	    cursor:pointer;
	}
	.el-table__expand-icon--expanded {
	    transform: rotate(0deg);
	}
	.el-table__expand-icon--expanded:after {
	    content: '收起';
	    color: #42c4fe;
	    cursor:pointer;
	}
	.el-table__expand-icon>i {
	    display: none !important;
	}
	</style>

合并单元格

 <el-table
        :data="tableData"
        style="width: 1000px;margin: 100px auto;"
        :row-key='getRowKeys'
        :expand-row-keys="dataindex"
        :span-method="objectSpanMethod"
        border
    ></el-table>
<script>
	methods: {
		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
	         if (columnIndex === 0) {    //用于设置要合并的列
	          if (rowIndex % 2 === 0) {   //用于设置合并开始的行号
	            // return {
	            //   rowspan: 2,　　　　　//合并的行数
	            //   colspan: 1          //合并的列数，设为０则直接不显示
	            // };
	            return [2,1]
	          } else {
	            return [0,0]
	          }
	        }
	    }
	}
</script>

(九)、JavaScript 中的12种循环遍历方法

• 1、for循环

• for - 循环代码块一定的次数

• 经常用于数组的循环遍历

    let arr = ['苹果','香蕉','梨'];
    for (let i=0; i<arr.length; i++){
     console.log(i,arr[i])
    }
    // 0 "苹果"
    // 1 "香蕉"
    // 2 "梨"
  

• 2、for in 循环

• for/in - 循环遍历对象的属性

• key 代表对象的key值，obj[key]代表对应的value值

• for in循环主要用于遍历普通对象

    let obj = {
        name: '张三',
        age: 18,
        sex: '男'
    }
    for(let key in obj){
        console.log(key, obj[key]);
    }
    // name 张三
    // age 18
    // sex 男
  

• 3、while循环

• While 循环会在指定条件为真时循环执行代码块。

• 只要指定条件为 true，循环就可以一直执行代码。

    let cars = ['苹果','香蕉','梨','橘子'];
       var i = 0;
       while(cars[i]){
        console.log(cars[i]);
        i++;
      }
    // 苹果
    // 香蕉
    // 梨
    // 橘子
  

• 4、do while 循环

• do while循环是while循环的一个变体，它首先执行一次操作，然后才进行条件判断，是true的话再继续执行操作，是false的话循环结束

    let i = 5;
    do {
       console.log(i);
       i--;
    }
     while(i > 3)
    //5
    //4
  

• 5、Array forEach循环

• forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

• 注意: forEach() 对于空数组是不会执行回调函数的。

    let arr = ['苹果','香蕉','梨'];
    arr.forEach(function(i,index){
        console.log(i,index);
    })
    // 苹果 0
    // 香蕉 1
    // 梨 2
  

• 6、Array map()方法

• map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

• map()方法按照原始数组元素顺序依次处理元素

• map()不会对空数组进行检测

• map()不会改变原始数组

• map 和 forEach 方法都是只能用来遍历数组，不能用来遍历普通对象。

    let arr = ['苹果','香蕉','梨'];
    let tt = arr.map(function(i){
        console.log(i);
    })
    // 苹果 
    // 香蕉 
    // 梨 
  

• 7、Array filter()方法

• filter() 方法返回符合一定条件的元素

• filter 方法是 Array 对象内置方法，它会返回通过过滤的元素，不改变原来的数组。

    let arr = [1,2,3];
   	let tt = arr.filter(function(i){
    	return i > 1;
    })
    console.log(tt);
    //[2, 3]
  

• 8、Array some()方法

• some()方法用于检测数组中的元素是否满足条件(函数提供),返回boolean值，不改变原数组

    let arr = [1,2,3];
    let tt = arr.some(function(i){
        return i > 1;
    })
    console.log(tt);//true
  

• 9、Array every()方法

• every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供），返回 boolean 值，不改变原数组。

    let arr = [1,2,3];
    let tt = arr.every(function(i){
        return i > 1;
    })
    console.log(tt);//false
  

• 10、 Array reduce()方法

• reduce()方法接收一个函数作为累加器，数组中的每个值(从左到右)开始缩减，最终计算为一个值

    let arr = [1,2,3];
    let add = arr.reduce(function(i,j){
        return i+j;
    })
    console.log(add);//6
  

• 11、Array reduceRight()方法

• reduceRight()方法和reduce功能是一样的，它是从数组的末尾处向前开始计算

    let arr = [1,2,3];
    let add = arr.reduceRight(function(i,j){
        return i+j;
    })
    console.log(add);//6
  

• 12、for of 循环

    let arr = ['苹果','香蕉','梨'];
    for(let i of arr){
    	console.log(i);
    }
    // 苹果 
    // 香蕉 
    // 梨 
  

This is an 原文地址：

零碎知识点

1、vue中如何引入jQuery

• 用vue-cli脚手架工具构建项目成功后当需引入jq

安装

npm install jquery --save

webpack.base.conf.js

const webpack = require('webpack');
module.exports = {
	resolve: {
		alias:{
			'jquery': 'jquery
		}
	},
	plugins:[
		new webpack.optimize.CommonsChunkPlugin('common.js');
		new webpack.ProvidePlugin({
			$:"jquery",
			jQuery:"jquery",
			"windows.jQuery":"jquery"
		})
	]
}

在入口文件main.js中输入

import $ from 'jquery'

2 、三元运算符

• ? :
• 运用两个三元运算符
• 不同状态变化不同颜色
• 效果图
  

html

<div class="cell" v-for="item in items">
     <div :class="item.state == 1 ? 'state-green' : item.state == 0 ? 'state-orange' : 'state-red'">{{item.title}}</div>
</div>

js

data() {
	return {
		// 1是运行0是暂停-1是终止
       items: [
        {
          title: '运行',
          state: 1
        },
        {
          title: '暂停',
          state: 0
        },
        {
          title: '终止',
          state: -1
        }
       ]
	}
}

css

.cell {
    .state-green {
        color: #67C23A;
    }
    .state-orange {
        color: #E6A23C;
    }
    .state-red {
        color: #F56C6C;
    }
}

3、element-ui 中的table的列隐藏问题解决

• 一般情况我控制元素显示隐藏用vue的v-show

• el-table-column使用v-show时不支持换成v-if可达到目的

    <el-table-column v-if="isShow"></el-table-column>
  

4、vue中'. native'修饰符的使用

• 在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触 发的。

      <Senior class="senior-right" @click="getClick"  />
    
      <Senior class="senior-right" @click.native="getClick"  />