小围巾儿

小围巾儿 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

小围巾儿 提出了问题 · 2月23日

vue自定义指令如何通过动态的传递参数来控制DOM显示

写了一个全局loading 自定义指令,调用的时候显示loading和“加载中”的提示,如图
image.png

现在 “加载中” 是写死的,怎样在调用的地方动态传入别的提示呢,比如 “正在跳转”

代码如下:
loading.vue

<template>
  <div
    v-show="visible"
    class="loading-wrap"
  >
    <div class="loading-box">
      <div class="img-box">
        <img
          data-original="./images/loading.gif"
          alt=""
        >
      </div>
      <p>加载中...</p>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  components: {},
  data() {
    return {
      visible: false
    }
  }
}
</script>

<style lang="stylus" scoped>
.loading-wrap
  position absolute
  left 0
  right 0
  top 0
  bottom 0
  background rgba(0, 0, 0, 0.2)
.loading-box
  position absolute
  left 50%
  top 50%
  // height 60px
  width 60px
  transform translate(-50%, -50%)
  text-align center
  .img-box
    width 100%
    height 60px
    >img
      width 60px
  >p
    margin-top 5px
    color $white-color
    letter-spacing 1px
</style>

loading.js

import Vue from 'vue'
import Loading from './loading.vue'

const Mask = Vue.extend(Loading)

const toggleLoading = (el, binding) => {
  if (binding.value) {
    Vue.nextTick(() => {
      // 控制Loading组件显示
      el.instance.visible = true
      // 插入到目标元素
      insertDom(el, el, binding)
    })
  } else {
    el.instance.visible = false
  }
}

const insertDom = (parent, el) => {
  parent.appendChild(el.mask)
}

export default {
  bind(el, binding, vnode) {
    const mask = new Mask({
      el: document.createElement('div'),
      data() {}
    })
    el.instance = mask
    el.mask = mask.$el
    el.maskStyle = {}
    binding.value && toggleLoading(el, binding)
  },
  update(el, binding) {
    if (binding.oldValue !== binding.value) {
      toggleLoading(el, binding)
    }
  },
  unbind(el, binding) {
    el.instance && el.instance.$destroy()
  }
}

App.vue

<template>
  <div
    id="app"
    v-loading="loading"
  >
    <router-view />
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'App',
  computed: {
    ...mapState('examine', ['loading'])
  }
}
</script>

<style lang="stylus">
// @import "./style/index.styl"

#app
  position fixed
  top 0
  bottom 0
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-size 14px
  letter-spacing 0.05em
  width 100%
  height 100%
  overflow hidden
</style>

关注 2 回答 1

小围巾儿 提出了问题 · 2020-07-17

vue组件怎么才能根据vuex state的值的改变来进行刷新

一个后台配置的项目,现在有7个路由级的组件(a,b,c,d,e,f,g),每个界面对应左侧的菜单栏,每个组件都调了几个接口,这些接口有一个入参commoncode是可变的,所以把commoncode放到 vuex state里面,当我在c组件的界面上,然后我全局更改commoncode,该组件重新刷新,或者说执行一下created()。
除了在每个组件里监听commoncode,然后执行created()里面的代码 这个方法,有没有更为简洁的方法?

关注 3 回答 1

小围巾儿 赞了回答 · 2020-06-30

vue 数组转换成对象绑定form表单,输入值失去焦点清空的问题

首先计算属性设计它的初衷是用于简单运算的,以减少在模板中放入太多的逻辑会让模板过重且难以维护。

formData计算属性的值是依赖arr的,你要改变formData是要去改变arr,而不是直接修改formData,因为不清楚你的业务,formData都不会建议这样写。而且我试了一下你的代码,input输入框输入不了,和你所描述的不一致。

关注 3 回答 2

小围巾儿 提出了问题 · 2020-06-30

vue 数组转换成对象绑定form表单,输入值失去焦点清空的问题

代码如下:

<template>
    <el-form :model="formData">
        <el-form-item label="标题">
            <el-input v-model="formData.title"></el-input>
        </el-form-item>
        <el-form-item label="端口">
            <el-input v-model="formData.port"></el-input>
        </el-form-item>
    </el-form>
</template>



data() {
    
    return {
        arr: [
                {name: 'title', value: ''},
                {name: 'port', value: ''}
             ]
    }

}

computed:{
    formData() {
        const obj = {}
        arr.map((item) => {
            this.$set(obj, item.name, item.value)
        })
        return obj
    }
}

表单的input框可以输入值,但是失去焦点,之前输入的就自动清空了,这是怎么回事?好像无法改变computed计算出来的对象的属性值

