自研国产零依赖前端UI框架实战007 封装编辑和删除相关的功能组件 ...

媒介

前面我们已经实现了一个表格, 能够展示用户的信息, 一个分页能够执行分页获取用户信息.
到目前为止, 数据的渲染, 我们基本就做的差不多了, 接下来我们来扩展一下表格, 让其支持添加按钮, 我们在内里添加编辑按钮和删除按钮.
表格样式调整

我调整了一下表格的样式, 增加了操作列, 目前看起来是如许的:

代码内里增加了操作这一列:

操作这一列可以根据一个叫做operator的属性进行控制, 默认是true, 如果改成false, 则不表现操作列.
稍微调整一下删除按钮的样式

暴露按钮点击方法

起首是在组件中添加要暴露的方法:

1. const emit = defineEmits(['edit', 'delete']);
2. const onEdit = (index, item) => emit('edit', index, item) // 编辑
3. const onDelete = (index, item) => emit('delete', index, item) // 删除

复制代码

接着给按钮绑定:

1. <button @click.stop="onEdit(k, v)">编辑</button>
2. <button class="delete" @click.stop="onDelete(k,v)">删除</button>

复制代码

在App.vue中监听编辑和删除这两个事件:

1. <zdp_table1
2.         :columns="columns"
3.         :data="data"
4.         @edit="onEdit"
5.         @delete="onDelete"
6.     />

复制代码

再简单的实现事件的监听:

1. const onEdit = (index, item) => {
2.   console.log("编辑", index, item)
3. }
4. const onDelete = (index, item) => {
5.   console.log("删除", index, item)
6. }

复制代码

此时, 当我们点击编辑按钮的删除按钮的时间, 控制台会输出对应的内容.

此时页面结果如下:

App.vue的完备代码如下:

1. <script setup>import zdp_table1 from "./zdpui/components/zdp_table1.vue";import zdp_page1 from "./zdpui/components/zdp_page1.vue";import random from "./zdpui/js/random.js";import {ref} from "vue";const columns = [  {    title: "员工编号",    key: "id",    width: 80,    align: "center"  },  {    title: "姓名",    key: "name",    width: 100,    align: "center"  },  {    title: "年龄",    key: "age",    width: 100,    align: "center"  }]const page = ref(1);const size = ref(10);const total = ref(100);const data = ref(random.users(size.value))const onChangePage = (v) => {  page.value = v  const newData = random.getPageUser(      page.value,      size.value,  )  data.value = newData.data  total.value = total.value}const onEdit = (index, item) => {
2.   console.log("编辑", index, item)
3. }
4. const onDelete = (index, item) => {
5.   console.log("删除", index, item)
6. }
7. </script><template>  <div>    <zdp_table1
8.         :columns="columns"
9.         :data="data"
10.         @edit="onEdit"
11.         @delete="onDelete"
12.     />
13.     <zdp_page1        :page="page"        :size="size"        :total="total"        @change="onChangePage"    />  </div></template>

复制代码

删除确认

当我们点击删除的时间, 盼望能够弹出一个确认删除的对话框, 好比像下面如许.

这个我已经封装好了, 比想象中要简单的多, 完备代码如下:

