Vue3和Element-Plus_vue3 elementplus

npm install -g @vue/cli

vue -V

vue create vue-element-plus

只选择基础的

 

 

 npm install 拉取依赖

npm-moudles:第三方的依赖、组件

vue的页面通过<template>进行渲染

main.js 入口文件

import 引入组件 可以给组件起任意名字

export 导出一个模块里面的常量，函数，文件，模块等(一个文件就可以被理解为一个模块)

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<button @click="btn">点击看看</button>

function btn() {

    console.log('+++++')

}

等价于

const btn = ()=>{console.log('++++')}

setup函数的使用：

{{name}}

ref修饰的，在template层可以直接使用{{url}}，但是在<script>层需要使用url.name 

=======2023\11\22

ref和reactive的区别

1、 ref 对于基本类型和引用类型都可以，但是 reactive 只适用于引用类型

const reactive1 = reactive(0);           // NOT OK
在页面也能够将这个值渲染出来，但是你是没有办法改变它

2、数据访问方式

ref通过.value，更新数据也是通过.value。

但是在vue的模板语法中，可不带value 

reactive访问和更新数据都是直接使用。

const count = ref(1)
const obj = reactive({ count })
 
// ref 会被解包
console.log(obj.count === count.value) // true
 
// 会更新 `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2
 
// 也会更新 `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3

3、监听函数watch

watch对reactive自动深层监听

对ref能监听原始类型，除非加上deep才能监听对象

const ref1 = ref({num: 1})
watch(ref1, () => { 
  console.log('changed!')
}, { deep: true })

let、var、const的区别

1、ES6新增了let和const关键字

2、const用于声明常量，恒定值，只读不可修改，在定义时必须进行初始化赋值。

3、const只是限定变量绑定的值，不会限制引用类型内部的变动。

4、let用于声明变量，用法与var类似，可以不进行初始化赋值 undefined

5、在相同作用域内，都无法重复声明

5、在js中，我们学过预解析，var声明的变量会在初始化赋值前，进行变量提升(hoisting)，在进行代码的执行阶段时，a变量已经存在，且值为undefined

var声明的变量，具有变量提升特性

console.log(a) // undefined
 
var a = 1

6、ES6中为了纠正这种现象，改变语法行为：对let和const声明的变量/常量，一定要在声明后使用，否则报错-  暂时性死区

let没有变量提升的特性，有短暂性死区的特性。

在let声明变量前，使用该变量，它是会报错的，而不是像var那样会‘变量提升’。

console.log(a) // Uncaught ReferenceError: Cannot access 'a' before initialization
 
let a = 1

'use strict';
var test = 1;
function func(){
    //打印test的值
    console.log(test);
    let test = 2;
};
func();
报错

7、let声明的作用域只在块级有效

'use strict';
function func(args){
    if(true){
        //let声明i
        let i = 6;
        //在if内打印i值   --正常
        console.log('inside: ' + i);
    }
    //在if外，再次打印i值 --报错
    console.log('outside: ' + i);
};
func();

作用域

全局作用域、函数作用域、块级作用域

块级作用域不影响var声明的变量，块级作用域通过let和const来体现。

=========2023/11/23

vue3指令 V-BIND

1、v-bind:myprop="prop"     可缩写   :myprop="prop"   --prop 绑定。“prop” 必须在子组件中已声明

2、在v-for指令的元素li上使用了v-bind:key指令，将item.id作为元素的唯一性标识符。这样Vue.js就能够正确地识别列表中的每个节点，判断它们是否已经被渲染过了。

3、还可以帮助我们优化Vue.js渲染列表的性能。

v-on:  可简写成 @

注册

全局注册：app.component('MyComponent', MyComponent)

局部注册：

1、<script setup> import ComponentA from './ComponentA.vue' </script>

--在<script setup>中导入无需注册

2、如果没有使用 <script setup>，则需要使用 components 选项来显式注册

使用：通过 <MyComponent> 或 <my-component> 

