charlotteeeeeee

charlotteeeeeee 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

charlotteeeeeee 发布了文章 · 9月16日

vue中v-html插入dom元素后,实现折叠面板效果

我用的是原生js的方式,如果有更好的方式,评论留言哦~

<template>

 <div class="content">

 <div class="content-show">

 <div class="c-title">{{datainfo.title}}</div>

 <div class="c-detail" v-html="datainfo.body" @click="toggleDetail"></div>

 </div>

 </div>

</template>

<script>

export default {

 data(){

 return{

 datainfo:{}

 }

 },

 methods:{

 toggleDetail(e){

 let items = document.querySelectorAll('.collapse-item'),

 itemWraps = document.querySelectorAll('.item_wrap');

 var el = e.target.nextElementSibling;

 if(el.classList.contains('item_wrap')){

 el.style.display = el.style.display=="none"?"block":"none";

 }

 },

 getAboutInfo(id){

 this.datainfo=''

 this.$api.getAboutPt(id).then((res)=>{

 if(res.data &&res.data.length){

 this.datainfo=res.data[0];

 this.$nextTick(()=>{

 if(id=='10'){

 let items = document.querySelectorAll('.collapse-item'),

 itemWraps = document.querySelectorAll('.item_wrap');

 itemWraps.forEach((ele, index) => {

 ele.style.display = 'none';

 });

 itemWraps[0].style.display="block";

 }

 })

 }

 })

 }

 }

}

</script>

<style lang="scss" scoped>

 .content{

 min-height: 500px;

 &.right-content{

 margin-left: 350px;

 }

 .content-show{

 color: #333;

 .c-title{

 font-size: 20px;

 padding: 30px 0;

 }

 }

 }

</style>

代码如上

实现效果:
image.png

代码具体作用:
image.png

另附一下dom元素结构
image.png

需要注意:
新插入的dom在<style lang="scss" scoped></style>中写的样式不起作用,可以去掉scoped限制或者从main.js中引入样式表进行样式覆盖。

样式比较简陋,可按需修改

查看原文

赞 0 收藏 0 评论 0

charlotteeeeeee 发布了文章 · 9月7日

elementUI 抽屉内复制,鼠标不小心移到遮罩层后,遮罩层被意外关闭解决方式

代码:

// 监测抽屉鼠标事件
    handleWrapperMousedown(e) {
      // 如果为true,则表示点击发生在遮罩层
      this.classmodel= !!e.target.classList.contains('el-drawer__container')
    },
    handleWrapperMouseup(e) {
      if((!!e.target.classList.contains('el-drawer__container')) && this.classmodel){
        this.editdrawer=false;
      }else{
        this.editdrawer=true;
      }
      this.classmodel=false
    },

image.png

在组件drawer上添加鼠标点击(mousedown)和释放(mouseup)事件,注意添加native事件修饰。

关闭抽屉条件:鼠标点击和释放均在遮罩层

实现原理:
1:鼠标点击时,获取点击事件的类列表,看看是否包含‘el-drawer__container’类,如果包含,则表示鼠标点击事件发生在遮罩层,记录到变量‘classmodel’,为true。反之为false
2:鼠标释放时,获取释放事件所在的位置是否处于遮罩层,方法同样为检测是否包含‘el-drawer__container’类。作为条件之一,与点击时记录的变量‘classmodel’做“与”运算,两者都为true时可关闭遮罩层,否则不关闭。鼠标释放后‘classmodel’设为默认值false
3:最后但十分重要:抽屉要设置成点击遮罩层不关闭,否则elementUI远程时间将覆盖你的mouse监听事件。

:wrapperClosable="false"

参考链接:
https://www.jianshu.com/p/f39dcce1d5b3

查看原文

赞 0 收藏 0 评论 0

charlotteeeeeee 发布了文章 · 8月26日

关于配置proxy代理配置

写在前面:
能成功跨域的前提是:本地跑项目的端口需要与后台接口允许跨域的端口一致(这一条简直是血泪的教训)

