vue
阿之阿佐
小小的一枚努力型前端
展开
-
剧集数字兼容性显示
先上效果:普通屏:大屏:也就是根据盒子大小来排布,能排满就直接排列,否则显示...思路就是获取外部盒子宽度,除以每个集数的宽度+marginRight,得出每一列最多排列的个数maxNum,然后根据:集数总和 > (maxNum*2),来决定是否显示省略号,剩下的就是判断某几个元素的marginRight是否为0(以免超过盒子宽度,导致不必要的换行),整个组件如下:<template> <ul class="episode-ul" @click=..原创 2021-07-21 11:22:25 · 123 阅读 · 0 评论 -
vue 骨架屏组件
注意:如果同学们不使用page-skeleton-webpack-plugin和vue-server-renderer,并且,你希望生成的骨架屏可以和页面相匹配,可以往下看!!!1、实现原理:给需要的dom标签设置特定类名,使用getBoundingClientRect来获取dom标签的大小和位置信息,并以此来生成一个占位符,最终生成一份“骨架屏”,当页面加载完毕,移除该“骨架屏”组件即可。因为这是在mounted周期获取元素信息,故如果元素信息不满意,需要先默认一些初始数据2、代码..原创 2020-06-20 01:18:42 · 1690 阅读 · 0 评论 -
vue 使用路由守卫监听返回键,控制页面跳转
beforeRouteLeave(to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` if(!this.isPublish){ this.confirmVisible=true next(false)//不放行 }el...原创 2019-07-01 20:32:11 · 4828 阅读 · 0 评论 -
vue 超过内容展开折叠组件,支持for多个
///////////////////////////////////////////偷个懒,只做了3行4行的,其他的行数请自行计算 let num//////////////////////////////////////////<template> <div> <div class="text-wrapper" :cl...原创 2019-06-11 11:04:36 · 2410 阅读 · 2 评论 -
vue watch的简单实现
class Dep { constructor(){ this.subscribers=[]; } depend(){ if(target&&!this.subscribers.includes(target)){ this.subscribers.push(target); } } notify(){...原创 2019-01-21 17:29:28 · 542 阅读 · 0 评论 -
vue-cli 使用vconsole
1、npm install vconsole2、vconsole.jsimport Vconsole from 'vconsole';const vConsole = new Vconsole();export default vConsole;3、main.js引入vconsole.js原创 2018-06-22 14:17:30 · 6857 阅读 · 0 评论 -
vue 本地动态src 404的一种解决方法
利用计算属性<img :src="imgURL"/>computed: { imgURL(){ return this.arrowImgShow?require("images/expert/icon-down.png"):require("images/expert/icon-up.png"); }},原创 2018-06-11 18:32:19 · 1636 阅读 · 0 评论 -
vue-cli 使用postcss-px2rem导致vue组件引入css失败
postcss-px2rem插件配置不当引起的;在vue-loader.config.js增加了两个配置'use strict'const utils = require('./utils')const config = require('../config')const isProduction = process.env.NODE_ENV === 'production'const s...原创 2018-05-20 20:53:24 · 5660 阅读 · 3 评论 -
vue 对arr动态增删改查
通过dialog来编辑,新建,删除table的元素这种业务场景相对于前面说的两种更加的常见。而且也有不少的小坑。首先我们要明确一个点 vue 是一个MVVM框架,我们传统写代码是命令式编程,拿到table这个dom之后就是命令式对dom增删改。而我们现在用声明式编程,只用关注data的变化就好了,所以我们这里的增删改都是基于list这个数组来的。这里我们还要明确一点vue 列表渲染注意事项由于 J...转载 2018-03-27 10:58:35 · 1482 阅读 · 0 评论 -
vue 拖拽排序
<template> <section class="main"> <div class="drag-box-left"> <div class="drag-title">拖动排序</div> <div class="转载 2018-03-27 10:16:43 · 4576 阅读 · 1 评论 -
vue 懒加载,开发环境不适用,生产环境才适用
router.jsimport Vue from 'vue'import Router from 'vue-router'//开发环境不适用懒加载const _import = require('./_import_' + process.env.NODE_ENV);Vue.use(Router)const routerList=[ { path: '/', component:...转载 2018-03-29 21:35:48 · 2268 阅读 · 1 评论 -
vue 项目 使用es6要加入babel-polyfill
npm install -save babel-polyfill module.exports = { entry: { app: ['babel-polyfill','./src/main.js'], },原创 2018-03-15 14:51:24 · 6518 阅读 · 1 评论 -
element table 自定义表头
companyRenderHeader(h, { column, $index }){ return h("span",[ h("span",{ "class":{ "red-star":true } },"*"), h("span","委托方"), ])官网api:https://cn.vuejs.org/v2/...原创 2018-03-07 17:57:46 · 17965 阅读 · 7 评论 -
element table表格 下方出现滚动条
如果element table在不该出现滚动条的情况下出现了滚动条,那么,请注意你的reset.css文件table { border-spacing: 0; border-collapse:separate;/* 如果值为collapse,则element表格下方会出现滚动条*/}...原创 2018-02-10 19:48:28 · 13405 阅读 · 0 评论