Freaks City

This component provides a flexible way to embed interactive maps within a Vue 3 application, supporting various map providers like Tianditu, Baidu Maps, Tencent Maps, and Amap. It includes geocoding functionality to find coordinates from addresses and supports marker dragging for point selection. The component can be integrated into your Vue pr ...

Leveraging the VueUse Fullscreen Composable The @vueuse/core ecosystem provides a suite of composition utilities that streamline browser API interactions. Among these, useFullscreen wraps the native Fullscreen API to offer reactive state management for viewport expansion and restoration. Package Installation Integrate the dependency into your p ...

The icon system changed significantly between Element UI and Element Plus, with the latter adopting SVG icons. If you are accustomed to the Element UI aproach but prefer working with Vue 3, you can wrap Element Plus icons into a custom component that replicates the simpler interface of the older library. Design Goals The custom <e-icon> c ...

Data Flow from Parent to Child Using Props Passing Static Values When passing fixed string literals to a child component, the v-bind directive (shorthand :) is not required. <DashboardWidget app-name="Analytics Hub" current-release="2.4" /> Inside the child component, declare the expected properties using definePr ...

Implementation Frontend: Vue Component A reusable file upload component that converts selected images to base64 format and sends them to the backend. <template> <el-avatar :size="80" :src="avatarSrc" @click="showDialog = true" style="cursor: pointer;" > <img src= ...

Vue 3’s watch API lets you run arbitrary code whenever a reactive value changes. Its the reactive system’s hook for side-effects—loggging, validation, network requests, or synchronizing related state. Listening to a single ref <template> <p>Counter: {{ count }}</p> <button @click="count++">Increment</but ...

Introduction In many projects, there's a need to import and export Excel data in batches. This functionality can either be handled on the frontend by parsing data and generating files directly in the browser, or through backend services that process file streams and generate downloadable files. Compared to server-side processing, frontend handl ...

Twelve: Universal Upload Component Development and Usage 1. Introduction to Upload Component Development Developing a universal upload component requires understanding both the theoretical foundations and practical implementation details. The test-driven development approach provides a systematic way to build complex components while ensuring c ...

Reactive References in Vue 3 When working with reactive data in Vue 3's Composition API, the ref() function creates a reactive object containing a .value property. This wrapper object can hold any data type and is initially set to undefined. These reactive references can be directly used in templates through interpolation. A common pattern invo ...

const reactiveData = { name: 'alice', age: 30 }; const handler = { get(target, key) { console.log(`Accessing property: ${key}`); return Reflect.get(target, key); }, set(target, key, value) { console.log(`Setting ${key} to ${value}`); return Reflect.set(target, key, value); }, deleteProperty(target, key) { cons ...