更新记录

1.0.0（2022-09-05） 下载此版本

模仿并改进uniapp官方ui的组件uni-data-select，自定义显示插槽（允许变量），手册：https://uniapp.dcloud.net.cn/component/uniui/uni-data-select.html

平台兼容性

使用方法

主要步骤

1. JS中定义菜单成员，包括显示文字 + 操作value
2. Template中使用本组件，并设置点击事件
3. JS中定义点击事件函数，捕捉：哪一行点击了哪一个按钮

完整例子

<template>
    <view>

        <!-- flex布局 -->
        <view style="display: flex; flex-direction: row; justify-content: space-between; padding: 3px 20px; border: 1px solid #CCC;">
            <view>
                #10086
            </view>

            <view>
                李白
            </view>

            <view>
                刺客
            </view>

            <view>

                <!-- 插件无需手动引入，直接使用即可 -->
                <!-- 里面···可以改为任意东西，图片也可以 -->
                <!-- 参数$event不可修改，否则取不到点击事件详情 -->
                <rudon-rowMenuDotDotDot :localdata="options" @change="menuAction($event, '10086')">
                    ···
                </rudon-rowMenuDotDotDot>

            </view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {

                // 右边菜单内容
                options: [
                    {
                        value: 'update',
                        text: '选修'
                    },
                    {
                        value: 'forbit',
                        text: '禁止'
                    }
                ]

            }
        },
        onLoad() {

        },
        methods: {

            /**
             * 不同行的不同菜单点击事件
             * 
             * @param {Object} action 第一个参数必须传入“$event” | 点击了哪个按钮 | 传入options的value
             * @param {Number} rowId 第二个参数随意，可以是行ID等
             */
            menuAction (action, rowId) {
                // 忽略初始化时的传入的空操作
                if (action === '') {
                    return
                }

                // 打印看参数
                console.log(JSON.stringify(action))
                console.log(JSON.stringify(rowId))

                // 动作
                // ...
                uni.showToast({
                    icon: 'none',
                    title: '[动作]' + JSON.stringify(action) + ' [对象]' + JSON.stringify(rowId)
                })
            }

        }
    }
</script>

示例项目

打开https://ext.dcloud.net.cn/plugin?id=9350 “使用 HBuilderX 导入示例项目”