Tech Blog

2024-08-23

要在原生HTML中使用Vue.js，你需要按照以下步骤操作：

在<head>标签中引入Vue.js库。你可以使用CDN链接，或者下载Vue.js文件到本地并通过相对路径引入。
在<body>标签结束前，创建一个Vue实例，并绑定到页面上的某个元素。

以下是一个简单的例子：




<!DOCTYPE html>
<html>
<head>
    <title>Vue.js 示例</title>
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
 
    <script>
        // 创建Vue实例
        new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!' // 定义数据
            }
        });
    </script>
</body>
</html>

在这个例子中，我们在HTML文件中定义了一个div元素，并给它设置了id为app。然后在<script>标签中，我们创建了一个Vue实例，并将其挂载到了#app。在Vue实例的data对象中，我们定义了一个message属性，并在div中通过双大括号{{ message }}语法展示了这个属性的值。

当你在浏览器中打开这个HTML文件时，你将看到显示了"Hello, Vue!"的文本。这是最基础的Vue.js使用方法，适用于入门学习。

System

2024-08-23

所有,vue.js

在Vue3中使用Arco Design Vue的表格组件a-table时，如果遇到“表格行数据中又嵌套了二维对象数组”的情况，可以通过以下方式进行处理：

确保a-table的数据源(data)是一个数组，数组中的每个元素代表一行数据。
如果每行数据中又嵌套了二维数组，可以使用a-table的子组件插槽(slot)或者自定义列(custom cell)来进行嵌套数组的展示。

以下是一个简单的例子，假设每个表格行数据中都嵌套了一个二维数组：




<template>
  <a-table :data="tableData">
    <a-table-column title="嵌套数据列1">
      <template #cell="{ row }">
        <!-- row 是表格当前行的数据对象 -->
        <span v-for="(item, index) in row.nestedArray" :key="index">
          {{ item.key1 }} - {{ item.key2 }}
        </span>
      </template>
    </a-table-column>
    <!-- 其他列定义 -->
  </a-table>
</template>
 
<script>
import { TableColumn, Table } from '@arco-design/vue';
 
export default {
  components: {
    'a-table-column': TableColumn,
    'a-table': Table,
  },
  data() {
    return {
      tableData: [
        // 示例数据，嵌套数组nestedArray包含多个对象
        {
          key1: '数据1',
          nestedArray: [
            { key1: '嵌套数据1-1', key2: '嵌套数据1-2' },
            { key1: '嵌套数据1-3', key2: '嵌套数据1-4' },
          ],
        },
        // ...更多行数据
      ],
    };
  },
};
</script>

在这个例子中，我们定义了一个名为nestedArray的嵌套数组字段，并在a-table-column的子组件插槽中遍历这个数组，分别取出每个对象的key1和key2属性，并将它们显示在表格单元格中。

请根据实际数据结构和需求调整列定义和嵌套数组的处理方式。

- 阅读更多 -

vue 百度地图使用 vue-baidu-map 进行当前位置定位和范围展示

System

2024-08-23

所有,vue.js




<template>
  <baidu-map class="map" :center="center" :zoom="zoom">
    <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
    <bm-circle :center="center" :radius="radius" :stroke-color="color" :fill-color="color" :stroke-weight="weight" :editing="false"></bm-circle>
  </baidu-map>
</template>
 
<script>
import { BaiduMap, BmLocalSearch, BmCircle } from 'vue-baidu-map'
 
export default {
  components: {
    BaiduMap,
    BmLocalSearch,
    BmCircle
  },
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 15,
      keyword: '',
      location: '',
      radius: 1000, // 半径，单位为米
      color: 'red',
      weight: 2
    }
  },
  mounted() {
    this.getCurrentLocation()
  },
  methods: {
    getCurrentLocation() {
      // 获取当前位置
      navigator.geolocation.getCurrentPosition(
        position => {
          this.center.lng = position.coords.longitude
          this.center.lat = position.coords.latitude
          this.location = `${this.center.lng},${this.center.lat}`
        },
        error => {
          console.error(error)
        }
      )
    }
  }
}
</script>
 
