随笔分类 - vue,js
摘要：首先我们需要安装sortable.js这款插件 npm install sortablejs 然后我们在页面中引入这个插件 import Sortable from "sortablejs"; 表格加上row-key=“id” <el-table :data="userlist" ref="sing
阅读全文
摘要：<template> <div> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" > <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-
阅读全文
摘要：const CubeLeft = echarts.graphic.extendShape({ shape: { x: 0, y: 0 }, buildPath: function(ctx, shape) { const xAxisPoint = shape.xAxisPoint const c0 =
阅读全文
摘要：var uploadedDataURL = "/asset/get/s/data-1528971808162-BkOXf61WX.json"; /** 此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的
阅读全文
摘要：option = { /* grid: { top: "20%", bottom: "12%" },*/ backgroundColor:"#0f375f", tooltip: { trigger: "axis", axisPointer: { type: "shadow", label: { sh
阅读全文
摘要：//数据 var XName = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] var data1 = [67, 97, 51, 338, 32, 11, 1] var img = [ 'image://data:image/png;base64,iVBORw
阅读全文
摘要：/** * * 作者: GhostCat * 博客: https://gcat.cc * 描述: 带点和渐变的折线图 * */ let label = [233, 233, 200, 180, 199, 233, 210, 180]; let value = [233, 233, 200, 180,
阅读全文
摘要：// Generate data var category = []; var dottedBase = +new Date(); var lineData = []; var barData = []; for (var i = 0; i < 20; i++) { var date = new D
阅读全文
摘要：/** * * 作者: GhostCat * 博客: https://gcat.cc * 描述: 双折线图 * */ let xLabel = ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'] let goToSchool = ["40", "60",
阅读全文
摘要：1.介绍：是vue组件懒加载的预估插件组件。支持组件组件延时加载， 加载真实组件前展示骨架组件，提高用户体验，真实组件代码分包异步加载 // 安装 npm install @xunlei/vue-lazy-component // 使用方式一 // main.js文件中全局注册使用 import V
阅读全文
摘要：1.什么是scoped(转帖原地址: https://segmentfault.com/a/1190000015932467?utm_source=tag-newest#comment-area) 在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属
阅读全文
摘要：新建一个souso组件 1 <template> 2 <div :class="{'inline':inline}"> 3 <span v-if="this.label">{{this.label}}</span> 4 <input 5 type="text" 6 :value="value" 7
阅读全文
摘要：新建一个Toast组件 1 <template> 2 <transition name="fade"> 3 <div v-show="visible">{{message}}</div> 4 </transition> 5 </template> 6 7 <script> 8 export defa
阅读全文
摘要：新建一个Switch组件 1 <template> 2 <div> 3 <span class="weui-switch" :class="{'weui-switch-on' : isChecked}" :value="value" @click="toggle" style="position:r
阅读全文
摘要：新建一个Dialog组件 1 <template> 2 <div class="main"> 3 <div :class="{dialog:propsItem.rgba}" v-if="propsItem.isMask"> 4 <div class="content" v-bind:style="p
阅读全文
摘要：首先新建一个Input.vue组件 1 <template> 2 <div class="selectWrap"> 3 <div class="select-wrapper"> 4 <div class="select" @click = "triggerOption"> 5 <div class=
阅读全文
摘要：新建一个Top组件 1 2 <template> 3 <div id="goTop"> 4 <div class="goTop" v-show="goTopShow" @click="goTop"> 5 <i class="el-icon-caret-top goTopIcon"></i> 6
阅读全文
摘要：这个功能就类似于某宝在购物之后，对商品进行评价 先看一下效果 那么实现这个功能也很简单，新建一个my-rate组件，然后上代码 1 <template> 2 <div class="rate" :class="{'disabled':disabled}"> 3 <span v-if="showTex
阅读全文
摘要：Vue其实有三种路由模式 1 hash： 使用URL hash 值来作路由，支持所有浏览器，包括不支持HTML5 History API的浏览器 原理：早期的前端路由的实现就是基于 location.hash 来实现的，其实现原理很简单，location.hash的值就是URL中#后面的内容 。比如
阅读全文
摘要：几种常见的打包工具 grunt:https://www.gruntjs.net/ gulp:https://www.gulpjs.com.cn/ fis3(百度):http://fis.baidu.com/ webpack:https://webpack.js.org/ 成功案例：vue脚手架，re
阅读全文
