天天看點
傳回

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>

編譯運作，檢視效果如下：

編輯框顯示表單

這步感覺就更簡單了，隻要在

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

，也說不定呢。

優秀不夠，你是否無可替代

軟體測試交流QQ群：721256703，期待你的加入！！

歡迎關注我的微信公衆号：軟體測試君

Vue3學習（十三）之 Modal 對話框、表單的使用
上一篇: 從節點到網絡：Web3 實戰基礎
下一篇: 鴻蒙3.0可以支援控制桌面大檔案夾大小了，之前的鴻蒙2.0我提到過這個問題，就是大檔案夾預設3*3，但是不能變大也不能變