以vue + webpack跨域代理为例:
我本地(localhost想要请求的接口地址为https://baidu.com/bus/graph/b...

proxy: {
  '/build': {
    target: 'https://baidu.com/bus/graph',
    logLevel:'debug',//运行时将本地发起的地址和对应指向的地址打印输出
    changeOrigin: true,//允许跨域
  }
},

proxy的key值为:'/build',用来匹配你本地发起请求的地址,即本地的localhost:8080会被替换为target地址
如果你本地发起请求的地址为:localhost:8080/build 那代理访问的实际地址为:https://baidu.com/bus/graph/b...

然后你可以做如下修改:

proxy: {
  '/build': {
    target: 'https://baidu.com/bus/graph',
    logLevel:'debug',//运行时将本地发起的地址和对应指向的地址打印输出
    changeOrigin: true,//允许跨域
    pathRewrite:{//重写本地发起的路径
        '^/graph':""
    }
  }
},

如果你本地发起请求的地址为:localhost:8080/graph/build ,路径重写会将你发起地址的/graph/build==>/build,代理访问的实际地址为:https://baidu.com/bus/graph/b...

pathRiwrite更多在无法仅仅使用一个代理切路径有包含的时候比较适用

查看原文

赞 0 收藏 0 评论 0

charlotteeeeeee 发布了文章 · 7月24日

vue 父组件值发生改变后,通过props传值无法及时动态渲染新的值

简而言之就是数据滞留的问题,父组件已经换了新的数据,子组件还展示着旧数据的值。加watch之后数据将即时更新

image.png

1:子组件通过props获取父级的数据
2:将改值赋值到组件内的变量,方便子组件后续对它的使用
3:watch实时监测item的变化,如果有变化,将其同步修改到子组件内部的变量
4:如图中所说,根据自己的需求,看看是否需要重新组装来自父级的数据后再做展示

查看原文

赞 0 收藏 0 评论 4

charlotteeeeeee 发布了文章 · 7月23日

关于使用vue-slicksort的一些问题总结

今天项目上有一个需求,要求复杂数组可以拖拽排列位置。

找到一个组件:vue-slicksort,总的来说还是比较符合我的初始需求。但是在使用过程中也遇到一些问题。现记录如下。

插件原址:https://www.npmjs.com/package/vue-slicksort?activeTab=readme

一:使用
官网的使用教程,个人觉得比较复杂,我们在vue使用的时候,大多不太像官网介绍的那样去写组件。现介绍我的方法如下:
先上效果图:
image.png
1-1): cnpm i vue-slicksort --save-dev
1-2): 需要使用到的组件中引入:
image.png
一共引入了三个组件:

i) handleDirective:用于实现点击指定icon部分完成拖拽,并非全区拖拽,避免被拖拽的item内部的点击事件被覆盖掉。需要在directives中将其指定到handle事件中,方便在template中被dom绑定使用
ii) SlickList, SlickItem作为slicksort内置组件被引入,需要在components中声明
1-3):vue template中使用
image.png

图中化红线部分,从上到下,从左到右依次说明:
i) userDragHandle 表示组件需要使用指定手势来完成拖拽,而非整个slickitem区域作为拖拽可触发热点
ii) helperClass定义slickitem被拖拽起的那一刻所拥有的新的class你可以用它对拖拽的slickitem进行样式渲染
iii) slicklist的值,即你所需要渲染的复杂数组
iiii) input事件能将改变顺序后的数组回传到elementChange事件中,你可以自己对它进行相应处理
iiiii) slickitem 的index属性,很重要,而且必须为它自己的index值,千万不要手贱去修改它/不要问我为什么知道T~T
iiiiii) 拖拽触发dom 此处的v-hand对应js中引入的directive方法

特别说明:1:被拖拽的slickitem其实已经脱离你原有页面dom层级结构,它会单独出现在html的body标签的最后面,所以在写被拖拽起来的item样式是需要注意,它不继承你之前写在你dom继承体里的样式。2:如果拖拽起来的item消失了,可能是你的dom元素层级把拖拽起的item覆盖掉了,用z-index试试

感觉做了好久,写下来半个小时都不到哈哈

查看原文

赞 0 收藏 0 评论 0

charlotteeeeeee 发布了文章 · 7月17日

