标签 VUE 下的文章

2024-08-17




// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// 配置Jest测试环境
process.env.VITE_TEST = 'true';
 
export default defineConfig({
  plugins: [vue()],
  test: {
    // 指定Jest的配置
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./tests/setup.js'],
  },
});
 
// tests/setup.js
import { render } from '@testing-library/vue';
import { describe, it, expect } from 'vitest';
 
// 示例组件
const MessageComponent = {
  template: '<div>{{ message }}</div>',
  props: ['message'],
};
 
// 测试用例
describe('MessageComponent', () => {
  it('should display the message', () => {
    const { getByText } = render(MessageComponent, {
      props: {
        message: 'Hello, Vue!',
      },
    });
 
    // 检查渲染结果是否包含预期的文本
    expect(getByText('Hello, Vue!')).toBeInTheDocument();
  });
});

这个代码实例展示了如何为Vue 3 + Vite项目配置Jest测试环境，并编写了一个简单的组件渲染测试用例。通过vite.config.js中的配置，我们设置了环境变量VITE_TEST，并指定了Jest的全局变量和测试环境。在setup.js中，我们使用@testing-library/vue渲染组件并进行断言，测试组件是否按预期渲染了传入的属性。

- 阅读更多 -

Vue3.0商店后台管理系统项目实战-创建项目

System

2024-08-17

所有,typescript

在创建Vue 3.0项目时，我们通常使用Vue CLI工具。以下是创建项目的步骤和示例代码：

确保你已经安装了Vue CLI。如果没有安装，可以通过以下命令安装：




npm install -g @vue/cli
# 或者
yarn global add @vue/cli

使用Vue CLI创建新项目：




vue create store-management-system

在创建过程中，选择Vue 3和你需要的其他配置（如：路由、状态管理等）。
进入项目目录并启动服务：




cd store-management-system
npm run serve
# 或者
yarn serve

以上步骤将会创建一个名为store-management-system的新Vue 3项目，并启动一个开发服务器，你可以在浏览器中访问它。

注意：具体步骤可能会根据你选择的Vue CLI版本或者你在创建项目时的具体选择而有所不同。

System

2024-08-17

所有,typescript

在使用 Ant Design Vue 的 TreeSelect 组件时，如果你想要实现只能选中子节点而不能选中父节点的功能，你可以通过设置 treeCheckable 属性为 true 并且使用 checkStrictly 属性来确保父节点不能被选中。

以下是一个简单的实例代码：




<template>
  <a-tree-select
    v-model="value"
    style="width: 200px"
    :tree-data="treeData"
    tree-checkable
    :show-checked-strictly="true"
    placeholder="Please select"
  />
</template>
 
<script>
export default {
  data() {
    return {
      value: undefined,
      treeData: [
        {
          title: 'parent 1',
          value: 'parent 1',
          children: [
            {
              title: 'child 1',
              value: 'child 1',
            },
            {
              title: 'child 2',
              value: 'child 2',
            },
          ],
        },
        {
          title: 'parent 2',
          value: 'parent 2',
          children: [
            {
              title: 'child 3',
              value: 'child 3',
            },
            {
              title: 'child 4',
              value: 'child 4',
            },
          ],
        },
      ],
    };
  },
};
</script>

在这个例子中，treeCheckable 设置为 true 允许选中子节点，而 show-checked-strictly 设置为 true 确保父节点不会被选中。当你选择一个子节点时，它会被选中，而父节点不会。

- 阅读更多 -

Vue3+Vite3+Ts4配置移动端适配

System

2024-08-17

所有,typescript

在Vue3+Vite3+TypeScript项目中配置移动端适配，可以通过以下步骤进行：

安装lib-flexible和postcss-px2rem：




npm install lib-flexible --save
npm install postcss-px2rem --save-dev

在项目入口文件main.ts或main.js中引入lib-flexible：




import 'lib-flexible/flexible'

在vite.config.ts中配置postcss-px2rem：




