当前位置：首页 > article >正文

【前端开发学习笔记16】Vue_9

article 2025/2/19 9:51:06

文章分类架子

多个页面复用，封装成组件：

props 定制标题
默认插槽 default 定制内容主体
具名插槽 extra 定制按钮

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>{{ title }}</span>
        <div class="extra">
          <slot name="extra"></slot>
        </div>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>

文章分类渲染

1. 封装API：请求获取表格数据

2. el - table表格动态渲染

3. 表格静态样式

添加分类

用dialogVisible 控制显示隐藏

const dialogVisible = ref(false)

// 组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
// open({}) => 表单无需渲染，说明是添加
// open({ id, cate_name,...... }) => 表单需要渲染，说明是编辑
// open调用后，可以打开弹窗
const open = (row) => {
  console.log(row)
  dialogVisible.value = true
}

// 向外暴露方法
defineExpose({
  open
})

输入规范

api/article.js 封装请求 API

// 添加文章分类
export const artAddChannelService = (data) => request.post ('/my/cate/add', data)
// 编辑文章分类
export const artEditChannelService = (data) => request.put ('/my/cate/info', data)

2.页面中校验，判断，提交请求

<el - form ref="formRef">
const formRef = ref ()
const onSubmit = async () => {
await formRef.value.validate ()
formModel.value.id
? await artEditChannelService (formModel.value)
: await artAddChannelService (formModel.value)
ElMessage ({
type:'success',
message: formModel.value.id? ' 编辑成功 ' : ' 添加成功 '
})
dialogVisible.value = false
}

3.通知父组件进行回显

删除分类

封装：

// 删除文章分类
export const artDelChannelService = (id) =>
  request.delete('/my/cate/del', {
    params: { id }
  })

配置中文

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script>

<template>
  <div>
    <!-- App.vue只需要留一个路由出口router-view即可 -->
    <el-config-provider:locale="zhCn">
      <router-view></router-view>
    </el-config-provider>
  </div>
</template>

<style scoped></style>

封装API接口，请求渲染

1.api/article.js 封装接口：

export const artGetListService = (params) => request.get('/my/article/list', { params })

2.页面中调用保存数据：

const articleList = ref([])
const total = ref(0)

const getArticleList = async () => {
  const res = await artGetListService(params.value)
  articleList.value = res.data.data
  total.value = res.data.total
}
getArticleList()

3.新建 utils/format.js 封装格式化日期函数：

import { dayjs } from 'element-plus'
export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')

4.导入使用

分页渲染

1.添加el-pagination组件

<el-pagination
  v-model:current-page="params.pagenum"
  v-model:page-size="params.pagesize"
  :page-sizes="[2,3,5,10]"
  :background="true"
  layout="jumper,total,sizes,prev,pager,next"
  :total="total"
  @size-change="onSizeChange"
  @current-change="onCurrentChange"
  style="margin-top:20px;justify-content:flex-end;"
></el-pagination>

2.提供分页修改逻辑

const onSizeChange = (size) => {
  params.value.pagenum = 1
  params.value.pagesize = size
  getArticleList()
}
const onCurrentChange = (page) => {
  params.value.pagenum = page
  getArticleList()
}

添加 loading 处理

1.准备数据：

const loading = ref(false)

2.el - table 上面绑定：

<el-table v-loading="loading">...</el-table>

3.发送请求时添加 loading：

const getArticleList = async () => {
  loading.value = true
  loading.value = false
}
getArticleList()

抽屉组件

1.准备数据：

import { ref } from 'vue'
const visibleDrawer = ref(false)

2.准备抽屉容器：

<el-drawer v-model="visibleDrawer" title="I am the title"><span>Hi there!</span></el-drawer>

3.点击修改布尔值显示抽屉：

<el-button type="primary" @click="onAddArticle">发布文章</el-button>
const visibleDrawer = ref(false)
const onAddArticle = () => {
  visibleDrawer.value = true
}

封装抽屉组件 ArticleEdit

添加和编辑可以共用一个抽屉，所以将抽屉封装成一个组件。
组件对外暴露一个方法 open，基于 open 的参数，初始化表单数据，并判断区分是添加还是编辑：

open({}) => 添加操作，添加表单初始化无数据
open({ id: xx,... }) => 编辑操作，编辑表单初始化需回显

上传文件

1.关闭自动上传，准备结构：

import { Plus } from '@element-plus/icons-vue'

<el-upload
  class="avatar-uploader"
  :auto-upload="false"
  :show-file-list="false"
  :on-change="onUploadFile"
>
  <img v-if="imgUrl" :src="imgUrl" class="avatar" />
  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>

2.准备数据和选择图片的处理逻辑：

const imgUrl = ref('')
const onUploadFile = (uploadFile) => {
  imgUrl.value = URL.createObjectURL(uploadFile.raw)
  formModel.value.cover_img = uploadFile.raw
}

富文本编辑器 [vue - quill]

官网地址：https://vueup.github.io/vue - quill/

1.安装包：

pnpm add @vueup/vue-quill@latest

2.注册成局部组件：

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

3.页面中使用绑定：

<div class="editor">
  <quill-editor
    theme="snow"
    v-model:content="formModel.content"
    contentType="html"
  >
  </quill-editor>
</div>

添加文章功能

1封装添加接口：

export const artPublishService = (data) => request.post('my/article/add', data)

2.注册点击事件调用

// 转换 formData 数据
const fd = new FormData()
for (let key in formModel.value) {
  fd.append(key, formModel.value[key])
}

3.父组件监听事件,重新渲染

<article-edit ref="articleEditRef" @success="onSuccess"></article-edit>
<script>
  const onSuccess = (type) => {
    if (type === 'add') {
      const lastPage = Math.ceil((total.value + 1) / params.value.pagesize)
      params.value.pagenum = lastPage
    }
    getArticleList()
  }
</script>

文章编辑

1.封装编辑接口：

export const artEditService = (data) => request.put('my/article/info', data)

2.提交时调用：

const onPublish = async (state) => {
  if (formModel.value.id) {
    await artEditService(fd)
    ElMessage.success('编辑成功')
    visibleDrawer.value = false
    emit('success', 'edit')
  } else {
    // 添加请求
  }
}

查看全文

http://www.kler.cn/a/544531.html