VUE
a Fang
行我所行,无问西东
展开
-
Vue3组件开发——点击按钮外部触发弹窗事件
Vue3组件开发——点击按钮外部触发弹窗事件1. 环境配置:vscodeTS “bootstrap”: “^5.1.3”, “core-js”: “^3.6.5”, “vue”: “^3.0.0”, “vue-class-component”: “^8.0.0-0”2. 代码:useOutclick.TSimport { ref, onMounted, onUnmounted, Ref } from 'vue'const useClickOutside原创 2022-01-23 21:45:00 · 3238 阅读 · 0 评论 -
Vue3组件开发——DropDown显示点击下拉菜单
Vue3组件开发——DropDown点击下拉1. 环境配置:vscodeTS “bootstrap”: “^5.1.3”, “core-js”: “^3.6.5”, “vue”: “^3.0.0”, “vue-class-component”: “^8.0.0-0”之前让它显示是直接使用的is-disabled判断就是给的一个静态的数据,下面使用TS函数来实现点击逻辑2. 编写点击点击显示下拉菜单函数:逻辑代码: setup () { co原创 2022-01-23 21:42:55 · 3943 阅读 · 0 评论 -
Vue3组件开发——列表展开项(DropDownitem)
Vue3组件开发——列表展开项(DropDownitem)根据万物皆可组件化的开发思维,我们可以继续将组件化应用到列表展开项里面。因为在实际开发过程中,我们需要满客户随时修改列表项的需求,如果一股脑写死,维护还有开发可能都不会方便。1. 环境主要用到的环境是VScode+TS+VUE3+Bootstrap2. 代码2.1 组件:DropDownItem.vue<template> <li class="dropdown_option" :class原创 2022-01-14 14:14:53 · 2174 阅读 · 1 评论 -
VUE3组件开发——下拉菜单(DropDown)
VUE3组件开发——下拉菜单(DropDown)这个组件主要是实现下拉多级列表的形式1. 环境主要用到的环境是VScode+TS+VUE3+Bootstrap2. 代码这里主要就是判断是不是点击打开了下拉菜单的部分,让它显示多级列表2.1 组件DropDown.vue<template><!-- 写了样式也不骑作用 --><div class="dropdown" style="{display: inline-table}"> <a h原创 2022-01-14 13:01:46 · 5103 阅读 · 0 评论 -
Vue3组件开发-GlobalHeader
这个组件比上面一个组件简单多了,但是我在写的时候还是遇到了奇奇怪怪的问题。1 环境主要用到的环境是VScode+TS+VUE3+Bootstrap这个就是一个brandbar,头部导航条,逻辑方面就是判断是否登录,如果登录了那么就显示XXX欢迎,如果是未登录那么就是,登录以及注册的按钮跳转。2 代码2.1 GlobalHeader组件:代码://创建一个globalheader组件<template> <nav class="navbar navbar-dark b原创 2022-01-13 00:48:36 · 777 阅读 · 0 评论 -
VUE组件开发——ColumnList
一起来开发属于自己的组件吧!这个是一个关于显示一个小的卡片的list的组件1 环境主要用到的环境是VScode+TS+VUE3+Bootstrap2 代码2.1 组件部分:columnlist.vue<template> <div class="row"> <div v-for="column in list" :key="column.id" class="col-xs-4 mb-4"> <div class="card h-原创 2022-01-12 22:28:52 · 935 阅读 · 0 评论 -
vue init webpack报错
vue init webpack报错我前段时间摸鱼去了,好久没去写vue项目了,今天看到一个好项目建项目的时候突然出现了vue init webpack XX初始化错误,一看应该是因为自己vue—cli没有全局下载那就使用这么命令全局下载一下,然后再使用我们的vue webpack工具npm install -g @vue/cli-init -verbosevue init webpack XXqk3Znrzj-1637679035292)]这样就还蛮正常。...原创 2021-11-23 22:51:32 · 1048 阅读 · 0 评论 -
快速使用VUE UI
快速使用VUE UI打开VUE UI1. 使用cmd打开VUE 在cmd里面输入vue ui他会启动你的浏览器窗口,我们就可以看到2.使用VUE UI2.1 创建的文件位置创建的文件是默认在你启动vue ui的夹2.2 新建文件新建创建完毕2.3 新建项目创建配置包管理因为我npm用的比较多,还是使用npm。直接点击下一步默认就好稍微等一下下项目运行进入任务界面运行编译完成点击启动。编译完成后会自动打开原创 2021-11-23 13:16:42 · 728 阅读 · 0 评论