随笔分类 - 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
阅读全文
