随笔分类 - vue
vue相关
摘要:- 之前为了些自适应网页,会在项目里写rem。如果设置的rem不恰当,每次还要经过一番计算来得出像素转换成rem的值;有些麻烦; pxtorem解决了这样的问题 我们可以根据设计图大小设置好根节点的字体大小,也就是1rem=多少像素; pxtorem帮助我们自动将px转换成rem; 在代码中就可以直
阅读全文
摘要:- 一般使用worker都是单独执行一个js脚本文件;最近发现一个vue插件,vue-worker,支持了传入一个方法,就可以让这个方法在worker线程执行;使用worker更加方便; vue-worker地址:https://www.npmjs.com/package/vue-worker 安装
阅读全文
摘要:- 最近做一个自适应页面,有个需求是背景和内容同比缩放(由于背景图比较特殊,如果发生偏移会很明显),所以写了一个dom内容和父级背景同比缩放的方法; 随着浏览器宽度变化,背景图也跟着缩放,内容也跟着缩放; 思路: 当前窗口宽度与设计稿宽度相除 得出 缩放比; 根据缩放比缩放元素内容; 用到定位的话,
阅读全文
摘要:- 安装依赖 npm i vue-class-component vue-property-decorator --save npm i ts-loader typescript tslint tslint-loader tslint-config-standard -D 初始化tsconfig n
阅读全文
摘要:。 element-ui表单内tooltip可以让文字超出单元格时显示气泡,但是有一个限制,只能显示纯文本,无法控制tooptip内的样式,即使传入带标签的文本,也会把文本过滤出来,难以满足ui要求。 于是借用el-poper来实现,又有一个缺点,无论文字是否超出都会展示气泡,最后决定自己封装一个e
阅读全文
摘要:。 // 防止重复点击 Vue.directive("preventReClick", { inserted(el, binding) { el.addEventListener("click", () => { if (!el.disabled) { el.disabled = true; set
阅读全文
摘要:。 defaultAppLanguageId(){ return this.$store.state.common.gameInfo.defaultLanguageId; } 我将上面的这个计算属性绑定到了选择框中 报错如下: 于是给它加个get和set就可以了 defaultAppLanguage
阅读全文
摘要:无论递归组件,还是自定义组件,每个组件都有唯一的_uid
阅读全文
摘要:。 场景:需要封装一个基于element-ui的dialog弹框;发现关闭弹框时,父组件的值没变化,导致再次出发dialog弹框,而弹框没出现。于是想办法,让父组件的attrs的值通过子组件出发改变; 想过用v-mode,但是这需要给组件多加一个属性,我想让这个组件像用element-ui一样使用,
阅读全文
摘要:。 具名插槽判断: <div v-if="$slots.footer" slot="footer"> <slot name="footer"></slot> </div> 匿名插槽判断 <div v-if="$slots.default"> <slot></slot> </div> 。
阅读全文
摘要:。 文档地址:http://www.itxst.com/vue-draggable/tutorial.html 引入方式(npm): npm i -S vuedraggable 简单使用: <template> <div> <el-row> <el-col :span="12" class="col
阅读全文
摘要:。 一个关键问题是,递归组件怎么调用自身,这里关键在于组件的name属性, 在递归组件内,只要生命name属性,就可以直接调用组件自身!! 来个样例: 父组件: <template> <div> <item :data="searchParams"></item> </div> </template
阅读全文
摘要:。 这里监听元素宽度变化时为了,实时改变echarts的宽度,顺带把高度也监听一下: 可以在全局注册自定义指令,也可以在组件内注册 这里在组件内注册: directives:{ resize: { // 指令的名称 bind(el, binding) { // el为绑定的元素,binding为绑定
阅读全文
摘要:安装: npm install vue-highlightable-input --save 引入: import HighlightableInput from "vue-highlightable-input" 页面中使用: <template> <div class="home"> <High
阅读全文
摘要:。 此方法是放在input框的input事件内的: this.timeNum = String(this.timeNum).replace(/\D/g, '');//过滤到非数字 this.timeNum = parseInt(this.timeNum); if(isNaN(this.timeNum
阅读全文