2018年09月_ColourfulTiger

12月 11月 10月 09月 08月 07月 06月 05月

原创 vue自定义进度条的制作方法（含css属性值的两种动态改变方式）

雏形部分接上一篇文章：https://blog.csdn.net/ColourfulTiger/article/details/82910505结合vue制作自定义的进度条，优势在于采用了vue特有的样式绑定，与双向绑定的方法，达到数据与进度条的进度一致。突破点：通过变量来动态改变属性对应的属性值。知识点补充：（1）看了一些文章采用动态的改变值的...

2018-09-30 17:47:27 6466 1

原创 vue 中引用字体图标的方式

1、全局安装font-awesomecnpm install font-awesome --save-dev2、main.js中引入 import 'font-awesome/css/font-awesome.min.css'3、在相关文件中使用<i class="fa fa-motorcycle" aria-hidden="true"></i>...

2018-09-30 16:18:17 1160

原创进度条制作

简单描述一下小例子：这个进度条是可以通过js控制的，即点击按钮触发函数，动态的改变百分比的值与进度条的状态。当超过100%时，不再响应，按钮禁用。html部分：<div class="progress-bar"> <div class='box'> <div class='clip' id="context"> ...

2018-09-30 16:06:14 1553

原创 textarea高度自适应函数

在实现textarea根据内容的增多实现高度自适应，且无滚动条的效果，方法有2种。第一种方法：通过事件onkeyup来实现这样的效果备注：onkeyup事件发生阶段 1、onkeyup事件会在键盘按键被松开时发生； 2、与onkeyup事件相关的事件发生次序： 1）onkeydown----------键盘按下-...

2018-09-24 13:51:37 497

原创前端页面试题答题区遇到（）实现换行的方式

在一些题库系统中，很容易遇到分条作答的现象，当大量的答案都只通过一段话显示在一起的时候，很难让人分清楚条理，关键字也不明显，很容易出现错判断的现象，而通过括号大段的在一起也很难看，那么怎样才能实现分条作答的页面呢？思路如下：1、给出规范，如遇到（）代表答案内容中的一条；2、推测特殊情况，考虑细节，当给出的1中情况出现其他特殊情况时，该怎样解决，使用正则表达式判断；3、仿编译原...

2018-09-23 22:35:04 785

原创父组件操作子组件的方式

1、子组件<template> <div class=""> {{form}} </div></template><script>export default { props:['form'], data () { return { msg: 'layout' } }}&lt..

2018-09-23 22:23:59 530

原创 js的回调函数使用

源码见地址：https://download.csdn.net/download/colourfultiger/10673643html部分<div class="box"> <div id="callback1"></div> <button onclick="testback1(forfun)">ca

2018-09-18 12:41:49 1482

原创 css动画遮罩效果自上而下与自下而上

基本结构<div class="header"> <div class="inner"> <a href="#">标题栏</a> </div> </div>1、自上而下scss：被注释的部分是另外一种自下而上的情况。 .header { w

2018-09-07 12:40:19 3995

原创 vue环境使用scss来写css样式

1、在本建立vue项目的文件下打开命令窗口2、输入： cnpm install sass-loader node-sass vue-style-loader --D 下载3、打开项目文件下的build文件，找到webpack-base-conf.js文件，配置以下内容即可module: { rules: [ { test: /\.vue$/, ...

2018-09-06 17:39:47 3015

原创 vue环境下一个主页面引入多个子组件的方法

通常我们使用的是单个文件引入，但是这样就会有很多代码是重复的，怎样才能实现“按需“引入呢？1、常见的引入单个vue文件的写法：import Header from '@/view/layout/Header'; 2、实现”按需“引入的写法：”按需“引入多个vue文件的写法：import {Header,Footer,Content} from '@/view/layout';...

2018-09-06 12:37:24 18276 1

原创多个css文件在同一个html中的执行顺序2

1、文件位置在head里面引入，无！important 时或文件位置在body里面引入，无！important 时按照从上到下的顺序依次执行，同一样式会选择最后一个文件里面的渲染［就近原则］。若想实现自己的样式最先，文件在head或body里面引入，都要放置在最后！2、文件位置在head里面引入，相关样式有！important时或文件位置在bo...

2018-09-03 10:14:06 3404

原创引入style的位置在head里与在body里的区别1

在使用css的时候少不了会在某一html页面通过style标签写自己的样式，但是在html页面中将style的内容放置在head和body里面有什么区别呢？1、打开head里面的style，关闭body里面的style<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <...

2018-09-03 09:44:27 11318