vue中面包屑的简易封装
vue中面包屑的简易封装
在vue+element-ui基础上
在src/components/Breadcrumb/index.vue中:
1234567891011121314151617181920212223242526<template> <div class="BreadcrumbBox"> <span class="greenBorder"></span> <el-breadcrumb class="breadcrumb" separator="/"> <el-breadcrumb-item v-for='(item,index) in Breadcrumb' :key="index" :to="item.path">{{item.name}}</el-breadcrumb-item> &l ...
在vue项目中遇到的简易封装
在vue项目中遇到的简易封装
在vue项目+element-ui框架的基础下进行,在src/components/Search/index.vue下,代码:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 ...
在Vue项目中遇到的坑 NO.1
在使用element-ui中的日期选择器时(datePicker)时,可能会遇到的问题:
123456789101112131415<div v-if="search.type&&search.type==='date'"> <el-form-item :label="search.label" :prop="'list.'+index+'.value'" :rules="search.rules?search.rules:{}" > <el-date-picker v-model="search.value" align="right" type="date" :placeholder="search.placeholde ...
关于SVG在Vue项目中的优雅的使用
icon-fonts解决方案可以一次性加载纯色图标,并且相对于精灵图更小更灵活;那渐变色或者组合颜色的图标怎么办呢,答案之一就是svg
1.svg是矢量图像,可以无限缩放,而且图像质量不会下降 2. svg图像比 jpg 或 png 图像更灵活,我们可以使用 CSS 和 JavaScript 与它们进行交互,比如在 css中用fill属性控制svg颜色 3. svg基本上可以放心使用,除非你要用在IE8或老版本安卓机[^1]**中; 4. SVG Sprite技术,这里所说的Sprite技术就是类似于CSS中的Sprite技术。图标图形整合在一起,实际呈现的时候准确显示特定图标。
实际上就是把所有的当前页面用到的svg使用symbol标签都放在一个svg中加载到body顶部,使用的时候再用use标签的xlink:href=”#xxx”根据symbol的id调用[^1]: svg的说明
安装依赖12// 读取svg信息,去除svg中的无用标签,精简结构npm install svgo svgo-loader --save-dev
12// SVG Sprite插件npm ...
Canvas
Canvas info: Canvas
1$ <canvas id="tutorial" width="150" height="150"></canvas>
我们可以提供对canvas内容的文字描述或者是提供动态生成内容相对应的静态图片,如下所示:
1234567<canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15</canvas><canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> ...
Hexo配置
Hexo搭建步骤1.安装Git2.安装Node.js
安装完成后,打开命令行 :
1$ node -v npm -v
3.安装Hexo
创建文件夹 blog ,cd进入 或点击进入 输入 :npm install -g hexo-cli 检查版本 :hexo -v 初始化hexo :hexo init myblog cd myblog //进入这个myblog文件夹 npm install 新建完成后,指定文件夹目录下有:
123456789101112$ node_modules: 依赖包$ public:存放生成的页面$ scaffolds:生成文章的一些模板$ source:用来存放你的文章$ themes:主题$ ** _config.yml: 博客的配置文件**$ hexo g$ hexo server$ 打开hexo的服务,在浏览器输入localhost:4000就可以看到你生成的博客了。$ Git提交$ hexo d
4.GitHub创建个人仓库5.生成SSH添加到GitHub6.将hexo部署到GitHub7.设置个人域名8.发 ...
总要写些什么
No.1刚才看了朋友圈有朋友说 北京这是要变成海吗?打雷真可怕。
No.2为什么突然想拥有一个博客呢,明明自己也不是一个能坚持的人,但就是想拥有一片属于自己的地方,等待有缘的朋友来遇见。
No.3都这么晚了 睡觉了(¦3[▓▓] 晚安)
链接详情www.baidu.com




