【资料图】

  1. 代码复用:这个组件可以在多个页面或组件中使用,避免了重复编写相同的按钮代码。
  2. 灵活性:通过showButtons属性,可以根据需要显示不同的按钮。默认情况下,它会显示添加、修改和删除按钮,但你也可以根据具体情况传递其他值来显示或隐藏按钮。
  3. 可定制性:每个按钮都有自己的点击事件处理函数,你可以根据需要自定义这些函数的实现。
<script>export default {  name: "CommonCrudButton",  props:{    showButtons:{      type:Array,      required:true,      default:["add","update","delete"]    }  },  setup(props,{emit}){    console.log("curd button props",props.showButtons)    function handleAdd(){      emit("add")    }    function handleUpdate(){      emit("update")    }    function handleDelete(){      emit("delete")    }    return{handleDelete,handleUpdate,handleAdd}  }}</script>

调用方法:

  1. 首先,确保你已经在项目中引入了Vue.js和Element UI库(因为代码中使用了Element UI的按钮组件)。

  2. 在需要使用这个组件的地方,导入它:

    import CommonCrudButton from "@/components/CommonCrudButton.vue";
  3. 在你的Vue组件中,注册并使用组件。你可以通过CommonCrudButton v-show指令来控制按钮的显示与隐藏,以及通过@click监听按钮的点击事件:

    <script>import CommonCrudButton from "@/components/CommonCrudButton.vue";export default {  components: {    CommonCrudButton,  },  methods: {    handleAdd() {      // 处理添加按钮点击事件    },    handleUpdate() {      // 处理修改按钮点击事件    },    handleDelete() {      // 处理删除按钮点击事件    },  },};</script>复制
  4. methods中实现按钮点击事件的处理逻辑,根据需要进行相应的操作。

这样,你就可以在你的Vue组件中使用这个通用的增删改查按钮组件了。根据传入的showButtons属性值,它会显示相应的按钮,并在点击按钮时触发相应的事件处理函数。

转载自:vue通用的增删改查按钮组件

推荐内容