Vue组件库
文章平均质量分 68
一套Vue2组件库
sorryhc
全栈爱好者,专注于React、Node、Midway方向
展开
-
手写Vue个人组件库———fl-Input
接上文,封装了个人Vue组件库的第一个组件——Input,源码附在了文章末尾,如下是文档使用说明Input输入框通过鼠标或键盘输入文本fl-Input为受控组件,它总会显示 Vue 绑定值。通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。不支持 v-model 修饰符。基础用法<fl-Input v-model = "text" placeholder="请输入内容"></fl-Input>&l原创 2021-07-12 11:31:26 · 905 阅读 · 7 评论 -
手写Vue个人组件库———fl-Check-Group
接上文,封装了个人Vue组件库的第一个组件——CheckBox,源码附在了文章末尾,如下是文档使用说明Check 多选框一组备选项中进行多选基础用法由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。更像是一个CheckBox组,在界面中无论有多少个多选框,只会使用一对标签。你只需要提供一个带有label(下标)、value(展示文本)的数组作为dataSouce数据源。 <fl-Check-Group :dataSouce = "checkData"><原创 2021-07-12 11:27:45 · 299 阅读 · 1 评论 -
手写Vue个人组件库——fl-Breadcrumb
Breadcrumb 面包屑显示当前页面的路径,快速返回之前的任意页面。基础用法适用广泛的基础用法。你需要做的是将面包屑导航所包含的标题名和路径名以数组形式存放并绑定:breadcrumbData传送。具体如下:<template> <fl-Breadcrumb :breadcrumbData = "dataBase" @handleClick = "getPathAfterClick"></fl-Breadcrumb></template>原创 2021-07-22 02:21:23 · 424 阅读 · 2 评论 -
手写Vue个人组件库——Collapse / CollapseItem
Collapse 折叠面板通过折叠面板收纳内容区域基础用法可同时展开多个面板,面板之间不影响。由于标题名称和展示内容不同,推荐使用数组保存所有的标题和显示内容,通过v-for遍历fl-CollapseItem更加简洁的展示代码。通过:title传递每一个标题。<Collapse> <CollapseItem v-for = "(item,index) in collapseData" :key = "index" :title = "item.title">原创 2021-07-19 13:09:05 · 2707 阅读 · 2 评论 -
手写Vue个人组件库———fl-Select
接上文,封装了个人Vue组件库的第一个组件——Input,源码附在了文章末尾,如下是文档使用说明Select 选择器当选项过多时,使用下拉菜单展示并选择内容。基础用法适用广泛的基础单选v-model的值为当前被选中的el-option的 value 属性值<template> <fl-Select v-model = "value" :dataSource = "selectData"></fl-Select></template><原创 2021-07-14 22:09:57 · 1232 阅读 · 19 评论 -
手写Vue个人组件库———fl-Button
接上文,封装了个人Vue组件库的第一个组件——Button,源码附在了文章末尾,如下是文档使用说明fl-Button 按钮常用的操作按钮。基础用法基础的按钮用法。使用type、round、big 、small属性来定义 fl-Button 的样式。<div> <fl-fl-Button>基本按钮</fl-fl-Button> <fl-Button type = "primary">基本按钮</fl-fl-Button&g原创 2021-07-12 11:20:03 · 443 阅读 · 3 评论 -
手写Vue个人组件库——fl-Rate
Rate 评分评分组件基础用法点击后锁定当前评分。<template> <fl-Rate @handleClick = 'getStarNum'></fl-Rate></template>export default { <script> methods: { getStarNum(num){ console.log(num) }原创 2021-07-21 20:40:45 · 322 阅读 · 2 评论 -
手写Vue个人组件库——fl-Loading极简加载
Loading 极简加载加载数据时显示动效。旋转加载在表格等容器中加载数据时显示。添加loadingRound属性即可。<fl-Loading loadingRound></fl-Loading>省略加载加载数据时显示省略样式的加载。添加loadingRow属性即可<fl-Loading loadingRow></fl-Loading>地球式环绕加载加载数据时显示地球式环绕加载。添加loadingColums属性即可<原创 2021-07-21 22:57:14 · 515 阅读 · 6 评论 -
手写Vue个人组件库———fl-Cascader
接上文,封装了个人Vue组件库的Cascader级联选择器,源码附在了文章末尾,如下是文档使用说明Cascader 级联选择器当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。基础用法只需为Cascader 的dataSource可渲染出一个级联选择器。<template> <Cascader :dataSource = "dataSource" @change = "getList"></Cascader></template>原创 2021-07-15 19:52:05 · 2095 阅读 · 14 评论 -
手写Vue个人组件库——fl-Tree 树形选择器
Tree 树形控件用清晰的层级结构展示信息,可展开或折叠。基础用法基础的树形结构展示。通过dataSource绑定数据源,使用afterToggle获得每次展开收起的回调方法。同时你还可以配置数据源中的display决定默认展开的选项。<template> <fl-Tree :dateSource = "treeData" @afterToggle = "afterToggle"></fl-Tree></template><scrip原创 2021-07-22 12:18:59 · 2946 阅读 · 2 评论 -
手写Vue个人组件库———fl-InputNumber
接上文,封装了个人Vue组件库的第一个组件——Input,源码附在了文章末尾,如下是文档使用说明*InputNumber 计数器仅允许输入标准的数字值,可定义范围基础用法要使用它,只需要在el-input-number元素中使用v-model绑定变量即可,变量的初始值即为默认值。<template> <fl-InputNumber v-model = "num" :max = 10 :min = 0 @handleClick="handleClick"></fl原创 2021-07-14 13:33:03 · 398 阅读 · 0 评论 -
手写Vue个人组件库——fl-Table / fl-TableColums
接上文,封装了个人Vue组件库的表格,源码附在了文章末尾,如下是文档使用说明,其次感谢大家在我开发过程中对我的支持和鼓励,对我开发个人组件的效率提升非常大,非常感谢。有兴趣的朋友可以在npm中查找 ui-package-for-vue 就是目前所开发的组件库,同时支持npm i直接下载,再次感谢。由于Table表格组件可扩充性非常多,因此准备边写边更新,如下是第一阶段的Table组件。Table 表格用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。基础表格基础的表格展示原创 2021-07-18 04:53:29 · 1214 阅读 · 2 评论 -
手写Vue个人组件库——fl-Pagination分页器
Pagination 分页当数据量过多时,使用分页分解数据。基础用法数据较少的效果数据较多的效果当总数据量大于50条时会自动呈现如上的第二种效果,可配合maxShowPageCard设置每一组分页的页签量。同时pageSizeList为必填选项,第一个下标的值即为每页所展示的数量。<template> <fl-Pagination :total = 80 :maxShowPageCard = 5 :pageSizeList = [8原创 2021-07-22 05:29:56 · 683 阅读 · 0 评论 -
手写Vue个人组件库———fl-Radio-Group
接上文,封装了个人Vue组件库的第一个组件——Radio,源码附在了文章末尾,如下是文档使用说明**Radio 单选框在一组备选项中进行单选基础用法由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。更像是一个Radio组,在界面中无论有多少个单选框,只会使用一对标签。你只需要提供一个带有label(下标)、value(展示文本)的数组作为dataSouce数据源。<fl-Radio-Group :dataSouce = "radioData"></fl原创 2021-07-12 11:24:18 · 538 阅读 · 3 评论 -
手写Vue个人组件库——fl-Lazyimg 图片懒加载
fl-Lazyimg图片懒加载基础使用将img绑定在fl-Lazyimg标签中,设置img的src-data为图片路径即可使用。当页面滚动到图片区域的时候则为自动加载。<template> <Lazyimg> <img src-data = "../src/assets/image/4.jpg"> <img src-data = "../src/assets/image/5.jpg"> <原创 2021-07-22 19:50:18 · 675 阅读 · 1 评论 -
手写Vue个人组件库———fl-Card
接上文,封装了个人Vue组件库的Card卡片布局组件,源码附在了文章末尾,如下是文档使用说明Card 卡片将信息聚合在卡片容器中展示。基础用法包含左侧标题、右侧标题、内容和底部内容。Card 组件包括header-left、header-right、content和footer部分组成,header部分需要有显式具名 slot 分发,同时也是可选的。<fl-Card class = "card"> <div slot = "header-left"> &原创 2021-07-19 10:51:31 · 2140 阅读 · 1 评论 -
手写Vue个人组件库——fl-Badge
Badge 标记出现在按钮、图标旁的数字或状态标记。基础用法展示新消息数量。通过绑定tagNum传递显示消息数量。<fl-Badge :tagNum = "5"> 评论</fl-Badge><fl-Badge :tagNum = "9"> 回复</fl-Badge><fl-Badge :tagNum = "12"> 点赞</fl-Badge>自定义颜色改变消息冒泡框的背景颜色。<fl-Badg原创 2021-07-21 21:16:37 · 560 阅读 · 7 评论