import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入postcss-px2rem
import px2rem from 'postcss-px2rem'
 
// 配置rem转换
const postcss = px2rem({
  remUnit: 37.5 // 设计稿宽度/10，通常设置为750/10=75
})
 
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [postcss]
    }
  }
})

在index.html中添加<meta name="viewport" content="width=device-width, initial-scale=1.0">以及lib-flexible的<script>标签：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your App</title>
</head>
<body>
  <div id="app"></div>
  <!-- 引入lib-flexible -->
  <script src="//g.alicdn.com/fdilab/lib-flexible/0.3.21/lib-flexible.js"></script>
</body>
</html>

配置完成后，重新运行项目，你的Vue3+Vite3+TypeScript项目将支持移动端适配。

注意：确保在项目中使用的所有CSS单位，除了px，都使用rem单位来保证一致性。同时，可以利用CSS Media Queries来进行不同屏幕尺寸的适配。

- 阅读更多 -

vue 封装对象深拷贝方法

System

2024-08-17

所有,typescript

在Vue中，可以通过使用JSON.parse(JSON.stringify(object))来实现一个简单的对象深拷贝方法。但是，这种方法有局限性，它不能复制函数、undefined、循环引用等。

下面是一个使用JSON.parse(JSON.stringify(object))的示例：




function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}
 
// 示例使用
const originalObject = {
  name: 'John',
  age: 30,
  hobbies: ['reading', 'gaming']
};
 
const clonedObject = deepClone(originalObject);
 
console.log(clonedObject); // { name: 'John', age: 30, hobbies: [ 'reading', 'gaming' ] }

如果需要一个更完善的深拷贝方法，可以使用递归或第三方库，如lodash的cloneDeep方法。

下面是一个使用递归实现的深拷贝方法的示例：




function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
 
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }
 
  if (obj instanceof Array) {
    return obj.reduce((arr, item, i) => {
      arr[i] = deepClone(item);
      return arr;
    }, []);
  }
 
  if (obj instanceof Object) {
    return Object.keys(obj).reduce((newObj, key) => {
      newObj[key] = deepClone(obj[key]);
      return newObj;
    }, {});
  }
}
 
// 示例使用
const originalObject = {
  name: 'John',
  age: 30,
  hobbies: ['reading', 'gaming']
};
 
const clonedObject = deepClone(originalObject);
 
console.log(clonedObject); // { name: 'John', age: 30, hobbies: [ 'reading', 'gaming' ] }

请注意，递归方法可能不适合包含大量嵌套对象的复杂对象，因为这可能导致栈溢出错误。对于复杂和大型的对象，使用第三方库可能是更好的选择。

- 阅读更多 -

vue3+ts 配置mockjs模拟数据

System

2024-08-17

所有,typescript

在Vue 3 + TypeScript项目中配置Mock.js来模拟数据的基本步骤如下：

安装Mock.js:




npm install mockjs --save-dev

在项目中创建一个mock.ts文件，用于配置模拟数据规则。




// mock.ts
import Mock from 'mockjs'
 
// 模拟数据规则
const data = Mock.mock({
  'items|30': [{
    id: '@id',
    name: '@name',
    'age|18-30': 1
  }]
})
 
// 模拟API接口
Mock.mock('/api/users', 'get', () => {
  return {
    code: 200,
    data: data.items
  }
})

在main.ts或其他入口文件中引入mock.ts来启动Mock.js。




// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './mock' // 引入mock配置
 
const app = createApp(App)
 
app.mount('#app')

在组件中发送请求获取模拟数据。




// UserList.vue
<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.age }}
      </li>
    </ul>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import axios from 'axios'
 
export default defineComponent({
  setup() {
    const users = ref<any[]>([])
 
    onMounted(async () => {
      try {
        const response = await axios.get('/api/users')
        if (response.status === 200) {
          users.value = response.data.data
        }
      } catch (error) {
        console.error('Error fetching users:', error)
      }
    })
 
    return { users }
  }
})
</script>

