tkx-ui v1.0.6

已完成功能

• 右键菜单

使用

npm install tkx-ui --save

import tkxUi from "tkx-ui";
import 'tkx-ui/tkx-ui.css'

<template>
  <div>
    <div
      v-for="item in arr"
      :key="item.name"
      @click.right="rightclick(item, $event)"
      style="border: 1px solid #ccc; height: 100px; margin-bottom: 10px; padding: 10px"
    >
      <span>姓名：{{ item.name }}</span>
    </div>
    <context-menu :class-index="0" :rightclickInfo="rightclickInfo" @copy="copy" />
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      rightclickInfo: {
        position: {
          x: null,
          y: null,
        },
        params: null,

        menulists: [
          {
            fnName: "copy",
            icoName: "el-icon-document-copy",
            btnName: "复制数据",
          },
          {
            fnName: "look",
            icoName: "el-icon-view",
            btnName: "查看行数据",
          },
          {
            fnName: "edit",
            icoName: "el-icon-edit",
            btnName: "编辑行数据",
          },
          {
            fnName: "delete",
            icoName: "el-icon-delete",
            btnName: "删除行数据",
          },
          {
            fnName: "refresh",
            icoName: "el-icon-refresh",
            btnName: "刷新页面",
          },
        ],
      },
      arr: [
        { name: "张三", age: 10 },
        { name: "张三1", age: 103 },
        { name: "张三2", age: 104 },
        { name: "张三3", age: 105 },
        { name: "张三4", age: 106 },
        { name: "张三13", age: 105 },
        { name: "张三134", age: 106 },
        { name: "张三234", age: 106 },
        { name: "张三334", age: 106 },
        { name: "张三344", age: 106 },
        { name: "张三314", age: 106 },
      ],
    };
  },
  methods: {
    copy(e) {
      console.log(e);
    },
    rightclick(item, event) {
      this.rightclickInfo.position = {
        x: event.x,
        y: event.y - 20,
      };
      this.rightclickInfo.params = item;
      event.preventDefault(); // 阻止默认的鼠标右击事件
    },
  },
};
</script>

<style></style>