需求描述  场景:现有很多类表单,进入表单详情后需要使用按钮提供表单的相关审批操作,需封装一个通用的按钮组件以满足不同表单不同需求操作  原型图如下:  思路:既然是在移动端,那我们是需要用到vant移动端组件库了。首先我们需要在项目中引入vant,然后绘制出原型图中的页面,最后考虑将其封装为一个通用组件。步骤引入vant安装 npm install vant --save引入: 1、 在main
常见组件封装使用vue create green-ui命令初始化一个vue项目勾选如下选择scss选择eslint风格选择保存时校验选择In package.json保存输入项目名创建项目成功启动项目然后把App.vue修改为如下内容<template> <div id="app"> 定制组件 </div> </template>
转载 2024-04-21 13:45:24
217阅读
Vue3.0 写过组件吗?如果想实现一个 Modal你会怎么设计?一、组件设计组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式现在有一个场景,点击新增与编辑都弹框出来进行填写,功能上大同小异,可能只是标题内容或者是显示的主体内容稍微不同这时候就没必要写两个组件,只需要根据传入的参数不同,组件显示不同内容即可这样,下次开发相同界面程序时就可以写更少的代码,意义着更高的
示例代码: .
转载 2018-01-03 15:30:00
263阅读
2评论
树形结构相信大家在日常生活中都见过,它的特点是一层一层嵌套,比如文件系统。以下是vite的源码目录结构(部分):/vite ├── docs ├── packages | └── vite | ├── CHANGELOG.md | ├── LICENSE.md | ├── README.md | ├── api-extractor.json | ├── b
转载 2024-09-26 22:37:17
59阅读
1、封装权限指令permission import { useRoutesStore } from "@/store/modules/routes"; export const permission = { mounted(el, binding) { const routesStore = use
原创 2022-11-06 01:03:14
980阅读
1评论
<template> <view> <!-- 封装一个添加按钮 --> <view class="cricle-view"> <text class="add-sym">+</text> </view> </view> </template> <script> export default { da
原创 2022-09-01 17:15:30
86阅读
从零动手封装一个通用的vue按钮组件我们在使用目前最主流的前端框架vue在开发过程中,组件是一个非常重要的组成部分,可以这么说,所有的vue应用,都是由一个一个的小组件拼装而成的。正是由于vue组件如此重要,所以vue的生态中,也非常多的UI组件库,其中最著名的非Element-UI莫属,里面有非常多的封装完善的组件提供给我们使用,大大的增强了我们的开发效率。那么,这些UI框架的组件,究竟是如何封
转载 2023-07-05 16:59:10
263阅读
vue组件的定义● 组件(Component)是Vue.js最强大的功能之一● 组件可以扩展HTML元素,封装可重用代码● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能● 有些情况下,组件也可以表现用 is 特性进行了扩展的原生的HTML元素● 所有的Vue组件同时也都是Vue实例,所以可以接受相同的选项对象(除了一些根级特有的选项),并提供相同的生命周期钩子vue组件的功
转载 2024-02-04 02:10:19
72阅读
关键词:SDK,VUE,单例模式,代码复用本文旨在分享一个前端 sdk 的开发方式。即使用 vue 直接开发1.项目背景需求描述:1.开发一个集团通用 SSO 单点登录页面,大致如下图: 2.开发一个对应 sdk,给接入方使用,页面效果和 web 保持一致。如下图: SDK 需求: 提供调用方式给用户,可以传递参数,调用方法,直接生成登录弹框和背景半透明的蒙层在弹框成功
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width,
原创 2022-02-14 15:44:26
448阅读
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,max
原创 2021-07-13 10:09:24
235阅读
一、安装axios和confignpm install axios --Savenpm install config --Save二、封装config文件在src目录下创建config文件夹,config内创建index.js文件//网络请求地址 例如: http://wwww.baidu.com 本地开发时,可直接填写后端测试接口地址(需要设置浏览器允许跨域请求,或后端设置Cross-orig
转载 2024-02-24 23:02:38
37阅读
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 https://www.electronjs.org/ 目录01.打包封装1.创建v
之前我发布了一篇是有关于uniapp的接口简单封装,这次我发布的是vue的接口简单封装,这次有涉及到几个依赖,需要提前安装好,一个是axios依赖,一个是qs依赖,以下是安装方法:npm install axios -S npm install qs安装完之后,就可以直接再也没中引入了,这次涉及到三个文件,一个是对axios的封装文件,即axios.js,一个是对接口的封装文件,即index.js
转载 2024-04-18 13:32:44
224阅读
1、校验数据类型export const typeOf = function(obj) { return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase() }示例typeOf('vue') // string typeOf([]) // array typeOf(new Date()) // date typeO
转载 2024-03-18 09:00:44
36阅读
1.首先添加新文件.cpp,.h .h中,明确继承类 .cpp中 画家形式添加图片, 动画效果,使用QPropertyAnimation类 ...
转载 2021-10-04 15:29:00
166阅读
2评论
1.首先添加新文件.cpp,.h .h中,明确继承类 .cpp中 画家形式添加图片, 动画效果,使用QPropertyAnimation类 ...
转载 2021-10-04 15:29:00
208阅读
2评论
前言上一篇章写了 Mint-UI 的基本使用,本篇章再来介绍MUI。注意: MUI 不同于 Mint-UI,MUI只是开发出来的一套好用的代码片段,里面提供了配套的样式、配套的HTML代码段,类似于 Bootstrap; 而 Mint-UI 是真正的组件库,是
原创 2022-07-04 22:11:56
418阅读
前言上一篇章写了 Mint-UI 的基本使用,本篇章再来介绍MUI。❝注意:MUI 不同于 Mint-UI,
原创 2021-06-18 13:18:14
606阅读
  • 1
  • 2
  • 3
  • 4
  • 5