<style>
.map {
  width: 100%;
  height: 500px;
}
</style>

这个代码示例展示了如何在Vue应用中使用vue-baidu-map插件来创建一个展示当前位置和一个指定半径范围的地图。代码首先定义了组件，然后在mounted生命周期钩子中获取当前位置，并在地图上设置中心点和范围。同时，使用BmLocalSearch组件进行关键字搜索。

- 阅读更多 -

vue日程管理 vue日历日程日程提醒

System

2024-08-23

所有,vue.js

要实现一个基本的Vue日程管理日历，你可以使用第三方库如vue-cal或者从头开始编写组件。以下是一个简单的Vue日程管理日历组件的示例代码：




<template>
  <div class="calendar">
    <div class="calendar-header">
      <button @click="prevMonth">&lt;</button>
      <span>{{ currentMonth }} {{ currentYear }}</span>
      <button @click="nextMonth">&gt;</button>
    </div>
    <div class="calendar-body">
      <div class="day-header">Sun</div>
      <div class="day-header">Mon</div>
      <div class="day-header">Tue</div>
      <div class="day-header">Wed</div>
      <div class="day-header">Thu</div>
      <div class="day-header">Fri</div>
      <div class="day-header">Sat</div>
      <div v-for="day in days" :key="day.date" class="day">
        <span>{{ day.day }}</span>
        <span v-for="event in day.events" :key="event.id" class="event" :style="{ backgroundColor: event.color }">{{ event.title }}</span>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      daysInMonth: new Date(this.currentYear, this.currentMonth, 0).getDate(),
      days: [], // 初始化日期数组
    };
  },
  methods: {
    prevMonth() {
      if (this.currentMonth === 1) {
        this.currentYear--;
        this.currentMonth = 12;
      } else {
        this.currentMonth--;
      }
      this.generateDays();
    },
    nextMonth() {
      if (this.currentMonth === 12) {
        this.currentYear++;
        this.currentMonth = 1;
      } else {
        this.currentMonth++;
      }
      this.generateDays();
    },
    generateDays() {
      this.days = [];
      const firstDayOfMonth = new Date(this.currentYear, this.currentMonth - 1, 1);
      const daysInLastMonth = new Date(this.currentYear, this.currentMonth - 1, 0).getDate();
      const dayOffset = firstDayOfMonth.getDay() - 1; // 0 表示星期日
 
      for (let i = 0; i < dayOffset; i++) {
        this.days.push({
          date: daysInLastMonth - i,
          day: null,
        });
      }
 
      for (let i = 1; i <= this.daysInMonth; i++) {
        this.days.push({
          date: i,
          day: i,
          events: [], // 假定事件数组
        });
      }
    },
  },
  mounted() {
    this.generateDays();
  },
};
</script>
 
<style scoped>
.calendar {
  width: 400px;
  border: 1px solid #ddd;
  border-radius: 4p

- 阅读更多 -

【Vue】组件通信组件通信

System

2024-08-23

所有,vue.js

在Vue中，组件间的通信可以通过多种方式实现，以下是几种常用的组件通信方法：

使用props和$emit进行父子组件通信。

父组件：




<template>
  <ChildComponent :parentData="dataFromParent" @childEvent="handleChildEvent" />
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataFromParent: 'This is data from parent'
    };
  },
  methods: {
    handleChildEvent(payload) {
      // 处理子组件发出的事件
    }
  }
};
</script>

子组件：




<template>
  <div>
    {{ parentData }}
    <button @click="sendDataToParent">Send to Parent</button>
  </div>
</template>
 
<script>
export default {
  props: ['parentData'],
  methods: {
    sendDataToParent() {
      this.$emit('childEvent', 'Data from child');
    }
  }
};
</script>

