Vincentzyc-CSDN博客

原创 vue基于element-ui的Select选择器实现的动态多级联动下拉选择

demo地址代码如下：Html<div id="app"> <el-select v-for="(arrItem,key) in selectList" :key="key" v-model="selectArr[key]" filterable placeholder="请选择" value-key="value" @change="selected" @focu...

2019-04-10 15:15:55 20647

原创基于vue的动态表单自助建站工具

基于vue的拖拽式动态表单自助建站工具根据自己需求自助搭建移动端营销、投放、信息采集、推广、宣传等页面使用vuecli3生成项目，主要用到的技术如下： "element-ui": "^2.4.5", "vuedraggable": "^2.23.0", "vue": "^2.6.10", "vue-router": "^3.0.3", "vuex": "^3.0.1"

2019-02-22 11:45:55 6904 3

原创 vue基于原生select标签实现动态多级联动选择

本文讲的是vue基于原生select标签实现的动态多级联动选择基于element-ui的Select选择器实现的请看我的另外一篇文章vue基于element-ui的Select选择器实现的动态多级联动下拉选择本文demo地址：http://jsrun.net/yxXKp代码如下：Html<div id="app"> <select v-for="(arr...

2018-05-22 10:26:52 33119 8

package.json ... "version": "1.3.0", "lastVersion": "1.2.0", "lastTwoVersion": "1.1.0", ...vue.config.jsconst fs = require('fs')const rimraf = require('rimraf')module.exports = { publicPath: "./", outputDir: "dist", assetsDir: 'static

2021-01-21 19:44:09 559 1

原创 Vue3.0 + Typescript 项目 demo

基于 Vue3.0 + Typescript + Vant 的H5项目例子主要用到的技术如下： "vant": "^3.0.0-beta.2", "vue": "^3.0.0-0", "vue-router": "^4.0.0-0", "vuex": "^4.0.0-0", "typescript": "~3.9.3"项目地址：https://github.com/vincentzyc/vue3-demo预览地址：https://vincentzyc.gith

2020-10-19 09:57:52 2046 4

原创 ios下使用动画 transform: translate(xx%) 无效问题

<div class="wg-marquee-up"></div> .wg-marquee-up { height:300px; -webkit-animation: marquee-up 5s linear infinite; -ms-animation: marquee-up 5s linear infinite; -o-animation: marquee-up 5s linear infinite; animation: marq

2020-08-06 11:17:42 2720

原创基于vue的二进制格式多段时间选择器

基于vue的二进制格式多段时间选择器二进制格式的多段时间选择器，主要用于广告营销时段选择项目地址：https://github.com/vincentzyc/form-design如果觉得对你有用的话就给个 star 呗 ~~...

2019-12-28 14:10:59 522 3

原创 vuecli3关闭 Prefetch

// vue.config.jsmodule.exports = { chainWebpack: config => { // 移除 prefetch 插件 config.plugins.delete('prefetch') // 或者 // 修改它的选项： config.plugin('prefetch').tap(options =>...

2019-10-09 16:42:19 5264

原创 css 文本超出部分显示省略号

/* 必须固定宽度 */.textover { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}/* 可用于flex布局自适应宽度 */.textover1 { overflow: hidden; text-overflow: ellipsis; display:...

2019-09-18 17:15:23 237

原创 http常用请求头

通用字段作用Cache-Control控制缓存的行为Connection浏览器想要优先使用的连接类型，比如 keep-aliveDate创建报文时间Pragma报文指令Via代理服务器相关信息Transfer-Encoding传输编码方式Upgrade要求客户端升级协议Warning在内容中可能存在错误请求...

2019-05-25 22:36:57 689

原创 react-router路由使用js跳转

1.组件中使用withRouterimport { withRouter } from "react-router-dom";function Siderbar(props) { console.log(props); return ( ...... )}export default withRouter(Siderbar)withRouter官方文档2.使...

2019-05-16 11:15:10 1951

原创 js控制页面全屏

function fullScreenFun() { var iFullscreen = false; //当前是否全屏状态 var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEna...

2019-05-06 16:38:12 2705

原创 vuecli3+生产环境使用cdn

以使用v-charts为例在vue.config.js中添加 configureWebpack: { // 把webpack的配置写在这里会自动合并 // 以下库使用cdn，不会被打包 externals: { "v-charts": "VeIndex", } },externals 配置中，左边 “v-charts” 表示引入的模块名称，右边的 VeIndex...

2019-04-08 11:29:13 3549

原创使用vuecli3开发自己的npm包

1.创建项目vue create mynpm2.写组件3.在src目录下创建index.js，代码如下，根据实际情况修改import Vue from "vue"import mycomponent from './components/mycomponent .vue'let MyPlugin = { version: '1.0.0'};MyPlugin.install ...

2019-03-25 13:56:57 1430 1

原创禁止遮罩层底部滑动

原理：打开遮罩的时候记录滑动距离 lockMaskScrollTop ，同时设置 body 的 position: fixed; body.style.top= - lockMaskScrollTop；关闭遮罩的时候移除 body 的 position: fixed 即可。代码如下：css: body.popup-open { position: fixed; }j...

2019-03-14 15:51:11 2760

原创 vue-lazyload 图片懒加载

#vue-lazyload源码地址安装npmnpm i vue-lazyload -S使用main.js:import Vue from 'vue'import App from './App.vue'import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload,{ preload:1.3, //预加载的宽高 ...

2019-02-22 15:22:27 239

转载 Html5 清空canvas画布

总结以下三种清空canvas画布的方式：最简单的方法：由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空：function clearCanvas&amp;lt;span style=&quot;font-family: Verdana, Arial, 宋体;&quot;&amp;gt;()&amp;lt;/span&amp;gt; { var c=docu

2019-02-19 10:14:43 6320

原创 git 设置文件大小写敏感

方法一命令设置Git大小写敏感：git config core.ignorecase false方法二找到项目的 .git 文件夹（window默认是隐藏的，设置显示隐藏的项目即可出现）下的 config 文件打开，将ignorecase = true 设置成 ignorecase = false即可方法三先删除文件，提交；再添加进去，提交...

2019-02-19 10:13:20 4584

原创 postMessage 实现跨域通信

1. iframe + postMessage //主页面： var iframe = document.createElement("iframe"); iframe.src = "http://localhost:3000"; iframe.id = "myFrame"; iframe.width = "100%"; ifr...

2019-01-08 15:45:25 688

原创 js图片压缩

/* * 图片压缩，默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径 * @param {Object} obj * obj 对象有 width， height， quality(0-1) * @param {Object} callbac...

2018-11-19 19:28:16 249

原创 vue重置data

Object.assign(this.$data, this.$options.data())解析：1.Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 Object.assign(target, …sources)；参数： target =&gt; 目标对象。 sources =&gt; 源对象。返回值: 目标对象。2....

2018-10-25 17:55:18 7944 3

原创 Vue CLI 3 创建项目需要注意的一些问题

Node.js 8.9 或更高版本；npm 6.4.0或更高版本；cnpm install 目前更改代码后浏览器不会自动刷新（以后应该会解决）npm install 浏览器可以自动刷新默认会初始化git（vue create -n 创建项目可以跳过git初始化）...

2018-10-08 17:31:23 2046

转载微信小程序资源汇总

微信小程序汇总（10月16日更新小程序100+个教程或资讯与50+个Demo）1：微信小程序官方工具：https://mp.weixin.qq.com/debug/w … tml?t=14764346784612：微信小程序简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=14764346775993：微信小程序设计指南：http...

2018-08-20 17:18:47 16209

原创 Vue 项目判断开发、测试、正式环境

Vue Cli构建的项目只有npm run dev和npm run build两条开发和编译的命令。而要添加测试环境，我们可以扩展一条npm run test的命令输出测试环境下执行的代码。 1.在build文件夹中创建test.js文件 test.js中的代码很简单，就两行。主要就是配置一个环境变量用以区别测试和正式环境。这里没有直接修改原有的process.env.NODE_ENV是担心会...

2018-08-20 16:02:13 22380 1

转载隐藏滚动条但是可以滚动，兼容IE，FF，Webkit 和 O

/*webkit内核*/.scroll_content::-webkit-scrollbar { width:0px; height:0px;}.scroll_content::-webkit-scrollbar-button { background-color:rgba(0,0,0,0);}.scroll_content::-webkit-scrollb...

2018-08-20 15:56:23 7548

原创实现自己的js工具库（持续更新）

(function() { var yui = { /** * 获取url参数 * @param {String} name */ getUrlParam(name) { var reg = new RegExp("(^|&amp;)" + name + "=([^...

2018-06-07 19:20:18 1511

原创数组去重的几种方法

1.对象属性去重（哈希表法）function uniqueArr(arr) { var temp = {}; var result = []; for (var i = 0, j = arr.length; i &lt; j; i++) { if (!temp[arr[i]]) { temp[arr[i]] = true; result.push...

2018-05-25 18:24:49 1007

原创 css和js设置rem

css媒体查询：html{ font-size: 88px;}@media screen and (min-width: 340px){ html{ font-size: 94px; }}@media screen and (min-width: 360px){ html{ font-size: 100px; ...

2018-05-23 16:42:14 2960

原创 marquee 跑马灯

&lt;!-- js实现 --&gt;&lt;p id="scrollobj" style="white-space:nowrap;overflow:hidden;width:300px;margin: auto;" onmouseover="jsStop()" onmouseout="jsStart()"&

2018-05-23 16:22:28 459

原创前端面试大全

面试的信心来源于过硬的基础50道CSS基础面试题（附答案）2018最新Web前端经典面试试题及答案前端面试手册前端开发面试题前端开发面试大全

2018-05-22 10:35:41 835

Vincentyun