1. <script setup>
2. import {defineEmits, defineProps} from 'vue';
4. const props = defineProps({
5.   show: {
6.     type: Boolean,
7.     default: false
8.   },
9.   title: {
10.     type: String,
11.     default: '确认删除'
12.   },
13.   content: {
14.     type: String,
15.     default: '你确定要删除该项目吗？此操作不可逆。'
16.   },
17.   ok: {
18.     type: String,
19.     default: '确认'
20.   },
21.   cancel: {
22.     type: String,
23.     default: '取消'
24.   }
25. });
27. const emit = defineEmits(['confirm', 'close']);
28. const onClose = () => emit('close')
29. const onConfirm = () => emit('confirm')
30. </script>
32. <template>
33.   <div class="confirm-delete-dialog" v-if="props.show">
34.     <div class="dialog-overlay" @click.self="onClose"></div>
35.     <div class="dialog-content">
36.       <h2>{{ props.title }}</h2>
37.       <p>{{ props.content }}</p>
38.       <div class="dialog-buttons">
39.         <button @click="onConfirm">{{ props.ok }}</button>
40.         <button @click="onClose">{{ props.cancel }}</button>
41.       </div>
42.     </div>
43.   </div>
44. </template>
47. <style scoped>
48. .confirm-delete-dialog {
49.   position: fixed;
50.   top: 0;
51.   left: 0;
52.   width: 100%;
53.   height: 100%;
54.   display: flex;
55.   justify-content: center;
56.   align-items: center;
57.   z-index: 1000;
58. }
60. .dialog-overlay {
61.   position: absolute;
62.   top: 0;
63.   left: 0;
64.   width: 100%;
65.   height: 100%;
66.   background-color: rgba(0, 0, 0, 0.5);
67. }
69. .dialog-content {
70.   background-color: #fff;
71.   padding: 20px;
72.   border-radius: 10px;
73.   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
74.   z-index: 1001;
75.   text-align: center;
76. }
78. .dialog-content h2 {
79.   margin-top: 0;
80.   color: #009FFF;
81. }
83. .dialog-content p {
84.   margin-bottom: 20px;
85. }
87. .dialog-buttons button {
88.   padding: 10px 20px;
89.   margin: 0 10px;
90.   border: none;
91.   border-radius: 5px;
92.   cursor: pointer;
93.   font-weight: bold;
94.   color: white;
95.   transition: all 0.3s ease-in-out;
96. }
98. .dialog-buttons button:first-child {
99.   background: linear-gradient(45deg, #C70039, #FF5733);
100.   box-shadow: 0 5px 10px rgba(199, 0, 57, 0.4);
101. }
103. .dialog-buttons button:first-child:hover {
104.   transform: translateY(-3px);
105.   box-shadow: 0 8px 15px rgba(199, 0, 57, 0.6);
106.   background: linear-gradient(45deg, #FF5733, #FF8C00);
107. }
109. .dialog-buttons button:first-child:active {
110.   transform: translateY(1px);
111.   box-shadow: 0 3px 8px rgba(199, 0, 57, 0.8);
112.   background: linear-gradient(45deg, #900C3F, #C70039);
113. }
115. .dialog-buttons button:last-child {
116.   background: linear-gradient(45deg, #009FFF, #0066CC);
117.   box-shadow: 0 5px 10px rgba(0, 159, 255, 0.4);
118. }
120. .dialog-buttons button:last-child:hover {
121.   transform: translateY(-3px);
122.   box-shadow: 0 8px 15px rgba(0, 159, 255, 0.6);
123.   background: linear-gradient(45deg, #00BFFF, #0088EE);
124. }
126. .dialog-buttons button:last-child:active {
127.   transform: translateY(1px);
128.   box-shadow: 0 3px 10px rgba(0, 159, 255, 0.8);
129.   background: linear-gradient(45deg, #0077DD, #0055AA);
130. }
131. </style>

复制代码

在App.vue中的利用代码如下:

编辑弹窗

结果预览:

此时App.vue代码如下:

1. <script setup>import zdp_table1 from "./zdpui/components/zdp_table1.vue";import zdp_page1 from "./zdpui/components/zdp_page1.vue";import random from "./zdpui/js/random.js";import {ref} from "vue";import zdp_confirm1 from "./zdpui/components/zdp_confirm1.vue";import zdp_modal1 from "./zdpui/components/zdp_modal1.vue";import Zdp_input1 from "./zdpui/components/zdp_input1.vue";const columns = [  {    title: "员工编号",    key: "id",    width: 80,    align: "center"  },  {    title: "姓名",    key: "name",    width: 100,    align: "center"  },  {    title: "年龄",    key: "age",    width: 100,    align: "center"  }]const page = ref(1);const size = ref(10);const total = ref(100);const data = ref(random.users(size.value))const onChangePage = (v) => {  page.value = v  const newData = random.getPageUser(      page.value,      size.value,  )  data.value = newData.data  total.value = total.value}const onEdit = (index, item) => {  console.log("编辑", index, item)  showEditDialog.value = true;}const onDelete = (index, item) => {  console.log("删除", index, item)  showDeleteDialog.value = true;}const showDeleteDialog = ref(false);const onConfirmDelete = () => {  console.log("确认删除");  showDeleteDialog.value = false;};const onCloseDeleteDialog = () => {  console.log("取消删除");  showDeleteDialog.value = false;};const showEditDialog = ref(false);const formData = ref({name: "张三", age: 23});const handleEditConfirm = (userData) => {  console.log('确认编辑操作，用户数据:', userData);  // 在这里添加编辑逻辑，如发送编辑请求等};const handleCloseDialog = () => {  showEditDialog.value = false;};</script><template>  <div>    <zdp_table1
2.         :columns="columns"
3.         :data="data"
4.         @edit="onEdit"
5.         @delete="onDelete"
6.     />
7.     <zdp_page1        :page="page"        :size="size"        :total="total"        @change="onChangePage"    />    <zdp_confirm1        :show="showDeleteDialog"        @confirm="onConfirmDelete"        @close="onCloseDeleteDialog"    />    <zdp_modal1        :show="showEditDialog"        @confirm="handleEditConfirm"        @close="handleCloseDialog"    >      <zdp_input1          label="姓名"          v-model="formData.name"          placeholder="请输入姓名"      />      <zdp_input1          label="年龄"          v-model="formData.age"          placeholder="请输入年龄"      />    </zdp_modal1>  </div></template>

复制代码

继续封装按钮

到这一步的时间, 发现按钮有很多地方都是一样的, 重复的, 以是决定对按钮进行封装.
按钮组件的内容如下:

1. <script setup>
2. import {defineProps, defineEmits} from 'vue';
4. const props = defineProps({
5.   text: {
6.     type: String,
7.     default: '按钮',
8.   },
9.   type: {
10.     type: String,
11.     // primary,danger
12.     default: 'primary',
13.   }
14. })
15. const emits = defineEmits(['click'])
16. </script>
18. <template>
19.   <button
20.       @click="emits('click')"
21.       :class="props.type"
22.   >
23.     {{ props.text }}
24.   </button>
25. </template>
27. <style scoped>
28. button {
29.   padding: 10px 20px;
30.   margin: 0 10px;
31.   border: none;
32.   border-radius: 5px;
33.   cursor: pointer;
34.   font-weight: bold;
35.   color: white;
36.   transition: all 0.3s ease-in-out;
37. }
39. button.danger {
40.   background: linear-gradient(45deg, #C70039, #FF5733);
41.   box-shadow: 0 5px 10px rgba(199, 0, 57, 0.4);
42. }
44. button.danger:hover {
45.   transform: translateY(-3px);
46.   box-shadow: 0 8px 15px rgba(199, 0, 57, 0.6);
47.   background: linear-gradient(45deg, #FF5733, #FF8C00);
48. }
50. button.danger:active {
51.   transform: translateY(1px);
52.   box-shadow: 0 3px 8px rgba(199, 0, 57, 0.8);
53.   background: linear-gradient(45deg, #900C3F, #C70039);
54. }
56. button.primary {
57.   background: linear-gradient(45deg, #009FFF, #0066CC);
58.   box-shadow: 0 5px 10px rgba(0, 159, 255, 0.4);
59. }
61. button.primary:hover {
62.   transform: translateY(-3px);
63.   box-shadow: 0 8px 15px rgba(0, 159, 255, 0.6);
64.   background: linear-gradient(45deg, #00BFFF, #0088EE);
65. }
67. button.primary:active {
68.   transform: translateY(1px);
69.   box-shadow: 0 3px 10px rgba(0, 159, 255, 0.8);
70.   background: linear-gradient(45deg, #0077DD, #0055AA);
71. }
72. </style>

复制代码

利用方法如下:

1. <zdp_button1/>
2. <zdp_button1 type="danger"/>

复制代码

在界面中的表现结果如下:
外链图片转存失败,源站大概有防盗链机制,建议将图片保存下来直接上传
总结

现在, 我们已经有了自己的按钮组件, 确认框组件, 编辑表单组件, 组件越来越多了.
不外这个时间, 组件之间的拆分, 组合也变得越来越复杂了, 好比这个编辑表单组件, 就因为有输入框组件, 按钮组件, 确认框组件等多个组件的组合, 显得很复杂, 样式调整稍微贫苦了一点点.
不外一切都还比较顺利!!!
继续做吧!!!

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。