记录目前碰到的闲杂小小小功能

1. JS 点击按钮复制内容  \n 可设置让内容换行

//复制按钮
const copyName = () => {
  let data: string[] = [];
  if (nameList.value.length >= 1) {
    data = nameList.value;
    // 使用 Clipboard API 将数据复制到粘贴板

    // 将获取到的数据存储在变量中
    const clipboardData = data;
    navigator.clipboard
      .writeText(clipboardData.join("\n"))
      .then(() => {
        ElMessage.success("复制成功");
      })
      .catch((error) => {
        ElMessage.error("复制失败");
      }); // 假设后端返回的是文本数据
  }
};

2.   页面顶部留位置给字体滚动   <marquee></marquee>标签

<marquee direction="left">这是从右向左滚动的文字。</marquee>
//direction='left' 是用来设置滚动方向

3.  表单绑定有数组数据,使用表单验证的方式 (使用到的场景是 =>  点击按钮添加多个相同表单内容的项,并且都要做验证)

// template 代码

 <el-form
      v-if="type === 0"
      ref="formRef"
      :model="form"   //绑定表单对象(一定要写)
      :inline="true"
      class="demo-form-inline"
      :rules="rules"  //绑定规则(一定要写)
    >
      <div v-for="(item, index) in form.list" :key="index">  //循环对象里的list数组
        <el-form-item
          label="用户名称"
          :prop="`list[${index}].username`"  //prop绑定不对就不会触发验证,格式一定要这样写
          :rules="rules.username"  //rules 需要绑定   以下同理↓↓↓↓↓↓↓
        >
          <el-input v-model="item.username" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item
          label="手机号码"
          :prop="`list[${index}].phone`"  
          :rules="rules.phone"   
        >
          <el-input v-model="item.phone" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item
          label="角色选择"
          :prop="`list[${index}].role`" 
          :rules="rules.role"  
        >
          <el-select
            v-model="item.role"
            placeholder="请选择角色" 
          >
            <el-option
              v-for="option in options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
      </div>
    </el-form>


//javascript   代码 

const formRef = ref(); //定义表单的ref,调用formRef.value.validate((valid,field)=>{...})

//form表单对象中有数组数据list

const form = reactive({
  list: [
    {
      username: "",
      role: "",
      phone: "",
    },
  ],
});

//自定义表单验证 (我这里的逻辑是,不能输入重复的名称)
const validateName = (rule: any, value: any, callback: any) => {
  const bol = (props.initList as string[]).every((item) => {
    return item !== value;
  });
  // bol=true说明验证通过，没有重复，false:有重复了
  bol ? callback() : callback(new Error("用户名称重复:" + value));
};

//定义表单规则

const rules = {
  username: [
    { required: true, message: "请输入名称", trigger: "blur" },
    { min: 3, max: 16, message: "请输入3-16位字符", trigger: "blur" },
    { validator: validateName, trigger: "blur" },
  ],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请正确输入手机号",
      trigger: "blur",
    },
  ],
  role: [{ required: true, message: "请选择角色", trigger: "blur" }],
};

4.  在<el-form>组件中,首次点击按钮或者input框回车键,都会触发页面首次刷新,再次点击才能正常显示接口返回的数据
出现这个的问题原因是按钮或者input回车会触发表单的默认提交 submit,解决办法就是在

<el-form  @submit.prevent>   阻止其的默认行为