Props

1、在组件中声明Props

1.1、在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 宏来声明：

<script setup>
const props = defineProps(['foo'])
console.log(props.foo)
</script>

 1.2、在没有使用 <script setup> 的组件中，prop 可以使用 props 选项来声明：

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}

2、静态传递值 <my-component props="hahaha"/>

3、动态Props  <my-component :props="hahaha"/>

事件处理

1、使用v-on指令(可简写成@)来监听DOM事件

 2、事件修饰符

@click.once 点击事件最多被触发一次

@click.stop  阻止事件向父级元素传播，（冒泡事件）（当一个元素被点击时，它所处的DOM层级结构中的所有父级元素都会接收到该事件。如果在父级元素上也绑定了类似的@click事件，那么这个事件也会被触发。而使用了@click.stop修饰符的元素，当它被点击时，事件将不会再向父级元素传递。这可以避免事件被不必要地多次触发。）

3、监听按键事件：@keyup

4、原生DOM事件有冒泡机制，组件触发的事件没有冒泡机制

5、emit自定义事件

子组件

<!-- MyComponent -->
<button @click="$emit('someEvent')">click me</button>

父组件

<MyComponent @some-event="callback" />

同样支持.once修饰符

$emit('自定义事件名','参数1','参数2'...)    --可以把子组件的数据传递给父组件

<script setup>

任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用

插槽

<slot />

具名插槽  <template v-slot:header> 可简写 <template #header>--将这部分模板内容插入子组件的name=header的插槽中  <slot name="header" />

特殊元素<component>

动态组件 <component :is="Math.random() > 0.5 ? Foo : Bar"/>

<keepAlive>内置组件  

<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

默认情况下，一个组件实例在被替换掉后会被销毁，你会发现在切回来之后，之前已更改的状态都被重置了。

可以用 <KeepAlive> 内置组件将这些动态组件包装起来，现在，在组件切换时状态也能被保留了。

组件的name

1、自动生成 <script setup>

2、手动定义

 <script>

  export default {name :"xxx"}

</script> 

NProgress

地址栏下展示一个进度条

NProgress.configure({ showSpinner: false });   true:右上角有个螺旋加载提示

import js 里的常量的注意点

1、需要在js里export

2、直接 export const a = xxx;引入时使用 import {a} from './../router.js' 

3、使用export default a时，引入时使用 import a from './../router'

4、貌似引入时，文件的后缀.vue .js可以省略？ 

vue里的普通<script>写法

import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
export default {
  props: {
    msg: String
  },
  components:{
      Animal
  },
    setup(props) {
        const catc = ref("cat......")
        return {catc}
    }
}

vue里<script setup>写法

不需要export

    defineProps({
        msg: {
            type: String,
            default: ""
        }
    })

<router-view/>  路由匹配到的组件将渲染在这里

路由的写法：

1、import { createWebHistory, createRouter } from 'vue-router'
import Cat from "@/components/Cat";
import Dog from "@/components/Dog";
import Pig from "@/components/Pig";
 
2、const routes = [
    { path: '/cat', component: Cat },
    { path: '/pig', component: Pig },
]
 
3、export const router = createRouter({
    history: createWebHistory(),
    routes: routes,
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            return { top: 0 }
        }
    },
});
4、import { createApp } from 'vue'
const app = createApp(App)
app.use(router)
app.mount('#app')
5、App.vue
<template>
  <router-view />
</template>

嵌套路由

const routes = [
    { path: '/dog', component: Dog },
    { path: '/cat2/:id', component: Cat,
       children: [
    {
        path: 'pig',
        component: () => import('@/components/Pig'),
        name: 'pig'
    },
    {
        path: 'chicken',
        component: () => import('@/components/Chicken'),
        name: 'chicken'
    }
]},
]

注意：子路径pig前不用加 /。pig的组件，加载到Cat里的<router-view>里面

导航

声明式导航<router-link :to="...">