使用$refs进行任意组件间通信。




<template>
  <ChildComponent ref="child" />
  <button @click="sendDataToChild">Send to Child</button>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    sendDataToChild() {
      this.$refs.child.receiveData('Data from parent');
    }
  }
};
</script>

子组件：




<template>
  <div>{{ dataFromParent }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      dataFromParent: ''
    };
  },
  methods: {
    receiveData(payload) {
      this.dataFromParent = payload;
    }
  }
};
</script>

使用Vuex进行状态管理。

首先，在Vuex中定义状态和动作：




// store.js
export const store = new Vuex.Store({
  state: {
    sharedData: 'Initial data'
  },
  mutations: {
    updateData(state, payload) {
      state.sharedData = payload;
    }
  },
  actions: {
    updateData({ commit }, payload) {
      commit('updateData', payload);
    }
  }
});

然后，在组件中使用：




<template>
  <div>{{ $store.state.sharedData }}</div>
  <button @click=

- 阅读更多 -

Vue ElementUI 修改消息提示框样式—messageBox 的大小

System

2024-08-23

所有,vue.js

在Vue中使用ElementUI时，若要修改messageBox的大小，可以通过CSS覆盖默认样式来实现。以下是一个简单的例子，展示如何通过外部CSS来修改messageBox的大小：

首先，确保你已经在项目中包含了ElementUI，并且正确地使用了MessageBox组件。
接下来，在你的组件的<style>标签中或者一个单独的CSS文件中，添加CSS规则来覆盖默认的样式。




/* 在组件的<style>标签中 */
<style scoped>
.custom-message-box .el-message-box__wrapper {
  width: 500px; /* 修改为所需的宽度 */
}
</style>
 
<!-- 或者在单独的CSS文件中 -->
<style>
.custom-message-box .el-message-box__wrapper {
  width: 500px; /* 修改为所需的宽度 */
}
</style>

在调用MessageBox时，添加customClass属性来应用你定义的样式。




import { MessageBox } from 'element-ui';
 
// 调用MessageBox时添加customClass
MessageBox.confirm('确认信息', {
  customClass: 'custom-message-box'
}).then(() => {
  // 确认操作
}).catch(() => {
  // 取消操作
});

通过以上步骤，你应该能够看到messageBox的大小已经被修改。记得替换500px为你想要的尺寸。如果需要更多定制化的样式，可以继续添加CSS规则来覆盖其他相关元素的样式。

- 阅读更多 -

Vue Cli 迁移至 Vite

System

2024-08-23

所有,vue.js

要从 Vue CLI 迁移到 Vite，你需要创建一个新的 Vite 项目，并将现有的代码和配置迁移到新项目中。以下是基本步骤：

创建一个新的 Vite 项目：




npm init vite@latest my-vue-app -- --template vue

或者使用 yarn：




yarn create vite my-vue-app --template vue

将你的 Vue CLI 项目中的 src 目录、public 目录和 vue.config.js （如果有）复制到新项目中对应的位置。
迁移 router 和 store （如果有）到 src 目录下的对应文件。
修改 vite.config.js 以适应你的项目需求，比如添加插件和别名。
更新 package.json 中的脚本部分，以使用 Vite 的命令。

例如，将 serve 命令从 vue-cli-service serve 改为 vite。




{
  "scripts": {
    "serve": "vite",
    "build": "vite build",
    "lint": "eslint --ext .js,.vue src"
  }
}

安装所有依赖项并运行新项目。




cd my-vue-app
npm install
npm run serve

注意：具体迁移细节可能会依据你的项目结构和配置有所不同，可能需要处理其他配置选项，如预处理器、第三方库或插件的兼容性等。

- 阅读更多 -

vue读取excel表格内容

System

2024-08-23

所有,vue.js

在Vue中读取Excel表格内容，可以使用第三方库xlsx。以下是一个简单的例子：

首先，安装xlsx库：




npm install xlsx