关注 3 回答 2

小围巾儿 赞了回答 · 2020-06-22

解决js如何把数组里面的某个元素或者对象复制多次

// 重复填充当前元素
let arr = [{ a: 1, b: 2 }];
const copyArr = nums => Array(nums).fill(arr[0])

// fill的参数为引用类型,会导致都执行都一个引用类型
arr = copyArr(2)
arr[0].a = 'test' // 所有的a都变为test了
console.log(arr)
// 这个方法只需要简单的处理一下
arr = JSON.parse(JSON.stringify(arr))

在提供一个方法,在生成新数组时,就对引用类型深拷贝以下

function copyArr(nums) {
  let n = 0
  let newArr = []
  while(n < nums) {
    // 因为是引用类型,所以需要深拷贝
    let copyItem = arr.map(item => JSON.parse(JSON.stringify(item)))
    newArr.push(copyItem[0])
    n++
  }
  return newArr
}


arr = copyArr(2)
arr[0].a = 'test' // 只有第0个的a被改变了,其余的不会改变

关注 3 回答 3

小围巾儿 提出了问题 · 2020-06-19

解决js如何把数组里面的某个元素或者对象复制多次

例如:

const arr [{"a": "1", "b": "2"}]

点击一个数字为2或者3或者更的大的数字的按钮,那么这个arr就有两份或者三份或者更多份{"a": "1", "b": "2"}这样的数据

关注 3 回答 3

小围巾儿 提出了问题 · 2020-05-27

解决饿了么 el-menu菜单的icon 和 title 如何分开点击

image.png
如图所示,现在点击导航一只能折叠展开。我想点击这个icon做另外的操作。

关注 3 回答 2

小围巾儿 提出了问题 · 2020-05-21

vue cli 3.0 配置url-loader的问题

使用JPG格式的图片时报错

       <img
        class="film-image"
        data-original="~@/assets/images/CT.JPG"
        alt=""
      >

image.png
jpg格式的文件就没问题,这还分大小写的?

网上查了下需要安装配置file-loader和url-loader,可是3.0的不知道怎么配置,vue.config.js文件的代码如下:

module.exports = {
    chainWebpack: (config) => {
        
        config.module.rule('images')
              .test(/\.(png|jpe?g|JPG|gif|svg)(\?.*)?$/)
              .use('url-loader')
              .loader('url-loader')
    }
}

不知道是不是我写的不对,还是说需要配置file-loader?其实就算不配置,别的格式的图片都可以,就这个JPG格式不行,vue cli 3.0的写法不太熟,请大佬指教。

关注 1 回答 0

小围巾儿 提出了问题 · 2020-04-27

解决element-ui el-checkbox 如何获取当前选中行的数据

<el-checkbox-group v-model="checkAll" @change="handleCheckChange">
    <el-checkbox
        v-for="(item, index) in list"
        :label="item"
     >{{item.label}}</el-checkbox>
</el-checkbox-group>





export default {
    data(){
        return {
            checkAll: [],
            list:[
                {
                    id: '1',
                    label: 'test1'
                },
                {
                    id: '2',
                    label: 'test2'
                },
                {
                    id: '3',
                    label: 'test3'
                }
            ]
        }
    },
    methods: {
        handleCheckChange(val) {
            console.log(val)
        }
    }
}

如代码所示,我点击多选框勾选的时候,只能获取已经选中的多条数据,怎样做才能同时获取到我当前点击的一条数据呢?

关注 5 回答 4

小围巾儿 提出了问题 · 2020-04-07

element-ui 怎么解决el-checkbox label绑定为对象时,无法默认勾选

上代码

<ul>

      <el-checkbox-group v-model="checkBoxList" @change="handleCheckChange">
        <li
          v-for="(item, index) in dataList"
          :key="index"
        >
          <el-checkbox
            :label="item"
            :checked="item.isChecked"
          >{{item.csName}}</el-checkbox>
        </li>
      </el-checkbox-group>
    </ul>

checkBoxList为初始时接口返回给我的已选的数据,dataList为左侧检索到的数据,这时我在左侧检索到相同的数据,无论是点击还是直接给:checked赋值为true都勾选不上,点击别的数据就可以(就是右边没有的)求解这个是什么怎么回事?必须给label绑定对象的方式,不能用绑定id的方式。

image.png

关注 3 回答 2

认证与成就

  • 获得 3 次点赞
  • 获得 14 枚徽章 获得 0 枚金徽章, 获得 3 枚银徽章, 获得 11 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-11-13
个人主页被 365 人浏览