编程式导航 router.push(‘/aaa’)   -要有''，要现在routerjs里定义，再引入

重定向路由

const routes = [
    { path: '/cat', component: Cat },
    { path: '', redirect:'/cat' },
]

在写redirect时，可以省略component配置，因为它没有被直接访问过，所以没有组件要渲染。

嵌套路由是例外，如果一个路由记录有 children 和 redirect 属性，它也应该有 component 属性。

  {
    path: '',
    component: Layout,
    redirect: '/index',
    children: [
      {
        path: '/index',
        component: () => import('@/views/index'),
        name: 'Index',
        meta: { title: '首页', icon: 'dashboard', affix: true }
      }
    ]
  }

icons-vue

package.json
"element-plus": "2.2.21",
"@element-plus/icons-vue": "2.0.10",
main.js
import ElementPlus from 'element-plus'
import * as components from '@element-plus/icons-vue'
import 'element-plus/theme-chalk/index.css'  //引入ElementPlus组件样式
const app = createApp(App)
const ic = (app) => {
    for (const key in iccomponents) {
        const componentConfig = iccomponents[key];
        app.component(componentConfig.name, componentConfig);
    }
}
ic(app)
app.use(ElementPlus)
app.mount('#app')

发现样式不生效，是因为没有引入elementplus的样式！！！ 

 Layout布局

el-row el-col 通过24分栏创建布局  

el-col的span属性布局 默认24

el-row的gutter属性应该是指定里面内容之间的距离
Input输入框  

placeholder

disabled禁用状态  

clearable可一键清空的输入框

 type="password" show-password密码框  

show-word-limit maxlength="10"输入长度限制

在js里定义函数再调用

function ic(app) {
    for (const key in iccomponents) {
        const componentConfig = iccomponents[key];
        app.component(componentConfig.name, componentConfig);
    }
}
ic(app)
这种写法，function可以在下面

const ic = function(app) {
    for (const key in iccomponents) {
        const componentConfig = iccomponents[key];
        app.component(componentConfig.name, componentConfig);
    }
}
ic(app)
需要在前面定义-原因上面有

const ic = (app) => {
    for (const key in iccomponents) {
        const componentConfig = iccomponents[key];
        app.component(componentConfig.name, componentConfig);
    }
}
ic(app)
箭头函数写法

CSS Flex布局

自己对div布局的方式 

css之Flex布局 - 知乎

display: flex   规定元素内部显示形式  元素在同一行，与下面共用
justify-content: space-between   均匀排列每个元素 首个元素放置于起点，末尾元素放置于终点     (可用于大屏的echarts -h)
flex-wrap: wrap   放不下就换行
align-items: center    字体垂直居中
啊啊啊 <el-input 与前面的字，间隔定了，如果要增加间隔，可使用    

flex-direction  主轴 row上下 column左右

display:none  隐藏元素

js里空字符串是假值false 

getCurrentInstance()            --这个好像也要等DOM加载完才可以用-hjr

vue2:通过this获取当前组件实例

vue3：在setup无法通过this获取组件实例，所以通过getCurrentInstance()(应该是可以通过.获取当前组件属性和全局属性-全局属性见下面)

setup() 自身并不含对组件实例的访问权，即在 setup() 中访问 this 会是 undefined。你可以在选项式 API 中访问组合式 API 暴露的值，但反过来则不行。

<script setup name="User">
const { proxy } = getCurrentInstance();
proxy.resetForm("zz")  --调取js里定义的函数,一般这个函数在main.js引入了
proxy.$refs.ipt.xxx  获取ref属性=ipt的DOM对象
proxy.$ref['ipt'].xxx  获取ref属性=ipt的DOM对象
proxy.$modal.msgSuccess("aa")
proxy.$modal.confirm().then
--this.$modal是vue.js的一个组件，在vue中可以使用modal组件实现弹出框的效果。
通过这一组件，我们可以进行对话框、提示框、模态框等常见交互式界面的实现。
</script>

