Vue3学习(十三)之 Modal 对话框、表单的使用

写在前面

好久没学习更新博客了,不是懒,也不是不想学习,而是之前把大部分精力都去谈恋爱了,没法做到学习和恋爱都兼顾的很好。

Vue3学习(十三)之 Modal 对话框、表单的使用

可能有的同学会说,六哥,你都这么努力了,咋还是分了?换我,我就能处理的很好。

我想说,兄弟你是怎么做到地?来文末留言,或者私信我即可!

任务

  • 点击每一行编辑按钮,弹出编辑框
  • 编辑框显示电子书表单

表单的使用

秒变正经,进入正题,其实还是围绕Ant Design Vue中组件的使用展开,相信我,这并不难。

用大林哥的话说:

写代码不就是赋值粘贴改嘛!

至少这一刻,我是认可这句话的。

如何实现?

两步走,第一要使用Modal 对话框,要弹出对话框,然后加入From表单即可。

点击编辑按钮弹出对话框

加入Modal 对话框,示例代码如下:

<template>
  <a-layout class="layout">
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
      <a-table :columns="columns"
               :row-key="record => record.id"
               :data-source="ebooks1"
               :pagination="pagination"
               :loading="loading"
      >
        <template #cover="{ text: cover }">
          <img v-if="cover" :src="cover" alt="avatar"/>
        </template>
        <template #name="{ text: name  }">
          <a>{{ text }}</a>
        </template>
        <template #customTitle>

      <span>
        <smile-outlined/>
        Name
      </span>
        </template>
        <template #action="{ record }">
      <span>
        <a-space size="small">
            <a-button type="primary" @click="edit(record)">
              编辑
            </a-button>
             <a-modal
                 v-model:visible="visible"
                 cancelText="取消"
                 okText="保存"
                 title="编辑电子书"
                 :confirm-loading="confirmLoading"
                 @ok="handleOk"
             >
      <p>这就是对话框的demo,有两秒自动刷新的效果哦</p>
    </a-modal>
             <a-button type="danger">
                删除
              </a-button>
          </a-space>
      </span>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>

</template>
<script lang="ts">
import {DownOutlined, SmileOutlined} from '@ant-design/icons-vue';
import {defineComponent, onMounted, reactive, ref, toRef} from 'vue';
import axios from 'axios';
export default defineComponent({
  name: 'AdminEbook',
  setup() {
    const pagination = {
      onChange: (page: number) => {
        console.log(page);
      },
      pageSize: 3,
    };
    const visible = ref<boolean>(false);

    const confirmLoading = ref<boolean>(false);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = () => {
      confirmLoading.value = true;
      setTimeout(() => {
        visible.value = false;
        confirmLoading.value = false;
      }, 2000);
    };
    const edit = (record: any) => {
      visible.value = true;
    };
    const loading = ref(false);
    const columns = [
      {
        title: '头像',
        dataIndex: 'cover',
        width: 120,
        height: 120,
        slots: {customRender: 'cover'}
      },
      {
        title: '名称',
        dataIndex: 'name'
      },
      {
        title: '分类一',
        dataIndex: 'category1Id',
        key: 'category1Id',
      },
      {
        title: '分类二',
        dataIndex: 'category2Id',
        key: 'category2Id',
      },
      {
        title: '文档数',
        dataIndex: 'docCount'
      },
      {
        title: '阅读数',
        dataIndex: 'viewCount'
      },
      {
        title: '点赞数',
        dataIndex: 'voteCount'
      },
      {
        title: 'Action',
        key: 'action',
        slots: {customRender: 'action'}
      }
    ];
    //使用ref进行数据绑定
    const ebooks = ref();
    // 使用reactive进行数据绑定
    const ebooks1 = reactive({books: []})
    onMounted(() => {
      axios.get("/ebook/list", {
        params: {
          page: 1,
          size: 3
        }
      }).then(response => {
        const data = response.data;
        ebooks.value = data.content.list;
        ebooks1.books = data.content.list;
      })
    })
    return {
      visible,
      confirmLoading,
      showModal,
      handleOk,
      pagination,
      loading,
      columns,
      edit,
      ebooks1: ebooks,
      ebooks2: toRef(ebooks1, "books")
    }
  },
  components: {
    SmileOutlined,
    DownOutlined,
  },
});
</script>
<style scoped>
img {
  width: 50px;
  height: 50px;
}
</style>

编译运行,查看效果如下:

Vue3学习(十三)之 Modal 对话框、表单的使用

编辑框显示表单

这步感觉就更简单了,只要在Modal 对话框中加入Form表单即可,其本质还是组件的嵌套,整合代码如下:

