Vue3开发过程中的卡壳瞬间（记录碎碎念）

1、<input></input>标签，通过键盘敲击【回车】进行搜索：

<el-input  ...  @keyup.enter="搜索的函数"/>

2、JSON文件的长字符串，靠【\n】无法换行：

在每一段的段前加上【<p>】，段后加上【</p>】

"content":"<p>第一段</p>    <p>第二段</p>    <p>第三段</p>",

并在页面中对应的【<div>】中加上【v-html="content"】 

<div  ...  v-html="content"></div>

3、鼠标移入【目标区域】，箭头变成【小手】：

在对应<div>中的class样式中加一行：

cursor: pointer;

4、页面用视频作背景，不用插件也行！！还很简单！！

直接用<video></video>

后面再加个样式就行。 

<video class="videoStyle" id="Id" playsinline="true" autoplay="true" muted="false" loop="true">
    <source src="视频地址" type="video/mp4">
</video>

5、在页面中直接引用图片、视频：

写地址需要把【相对地址】写全，不然会找不到对象

<div>
    <img src="../../../+地址"/>
</div>

 但这么写的话，【打包】的时候可能出错，所以改成：

<template>
    <div>
        <img :src="picture"/>
    </div>
</template>



<script setup>
import picture from '/public/.../xxxxxx.png'
</script>

通过【import】引用对应  图片/视频

6、reactive动态绑定值

 const attribute = reactive ([ ]) 绑定值不能直接【attribute.value = xxxxxx】

要用【forEach】和【push】 

function chooseAttribute(attributes){
    attributes.forEach(element => {    //将【attributes】数组中的每一项，依次取出
        attribute.push(element)    //将上方取出的每一项，依次【push】到数组【attribute】中
    });
}

7、将数组置空：

const expands=ref([])
const result=reactive([])

function Clean(){    //置空

  //ref（两种都可以）
  expands.value = []
  expands.value.length = 0

  //reactive
  result.length = 0
}

8、配置边距：

以  “上-右-下-左”  的顺序

<style scoped>
.xxx{
    margin: 2px  3px  4px  5px;    //上:2px； 右:3px； 下:4px； 左:5px
}
</style>

9、定时器：

需要实现一个【异步改变样式】的效果： 

<div @click="wait" >
    <span>点击开始计时3秒，后改变样式</span>
</div>

<div :class=" change === 0? 'doing' : 'done' "></div>

<script setup>
import { ref } from 'vue'

const change=ref(0)

//  等待3秒后改变样式（通过:class实现）
function wait(){
    setTimeout(() => {
        change.value = 1;
      }, 3000); // 3000毫秒/3秒
}
</script>

三秒前和三秒后的样式：

<style scoped>
.doing{
    width: 13.23vw;
    height: 19.17vh;
    margin-left: 95px;
    background-image: url("/xxxx/xxxx/aaaa.png");
    background-size:  100% 100%;
    background-repeat: no-repeat;
}


.done{
    width: 13.23vw;
    height: 19.17vh;
    margin-left: 95px;
    background-image: url("/xxxx/xxxx/bbbb.png");
    background-size:  100% 100%;
    background-repeat: no-repeat;
}
</style>

10、axios传参方式：

（1）直接加在请求头里（不推荐）

proxy.$request.get('api/xxxx/xxxx/' + id).then((res) => {
    xxxxxx
})

 （2）以对象的形式传

proxy.$request.get('api/xxxx/xxxx/', {

      aaa: xxxx.value,
      bbb: yyyy.value,

    }).then((res) => {
    xxxxxx
})

form.value = {
    aaaa: 'xxxx',
    bbbb: 'yyyy',
}


proxy.$request.post('api/renren-admin/sys/user', form.value).then((res) => {

    if (res.code === 200) {  //  不一定是200
       ElMessage.success('成功')
    } else {
       ElMessage.error('失败')
    }
    xxxxxx
})

11、对表格中内容进行【一键复制】：

<div>
    <span style="cursor: pointer" @click="Copy(xxx)">    //xxx：复制的内容
        {{xxx}}    //xxx：显示的内容
    </span>
</div>

import { ElMessage } from 'element-plus'

//一键复制
function Copy(val) {    //传入“xxx”
  let nodes= document.createElement('node')    //创建节点
  nodes.value = val    //给节点赋值
  document.body.appendChild(nodes)    //渲染节点(要不然不起作用,可以添加隐藏属性)
  nodes.select()    //选中节点
  ElMessage({ message: '复制成功', type: 'success' })
}

12、表单内容初始化 & 前端验证（必填字段、限制字数等等）：

<el-dialog
    v-model="DialogVisible"
    @closed="initForm(AddFormRef)">    //关闭弹框时初始化表单内容

    <el-form
        ref="AddFormRef"
        :model="addForm"
        :rules="rules">    //定义规则

           <el-form-item 
                label="姓名：" 
                prop="name">
                  <el-input
                      v-model="addForm.name"
                      placeholder="请输入姓名"/>

           </el-form-item>
    </el-form>

    <el-button @click="submit(AddFormRef)">提交</el-button>

</el-dialog>

import { ref, reactive} from 'vue'

//定义弹框、姓名
const DialogVisible = ref(false)
const addForm = ref({
  name: '',
})

//定义对应字段的规则
const rules = reactive({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },    //必填
    { validator: proxy.$validate, trigger: 'change' },    //内容变化时触发
  ],
})

//初始化表单
const initForm = async (formEl) => {
  if (!formEl) return
      addForm.value = {
        name: '',
      }
  formEl.resetFields()    //初始化
}

//提交
const submit = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {    //满足则执行内部代码

        ……………………

    }
  })
}