JS的三种弹框 - 可不带window

警告框window.alert("aaa")

确认框window.confirm("aaa")

输入提示框window.prompt("请输入","默认值")

JS导入了一个文件夹

import router from './router'    --默认会去找router文件夹下的index.js文件 

相当于 import router from './router/index' 

相当于 import router from './router/index.js'  

Message消息提示

常用于主动操作后的反馈提示。从顶部出现，3 秒后自动消失。 

import { ElMessage } from 'element-plus'

全局变量和全局方法

app.config.globalProperties.$aaa = 'sas'

app.config.globalProperties.$su = ()=>{ ElMessage.success("nihaoa...."); }

app.config.globalProperties.ms = ElMessage

加不加$都行

报警小铃铛实现

    <div>
      <el-badge :value=150 :max=99 type="warning" style="cursor: pointer;">
         <img src="@/assets/warn.png" alt=""/>
      </el-badge>
    </div>
    <div>
      <el-badge value="新消息" type="danger">
         <el-icon size="50" color="red">
            <Edit/>
         </el-icon>
      </el-badge>
    </div>

Badge徽章： 按钮或者图标上的数字或状态标记

Badge 徽章 | Element Plus

Icon 图标 | Element Plus

模板引用 ref

 需要直接访问底层DOM元素，可以使用特殊的ref属性。

它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。

<el-form ref="formRef" :model="form" :rules="form.rules" label-width="80px">
<script setup>
// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const formRef = ref(null);
const openPush = ()=>{
  formRef.value.resetFields()
}
</script>

 表单重置

<el-form>   resetFields

Dialog弹出对话框

draggable：可拖拽的属性

align-center：对话框居中

vue加载顺序

自我感觉版：先是<script>里的，然后setup(),然后onmounted()-等组件挂载完成执行的（DOM挂载和渲染完成后执行）

created-当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。DOM还没有渲染！

先父组件，再子组件

setTimeout()

是属于window的方法，在指定的毫秒数后执行函数  setTimeout(fun,1000)

vue3工程使用echarts

1、npm install echarts --save 

2、package.json 引入依赖    "echarts": "^5.3.1",

3、vue文件引入 import * as echarts from 'echarts'

4、使用 let leftOneChart

将 leftOneChart = echarts.init(document.getElementById("leftOneChart"));放在onMounted方法里，等dom加载完。

(同时，这种方式要保证容器已经有了宽度和高度！)

4、报错的解决

可能是对应的div的width=0 ，定位方式：到f12的element里查看，再人为设置css的width

深拷贝、浅拷贝

1、引入依赖 npm install lodash  ，会在package.json生成"lodash": "^4.17.21" 

2、 使用   import _ from "lodash";

深拷贝 _.cloneDepth()

浅拷贝 _.clone()     直接 let v1 = v2 也是浅拷贝

对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没 有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会 改变，而深复制则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。

El-Select  选择器

1、v-model的值是变量，是当前选中的el-option的value值，如果多个el-select使用同一个v-model变量，那么选择了其中一个下拉，其他的下拉框也会变成通用的值！

2、size = large、default、不写size、small

3、

    <el-select v-model="m1" filterable clearable placeholder="请你选择" size="large">
        <el-option v-for="item in m2" :key="item.key" :label="item.key" :value="item.value">
        </el-option>
    </el-select>
<script>
    import {ref, watch} from 'vue'
    export default {
        setup() {
            const m1 = ref('');
            const m2 = ref([{
                'key':'张三','value':'3'
            },
            {
                'key':'李四','value':'4'
            },
            {
                'key':'王二','value':'2','disabled':true
            }])
            watch(m1, ()=>{
                console.log(m1.value);
            })
 
            return {
                m1,
                m2
            }
        }
    }
</script>

4、el-option中disabled值true，表示禁用该选项

<el-option v-for="item in m2" :key="item.key" :label="item.key" :value="item.value" :disabled="item.disabled">
        </el-option>

5、el-select的disabled

