![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
叫我火柴
我的老伙计,你还有很长路的要走
展开
-
Rust 使用控制流循环访问代码 (if/else, while, loop, for循环)
1.if/else 表达式fn main() { if 1 == 2 { println!("哎呀,你的数学捞啊"); } else { println!("没错!1不等于2"); }}在前述示例中,if 的条件是表达式 1 == 2,该表达式的计算结果为布尔值类型,值为“false”。...原创 2021-05-31 17:39:47 · 436 阅读 · 0 评论 -
使用vue实现按钮的切换(vue tab切换)
1.效果图2.代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>测试vue</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head>原创 2021-05-24 15:21:06 · 2571 阅读 · 0 评论 -
Vue使用element-ui tab切换echarts解决宽度100%问题
element-ui 使用el-tab组件注意事项 这里面每一个tab页使用echarts都会存在echarts设置百分比自适应问题设置100%后只有100px的样子缩到一起,解决办法是: 1. 第一种 解决:通过 v-if 重新渲染组件即可。 2. 延...转载 2021-05-20 17:31:58 · 843 阅读 · 0 评论 -
vue 实现双向绑定的核心方法:Object.defineProperty()
在vue中我们经常使用到 v-model ,但是 v-model 在vue里又是怎么实现的呢?在这其中最核心的就是使用了 Object.defineProperty 来实现vue的双向绑定。当然在这里我们不讨论vue实现 v-model 的源码,只浅析 Object.defineProperty 使用方法。1.什么是Object.defineProperty()Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。2.Objec原创 2021-05-12 12:21:31 · 285 阅读 · 0 评论 -
使用pdf.js实现pdf文件的在线预览(有码源)
博客更新地址啦~,欢迎访问:https://jerryyuanj.github.io/ 最近做移动项目(H5)时遇到一个需求,就是在线预览pdf文件。其实本来使用window.open()就可以实现了,但是这个API在IOS上是正常的打开Safari浏览器进行预览,在安卓上打开是则是下载预览,客户不满意;而且在将该应用嵌入到钉钉微应用时,这个API在安卓设备上根本不起效果。于是在网上找到了这个插件,去官网摘了个例子,并且结合移动端的上下左右滑动滑动...转载 2021-04-29 17:30:29 · 2072 阅读 · 1 评论 -
不使用vue过滤器怎么实现在数字前面统一加美元符号?现在给出一个思路:使用标签模板字面量
1,代码function doll(strings, ...values){ return strings.reduce(function(s,v,idx){ if(idx > 0){ if(typeof values[idx - 1] == 'number'){ s += `$${values[idx - 1].toFixed(2)}`; }else{ s += values[idx - 1]; } } retu原创 2021-04-22 22:40:24 · 245 阅读 · 0 评论 -
使用vue 实现收起展开的过度动画(涉及element的源码)
1.需求需要实现的效果是:给一个列表添加收起展开的过度动画,但是只使用简单的vue transition代码(不是transition简单,是我不熟悉transition,所以只能写出来简单的过度效果)来实现动画效果一直做不到令人满意的效果,最后找到一段element框架码源的代码,终于实现了需要的效果2.代码新建一个js文件:expansion.js(名字可以随意写)const elTransition = '0.3s height ease-in-out, 0.3s padding-top ea原创 2021-04-16 12:29:20 · 1556 阅读 · 1 评论 -
使用svg画饼状图(进阶版)
1.效果图2.代码<template> <div class="bg"> <div class="pie" /> </div></template><script>export default { data() { return {} }, computed: {}, mounted() { this.getsvg() }, methods: { getsv原创 2021-03-31 12:23:08 · 773 阅读 · 0 评论 -
利用svg画饼状图(基础版)
1.效果图2.代码html<template> <div class="bg"> <svg viewBox="0 0 64 64"> <circle r="16" cx="32" cy="32" /> </svg> </div></template>css<style lang="scss" scoped>.bg{ width: 60%; height原创 2021-03-31 11:42:08 · 365 阅读 · 0 评论 -
利用css实现矩形切角和矩形弧形切角效果效果
1.效果图2.代码<style lang="scss" scoped>.bg-content { width: 200px; height: 200px; background: #58a; background: linear-gradient(135deg, transparent 15px, #58a 0) top left, linear-gradient(-135deg, transparent 15px, #58a 0)原创 2021-03-31 09:24:13 · 1484 阅读 · 2 评论 -
利用css画出vans棋盘格图案
1.效果图2.css代码<style lang="scss" scoped>.bg-content { width: 100%; height: calc(100vh - 50px); background: #eee; background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0), linea原创 2021-03-30 17:38:59 · 590 阅读 · 0 评论 -
vue 使用canvas画圆圈进度条
1.效果图最后出来的效果如上图所示,界面的构建是利用vue实现的,具体代码如下:2.代码<!-- --><template> <div> <div class="time-graph"> <div class="big">70</div> <div class="medium">20</div> <div class="small">10&l原创 2021-03-12 17:03:37 · 1212 阅读 · 0 评论 -
修改 Element table表格的背景颜色以及边框下划线样式(最终解!)
1效果图:能改成这种效果,可见我有多厉害,那到底有多厉害呢?举个栗子:就像小母牛生不出仔,牛逼坏了2前提条件:你的项目使用的是vue 和 scss实现:利用 深度作用选择器 也就是 ::v-deep,来进行样式穿透,进而对table的样式进行覆盖并且改成我们想要的样式HTML <div class="table-wrapper"> <el-table :data="tableData" height=原创 2021-01-07 12:08:58 · 4208 阅读 · 5 评论 -
解读vue-element-admin登录逻辑permission.js
import router from './router'import store from './store'import { Message } from 'element-ui'import NProgress from 'nprogress' // progress barimport 'nprogress/nprogress.css' // progress bar styleimport { getToken } from '@/utils/auth' // get token fro原创 2020-10-29 09:14:30 · 5367 阅读 · 0 评论 -
Vue Router 如何通过v-for的方式循环出简单的路由
1router -> index.vue文件import Vue from 'vue'import VueRouter from 'vue-router'/* Layout */import Layout from '@/layout'Vue.use(VueRouter)export const routes = [ { path: '/safety', redirect: '/safety', component: Layout, children原创 2020-10-23 15:40:11 · 2223 阅读 · 0 评论 -
vue Element 利用Cascader 级联选择器实现三层选择器
在这次项目需求中要实现的功能和选择地址的过程是很相似的,就用选择地址的过程来举例:首先是选择省,然后是市,再是某个区。在实际的开发过程中这种场景是很常见的,所以我就分享一下我的实现过程。效果图实现过程实现这个功能需要用到Element这个框架中的Cascader 级联选择器,但是不是那个Cascader 级联选择器都适用于这种场景,其中我选择了Cascader 级联选择器中的动态加载选择器,链接 --> 添加链接描述这个选择器的好处就像你看到的那样它可以:动态加载,这也就意味着可以把我们的数原创 2020-10-22 11:18:32 · 2365 阅读 · 2 评论 -
Element 利用Tooltip提示框实现动态显示文字提示
利用element的提示框来实现动态显示循环的数据,效果图如下:这里的四个项都是通过循环数组来展示出来的,需要用Tooltip提示框将代码包裹起来就可以达到此效果,代码如下:HTML:<div v-for="(item,index) in choice" :key="index" class="equipmentname center2"> <i class="el-icon-circle-close" style="margin:0 10px 0 1原创 2020-09-28 12:28:57 · 9474 阅读 · 0 评论 -
vue 利用element的Table 表格实现自制的穿梭框(可以高度自定义)
先看效果图:原创 2020-09-23 17:30:08 · 3755 阅读 · 4 评论 -
JS 利用vue过滤器将阿拉伯数字转化为汉字
<div class="deviceArea-item-title">设备{{index+1 | numberfilter}}</div> filters: { // 将阿拉伯数字转换为汉字的算法 numberfilter: function (num) { const changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'] // changeNum[0] = "零" .原创 2020-09-15 15:46:15 · 1793 阅读 · 0 评论 -
vue 将多个过滤器封装到一个文件中
在这里只简单探讨关于如何将vue过滤器封装到一个文件当中,当然可以封装多个不同类型的过滤器,然后可以在需要使用过滤器的文件当中进行复用,非常的方便。1.首先是文件结构,首先涉及到 filters.vue (引用过滤器的文件)文件代码:<template> <div class="chart-container"> <ul> <li v-for="texts in text" >{{texts | MoneyFormat}}&原创 2020-09-03 17:39:43 · 319 阅读 · 0 评论 -
ECharts图表自适应浏览器窗口大小(可随浏览器窗口的放大缩小而自适应)
2020年9月3今天在制作ECharts图表时遇到一个问题,需要在一个页面里放入十个ECharts图表,使用的是vue框架进行制作,为了避免在一个文件里写入过多的代码,于是每一个ECharts图表我都单独的写到另一个文件里,再通过组件的形式插入到主文件里。但是在制作折线图时因为这三个折线图在浏览器窗口里占的比例比较大,所以我就希望这些折线图能够在浏览器窗口缩放时进行自适应。**1.**当只有一个图表需要进行自适应时 // 使用刚指定的配置项和数据显示图表。 this.myChart原创 2020-09-03 15:57:53 · 3799 阅读 · 0 评论