在这个例子中，当Vue应用启动时，会加载mock.ts文件，并启动Mock.js。在UserList组件加载时，会向模拟的API('/api/users')发送请求，并获取模拟数据用于展示。这样，你可以在不连接真实后端数据源的情况下进行前端开发和测试。

- 阅读更多 -

antdvue的table合计行

System

2024-08-17

所有,typescript

在Ant Design Vue中，Table组件支持合计行（summary row）。要实现合计行，你需要使用summary属性，并提供一个渲染函数来自定义合计行的内容。

以下是一个简单的例子，展示如何在Ant Design Vue的Table组件中添加合计行：




<template>
  <a-table :columns="columns" :dataSource="data" :summary="summaryMethod">
    <!-- 其他列定义 -->
  </a-table>
</template>
 
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
        },
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        // ... 更多数据
      ],
    };
  },
  methods: {
    summaryMethod(pageData) {
      let total = 0;
      pageData.forEach((item) => {
        total += item.age;
      });
      return ['合计', '', '', `年龄总和: ${total}`];
    },
  },
};
</script>

在这个例子中，summaryMethod是一个方法，它接收当前页的数据作为参数，并返回一个数组，该数组中的每个元素对应合计行的每列内容。合计行总是位于数据行之后，你可以自定义合计行的样式和内容。

- 阅读更多 -

Vue3 + Ant Design Vue Modal 对话框拖拽+缩放指令

System

2024-08-17

所有,typescript




<template>
  <a-modal
    v-model:visible="visible"
    :title="title"
    :width="width"
    :zIndex="zIndex"
    :bodyStyle="{ height: height + 'px' }"
    :destroyOnClose="true"
    :wrapClassName="'draggable-dialog ' + (isFullScreen ? 'full-screen' : '')"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #header>
      <div class="dialog-header">
        <span>{{ title }}</span>
        <span class="full-screen-btn" @click="toggleFullScreen">
          <fullscreen-exit-outlined v-if="isFullScreen" />
          <fullscreen-outlined v-else />
        </span>
        <span class="close-btn" @click="handleCancel">
          <close-circle-outlined />
        </span>
      </div>
    </template>
    <div class="dialog-content" v-resize="resizeModal">
      <!-- 内容 -->
    </div>
  </a-modal>
</template>
 
<script setup>
import { ref } from 'vue';
import { FullscreenExitOutlined, FullscreenOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue';
import 'ant-design-vue/es/modal/style';
import draggable from 'vuedraggable';
import { onMounted, reactive } from 'vue';
 
const props = defineProps({
  title: String,
  width: Number,
  zIndex: Number,
  height: Number
});
 
const visible = ref(false);
const isFullScreen = ref(false);
 
const handleOk = () => {
  // 确认操作
};
 
const handleCancel = () => {
  // 取消操作
};
 
const toggleFullScreen = () => {
  isFullScreen.value = !isFullScreen.value;
};
 
const resizeModal = () => {
  // 处理缩放逻辑
};
 
onMounted(() => {
  const draggableModal = new draggable(document.querySelectorAll('.draggable-dialog'), {
    draggable: '.ant-modal-header',
    delay: 100,
    delayOnTouchOnly: true
  });
});
</script>
 
<style scoped>
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.full-screen-btn, .close-btn {
  cursor: pointer;
  margin-right: 8px;
}
 
.full-screen-btn:hover, .close-btn:hover {
  color: #1890ff;
}
 
.full-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border: none;
  border-radius: 0;
}
 
.draggable-dialog {
  cursor: move;
}
</style>

这个代码实例展示了如何在Vue 3和Ant Design Vue中创建一个可拖拽和可缩放的对话框。它使用了vuedraggable库来实现拖拽功能，并且定义了一个可以在对话框标题栏上放置的拖拽处理程序。同时，它还包含了一个全屏按钮，允许用户在全屏和非全屏之间切换对话框的显示状态。缩放逻辑需要自定义实现，可以通过监听窗口尺寸变化或者使用第三方库来实现。

