document.getElementById('mask').innerHTML
document.getElementsByClassName('mask')[index].innerHTML
console.log(document.getElementsByClassName('mask')[index].innerHTML);
vue加链接(已设置过路由)：$router.push({ path: '/goods/default_agent_price'})
----------------------------------------------------------------------------------------------------
<el-col :span="9" style="text-align: right" v-if="this.searchForm.status<5">
<el-button v-waves size="small" type="primary" @click="$router.push({ path: '/goods/default_agent_price'})">批量设置默认分销价</el-button>
</el-col>
打开新窗口链接(未设置过路由)：
----------------------------------------------------------------------------------------------------
goodsEdit(row) {
let routeUrl = this.$router.resolve({
path: "/goods/edit",
query: {id:row.id,type:'edit'}
});
window.open(routeUrl .href, '_blank')
}
vue设置跳转链接： <button @click="$router.push({ path:'/hd/materialDetail',query:{id:item.id,type:'detail'}})"> jump </button>
this.$route 和 this.$router 的区别：
----------------------------------------------------------------------------------------------------------------------------
this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它。
this.$router 是一个路由【导航对象】，用它 可以方便的 使用 JS 代码,实现路由的 前进、后退、 跳转到新的 URL 地址。
如果想要this.$route.params 获取到this.$route.push()传的参数，一定要使用name属性来指定路由 不要用path属性；
this.$router.push({ name: 'searchDeatilList', params: { id:123 } })//传参
组件中获取参数：const { id } = this.$route.params
如果使用path属性传参，那么需要 ：this.$route.query来获取(参数以问号拼接到路由后面)
this.$router.push({ path: '/searchDeatilList', query: {id:123} }) //传参
组件中获取：const { id } = this.$route.query
if(this.$route.params.status) {
this.searchForm.status = this.$route.params.status;
}
console.log(this.$route.query.type);
if(this.$route.params.type=='myOpus') this.defaultStatus ="1" ;
ref和$refs的使用示例:
----------------------------------------------------------------------------------------------------
<template>
<div class="page-container">
<el-carousel
height="900px"
direction="vertical"
ref="carousel" //这个用ref关联组件
@setActiveItem="setActiveItem"
:autoplay="false"
@change="changeItem"
>
<el-carousel-item v-for="item in 5" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</template>
method方法这里用$refs调用组件:
setActiveItem(index) {
this.$refs.carousel.setActiveItem(index);
},
css 栅格布局el-row（xs，sm，md，lg，xl）
----------------------------------------------------------------------------------------------------
:xs="12" , 24/12=2 , 所以当屏幕尺寸<768px时(手机)，每行展示2个div(class="com_item");
:sm="8" , 24/8=3 , 所以当屏幕尺寸>=768px时(平板)，每行展示3个div(class="com_item");
:md="6" , 24/6=4 , 所以当屏幕尺寸>=992px时(桌面显示器)，每行展示4个div(class="com_item");
:lg="4" , 24/4=6 , 所以当屏幕尺寸>=1200px时(大桌面显示器)，每行展示6个div(class="com_item");
:xl="4" , 24/4=6 , 所以当屏幕尺寸>=1920px时(2k屏)，每行展示6个div(class="com_item");
————————————————
.com_item {
width: 100%;
height: 220px;
background: #bfa;
}
<el-row :gutter="10"> gutter代表div间隙 10px
v-bind绑定样式表：
----------------------------------------------------------------------------------------------------
HTML写法:
<div class="myItem" style="text-align:center; background-image:url(''); background-size:auto 100% ;background-position:center; background-repeat:no-repeat;" >
v-bind绑定style写法(里面是个json)：
<div class="myItem" :index="index" :style="{'text-align':'center','background-image':'url('+item.photo+')','background-size':'auto 100%','background-position':'center','background-repeat':'no-repeat'}" >
vue+elementui组件 el-upload图片上传 获取不到token
--------------------------------------------------------------------------
于 2020-06-16 17:51:55 发布
方法：直接给这个组件添加token
1.先引入token
import Cookies from 'js-cookie'
2.获取
:headers="getHeaders"
//getHeaders必须是对象，不能是函数
getHeaders:{ Authorization:Cookies.get("loginToken") }
el-upload和axios设置header
--------------------------------------------------------------------------
el-upload加header
复制代码
<template>
<el-upload action="test" :headers="myHeaders"></el-upload>
</template>
<script>
var token = localStorage.getItem('token') // 要保证取到
export default {
data () {
return {
myHeaders: {Authorization:token}
}
}
}
</script>
axios加header
复制代码
this.axios({
method: "POST",
url: `${API_HOST}/api/bind/index`,
data: obj,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(res) {
console.log(res);
});
vue中$refs和$el的用法是什么
--------------------------------------------------------------------------
ref 被用来给元素或子组件注册引用信息
ref 有三种用法：
1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素
2、ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref =某变量 ;
这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String）
应注意的坑有：
1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。
vm.$el
获取Vue实例关联的DOM元素；
比方说我这里想获取自定义组件tabControl，并获取它的OffsetTop。就需要先获取该组件。
在组件内设置 属性 ref='一个名称(tabControl2)',
然后 this.$refs.tabControl2 就拿到了该组件
切记：ref属性，而获取组件的时候要用$refs
获取 OffsetTop，组件不是DOM元素，是没有OffsetTop的，无法通过 点 .OffsetTop来获取的。就需要通过$el来获取组件中的DOM元素
vue中v-show 和 v-if 控制元素显示隐藏的技巧
--------------------------------------------------------------------------
一、v-show 的基本使用方法
在 Vue 中，使用 v-show 指令可以控制元素的显示隐藏。v-show 的用法非常简单，只需要在需要控制显示隐藏的元素上添加 v-show 指令，并将其绑定为一个布尔值即可。例如，在模板中使用以下代码：
其中，show 为布尔类型的变量，通过改变变量的值就可以实现元素的显示隐藏。
v-show 的特点是不会修改 DOM 元素的存在与否，只是通过 CSS 样式的控制来实现元素的显示与隐藏。因此，在页面加载时，即使元素被隐藏，它仍然会被加载到 DOM 中，不会影响页面加载速度。
二、v-if 的基本使用方法
和 v-show 不同，v-if 指令会根据布尔类型的变量值判断是否将元素插入到 DOM 中。当变量值为 true 时，才会将元素插入到 DOM 中；当变量值为 false 时，则不会在 DOM 中插入该元素。
因此，v-if 比 v-show 更加节省 DOM 的资源，但也会影响页面加载速度。
Vue还支持使用数组对象来控制class属性：
--------------------------------------------------------------------------
<style>
.red {
color: red;
}
.fs {
font-size: 20px;
}
</style>
<div class="app">
<h2 :class="[redClass,fsClass]">hello</h2>
</div>
<script>
const app = new Vue({
el: '.app',
data() {
return {
redClass: "red",
fsClass: "fs"
}
}
})
</script>
Vue绑定内联样式
--------------------------------------------------------------------------
内联样式是指直接通过HTML元素的style属性来设置样式，style属性可以直接通过JavaScript对象来设置样式，我们可以直接在其内部设置vue属性。
<div class="app">
<div class="box" :style="{width:width,height:height,backgroundColor:backgroundColor}"></div>
</div>
<script>
const app = new Vue({
el: '.app',
data() {
return {
width: "200px",
height: '200px',
backgroundColor: 'pink'
}
}
})
</script>
vue中dispatch与commit使用
--------------------------------------------------------------------------
dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)
commit：同步操作，写法：this.$store.commit('mutations方法名',值)
1042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