<el-select v-model="m1"  placeholder="请你选择"  disabled>

6、基础多选   multiple

el-cascader  级联选择器

<el-cascader v-model="m1" :options="m2" clearable :props="m3" :show-all-levels=false @change="ch">
</el-cascader>

<script>
import {ref} from 'vue'
export default {
    setup() {
        function ch() {
            console.log(m1.value)
        }
        const m1 = ref('');
        const m2 = ref([
            {name:'张三',code:'1',childs:[{name:'儿子',code:'2'},{name:'女儿',code:'3'}]},
            {name:'李四',code:'4',childs:[{name:'儿子',code:'5'},{name:'女儿',code:'6'}]}
        ]);
        const m3 = ref({
            checkStrictly:true,
            emitPath: false,
            label: 'name',
            value: 'code',
            children: 'childs'})
        return {
            m1,m2,m3,ch
        }
    }
}
</script>

1、展示完整路径 :show-all-levels=false

2、emitPath 选中节点改变时，v-model的变量的值是各级菜单的值组成的数据 ；emitPath: false表示值是 该子节点的值

3、 :options的格式固定是 label\value\code，但是可以通过:props里改变

4、默认只能选择子节点，但是checkStrictly=true，可以选择任意节点

5、默认点击父节点才会出现子节点 expandTrigger:'hover'，可以鼠标放上去就展开

常用按钮 el-button

<el-button icon="Plus" type="primary" plain>新增1</el-button>
<el-button icon="Plus" type="primary">新增2</el-button>
<el-button icon="Edit" type="success" plain>修改1</el-button>
<el-button icon="Edit" type="success">修改2</el-button>
<el-button icon="Delete" type="danger" plain>删除1</el-button>
<el-button icon="Delete" type="danger">删除2</el-button>
<el-button icon="Search" type="primary">查询</el-button>

plain:朴素模式-颜色变淡？ 

计算属性Computed

-也是个属性

 选项式

export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向当前组件实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
    cycleTotal: function () {
      this.cycle01 = this.checkNum(this.cycle01, 1, 7);
      this.cycle02 = this.checkNum(this.cycle02, 1, 7);
      return this.cycle01 + "-" + this.cycle02;
    }
  }
}

组合式

<script setup>
import { reactive, computed } from 'vue'
 
const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})
 
// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

nextTick(()=>{ ... })

等待DOM更新完成后调用的。当操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

<template>
    <div id = 'ha1'>{{ a1 }}</div>
    <div id = 'ha2'>{{ a2 }}</div>
    <div id = 'ha3'>{{ a3 }}</div>
    <el-button @click="b" type="primary">点我</el-button>
</template>
<script>
import {nextTick, ref} from 'vue'
export default {
    setup() {
        const a1 = ref('aaaa');
        const a2 = ref('');
        const a3 = ref('');
        const b = () => {
            a1.value = 'bbbb'
            nextTick(()=>{
                a2.value = document.getElementById('ha1').innerHTML
            })
            a3.value = document.getElementById('ha1').innerHTML
        }
        return {a1,a2,a3,b}
    }
}
</script>

这个例子展示   

CSS元素定位 position:fixed

1、设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：

需要设置相对定位的元素的 top、right、bottom 和 left 属性

-可以用这个把三维设置成echarts的背景！-h

 2、position:static 默认的；

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：

3、position:absolute  也算是绝对位置，只是相对于祖先元素是绝对位置

z-index属性

设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

CSS z-index 属性

HTML默认宽度和高度 

没有设置width属性，会自动撑满；

没有设置height属性，自动被其内容撑开，没有内容默认0；

npm install报错

 解决：添加--legacy-peer-deps即可正常；这个参数可以解决下载时候产生的依赖冲突！

npm i --legacy-peer-deps

npm install xxxx --legacy-peer-deps命令是什么？-CSDN博客

pinia

pinia的状态与vuex一样，把数据存放在内存中，在刷新页面后会清理内存，数据会丢失。 

