随笔分类 -  Vue2.0/3.0功能组件

Vue-Page（分页）
摘要：z组件代码： <!-- 分页组件，使用说明见 README.md --> <template> <div class='YxkPage'> <template v-if="pageObj.total"> <el-pagination v-bind="dataBind(pageObj)" @curre 阅读全文
posted @ 2023-11-17 16:37 忙着可爱呀~ 阅读(139) 评论(0) 推荐(0)
Vue-秒数转时间
摘要：getTime: function(during,config) { var s = Math.floor(during / 1) % 60; during = Math.floor(during / 60); var m = during % 60; during = Math.floor(dur 阅读全文
posted @ 2023-11-17 16:37 忙着可爱呀~ 阅读(103) 评论(0) 推荐(0)
Vue-打印组件
摘要：组件代码： <el-button v-print="{id: 'print-content'}" icon="el-icon-printer">打印</el-button> // 插件 vue-print-nb 示例： 阅读全文
posted @ 2023-11-17 16:37 忙着可爱呀~ 阅读(74) 评论(0) 推荐(0)
Vue-Element（功能）
摘要：1、el-input只能输入数字 <el-input v-model="form.sort" onkeyup="value=value.replace(/[^\d]/g, '')" :max="30000" placeholder="请输入权重"></el-input>{} 2、正则只能输入数字，一 阅读全文
posted @ 2023-11-17 16:35 忙着可爱呀~ 阅读(24) 评论(0) 推荐(0)
Vue-Dialog（弹窗）
摘要：组件代码： <!-- * @Descripttion：弹窗组件--> <template> <div class='YxkDialog'> <el-dialog :visible.sync="dialogObj.visible" v-bind="dataBind(dialogObj)" v-on=" 阅读全文
posted @ 2023-11-17 16:32 忙着可爱呀~ 阅读(143) 评论(0) 推荐(0)
Vue-Echarts（图表）
摘要：封装代码： <!-- * @Descripttion：图表组件 --> <template> <div class='YxkEcharts'> <VEcharts :params="echartsObj"></VEcharts> </div> </template> <script> // 图表 c 阅读全文
posted @ 2023-11-17 16:31 忙着可爱呀~ 阅读(40) 评论(0) 推荐(0)
Vue-Excel（文档流Excel导出）
摘要：<!-- // 注：此为导出Excel表格说明文件，不用引入， 1、使用方式： 引入： import commonJs from "@js/common"; 使用： commonJs.exportExcel(obj) 必传字段： obj: { blob: res // 文档流 } （注：api中需设 阅读全文
posted @ 2023-11-17 16:31 忙着可爱呀~ 阅读(150) 评论(0) 推荐(0)
Vue-Excel（Excel导入）
摘要：<!-- Excel表格导入/上传组件，滑到底部可查看详细说明，--> <template> <div class="ImportExcel"> <el-form> <el-upload action="" :accept="excelObjData.accept" :limit="excelObj 阅读全文
posted @ 2023-11-17 16:30 忙着可爱呀~ 阅读(157) 评论(0) 推荐(0)
Vue-iframe嵌入页自适应
摘要：Iframe嵌入页自适应方法 /* iframe自适应 config: { iframeId: '', // iframe id/class iframeBodyId: '', // iframe内 包裹元素 id/class bodyId: '.main-container', // 包裹ifra 阅读全文
posted @ 2023-11-17 16:29 忙着可爱呀~ 阅读(211) 评论(0) 推荐(0)
Vue-表格组件封装
摘要：封装代码： <!-- * @Descripttion：表格组件--> <template> <div class='YxkTable'> <el-table :data="data" v-bind="tableBind" v-on="this.$listeners"> <ELTableColumn 阅读全文
posted @ 2023-11-17 16:28 忙着可爱呀~ 阅读(76) 评论(0) 推荐(0)
Vue-搜索组件封装
摘要：组件代码： <!-- * @Descripttion：搜索组件--> <template> <div class='YxkSearch'> <el-form :model="form" :ref="$attrs.formRef" v-bind="$attrs"> <!-- 搜索项 --> <temp 阅读全文
posted @ 2023-11-17 16:27 忙着可爱呀~ 阅读(138) 评论(0) 推荐(0)
Vue-Drag 拖拽组件
摘要：组件代码： <!-- 拖拽组件，使用说明见 README.md，--> <template> <div class='YxkDrag'> <VDraggable v-bind="dragBind(dragObj)" @start="dragStart" @end="dragEnd" v-on="th 阅读全文
posted @ 2023-11-17 16:26 忙着可爱呀~ 阅读(504) 评论(0) 推荐(0)
Vue-方法封装
摘要：// 使用说明查看 README.md let commonJs = {} // 1、深拷贝 commonJs.deepMerge = (target, source) => { // 判断被拷贝对象是Object // 陷阱！！typeof(null) 'object' true if (type 阅读全文
posted @ 2023-11-17 16:25 忙着可爱呀~ 阅读(28) 评论(0) 推荐(0)
Vue-表单组件
摘要：组件代码： <!-- * @Descripttion：表单组件--> <template> <div class='YxkForm'> <el-form :model="form" :ref="$attrs.formRef || 'ruleForm'" v-bind="formBind(formOb 阅读全文
posted @ 2023-11-17 16:23 忙着可爱呀~ 阅读(52) 评论(0) 推荐(0)
Vue-VEditor（富文本）
摘要：组件代码： <!-- 富文本组件，使用说明见README.md--> <template> <div class='YxkEditor'> <!-- 富文本 --> <template> <div :class="[{'YxkEditor__noToolbar': params.hideToolba 阅读全文
posted @ 2022-09-22 18:43 忙着可爱呀~ 阅读(504) 评论(0) 推荐(0)
Vue 子组件更改父组件数据
摘要：1、callback 回调方法触发更改 父组件： <Quick @callback="callback" /> method: { callback(params) { // 逻辑处理} } 子组件： changeKey() { this.$emit('callback', // 需要传递的参数) 阅读全文
posted @ 2022-09-16 11:06 忙着可爱呀~ 阅读(298) 评论(0) 推荐(0)
Vue-Upload（图片/视频上传）
摘要：封装代码： <!-- * @Descripttion：上传组件 --> <template> <div class='YxkUpload'> <div :class="[{ 'YxkUpload__slot': dataBind.isSlot}]"> <el-upload :before-uploa 阅读全文
posted @ 2020-12-01 10:00 忙着可爱呀~ 阅读(227) 评论(0) 推荐(0)