uni-app 的 Grid自定义点击事件返回值

蔚落 2021-11-16 21:38 1193阅读 0赞

uni-app 的 Grid  自定义 点击事件的返回值  
顺便写一下怎么绑定值和注册点击事件

先在 script 添加引用

import uniGrid from '@/components/uni-grid/uni-grid.vue';

然后在export default  添加申明

export default {
    	components: {
    		uniGrid
    	}
    
    }

再添加标签

```
    <uni-grid :options="data1" :show-out-border="false" @click="onClick" />
    
    // data1 自定义图标集合
    //:show-border="false" 是否显示边框属性
    // onClick 点击事件
    ```

1.修改 data1 值  
比如 要点击返回URL

先修改data1 添加 URL

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjU4NTcz_size_16_color_FFFFFF_t_70][]

2.修改 组件源代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjU4NTcz_size_16_color_FFFFFF_t_70 1][]  
找到   
methods：下面的onClick事件 修改如下

```
    methods: {
        onClick(index, num) {
    
            this.$emit('click', {
                    URL : this.gridGroup[index][num].URL
                })
            }
        }
    ```

然后页面上

![20190729121033120.png][]  
就可以打印出 URL

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjU4NTcz_size_16_color_FFFFFF_t_70]: /images/20211116/843f997496f8431f95fb40d4eec27dba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjU4NTcz_size_16_color_FFFFFF_t_70 1]: /images/20211116/a50a49e2fb9b46e2a0018e3d585f0721.png
[20190729121033120.png]: /images/20211116/1b4a07302605411d9abad8cfe9b50d78.png