System

2024-08-17

所有,typescript

在Vue 3, TypeScript, 和 Vite 环境中，使用Cesium加载天地图影像和标注，并随机切换不同版本的服务器，可以通过以下步骤实现：

安装并设置Cesium。
配置不同的服务器URL。
使用Cesium的ImageryLayer来加载天地图影像。
使用Entity和Viewer来添加标注。
使用随机数来随机选择服务器版本。

以下是示例代码：




<template>
  <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import Cesium from 'cesium';
 
const TILE_SERVERS = [
  'http://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles',
  'http://t1.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles',
  // ... 其他服务器URL
];
 
export default defineComponent({
  setup() {
    let viewer: Cesium.Viewer;
    const randomServerIndex = Math.floor(Math.random() * TILE_SERVERS.length);
    const tileServerUrl = TILE_SERVERS[randomServerIndex];
 
    onMounted(() => {
      viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
          url: tileServerUrl,
          layer: 'tdtImgBasicLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
        }),
      });
 
      // 添加标注
      const position = Cesium.Cartesian3.fromDegrees(116.4076943200, 39.8994345413);
      viewer.entities.add({
        position: position,
        point: {
          pixelSize: 10,
          color: Cesium.Color.RED,
        },
      });
    });
 
    return {};
  },
});
</script>
 
<style>
/* 你的CSS样式 */
</style>

在这个例子中，我们首先定义了一个服务器URL数组TILE_SERVERS。在onMounted钩子中，我们随机选择一个服务器URL，并使用它来创建Cesium的WebMapTileServiceImageryProvider，然后将其作为影像图层添加到Cesium的Viewer中。同时，我们添加了一个红色的标注点到地图上指定的位置。

请确保你已经安装了Cesium依赖，并且正确配置了Cesium的资源路径。此外，服务器URL应该是可以访问的，并且与天地图的服务兼容。

System

2024-08-17

所有,typescript

在Vue项目中使用Ant Design Vue的Select组件时，如果你想要实现多选（mode="multiple"）但同时限制最多可选择的数量，可以通过监听选项变化并在用户尝试超出限定数量时阻止该操作。

以下是一个简单的示例：




<template>
  <a-select
    mode="multiple"
    :maxTagCount="maxTags"
    :maxTagTextLength="maxTagTextLength"
    v-model="selectedValues"
    @change="handleChange"
  >
    <a-select-option v-for="item in options" :key="item.value" :value="item.value">
      {{ item.label }}
    </a-select-option>
  </a-select>
</template>
 
<script>
export default {
  data() {
    return {
      maxTags: 3, // 最多显示的标签数量
      maxTagTextLength: 10, // 超过最大标签数后显示的文本长度
      selectedValues: [], // 绑定的模型，用于存储选中的值
      options: [ // 下拉菜单的选项
        { value: '1', label: 'Option 1' },
        { value: '2', label: 'Option 2' },
        { value: '3', label: 'Option 3' },
        // ...更多选项
      ],
      maxSelectCount: 2, // 最多可选择的数量
    };
  },
  methods: {
    handleChange(selectedValues) {
      if (selectedValues.length > this.maxSelectCount) {
        // 如果超出最大选择数量，撤销最后一次选择
        this.selectedValues.pop();
        this.$message.warn(`最多只能选择${this.maxSelectCount}个选项！`);
      }
    },
  },
};
</script>

在这个示例中，我们设置了最多可选择的数量为2，通过在handleChange方法中判断当前选中的数量，如果超出了最大选择数量，则使用pop方法撤销最后一次操作，并通过$message.warn显示一个警告消息。

注意：maxTagCount和maxTagTextLength是Ant Design Vue的Select组件提供的属性，用于控制多选模式下展示的标签数量和超出该数量后的显示格式。

- 阅读更多 -