分类 前端技术 下的文章
今天用elementui写了一个el-dialog组件里面包着一个el-transfer穿梭框组件，代码<!--推荐服务-->
<el-dialog title="提示" :visible.sync="dialogVisible" width="704px" :before-close="handleClose">
<el-transfer ref="recommendation" v-model="addI- 阅读剩余部分 -
好久不写文章了，做个element-ui的总结，会持续更新element-ui的table列超出部分省略加悬浮提示<el-table-column :show-overflow-tooltip="true">
</el-table-column>
表单取消重置this.$refs.companyInfoForm.resetFields()
input绑定回车事件*一般监听在输入的input监听keyup事件，加enter修饰符。如果input是组件，加上.native修饰符。举个栗子非组件<input :placeholde- 阅读剩余部分 -
1、全局变量专用模块就是以一个特定模块来组织管理这些全局量，需要引用的地方导入该模块便好。全局变量专用模块 Global.vue<script>
const QueryApplyInfo = {};
const AreaInfoList = {};
const OrderDictList = {};
const decodeOrderDict = {}
const ProfessionInfoList = {};
const decodeProfessionInfo = {};
export default- 阅读剩余部分 -
组件核心代码代码，命名liang.js/*
* @Liang liweiliang QQ:406320591(406320591@QQ.com).
* @date 2018-08-08,
* @version 1.0.0
* @liweiliang Inc. All Rights Reserved
*/
let Liang = {};
Liang.install = function(Vue,options){
Vue.prototype.$Validate = (_this) => {
var _Vaild = _this.- 阅读剩余部分 -
使用vue单页开发项目时遇到一个很恶心的问题：在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用解决这个问题，下面是我的使用心得。是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。首先在App.vue页面上有下面一段代码，我们都知道这是页面渲染的地方<router-view></router-view>
把这段代码改成如下：<keep-alive>
<router-view v-if="$route.meta.keepAlive- 阅读剩余部分 -
Event Loop，事件环，线程进程。这些概念对初识前端的同学来说可能会一头雾水。而且运行js代码的运行环境除了浏览器还有node。因此不同环境处理Event Loop又变得不同，十分容易混淆。如果你有这样的疑问。下文将给你一个清晰的解释。概念梳理首先我们简化一下概念，把进程，线程，事件环，这些概念梳理一下。清晰了概念后面用到的时候就会有共鸣。进程和线程基本概念拿出在教科书里的概念：1、调度：线程作为调度和分配的基本单位，进程作为拥有资源的基本单位；2、并发性：不仅进程之间可以并发执行，同一个进程的多个线程之间也可并发执行；3、拥有资源：进程是拥有资源的一个独立单位，线程- 阅读剩余部分 -
下载安装插件依赖npm install vue-wechat-title --save
在main.js中引入插件import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
在路由文件 index.js中给每个路由添加titleroutes: [{
path: '/',
name: 'index',
component: index,
meta:{
title:'首页' // 标题设置在这里
}
},{
path:'/deta- 阅读剩余部分 -
第一步 node环境安装1.1 如果本机没有安装node运行环境，请下载node 安装包进行安装1.2 如果本机已经安装node的运行换，请更新至最新的node 版本下载地址：https://nodejs.org/en/ 或者 http://nodejs.cn/第二步 node环境检测为了快乐的使用命令行，我们推荐使用 gitbas1.1 下载git 并安装下载地址 https://git-for-windows.github.io/安装成功后 右键菜单我们可以看到 Gti Bash Here 。说明我们已经安装成功git1.2 检测node 是否安装成功右键空白，选择 G- 阅读剩余部分 -
如果需要将某个元素 在可以滚动元素（scroll）中设置为居中计算方法为： 需要的scrollleft + 普通居中时候的offsetLeft = 当前的scrollleft+当前元素的offsetLeft = 固定的当前元素在整个滚动条中距离左边的位置DEMO<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script s- 阅读剩余部分 -
随着自己写过的页面的增多，也遇到了很多CSS兼容性的问题。这些兼容性问题，都是必然的，因为技术在不断进步，不断革新，所谓，“后浪推前浪，前浪拍死在沙滩上”，当然我们的技术不能是被拍死在沙滩上，我们还要支持，不支持的话，只能是你这个页面，这个产品被淘汰。那么为了不被淘汰，我们就要做些兼容性处理。
我写页面的时候用到过很多的flex布局，觉得非常好用。下面附上一篇不错的flex布局介绍的文章。 Flex 布局教程想了解的可以自己去看看这篇博文，或者自己百度，这里先部多做介绍，我们主要来说一说flex布局的兼容性问题。why?大家可能想问了，flex布局为什么会存在兼容性问题啊？- 阅读剩余部分 -
1、移动端web页面显示图片在ios下回出现图片透明非常浅的问题，使用如下代码解决：Element{
opacity: 1;
}
2、iphone及ipad下输入框默认内阴影Element{
-webkit-appearance: none;
}
3、html5调用安卓或者ios的拨号功能html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。<a href="tel:4008106999,1034">400-810-6999 转 1034</a>
html5GPS定位功能具体请看：http:/- 阅读剩余部分 -
<input type="text" placeholder="请选择" readonly="readonly" unselectable="on">
设置只读标签readonly="readonly",禁止光标显示unselectable="on" 但是这个Android机正常，ios,iphone 5(se)都还依然会出现光标所以在网上找了些资料，现在整理下，方案一<input type="text" value="test" onf- 阅读剩余部分 -
最近项目中用到了各种加密，其中就包括从没有接触过得aes加密，因此从网上各种查，官方的一种说法：高级加密标准（英语：Advanced Encryption Standard，缩写：AES），在密码学中又称Rijndael加密法，是美国联邦政府采用的一种区块加密标准。这个标准用来替代原先的DES，已经被多方分析且广为全世界所使用。经过五年的甄选流程，高级加密标准由美国国家标准与技术研究院（NIST）于2001年11月26日发布于FIPS PUB 197，并在2002年5月26日成为有效的标准。2006年，高级加密标准已然成为对称密钥加密中最流行的算法之一。很显然，没啥卵用。最- 阅读剩余部分 -
依赖包jspm install npm:jspm-loader-jsx
在config.js文件中找到关键字babelOptions的地方，然后替换成下面的代码：babelOptions: {
"stage": 0,
"optional": [
"runtime",
"optimisation.modules.system"
]
}
在react中可以定义默认props，使用es5时，可以使用getDefaultProps：var MyDemo = React.createClass({
getDefaultProps: function() {
return {
name: 'demo'
};
},
render: function() {
return <h1>This is my {this.props.name}</h1>;
}
});
ReactDOM.render(
<MyDemo />,
do- 阅读剩余部分 -
@media screen and (width: 768px) and (orientation: portrait) {
body{
width:320px;
-moz-transform: scale(2.4);
-webkit-transform: scale(2.4);
-o-transform: scale(2.4);
-ms-transform: scale(2.4);
transform: scale(2.4);
transform-or- 阅读剩余部分 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生js拖拽效果</title>
</head>
<body>
<div id="box"></div>
<script type="text- 阅读剩余部分 -
call和applyobj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);
两者作用一致，都是把obj(即this)绑定到thisObj，这时候thisObj具备了obj的属性和方法。或者说thisObj『继承』了obj的属性和方法。绑定后会立即执行函数。唯一区别是apply接受的是数组参数，call接受的是连续参数。function add(j, k){
return j+k;
}
function sub(j, k){
return j-k;
}
我们在控制台- 阅读剩余部分 -
(function (factory) {
if (typeof define === "function" && define.amd) {
define([ "jquery" ], factory);
} else {
factory(jQuery);
}
}(function ($) {
$.fn.slides = function (options) {
var settings = $.extend({
- 阅读剩余部分 -
因为嫌console.log()的写法太繁琐，想将其简写为log()。 我最初是这样写的： var log = console.log;
log(..);
结果输出为：TypeError: Illegal invocation
谷歌一番之后在Stack Overflow上找到这个答案：var log = console.log.bind(console);
看到这个答案后，突然眼前一亮，因为我恰好刚刚在《You Don't Know JS》系列中读到过相关内容。虽然SO上只有答案没有解释，但是读过的内容瞬间在大脑中盘旋，帮我理解了这种写法的原理。刚刚学过的内容派上了用场，- 阅读剩余部分 -
jspm init初始化会报错,研究了一下午，因为原来一直好好的，错误信息：err TypeError: First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object.
如图： 研究了一下午啊，发现原来是后期本地安装git以及用git创建了项目造成了在git时需要配置用户名密码才能正常下载数据：配置命令：jspm registry config github
然后在jspm init 就正常了
http://photoswipe.com/documentation/api.html所有的方法和这个网页上列出的属性是公开的。如果你想看看例子什么API可以做的，拿在默认PhotoSwipe UI源看看。您可以初始化，例如在得到PhotoSwipe实例对象：var photoswipeInstance = new PhotoSwipe( /* ... */ );
Methodsvar pswp = new PhotoSwipe( /* ... */ );
// Initialize and open gallery
// (you can bind events be- 阅读剩余部分 -
配置选项是在键 - 值对添加作为参数传递给PhotoSwipe构造，例如通过：var options = {
index: 3,
escKey: false,
// ui option
timeToIdle: 4000
};
var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
gallery.init();
// Note that options object is cloned during the initiali- 阅读剩余部分 -
入门您应知道之前先做起事情：PhotoSwipe不是一个简单的jQuery插件，至少基本的JavaScript知识才能安装。PhotoSwipe需要预定义的图像尺寸（更多关于这一点）。如果您在非回应网站上使用PhotoSwipe - 控制将在移动进行换算（整页缩放）。所以你需要实现自定义控件（在右上角例如单个大关闭按钮）。文档中所有的代码是纯香草JS和支持IE8及以上。如果您的网站或应用程序使用了一些JavaScript框架（像jQuery或MooTools的），或者你并不需要支持旧的浏览器 - 随意简化代码。避免对移动服务的大图像（大于2000x1500px），因为它们会- 阅读剩余部分 -
转自http://blog.csdn.net/xiaoyu411502/article/details/467023911、引子以前介绍过 Sublime text 3 系列的文章，着重介绍了 Sublime text 3 如何下载、安装、插件、配置等内容。Sublime text 3的轻量和富扩展，为前端开发带来了很多的便捷，加快了代码的书写速度，尤其是配上 emmet，那书写速度堪称光速。现在，要隆重介绍的前端开发工具webstorm，为什么说它是前端开发工具，而不是前端开发编辑器呢？它具备的功能，不只只是编辑器这么简单，还包含了任务管理、历史管理、版本管理、工程管理、- 阅读剩余部分 -
重要提示:2.0不向后兼容以前的版本 这个插件可以很方便的对json操作，var thing = { plugin: 'jquery-json', version: 2.4 };//json对象
var encoded = $.toJSON( thing );
//将thing转为字符串，字符串格式如下
// '{"plugin":"jquery-json","version":2.4}'
var name = $.evalJSON( encoded ).plugin;
//将上面的字符串encod- 阅读剩余部分 -
省时的浏览器同步测试工具Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。1. 安装 Node.jsBrowserSync是基于Node.js的, 是一个Node模块， 如果您想要快速使用它，也许您需要先安装一下Node.js2. 安装 BrowserSync可以选择从Node.js的包管理（NPM）库中 安装BrowserSync。打开一个终端窗口，运行以下命令：npm install -g browser-sync
当然您- 阅读剩余部分 -
实现思路很简单，汉字有21个声母：b, p, m, f, d, t, n, l, g, k, h, j, q, x, zh, ch, sh, r, z, c, s有韵母24个，其中单韵母有6个：a, o, e, i, u, v, 复韵母有18个：ai , ei, ui , ao, ou, iu , ie, ve, er, an , en , in, un , vn , ang, eng, ing , ong假设声母和韵母两两组合的话，会有24X21=504种组合，实际情况是有些组合是没有意义的，比如zv, zie, zve等，去除这部分后，还剩余401种；这就- 阅读剩余部分 -
在chrome下：input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
在Firefox下：input[type="number"] {
-moz-appearance: textfield;
}如果感觉还不放心，吧下面的这段加上input[type="numbe- 阅读剩余部分 -
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'style-loader' instead of 'style',
see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
Webpack新版本要求配置module- 阅读剩余部分 -
- « 前一页
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 后一页 »