可以认为store里的state是数据data，getters是计算属性computed，actions是方法methods。 

npm i提示缺少python

gyp verb check python checking for Python executable “python2“ in the PATH-CSDN博客

vue获取页面得ip和端口

window.location.href    和  window.location.port 

CSS的var()函数

声明的变量 前面要加两根连词线

滚动条 CSS overflow:auto 

height: 200px;
overflow: auto;

黑色背景圆角边框   border-radius:5px

&:hover {
 background: #ececec;
 border-radius: 5px;
}

SVG图标

1、菜单前的图标就是SVG

2、vue3自定义svg图标组件 

3、<el-icon style="height: 32px;width: 16px;color: darkred" color='red'><search color='red'/></el-icon>   这三种方式都可以改变图标颜色

4、原生svg是通过fill='red'来修改颜色 

 5、svg图标样例的一些网站

Bootstrap 图标库 · Bootstrap 官方开源图标（icon）库

Illustrations | unDraw

CSS clippath裁剪路径

工作原理：提供一系列的x轴y轴来创建路径。当使用这些值创建一条完整路径时，就会把图像按照路径内部的尺寸进行裁剪。

利用clip-path，我们可以创建圆形、椭圆和多边形等不同的形状，创造力是唯一的限制。

clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);

   左上角对应的xy坐标是  0 0

CSS !important 

1、用于增加样式的权重。 使得忽略优先级，优先使用!important修饰的样式。

2、使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。

3、如果都有!important修饰，使用优先级高的样式。

4、如果要在你的网站上设定一个全站样式的 CSS 样式可以使用 !important。

margin外边距 padding内边距

1、padding可能会撑大盒子 

2、盒子模型，是包括外边距的

vue的public目录

存放静态资源，好像是可以直接访问的 ip:port/favico.ico 

src/assets目录

也是放静态资源

@/assets 就是指src/assets，@/是vue项目中默认的别名，指向src目录。

defineExpose

能暴露本组件的方法和属性，给父组件，父组件可以通过模板引用ref，来访问这些暴露的属性和方法！ 

Dropdown 下拉菜单

<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
   <div class="avatar-wrapper">
       <img :src="userStore.avatar" class="user-avatar" />
       <el-icon><caret-bottom /></el-icon>
   </div>
   <template #dropdown>
       <el-dropdown-menu>
         <router-link to="/user/profile">
                <el-dropdown-item>个人中心</el-dropdown-item>
          </router-link>
           <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
                <span>布局设置</span>
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <span>退出登录</span>
         </el-dropdown-item>
       </el-dropdown-menu>
    </template>
</el-dropdown>

1、下拉触发方式 trigger:hover(悬浮激活)/click(点击激活)/contextmenu(右击激活)

2、是否在点击下拉菜单项后隐藏下拉菜单 hide-on-click=false   默认true

3、指令事件-点击下拉的菜单项后触发的事件回调-@command="handlecommand"

function handleCommand(command) {
  switch (command) {
    case "setLayout":
      setLayout();
      break;
    case "logout":
      logout();
      break;
    default:
      break;
  }
}

 

浮动float:left

1、只可以让多个块级盒子 一行 没有缝隙排列显示或左右对齐盒子，经常用于横向排列盒子。

2、需要两个div都加上float

固定定位position:fixed

会创建一个新的层叠上下文，这意味着元素会脱离正常的文档流不再影响其他元素的布局。不过，固定定位的元素仍然可以与其他元素发生重叠。

如果你想要固定定位的元素不与其他元素发生重叠，你可以通过设置 z-index 属性来控制层叠顺序。z-index 值大的元素会显示在值小的元素之上。

 如上图，正常两个div会换行，上下展示，但是这里因为第一个div固定定位，所以第二个div展示在了上面。

vue的动态class

<div :class="{ hasTagsView: true, sidebarHide: false }" class="main-container">

如上，相当于div有两个class ： hasTagsView和main-container