vue组件
关注
分享
扫一扫
vue第三方组件
cmmboy1990
积累、
展开
-
el-table 合并单元格
1.效果<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <script src="./js/vue.js" type="text/javascript" chars原创 2022-05-18 13:08:47 · 1201 阅读 · 0 评论 -
vue2中使用 antv/f2
效果：代码：导包：npm install @antv/f2注意：用 3.8.11 版本<template> <div id="app"> <canvas id="myChart" style="width: 100%;height: 300px;"></canvas> </div></template><script> // import F2 from '@antv/f2/lib/ind原创 2022-04-27 14:15:21 · 2031 阅读 · 0 评论 -
vue2 使用AntV 以g2plot为例
1.效果2.代码nmp 导入：npm install @antv/g2plot代码：<template> <div id="app"> <div id="container"></div> </div></template><script> import { Bar } from '@antv/g2plot'; export default { name: 'App', data(原创 2022-04-25 10:13:39 · 1135 阅读 · 0 评论 -
Vue 上下层叠轮播图
1.效果：2.代码：<template> <div class="article-main" @mouseover='mouseOver()' @mouseleave="mouseLeave()"> <img src="../../assets/a3.jpeg" :class="v1" /> <img src="../../assets/a2.jpeg" :class="v2" /> <img src="../../assets/a原创 2022-03-04 17:00:26 · 1246 阅读 · 0 评论 -
vue项目echart飞线地图
1.效果2.代码：<template> <div class="dk-chart"> <div ref="chart" class="chart"></div> </div></template><script> let nowClientWidth = document.documentElement.clientWidth; import * as echarts from "echa原创 2022-02-18 13:30:06 · 1703 阅读 · 1 评论 -
vue-baidu-map 点聚合bml-marker-clusterer根据不同类型设置聚合图标
1.效果：2.代码：<template> <div> <baidu-map class='mapView' :center="center" :zoom="zoom" :autoLocation="true" :scroll-wheel-zoom="true" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">原创 2022-01-25 10:54:48 · 3100 阅读 · 0 评论 -
Vue-baidu-map bm-marker自定义图标
1.代码：<bm-marker v-for="(marker,index) of listPointData" :key='marker.id' :position="{lng: marker.lng, lat: marker.lat}" :icon="{url:mapIcon, size: {width: 52, height: 52}}" @click="clickHandler(marker)"></bm-marker>原创 2022-01-20 13:34:02 · 3377 阅读 · 1 评论 -
element el-menu自定义样式
效果：代码：<template> <div class=""> <el-container> <el-aside width="wth"> <el-menu default-active="1" :unique-opened="true" @open="handleOpen" @close="handleClose"> <el-submenu index="1"> <tem原创 2022-01-13 10:08:56 · 4229 阅读 · 1 评论 -
vue滑动列表悬停列表上部分指定区域
1.效果：2.代码<template> <div class="hello"> <div class="top"> <div class="searchView"> <img src="../assets/search_icon.png" class="search-icon" /> <input class="input-text" placeholder="请输入关键词搜索" /> </原创 2021-11-24 15:48:04 · 1087 阅读 · 0 评论 -
vue svg图片查询组件
vue svg图片查询组件1.组件代码index.vue<!-- @author zhengjie --><template> <div class="icon-body"> <el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons">原创 2021-07-22 13:54:08 · 373 阅读 · 0 评论 -
vant 自义定 tabBar 图标和颜色
vant 自义定 tabBar 图标和颜色1.index代码：<template> <div class="app-container"> <div class="layout-content"> <keep-alive> <router-view v-if="$route.meta.keepAlive" style="margin-bottom: 50px"/> </keep-a原创 2021-07-14 17:44:38 · 2059 阅读 · 0 评论 -
Vue常用插件总结
Vue常用插件总结一、UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS原创 2021-07-07 17:56:48 · 310 阅读 · 0 评论 -
vue 预览 txt
vue 预览 txt1.核心代码<!-- --><template> <div class=''> <van-nav-bar title="预览txt" left-text="返回" left-arrow class="title" @click-left="onClickLeft"原创 2021-06-21 15:39:12 · 1054 阅读 · 0 评论 -
vue 预览 pdf
vue 预览 pdf1.引入插件import pdf from 'vue-pdf'2.导入、和引入组件import pdf from 'vue-pdf' components: { pdf }<pdf :page="pageNum" :src="url" @progress="loadedRatio = $event" @num-pages="pageTotalNum=$event" ></pdf>3.核心原创 2021-06-21 15:38:13 · 149 阅读 · 0 评论 -
vue 预览 word
vue 预览 word注意：vue-cli3+ 在项目本地预览时，在public 文件夹下放文件。vue-cli2 在新建static文件夹1.引入插件npm install mammoth2.导入插件import mammoth from 'mammoth'3.核心代码<!-- --><template> <div class=''> <van-nav-bar title="预览doc" lef原创 2021-06-21 15:35:30 · 2418 阅读 · 0 评论 -
vue 预览 excel
vue 预览 excel1.下载插件npm install xlsx2.导入插件import XLSX from 'xlsx'3.核心代码<!-- --><template> <div class=''> <van-nav-bar title="预览excel" left-text="返回" left-arrow class="tit原创 2021-06-21 15:30:40 · 830 阅读 · 9 评论 -
Vue.js常用插件
UI组件element - 饿了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的组件库mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为移动而生的Vue JS 2组件框架vonic - 快速构建移动端单页应用eme原创 2021-06-17 21:26:27 · 826 阅读 · 0 评论 -
一个Vue.js组件 vue-status-indicator，用于将状态指示器显示为彩色圆点
一个Vue.js组件 vue-status-indicator，用于将状态指示器显示为彩色圆点1.安装npm i vue-status-indicator2.引入import { StatusIndicator } from 'vue-status-indicator';components: { StatusIndicator },3.使用<status-indicator positive pulse "/>//取值颜色<status-indicato原创 2021-06-16 12:47:45 · 1130 阅读 · 0 评论