const msg:{ show:Boolean title:String } = reactive({ show:false, title:'加载中' }) const $loading = createApp(myLoading , {msg} ).mount( document.createElement('div') ); const load = { show( title:String ){ msg.show = true; msg.title = title; document.body.appendChild( $loading.$el ); }, hide(){ msg.show = false; }

这段代码是一个简单的加载动画实现。首先，定义了一个名为`msg`的reactive对象，包括`show`和`title`两个属性，用于控制加载动画的显示和标题。然后，使用`createApp`方法创建了一个Vue应用，并将`myLoading`组件作为根组件，传入了`msg`对象作为props。接着，将应用的根元素挂载到一个新创建的div元素上。最后，定义了一个`load`对象，包含两个方法，`show`和`hide`，用于控制加载动画的显示和隐藏。在`show`方法中，将`msg.show`设置为true，表示显示加载动画，并将`msg.title`设置为传入的标题。然后，将加载动画的根元素添加到文档的body中。在`hide`方法中，将`msg.show`设置为false，表示隐藏加载动画。

相关问题

优化这段代码：import { reactive, toRaw } from 'vue' // 分页钩子函数 interface Options { page?: number size?: number fetchFun: (_arg: any) => Promise<any> params?: Record<any, any> firstLoading?: boolean } export function usePaging(options: Options) { const { page = 1, size = 15, fetchFun, params = {}, firstLoading = false } = options // 记录分页初始参数 const paramsInit: Record<any, any> = Object.assign({}, toRaw(params)) // 分页数据 const pager = reactive({ page, size, loading: firstLoading, count: 0, lists: [] as any[], extend: {} as Record<string, any> }) // 请求分页接口 const getLists = () => { pager.loading = true return fetchFun({ page_no: pager.page, page_size: pager.size, ...params }) .then((res: any) => { pager.count = res?.count pager.lists = res?.lists pager.extend = res?.extend return Promise.resolve(res) }) .catch((err: any) => { return Promise.reject(err) }) .finally(() => { pager.loading = false }) } // 重置为第一页 const resetPage = () => { pager.page = 1 getLists() } // 重置参数 const resetParams = () => { Object.keys(paramsInit).forEach((item) => { params[item] = paramsInit[item] }) getLists() } return { pager, getLists, resetParams, resetPage } }

以下为优化后的代码：

import { reactive, toRaw } from 'vue'

interface Options {
page?: number
size?: number
fetchFun: (_arg: any) => Promise<any>
params?: Record<any, any>
firstLoading?: boolean
}

export function usePaging(options: Options) {
const { page = 1, size = 15, fetchFun, params = {}, firstLoading = false } = options

const paramsInit: Record<any, any> = toRaw(params)

const pager = reactive({
page,
size,
loading: firstLoading,
count: 0,
lists: [] as any[],
extend: {} as Record<string, any>
})

const getLists = async () => {
pager.loading = true
try {
const res = await fetchFun({
page_no: pager.page,
page_size: pager.size,
...params
})
pager.count = res?.count
pager.lists = res?.lists
pager.extend = res?.extend
return Promise.resolve(res)
} catch (err) {
return Promise.reject(err)
} finally {
pager.loading = false
}
}

const resetPage = () => {
pager.page = 1
getLists()
}

const resetParams = () => {
Object.assign(params, paramsInit)
getLists()
}

return {
pager,
getLists,
resetParams,
resetPage
}
}

优化的部分包括：

1. 使用 async/await 替代 Promise.then() 语法，使代码更加简洁易读，同时也更具可读性。

2. 重置参数部分使用 Object.assign() 替代 Object.keys(paramsInit).forEach() 语法，可以更简洁地实现参数重置操作。

export default defineComponent({ props: { show: Boolean, book: Object, }, setup(props, context) { const editForm = reactive({ name: '', price: 0, publishDate: '', author: 0, classify: '', }); const close = () => { context.emit('update:show', false); }; watch(() => props.book, (current) => { Object.assign(editForm, current); editForm.publishDate = moment(Number(editForm.publishDate)); }); const submit = async () => { const res = await book.update({ id: props.book._id, name: editForm.name, price: editForm.price, author: editForm.author, publishDate: editForm.publishDate.valueOf(), classify: editForm.classify, }); result(res) .success(({ data, msg }) => { context.emit('update', data); message.success(msg); close();

这段代码使用了 Vue.js 的 Composition API，通过 reactive 函数创建了一个响应式对象 editForm，用于保存编辑图书时的表单数据。当 props.book 发生变化时，通过 watch 函数更新 editForm 对象的值，并将日期类型转换为 moment 对象。submit 函数用于提交表单数据，调用了 book.update 方法进行更新，同时处理更新成功或失败的结果并触发事件。close 函数用于关闭编辑弹窗。这段代码需要在父组件中传入一个 show 属性和一个 book 对象，以及触发 update 和 update:show 事件的方法。