Vue 合集 - 随笔分类 - DL·Coder

nuxtjs + scss + unocss + pinia + i18n + 引入本地化字体新建项目

摘要：1、通过命令行报错的，直接下载压缩包 pnpm dlx nuxi init <project-name> 压缩包地址：https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3 2、安装插件 1、安装unocss pnpm instal 阅读全文

posted @ 2025-03-04 19:55 DL·Coder 阅读(180) 评论(0) 推荐(0)

vue3 父传子类型校验写法

摘要：写法一： import type { myOrderItem } from '@/API/pages_mine/myOrder/types'; const props = defineProps({ item: { type: Object as PropType<myOrderItem>, def 阅读全文

posted @ 2024-08-15 17:47 DL·Coder 阅读(15) 评论(0) 推荐(0)

vue3 ts 子组件暴露方法，父组件调用（父调用子的方法）

摘要：子组件 // 组件名称：discountModel // 格式化数据 const fetchData = async () => { const { code, result } = await remind(); if(code 200) { data.value = result emit('u 阅读全文

posted @ 2024-07-25 10:40 DL·Coder 阅读(208) 评论(0) 推荐(0)

uni-app 控制小程序版本更新；小程序自动更新版本；

摘要：更新方法，onLaunch或者onShow（推荐写在onShow内）调用就可以 const updateManagerFn = () => { const updateManager = uni.getUpdateManager(); updateManager.onCheckForUpdate(f 阅读全文

posted @ 2024-07-18 17:29 DL·Coder 阅读(271) 评论(0) 推荐(0)

uniapp 微信小程序阻止返回上一页

摘要：自定义样式使用第二种方式第一种：wx.enableAlertBeforeUnload 在开发者工具中预览效果微信小程序官网：点我 onShow(() => { wx.enableAlertBeforeUnload({ message: "返回上页时弹出对话框", success: functio 阅读全文

posted @ 2024-07-15 11:03 DL·Coder 阅读(2095) 评论(0) 推荐(0)

vue3 子组件更新父组件值

摘要：Vue3 子组件修改父组件传过来的值 // 父组件 <demo v-model:num="num" v-model:arr="arr"></demo> // 子组件 const prop=defineProps({ num: { type: Number, default:0 } }) const 阅读全文

posted @ 2024-07-12 15:48 DL·Coder 阅读(87) 评论(0) 推荐(0)

vue element 和 antd 上传到七牛云

摘要：使用网站七牛云token生成：点我七牛云上传接口错误码：点我七牛云存储区域上传地址：点我七牛云在线生成token 一般是后端生成，使用接口获取（放在后端比较安全） // 获取七牛云token export async function getQiniuToken() { const url 阅读全文

posted @ 2024-07-08 14:40 DL·Coder 阅读(159) 评论(0) 推荐(0)

vue2、vue3 纯SCSS 实现环形进度条

摘要：vue3 纯SCSS 实现环形进度条 <template> <view class="flex align-center diygw-col-24 justify-center"> <view class="progress-circle" :class="`progress-${innerPerc 阅读全文

posted @ 2024-07-02 10:22 DL·Coder 阅读(520) 评论(0) 推荐(0)

vue3 详细配置 pinia，以及持久化处理

摘要：安装pinia pnpm install pinia pnpm install pinia-plugin-persistedstate 使用pinia 根目录下创建store文件夹，新家moudules文件夹和index.ts文件，如图： index.ts 文件 // store/index.ts 阅读全文

posted @ 2024-06-21 10:33 DL·Coder 阅读(240) 评论(0) 推荐(0)

css 转盘抽奖（兼容微信小程序）

摘要：<template> <div class="turntable" v-wechat-title="$route.meta.title">  <div class="rotate">  <image class="dish" src="../../ 阅读全文

posted @ 2024-01-29 16:58 DL·Coder 阅读(188) 评论(0) 推荐(0)

scss 走马灯效果（兼容微信小程序）

摘要：<template> <view class="marquee"> <view class="marquee-inner"> <span v-for="(item, index) of textList" :key="index">{{ item.text }}</span> <!-- 复制一份内容阅读全文

posted @ 2024-01-29 16:56 DL·Coder 阅读(82) 评论(0) 推荐(0)

Element UI Table 虚拟滚动实现

摘要：> 可以使用插件，也可以使用源码注意*：插件下面的第一个标签必须是 el-table 转载的是别人的文章，看底部，文章传送门，实测好用 ## 源码 ```js ``` ## 使用 ```js virtualList = renderData"> ... import VirtualScroll f 阅读全文

posted @ 2023-07-10 09:58 DL·Coder 阅读(1434) 评论(0) 推荐(1)

Element 自定义指令下拉分页，获取无限数据

摘要：## template 代码 ```js ``` ## data 下拉数据： ```js batchList: { list: [], total: 0, pageNo: 1, pageSize: 100 }, ``` ## methods 方法： ```js import { uniqBy } f 阅读全文

posted @ 2023-07-05 11:10 DL·Coder 阅读(62) 评论(0) 推荐(0)

Element textarea 行数限制，超过限定行数不允许输入

摘要：## 代码 ```js methods: { // 获取行数 getRow(val) { let row = 0 val.split('\n').forEach(item => { if (item.length 0) { row += 1 //如果一行只有回车符就是行数增加一行 } else { 阅读全文

posted @ 2023-06-26 09:55 DL·Coder 阅读(708) 评论(0) 推荐(0)

Element Select下拉实现拼音、首字母搜索汉字，下拉匹配自动清空问题

摘要：效果图搜索前：搜索后：使用安装插件 pinyin-match： npm install pinyin-match --save 下拉： <el-select v-model="form.robot" placeholder="机器人" @change="robotSearch" filter 阅读全文

posted @ 2023-05-04 17:14 DL·Coder 阅读(1266) 评论(0) 推荐(0)

只监听父元素的滚动事件，而不监听子元素的滚动事件

摘要：第一种，JS 1、判断dom this.$refs.squareRef.addEventListener('wheel', this.addScrolbarFn, false) addScrolbarFn(event) { event.stopPropagation() const dom = th 阅读全文

posted @ 2023-04-26 15:54 DL·Coder 阅读(231) 评论(0) 推荐(0)

排序三角组件

摘要：效果排序三角组件 <template> <div class="order"> <div class="order-text" @click="textBtnFn"> <slot></slot> </div> <div class="order-icon" @click="nabFn"> <div 阅读全文

posted @ 2023-04-26 09:57 DL·Coder 阅读(27) 评论(0) 推荐(0)

nuxt3 新建项目失败

摘要：传送门：https://blog.csdn.net/weixin_40973138/article/details/106081946 IP地址查看传送门：https://site.ip138.com/raw.githubusercontent.com/ 阅读全文

posted @ 2023-03-29 16:17 DL·Coder 阅读(21) 评论(0) 推荐(0)

DL-CODER

随笔分类 - Vue 合集

公告