然后，在Vue组件中使用xlsx读取Excel文件：




<template>
  <div>
    <input type="file" @change="readExcel" />
    <div v-if="excelData">
      <table>
        <tr v-for="(row, rowIndex) in excelData" :key="`row-${rowIndex}`">
          <td v-for="(cell, cellIndex) in row" :key="`cell-${cellIndex}`">{{ cell }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
 
<script>
import * as XLSX from 'xlsx';
 
export default {
  data() {
    return {
      excelData: null
    };
  },
  methods: {
    readExcel(event) {
      const files = event.target.files;
      if (files && files[0]) {
        const fileReader = new FileReader();
        fileReader.onload = e => {
          const bufferArray = e.target.result;
          const wb = XLSX.read(bufferArray, { type: 'buffer' });
          const wsname = wb.SheetNames[0];
          const ws = wb.Sheets[wsname];
          this.excelData = XLSX.utils.sheet_to_json(ws, { header: 1 });
        };
        fileReader.readAsArrayBuffer(files[0]);
      }
    }
  }
};
</script>

在这个例子中，我们创建了一个Vue组件，其中包含一个文件输入元素。当用户选择一个Excel文件后，我们使用FileReader读取文件内容，然后使用xlsx库解析Excel文件并将第一个工作表转换为JSON。最后，我们将解析后的数据存储在组件的excelData数据属性中，并在模板中遍历展示。

- 阅读更多 -

el-select 下拉框全选、多选的几种方式组件

System

2024-08-23

所有,vue.js

在Vue.js中，使用Element UI库创建带有全选和多选功能的el-select下拉框，可以通过el-select组件配合el-option和el-checkbox组件实现。以下是一个简单的示例：




<template>
  <el-select v-model="selectedOptions" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
    <el-option :value="allOption.value" :label="allOption.label">
      <el-checkbox
        v-model="selectAll"
        @change="handleSelectAllChange">
        全选
      </el-checkbox>
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' },
        // ...更多选项
      ],
      allOption: { label: '全选', value: 'all' },
      selectAll: false,
    };
  },
  watch: {
    selectedOptions(newSelection) {
      this.selectAll = newSelection.length === this.options.length;
    }
  },
  methods: {
    handleSelectAllChange(value) {
      if (value) {
        this.selectedOptions = this.options.map(item => item.value);
      } else {
        this.selectedOptions = [];
      }
    }
  }
};
</script>

在这个示例中，我们创建了一个带有全选选项的下拉框。当用户选择全选时，所有的选项都会被选中；反之亦然。我们使用了v-model来双向绑定选中的值，并且通过watch来更新全选的状态。这样就实现了下拉框的全选和多选功能。

System

2024-08-23

所有,vue.js




// 在 Vue 3 中使用 TypeScript 创建全局方法或属性
 
// 首先，创建一个全局属性或方法
// 假设我们要添加一个全局方法来格式化日期
function formatDate(date: Date) {
  return date.toISOString().split('T')[0];
}
 
// 然后，在 Vue 应用程序实例上设置 globalProperties
// 假设 app 是 Vue 应用实例
app.config.globalProperties.$formatDate = formatDate;
 
// 现在，在任何组件中，我们可以通过 this 访问这个全局方法
// 例如，在一个组件的模板中
<template>
  <div>{{ $formatDate(new Date()) }}</div>
</template>
 
// 或者在组件的 setup 函数中
import { defineComponent, getCurrentInstance } from 'vue';
 
export default defineComponent({
  setup() {
    const globalProperties = getCurrentInstance()!.appContext.config.globalProperties;
    const formattedDate = globalProperties.$formatDate(new Date());
    // 使用 formattedDate
    return {
      formattedDate
    };
  }
});

这个例子展示了如何在 Vue 3 应用程序中使用 TypeScript 定义一个全局方法，并在组件中如何使用这个全局方法。这种方式可以在多个组件之间共享方法而不需要重复定义。

- 阅读更多 -