vue 后台组件
小小liang
一个在深圳捡破烂的前端
展开
-
vue之封装一个 table组件 ( 列表之中 渲染其他组件 )
vue之封装一个 table组件 ( 列表之中 渲染其他组件 )原创 2022-08-31 17:30:10 · 585 阅读 · 0 评论 -
vue之封装一个 折叠面板
折叠面板原创 2022-08-18 15:16:30 · 828 阅读 · 0 评论 -
vue之ele的From表单组件的使用与二次封装
目录vue之ele的From表单组件的使用与二次封装From表单组件的使用ele的From表单组件的使用与二次封装Form.vue使用Form组件vue之ele的From表单组件的使用与二次封装From表单组件的使用<template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" &原创 2022-01-19 16:34:37 · 1169 阅读 · 0 评论 -
vue之ele的dialog组件二次封装
目录vue之ele的dialog组件二次封装Dialog.vue使用Dialog组件1使用Dialog组件2vue之ele的dialog组件二次封装Dialog.vue<!-- 弹窗组件 Dialog.vue --><template> <el-dialog class="dialog-wrap" :title="title" :width="width" :top="top" :visible.sync="dialogVis原创 2022-01-19 09:47:16 · 1031 阅读 · 0 评论 -
vue之ele左侧菜单(递归菜单)
目录vue之ele左侧菜单(递归菜单)Layout.vueSilder.vuechildMenu.vuevue之ele左侧菜单(递归菜单)Layout.vue<template> <el-container style="height: 100%; width: 100%"> <Silder /> <!-- <el-aside width="200px">Aside</el-aside> --> &原创 2022-01-11 21:42:05 · 782 阅读 · 0 评论 -
vue之input表单限制输入的(-0~9.这种格式)
目录vue之input表单限制输入的(-0~9.这种格式)Input.vue使用组件vue之input表单限制输入的(-0~9.这种格式)Input.vue<!-- 只是针对 现金流补录 输入框input的值的限制 --><template> <div class="input_wrap"> <!-- {{ inputComfig.startAmt }} --> <el-input class="input"原创 2021-12-01 19:57:28 · 964 阅读 · 0 评论 -
vue之表单的详情回显数据(只可查看-禁用状态)
目录vue之表单的详情回显数据InputShow.vue使用组件vue之表单的详情回显数据InputShow.vue<!-- 简单显示 --><!-- 下拉菜单 --><template> <div class="input_show clear_fix" @mouseover="mouseover" @mouseout="mouseout"> <div class="input_show_title" :style="`widt原创 2021-11-23 15:16:22 · 2679 阅读 · 0 评论 -
ele之Table表格的封装
目录ele之Table表格的封装ListTable.vue简单的使用带有操作按钮的table多行表头table选中某一个行ele之Table表格的封装ListTable.vue<template> <div class='table-wrap'> <el-table v-loading='isLoading' ref="listTable" :class="`list-table`" :data="data.tableD原创 2021-09-10 15:03:16 · 720 阅读 · 1 评论 -
基于ele封装下拉菜单等组件
目录基于ele封装下拉菜单等组件singleSearch组件使用组件样式基于ele封装下拉菜单等组件singleSearch组件<template> <div class="single-search clear_fix"> <div class="xSelect_wrap" :style="`width: calc(100% - ${labelWidth})`"> <slot></slot> </di原创 2021-08-24 15:18:33 · 938 阅读 · 1 评论 -
vue 实现模糊查询 + 前端分页效果 组件
目录@[TOC](目录)vue 实现模糊查询 + 前端分页效果查询 + 分页组件点击外层 指令 Clickoutside.js使用该 组件 实现模糊查询 + 前端 分页vue 实现模糊查询 + 前端分页效果查询 + 分页组件<!-- 查询企业 编号 公司 组件 --><template> <div class="search_business xSelect_container" v-clickoutside="clickoutside"> <原创 2021-03-09 09:34:18 · 644 阅读 · 0 评论 -
vue 之分页器 2
目录vue 之分页器 2pagination/Pagination.vuepagination/index.jsmain.js使用分页组件vue 之分页器 2pagination/Pagination.vue<!-- 一个简单的分页器组件 --><template> <div class="page_wrap clear_fix"> <div class="select_wrap"> 每页 <span>原创 2021-02-17 09:02:58 · 200 阅读 · 3 评论 -
vue之双击实现可编辑组件
目录vue之双击实现可编辑组件editText/EditText.vueeditText/index.jsmain.js使用组件vue之双击实现可编辑组件editText/EditText.vue<template> <div> <div v-if="isEdit"> <input type="text" v-model="newVal" /> <button @click="save">保存</b原创 2021-02-16 10:42:11 · 1829 阅读 · 0 评论 -
vue 之简单的弹窗组件
目录vue 之简单的弹窗组件notice/Notice.vuenotice/index.jsmain.js使用vue 之简单的弹窗组件notice/Notice.vue注意点:可以在添加确定 取消等按钮!<!-- --><template> <div class="notice_wrap"> <div>标题:{{ title }}</div> <div>内容:{{ message }}</div原创 2021-02-13 09:45:22 · 884 阅读 · 1 评论 -
vue 之面包屑组件
目录vue 之面包屑组件breadCrumb/BreadCrumb.vuebreadCrumb/index.jsmian.js使用组件路由的配置vue 之面包屑组件breadCrumb/BreadCrumb.vuenpm i path-to-regexp<template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group name="breadcrumb"&g原创 2021-02-08 14:33:14 · 624 阅读 · 0 评论 -
vue之粘性定位组件
目录vue之粘性定位组件sticky/Sticky.vuesticky/index.jsmain.js使用组件vue之粘性定位组件sticky/Sticky.vue<template> <div :style="{height:height+'px',zIndex:zIndex}"> <div :class="className" :style="{top:(isSticky ? stickyTop +'px' : ''),zIndex原创 2021-02-08 11:17:00 · 1252 阅读 · 2 评论 -
vue 之返回顶部组件
目录vue 之返回顶部组件backTop/BackTop.vue使用返回顶部组件vue 之返回顶部组件backTop/BackTop.vue<template> <transition :name="transitionName"> <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop"> <svg width="16"原创 2021-02-08 08:49:32 · 272 阅读 · 0 评论 -
vue 鼠标滑过显示 滑动条隐藏文本 组件
目录vue 鼠标滑过显示 滑动条隐藏文本 组件textHoverEffect/TextHoverEffect.vue使用该组件vue 鼠标滑过显示 滑动条隐藏文本 组件textHoverEffect/TextHoverEffect.vue<template> <a :class="className" class="link--mallki" href="#"> {{ text }} <span :data-letters="text" />原创 2021-02-08 08:25:15 · 539 阅读 · 0 评论 -
vue 公告栏组件
目录vue 之上滚 公告栏组件NoticeTip.vue使用公告栏组件vue 之上滚 公告栏组件持续向上滚动文字,无缝滚动NoticeTip.vue公告栏组件<template> <div id="wrapper" ref="wrapper"> <div ref="notice_ul1"> <div v-for="item in noticeData" :key="item">{{ item }}</div&g原创 2021-02-01 19:35:58 · 2929 阅读 · 1 评论 -
vue 之把组件封装为一个vue插件的简单方法
vue 之把组件封装为一个vue插件的简单方法第一步,编写你的组件noData/NoData.vue(暂无数据组件)<template> <div v-if="isShow" class="isShowTip"> <div>暂无数据</div> </div></template><script>export default { name: "NoData", components: {原创 2021-02-01 15:53:39 · 372 阅读 · 0 评论 -
vue 后台 之 简单的分页组件
目录vue 后台 之 简单的分页组件Pagination.vue 分页器组件使用分页器组件vue 后台 之 简单的分页组件Pagination.vue 分页器组件<!-- 一个简单的分页器组件 --><template> <div class="page_wrap"> <div> 每页<span>{{ comShowPage }}</span >条 共<span>{{ comTo原创 2020-12-24 10:50:48 · 232 阅读 · 0 评论