vue 中数据层级太多,到时数据改变时没有及时将其渲染到页面上

简单来说是用vue的原方法:$set

this.$set('你的复杂数组','所需改变的数组的index','复杂数组所对应所需改变的index改变后的值')

如下所示代码,我的复杂数组为commanlist,this.commandlist[index].originjs又作为一个数组,放在页面中进行新的渲染,并且其增删改需要联动页面展示。
js代码处的方法中,按照常规的this.commanlist[index].originjs.push(newitem)之后,虽然commandlist有发生改变,但是页面渲染并没有发生变化。
用$set赋值之后,就可以顺利联动了。

如果input框没法输入值,则在对应的input框上添加监听事件事件,强制更新,详见代码

如果小伙伴们有更简单的方法,评论回复我哈,谢谢~

template:

<div class="command-link-uri" v-if="item.kind=='link'">
                  JS源: <i class="add el-icon-circle-plus-outline" title="添加js源" @click="addSingleUri(index)"></i>
                  <div class="per-origin-js clearfix" v-for="(itemjs,indexoriginjs) in item.originjs" :key="'index'+indexoriginjs">
                    <div class="uridelete"><i class="delete el-icon-remove-outline" title="删除该js源"></i></div>
                    <div class="urilink">
                      <el-input v-model="item.originjs[indexoriginjs]" @input="change($event)" placeholder="请输入js地址"></el-input>
                    </div>
                  </div>
                </div>

js:

addSingleUri(index){
      if(!(this.commandlist[index].originjs && this.commandlist[index].originjs.length)){
        this.commandlist[index].originjs=[]
      }
      this.commandlist[index].originjs.push("")
      var attritem=this.commandlist[index]
      // 对象层级太多导致数据改变后页面无法渲染
      this.$set(this.commandlist, index, attritem);
    },
change(e) {
      this.$forceUpdate();
    },

2020/07/24更新
今天看到vue官网针对set的说明,感觉能比较好的解释为什么层次太深无法渲染的问题
image.png

查看原文

赞 0 收藏 0 评论 0

charlotteeeeeee 发布了文章 · 6月22日

vue 父组件触发子组件每次都重新渲染

有时候我们在使用vue的props传递数据的时候,明明数据已经发生了改变,但是页面的元素渲染还是保留了上一次的数据。虽然有watch和computed能辅助及时更新渲染数据,但是很多时候不能完全达到我们所需要的效果。而且,watch和computed使用要求较高,初学者容易被绕晕。

今天发现了一个比较简易的方法,为需要动态触发的组件,添加一个key,key值为时间毫秒,类似于js防止缓存的后缀。如下:
image.png
这样之后,父级的每次数据更新都会重新渲染其下的所有组件,即会重新走”mounted和created这两个生命周期函数

查看原文

赞 0 收藏 0 评论 0

charlotteeeeeee 发布了文章 · 5月14日

layDate点击确定后触发的事件以及获取当前日期修改的DOM

`laydate.render({

  elem: 'input[name="shorttermdate"]',
  type: 'date',
  range: true,
  done:function(value,data){
      console.log($(this.elem))
      getRoomList(value,data)
  }
})`

getRoomList为自定义函数
$(this.elem)获取当前触发事件的DOM

查看原文

赞 0 收藏 0 评论 0

charlotteeeeeee 发布了文章 · 4月8日

数组单项上下移动

down(arr, index) {
        if(index == arr.length -1) {
            return;
        }
        sItems(arr, index, index + 1);
    },
up (arr, index) {
        if(index == 0) {
            return;
        }
        sItems(arr, index, index - 1);
    },
sItems (arr, index1, index2) {
        arr[index1] = arr.splice(index2, 1, arr[index1])[0];
        return arr;
    }

查看原文

赞 0 收藏 0 评论 0

charlotteeeeeee 发布了文章 · 3月26日

全局修改滚动条样式

::-webkit-scrollbar {
  background-color: rgba(27,27,27,.4);
  border-radius: 10px;
  width: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(27,27,27,.4);
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #fff;
}
查看原文

赞 0 收藏 0 评论 0

认证与成就

  • 获得 7 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-01-02
个人主页被 512 人浏览