<template>
  <a-layout class="layout">
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
      <a-table :columns="columns"
               :row-key="record => record.id"
               :data-source="ebooks1"
               :pagination="pagination"
               :loading="loading"
      >
        <template #cover="{ text: cover }">
          <img v-if="cover" :src="cover" alt="avatar"/>
        </template>
        <template #name="{ text: name  }">
          <a>{{ text }}</a>
        </template>
        <template #customTitle>

      <span>
        <smile-outlined/>
        Name
      </span>
        </template>
        <template #action="{ record }">
      <span>
        <a-space size="small">
            <a-button type="primary" @click="edit(record)">
              编辑
            </a-button>
             <a-modal
                 v-model:visible="visible"
                 cancelText="取消"
                 okText="保存"
                 title="编辑电子书"
                 :confirm-loading="confirmLoading"
                 @ok="handleOk"
             >
              <a-form
                  :model="ebooks_data"
                  name="basic"
                  :label-col="{ span: 4 }"
                  :wrapper-col="{ span: 16 }"
              >
              <a-form-item label="封面">
                <a-input v-model:value="ebooks_data.cover"/>
              </a-form-item>

                <a-form-item label="名称">
                <a-input v-model:value="ebooks_data.name"/>
               </a-form-item>
                <a-form-item label="分类一">
                <a-input v-model:value="ebooks_data.category1Id"/>
                </a-form-item>
                 <a-form-item label="分类二">
                <a-input v-model:value="ebooks_data.category2Id"/>
                </a-form-item>
                <a-form-item label="描述">
                <a-input v-model:value="ebooks_data.description"/>
               </a-form-item>
                <a-form-item label="文档数">
                <a-input v-model:value="ebooks_data.docCount"/>
              </a-form-item>
                <a-form-item label="阅读数">
                <a-input v-model:value="ebooks_data.viewCount"/>
              </a-form-item>
                <a-form-item label="点赞数">
                <a-input v-model:value="ebooks_data.voteCount"/>
              </a-form-item>
            </a-form>
            </a-modal>
             <a-button type="danger">
                删除
              </a-button>
          </a-space>
      </span>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>

</template>
<script lang="ts">
import {DownOutlined, SmileOutlined} from '@ant-design/icons-vue';
import {defineComponent, onMounted, reactive, ref, toRef} from 'vue';
import axios from 'axios';

interface FormState {
  username: string;
  password: string;
  remember: boolean;
}

export default defineComponent({
  name: 'AdminEbook',
  setup() {
    const pagination = {
      onChange: (page: number) => {
        console.log(page);
      },
      pageSize: 3,
    };
    const ebooks_data = ref();
    const onFinish = (values: any) => {
      console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };
    const visible = ref<boolean>(false);

    const confirmLoading = ref<boolean>(false);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = () => {
      confirmLoading.value = true;
      setTimeout(() => {
        visible.value = false;
        confirmLoading.value = false;
      }, 2000);
    };
    const edit = (record: any) => {
      visible.value = true;
      ebooks_data.value=record;
    };
    const loading = ref(false);
    const columns = [
      {
        title: '封面',
        dataIndex: 'cover',
        width: 120,
        height: 120,
        slots: {customRender: 'cover'}
      },
      {
        title: '名称',
        dataIndex: 'name'
      },
      {
        title: '分类一',
        dataIndex: 'category1Id',
        key: 'category1Id',
      },
      {
        title: '分类二',
        dataIndex: 'category2Id',
        key: 'category2Id',
      },
      {
        title: '描述',
        dataIndex: 'description',
        key: 'description',
      },
      {
        title: '文档数',
        dataIndex: 'docCount'
      },
      {
        title: '阅读数',
        dataIndex: 'viewCount'
      },
      {
        title: '点赞数',
        dataIndex: 'voteCount'
      },
      {
        title: 'Action',
        key: 'action',
        slots: {customRender: 'action'}
      }
    ];
    //使用ref进行数据绑定
    const ebooks = ref();
    // 使用reactive进行数据绑定
    const ebooks1 = reactive({books: []})
    onMounted(() => {
      axios.get("/ebook/list", {
        params: {
          page: 1,
          size: 3
        }
      }).then(response => {
        const data = response.data;
        ebooks.value = data.content.list;
        ebooks1.books = data.content.list;
      })
    })
    return {
      onFinish,
      onFinishFailed,
      visible,
      confirmLoading,
      showModal,
      handleOk,
      pagination,
      loading,
      columns,
      edit,
      ebooks_data,
      ebooks1: ebooks,
      ebooks2: toRef(ebooks1, "books")
    }
  },
  components: {
    SmileOutlined,
    DownOutlined,
  },
});
</script>
<style scoped>
img {
  width: 50px;
  height: 50px;
}
</style>

编译运行,结果如下图:

Vue3学习(十三)之 Modal 对话框、表单的使用

难点:

需要定义响应式变量,实现动态绑定传值,即点击编辑会带入当前选中列的属性值

写在最后

记得曾在头过年的前两天,看到这样一条朋友圈,让我重拾信心,又想继续学习了,如下图:

Vue3学习(十三)之 Modal 对话框、表单的使用

由于刚失恋不久,导致自己什么都不爱干,干什么都没有兴致。

看完他的朋友圈后,突然意识到自己不能这样总虚度时光的,应该和他学习,于是我就直接在他朋友圈下面写了这一段话:

不重要 有想变强的决心就可以了 至于什么变成大神 只是时间问题罢了

这句话同样送给那些惧怕代码的同学,其实大家都一样,你与大神差的只是想变强的决心罢了。

我觉得更多的时候,要学习下死神里的十一番队队长更木剑八,是一个特别享受战斗的人,他的信念就是只有战斗才能变强。

Vue3学习(十三)之 Modal 对话框、表单的使用

同理,代码也是一样总去写,不断地去写,才能进步,至于能不能成为大神,只是时间早晚的问题罢了。

如果屏幕前的你,还是觉得写代码很难,那么此刻,你也没什么可惧怕的,尽情享受就好了,如果还有什么担心,可以文末留言给我,也许我的经历会让你喜欢coding,也说不定呢。

上一篇:OpenGL 重复渲染


下一篇:open CV对图像的各类操作