文章目录

Arco介绍

1. 简介

1.1 背景

为解决产品中的体验问题, 同时促进设计部门和研发部门之间协作, 本系统选择ArcoDesign作为开发者之间沟通的语言框架，使用vue3+TS结合的模式进行开发。

1.2 运行环境

```css
不支持 IE 浏览器环境
"vue"："3.x "
"arco-design-pro-vue": "^2.5.8",
"axios": "^0.24.0",
"dayjs": "^1.10.7",
"echarts": "^5.2.2",
"lodash": "^4.17.21",
"mitt": "^3.0.0",
"nprogress": "^0.2.0",
"pinia": "^2.0.9",
"query-string": "^7.0.1",
"vue": "^3.2.31",
"vue-echarts": "^6.0.0",
"vue-i18n": "^9.2.0-beta.17",
"vue-router": "^4.0.14"
"node": ">=14.0.0"
"cross-env": "^7.0.3",
"eslint": "^8.7.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-typescript": "^2.4.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^8.3.0",
"husky": "^7.0.4",
"less": "^4.1.2",
"lint-staged": "^11.2.6",
"mockjs": "^1.1.0",
"prettier": "^2.2.1",
"rollup-plugin-visualizer": "^5.6.0",
"stylelint": "^13.8.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-rational-order": "^0.1.2",
"stylelint-config-standard": "^20.0.0",
"stylelint-order": "^4.1.0",
"typescript": "^4.5.5",
"unplugin-vue-components": "^0.19.3",
"vite": "^2.6.4",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-eslint": "^1.3.0",
"vite-plugin-imagemin": "^0.6.1",
"vite-plugin-style-import": "1.4.1",
"vite-svg-loader": "^3.1.0",
"vue-tsc": "^0.34.15"
```

1.3 浏览器兼容性

Edge >= 79
FireFox >= 78
Chrome >= 64
Safari >= 12
Opera >= 53

2. 设计价值观

2.1 清晰

  • 清晰的指向亦是效率的提升，效率的提升是务实的基础。设计中减少不确定的因素, 减少用户判断次数，明确信息层级导向，让用户操作的目的性更明确。
  • 清晰的设计体系使得产品操作直观，流程一步到位；信息传达清晰且表意明确使用户在极短时间内快速理解进而作出判断。

2.2 一致

  • 一致的设计产生品牌信赖感，品牌的一致性是务实的目的。样式规范、操作流程、呈现高度一致, 这样统一的设计标准, 能够体现出产品的品牌感与信赖感。
  • 一致的设计标准, 使品牌感呈现出系统性的传达。高标准的一致的设计体系, 给用户带来品牌信赖感同时还能够通过一致的重复降低用户反复学习成本。

2.3 韵律

  • 跳动的韵律构建字节的美感，推敲设计的韵律是 Bytedancer 的浪漫。产品使用中的韵律反应了用户习惯, 富有韵律的设计让用户的操作仿佛本该如此，减少理解记忆负担。
  • 设计系统和音乐谱曲一样有着韵律之美,对每个信息模块的排版的考量,对元素之间重复与对比等规律的潜在追求与把握, 构成UI设计中的韵律之美。悦耳的韵律使得用户能够根据习惯轻松的完成任务。

2.4 开放

  • 开放包容是解决问题的思路，包容开放的体系才能浪漫的解决问题。中后台产品复杂的业务场景很难以一套固定的设计体系去涵盖,只有开放包容的体系才能适应复杂的业务场景。

3. 设计原则

  • 务实与浪漫的定义贯穿着整个设计系统,清晰与一致的价值观意味着务实的方向, 清晰的效率提升是务实的基础, 品牌的一致性是务实的目的。
  • 韵律与开放的价值观意味着浪漫的方向, 推敲设计的韵律是Bytedancer的浪漫, 包容开放的体系才能浪漫地解决问题。
  • 设计原则相当于整个语言体系中的修辞手法, 在实际的词语组成中给我们提供模式化的思考结构。它让整个语言体系更丰满。

3.1 及时反馈

系统应该让用户知道目前的状态, 并及时给予相对应的反馈。

3.2 贴近现实

系统应该用用户的语言，用词，短语和用户熟悉的概念，而不是系统术语。遵循现实世界的惯例，让信息符合自然思考逻辑。

3.3 系统一致性

同一用语、功能、操作保持一致。

3.4 防止错误发生

比出现错误信息提示更好的是更用心的设计防止这类问题发生。在用户选择动作发生之前，就要防止用户容易混淆或者错误的选择。

3.5 遵从习惯

尽量减少用户对操作目标的记忆负荷，动作和选项都应该是可见的。比如填完表单，下一步应该生成表单，而不是下一步就是完成。

3.6 突出重点

用户的浏览动作不是读，不是看，而是扫。设计中应该突出重点，弱化和剔除无关信息。重要对话中不应该包含无关紧要的信息。

3.7 错误帮助

错误信息应该用语言表达而不是比如404的代码。需要准确地反应问题所在并提出建设性的解决方案, 帮助用户从错误中恢复将损失降到最低, 提供详尽的说明文字和指导方向。

3.8 人性化帮助

如果系统不需要使用帮助文档是最好的，但是有必要提供帮助和文档。帮助性提示最好的方式是：1、无需提示；2、一次性提示；3、常驻提示；4、帮助文档。

4. 界面总体风格

4.1 页面风格

色彩对产品的视觉传达和多维度信息的承载有着很重要的影响，好的产品在色彩配置上应当清晰，准确的传达有效信息和品牌感。按照颜色类型和功能的不同，arco将色彩分为主色、中性色、功能色和遮罩色。

4.1.1 主色

主色是一个产品的代表颜色，一般与品牌色相关联。常用于主要按钮和文字、重点操作状态、高亮提醒、空状态等。arco的默认主色为#165DFF，同时根据使用场景的不同，基于主色衍生出了点击态、悬浮态等不同状态下的颜色。

4.1.2 中性色

中性色又称为无彩色系，能在产品界面中调和色彩搭配，衬托主色及其他色彩，同时有利于拉开内容层次，使用户更专注于内容。常用于文字、背景、图标、边框和分割线等元素。

4.1.3 功能色

功能色的主要作用是向用户明确的传达成功、警告、错误、链接等信息和状态

4.1.4 遮罩色

遮罩色常用于作为底色突出模态窗口，一般以黑色、白色为基色，配合透明度百分比使用。arco默认的遮罩色为#1D2129，透明度为60%。
按钮风格
按钮是一种命令组件，可发起一个即时操作
按钮的状态、形状、尺寸、类型等均可自定义

4.3 文字风格

文字是重要的信息传达元素之一，它本身的视觉特性和品质影响着信息传递的质量和产品操作的效率。根据过往的产品设计经验，arco提供了通用的字体、字重、行高、段间距建议。

4.3.1 字体

用户通过文字来理解内容和完成工作，科学的字体系统应该具有良好的可读性。无衬线体更加亲和，现代，清晰便于阅读，为网页中常用的字体类型

4.3.2 字号

文字的大小，层级，对比度等都是影响视觉可读性和阅读效率的重要因素，为保障文本的易读性，界面文字需满足以下要求：
最小可识别文字尺寸：12px；
字体层级：区分文本主副层级，字号差距需保持2-4px；
一个产品中不要有过多的字体层级，建议选择在 3-5 种之间，对于需要用户关注的文本信息可通过增加字重的方式突出。
在字号的选择上，我们将主字号定义为14px，并提供了不同层级的字号以适配不同信息层级的展示需求。

4.3.3 行高

目前通用的建议中，西文的基本行高是字号的1.2倍左右。中文因为字符密实且高度一致，没有西文的上伸部（ascender）和下延部（descender）来创造行间空隙，所以一般行高需要更大，根据阅读人群划分（儿童、年轻人、老年人），可达到 1.5 至 2 倍甚至更大。arco默认的行高为1.4倍。

4.3.4 字重

同一个字体的不同字重能传达不同的信息权重和情绪。细的字体给人以细腻、轻快的感觉，而粗体则给人着重和严肃的认知。因此适合的场景使用合适的字重非常重要。多数情况下，采用 Regular 以及 Medium 的两种字体重量，分别对应代码中的 400 和 500。在英文或数字字体加粗的情况下会采用 semibold 的字体重量，对应代码中的 600。在部分特殊场景中会采用Light的字体重量，对应代码中的300。

4.3.5 文案样式

文案样式影响着界面中信息传达的效率和准确性，界面中文案样式应符合相应的文本规范，并保持简洁清晰和表达一致。

4.3.6 段落间距

段落文本中文字的可读性，由字号、行高和段间距的变量决定。在文字较多的内容中，段落与段落之间需要有一定的间距以保证最好的显示效果。根据 WCAG 中的 AAA 标准，段落间距至少为字体大小的 1.5 倍。正文14px字号对应段间距为21px。

4.3.7 阴影

在界面中，我们常用阴影来模拟元素之间的物理层级关系。清晰自然的阴影能帮助用户快速理解界面中元素的空间关系，更清楚的理解整理界面内容。
不同的阴影高度可以代表不同的元素层级，arco定义了四层基础的阴影高度，以适配页面中常用的元素层级。低层级元素（例如卡片等）的默认阴影可使用一级阴影，hover态等常规交互操作可以使用二级阴影，需要进行突出展示以及表示在空间上最上层的元素（例如下拉菜单、模态框等）可以使用三级和四级阴影。

4.4 表单风格

具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
位于页面正中
适用“冒号”，如：“项目名称：”
背景颜色可自定义，随用户进行开发
边框风格可自定义，随用户进行开发

4.5 图像风格

图像宽度、高度、大小等均可自定义
图片加载效果、样式等均可自定义

Arco组件

官网：https://arco.design/vue/docs/start

1、table表格

1.1、表格实现点击行操作行

在这里插入图片描述

<template>
  <a-table 
  	ref="tableRef"
  	row-key:"id"
  	:row-selection="{type:"radio"}"
  	:row-click="rowClick"
    :data="data" 
    :bordered="false"
    :pagination="pagination"
    @page-change="onPageChange"
    @page-size-change="onPageSizeChange"
    style="width:100%"
  > 
    <template #columns>
      <a-table-column 
        type="index"
        title="编号"
        align="center"
        :width="60"
      >
        <template #cell="{rowIndex}">
      {{rowIndex +1}}
    </template>
  </a-table-column>
  <a-table-column 
    title="名称"
    align="center"
  >
    <template #cell="{record}">
      {{record.name}}
    </template>
  </a-table-column>
</template>

</a-table>
</template>

<script setup>
	import { ref } from "vue";
	const pagination = ref({
	  page:1,
	  toal:0,
	  pageNo:1,
	  pageSize:10,
	  current:1,//当前页
	  showTotal:true,
	  showJumper:true,
	  showPageSize:true,
	})
	// Begin对点击行进行操作
	const tableRef = ref()
	function rowClick(data){
		tableRef.value.select(data.id);
	}
	// End 对点击行进行操作


	function onPageChange(data){
	  pagination.value.pageNo = data;
	  pagination.value.page = data;
	  pagination.value.current = data;
	  fetchData();//初始化函数
	}
	function onPageSizeChange(data){
	  pagination.value.pageSize = data;
	  pagination.value.page = 1;
	  pagination.value.current = 1;
	  fetchData();//初始化函数
	}
</script>

1.2、常用属性

<template>
  <a-table 
    :data="data" 
    :bordered="false"
    :pagination="pagination"
    @page-change="onPageChange"
    @page-size-change="onPageSizeChange"
    style="width:100%"
  > 
    <template #columns>
      <a-table-column 
        type="index"
        title="编号"
        align="center"
        :width="60"
      >
        <template #cell="{rowIndex}">
      {{rowIndex +1}}
    </template>
  </a-table-column>
  <a-table-column 
    title="名称"
    align="center"
  >
    <template #cell="{record}">
      {{record.name}}
    </template>
  </a-table-column>
</template>

</a-table>
</template>

<script setup>
  import { ref } from "vue";
const pagination = ref({
  page:1,
  toal:0,
  pageNo:1,
  pageSize:10,
  current:1,//当前页
  showTotal:true,
  showJumper:true,
  showPageSize:true,
})
function onPageChange(data){
  pagination.value.pageNo = data;
  pagination.value.page = data;
  pagination.value.current = data;
  fetchData();//初始化函数
}
function onPageSizeChange(data){
  pagination.value.pageSize = data;
  pagination.value.page = 1;
  pagination.value.current = 1;
  fetchData();//初始化函数
}
</script>

  • :pagination="false" 关闭页码提示，作用于<a-table>

  • :sortable="{ sortDirections:['ascend','descend'], }" 添加排序属性，作用于 <a-table-column>

  • align="center"，作用于 <a-table-column>

  • :bordered="{wrapper: true, cell: true}，显示表格线，作用与<a-table>

  • 点击选中效果，点击选中后出现背景颜色，作用与<a-table>

    style="
	widh:100%;
	cursor:pointer;
	background-color:rgba(25,56,181,0.5)
"

  • 表格滚动:scroll="scroll"，作用与<a-table>

    const scroll = {
      x: 2000,
      y: 200
    };

  • 单元格合并

    • 根据行列索引进行合并
      在这里插入图片描述
    <template>
  <a-space direction="vertical" size="large" style="width: 100%">
    <a-table :columns="columns" :data="data" :span-method="spanMethod" />
  </a-space>
</template>

<script>
export default {
  setup(){
    const spanMethod= ({rowIndex, columnIndex}) => {
      if (rowIndex === 1 && columnIndex === 1) {
        return {
          rowspan: 2,
          colspan: 3
        }
      }
    };
    const columns=[
      {
        title: 'Name',
        dataIndex: 'name',
      },
      {
        title: 'Salary',
        dataIndex: 'salary',
      },
      {
        title: 'Address',
        dataIndex: 'address',
      },
      {
        title: 'Email',
        dataIndex: 'email',
      },
    ];
    const data=[{
      key: '1',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com'
    }, {
      key: '2',
      name: 'Alisa Ross',
      salary: 25000,
      address: '35 Park Road, London',
      email: 'alisa.ross@example.com'
    }, {
      key: '3',
      name: 'Kevin Sandra',
      salary: 22000,
      address: '31 Park Road, London',
      email: 'kevin.sandra@example.com'
    }, {
      key: '4',
      name: 'Ed Hellen',
      salary: 17000,
      address: '42 Park Road, London',
      email: 'ed.hellen@example.com'
    }, {
      key: '5',
      name: 'William Smith',
      salary: 27000,
      address: '62 Park Road, London',
      email: 'william.smith@example.com'
    }];

    return {
      spanMethod,
      dataSpanMethod,
      spanMethodAll,
      columns,
      data
    }
  },
}
</script>
    • 根据行label名字进行合并
      在这里插入图片描述
    <template>
  <a-space direction="vertical" size="large" style="width: 100%">	    
    <a-table :columns="columns" :data="data" :span-method="dataSpanMethod" :bordered="{wrapper: true, cell: true}" />
  </a-space>
</template>

<script>
export default {
  setup(){
    const  dataSpanMethod= ({record, column}) => {
      if (record.name === 'Alisa Ross' && column.dataIndex === 'salary') {
        return {
          rowspan: 2,
        }
      }
    };
    const columns=[
      {
        title: 'Name',
        dataIndex: 'name',
      },
      {
        title: 'Salary',
        dataIndex: 'salary',
      },
      {
        title: 'Address',
        dataIndex: 'address',
      },
      {
        title: 'Email',
        dataIndex: 'email',
      },
    ];
    const data=[{
      key: '1',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com'
    }, {
      key: '2',
      name: 'Alisa Ross',
      salary: 25000,
      address: '35 Park Road, London',
      email: 'alisa.ross@example.com'
    }, {
      key: '3',
      name: 'Kevin Sandra',
      salary: 22000,
      address: '31 Park Road, London',
      email: 'kevin.sandra@example.com'
    }, {
      key: '4',
      name: 'Ed Hellen',
      salary: 17000,
      address: '42 Park Road, London',
      email: 'ed.hellen@example.com'
    }, {
      key: '5',
      name: 'William Smith',
      salary: 27000,
      address: '62 Park Road, London',
      email: 'william.smith@example.com'
    }];

    return {
      spanMethod,
      dataSpanMethod,
      spanMethodAll,
      columns,
      data
    }
  },
}
</script>

2、button 常用按钮

<template>
  <a-table 
    :data="data" 
    :pagination="pagination"
    :page-change="onPageChange"
    :page-size-change="onPageSizeChange"
  > 
    <template #columns>
	  <a-table-column 
	    title="操作"
	    align="center"
	  >
	    <a-button #cell="{ record,rowIndex }">
	      <a-button type="primary" size="mini" @click="handleUpdata(record,rowIndex)">
	        <template #icon><icon-edit/></template>
	        <template #default>编辑</template>
	      </a-button>
	      <a-popconfirm content="确定要删除" @ok="handleDelete(record,rowIndex)">
	        <a-button type="primary" size="mini" satus="danger" style="margin-left: 8px;">
	          <template #icon><icon-delete/></template>
	          <template #default>删除</template>
	        </a-button>
	      </a-popconfirm>
	    </template>
	  </a-table-item>
</template>

</a-table>
</template>

2.1、增加

<a-button type="primary" @click="handleCreate">
	<icon-plus/>
	添加
</a-button>

2.2、删除

<a-popconfirm content="确定要删除" @ok="handleDelete(record,rowIndex)">
	<a-button type="primary" size="mini" satus="danger" style="margin-left: 8px;">
	    <template #icon><icon-delete/></template>
	       <template #default>删除</template>
	 </a-button>
</a-popconfirm>

2.3、修改

<a-button type="primary" size="mini" @click="handleUpdata(record,rowIndex)">
	<template #icon><icon-edit/></template>
	<template #default>编辑</template>
</a-button>

2.4、查询和重置


<template>
<a-divider style="height:84px" direction="vertical"/>
<a-cor :flex="'86px'" style="text-align: right;">
  <a-space direction="vertical" :size="18">
    <a-button type="primary" @click="handleSearch('handle')">
      <template #icon>
        <icon-search/>
      </template>
      查询
    </a-button>
    <a-button type="primary" @click="reset">
      <template #icon>
        <icon-refresh/>
      </template>
      重置
    </a-button>
  </a-space>
</a-cor>


</template>

<script setup>
  import { ref } from "vue";
function resetForm(){
  return{
    //此处将查询列表中的各字段均置空，例如
    userName:'',
    rolesName:'',
    remark:'',
    isEnable:''
  }
}
function reset() {
  form.value=resetForm();
  fetchData()
}
</script>

3、icon 图标

图标库：https://arco.design/vue/component/icon

3.1、按需引入或直接使用

<template>
  <a-space size="large">
    <icon-plus :style="{fontSize:'32px'}" />
    <icon-check-circle :style="{fontSize:'32px'}" />
  </a-space>
</template>

<script>
import { IconPlus, IconCheckCircle } from '@arco-design/web-vue/es/icon';

export default {
  components: { IconPlus, IconCheckCircle }
}
</script>

3.2、常用图标样式

  • <icon-loading /> 加载中
  • <icon-poweroff /> 开始
  • <icon-loop /> 重置 <icon-sync />
  • <icon-refresh /> 刷新
  • <icon-check /> 正确
  • <icon-close /> 错误
  • <icon-plus /> 增加
  • <icon-delete /> 删除
  • <icon-edit /> 编辑
  • <icon-settings /> 设置
  • <icon-search /> 搜索
  • <icon-upload />上传
  • <icon-download /> 下载
  • <icon-customer-service /> 客服

3.3、自定义图标样式

<template>
  <a-space size="large">
    <icon-check-circle :style="{fontSize:'32px'}" />
    <icon-check-circle :style="{fontSize:'32px'}" :stroke-width="2" />
    <icon-check-circle :style="{fontSize:'32px'}" stroke-linecap="round" />
    <icon-check-circle :style="{fontSize:'32px'}" stroke-linejoin="arcs" />
    <icon-refresh :style="{fontSize:'32px'}" spin/>
    <icon-sync size="32" spin/>
  </a-space>
</template>

  • strokeWidth 线宽

  • strokeLinecap 端点类型

  • strokeLinejoin 拐角类型

  • spin 是否旋转

  • size 尺寸

4、form表单

<template>
  <a-form 
    :model="form" 
    :style="{width:'600px'}" 
    auto-label-width 
    @submit="handleSubmit"
  >
    <a-form-item field="name" label="Username">
      <a-input v-model="form.name" placeholder="please enter your username..."  allow-clear/>
    </a-form-item>
    <a-form-item field="post" label="Post">
      <a-input v-model="form.post" placeholder="please enter your post..."  allow-clear/>
    </a-form-item>
    <a-form-item field="isRead">
      <a-checkbox v-model="form.isRead">
        I have read the manual
      </a-checkbox>
    </a-form-item>
    <a-form-item>
      <a-button html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>
  • allow-clear：表示可以清除选择框中的内容
  • label-align="right"：表示标签的对齐方向【‘left’ | ‘right’】
  • auto-label-width：表示开启自动标签宽度，作用与a-form
  • :label-col-props="{span:3}"
  • :wrapper-col-props="{span:20}"配合上一条使用，作用与<a-form>，表示内容和label各自所占份数
  • label-col-flex="60px"，作用与<a-form-item>，对label的宽度做处理
  • 表单绑定字段验证，field
    <a-modal
	v-model:visible="dialogFormVisible"
	:mask-closable="false"
	draggable
	:title="textMap[dialogStatus]"
	:on-before-ok="dialogStatus === 'create'? createData : updateData">
	
	<a-form ref="fromRef">
	<a-form-item field="name" label="Username" :rules="rules">
		<a-input 
			v-model.trim = "temp.name"
			placeholder = "请输入"
			allow-clear
		>
	</a-form-item>
</a-form>
</a-modal>

<script>
	const textMap = ref({
		update:'编辑'，
		create:'添加'
	})
	const rules = ref({
		name:[{required:true,message:'province is required',trigger:'blur'}]
	});
	const createData  = ()=>{
		const fromRef= ref();
		fromRef.value.validate().then((res)=>{
		console.log(res)
			if(!res){
				做正确的提交
			}else{
				提示错误信息
			}
		})
	}
	
</script>

5、divider 分割线

<a-divider direction="vertical" style="height:84px" />

6、Tag 标签

 <a-tag color="gray">
      <template #icon>
        <icon-github/>
      </template>
      Github
 </a-tag>
  • bordered 带边框
  • size = 'small' | 'medium' | 'large' 标签的大小
  • v-model:visible ="visible " 标签是否可见
  • default-visible = "true" 标签默认是否可见
  • :loading = "true" 标签是否为加载中状态
  • closable 标签是否可关闭
  • checkable 标签是否可选中
  • v-model:checked = "checked" 标签是否选中（标签可选中时可用）
  • default-checked 标签默认选中状态（标签可选中时可用）
  • color="gray" 标签的颜色
    在这里插入图片描述
  • @close = "handleClose" 点击关闭按钮时触发
  • @check="handleCheck" 用户选中时触发（仅在可选中模式下触发）

7、面包屑

在这里插入图片描述

第一种方式

第一种方式，通过自己的定义方式定义

<template>
  <a-breadcrumb>
    <a-breadcrumb-item>
      <icon-home/>
    </a-breadcrumb-item>
    <a-breadcrumb-item>数据可视化</a-breadcrumb-item>
    <a-breadcrumb-item>多维数据分析</a-breadcrumb-item>
  </a-breadcrumb>
</template>

第二种方式

第二种方式，在启动hello-arco项目后，在它的基础上进行改动，直接使用组件调用

<Breadcrumb :item="['数据可视化','多维数据分析']"/>

8、modal 弹窗

<template>
  <a-button @click="handleClick">Open Modal</a-button>
  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title>
      Title
    </template>
    <div>You can cusstomize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>
  </a-modal>
</template>

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

export default {
  setup() {
    const visible = ref(false);

    const handleClick = () => {
      visible.value = true;
    };
    const handleOk = () => {
      visible.value = false;
    };
    const handleCancel = () => {
      visible.value = false;
    }

    return {
      visible,
      handleClick,
      handleOk,
      handleCancel
    }
  },
}
</script>
  • draggable 弹窗可拖动
  • :mask-closable="false" 点击弹窗外不可关闭弹窗
  • :footer="false"

9、card 卡片

在这里插入图片描述

<template>
  <div
    :style="{
      boxSizing: 'border-box',
      width: '100%',
      padding: '40px',
      backgroundColor: 'var(--color-fill-2)',
    }"
  >
    <a-row :gutter="20" :style="{ marginBottom: '20px' }">
      <a-col :span="8">
        <a-card title="Arco Card" :bordered="false" :style="{ width: '100%' }">
          <template #extra>
            <a-link>More</a-link>
          </template>
          Card content
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="Arco Card" :bordered="false" :style="{ width: '100%' }">
          <template #extra>
            <a-link>More</a-link>
          </template>
          Card content
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="Arco Card" :bordered="false" :style="{ width: '100%' }">
          <template #extra>
            <a-link>More</a-link>
          </template>
          Card content
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

  • :bordered="false" 去除卡片边框

  • 对卡片card的标题进行自定义设置

    :deep(.arco-card-header){
	height : auto;
	padding : 20px;
	border : none;
}
:deep(.arco-card-header-title){
	display : block;
	font-size : 1.5em;
	color : #ccc;
	margin-block-start : 20px;
	margin-block-end : 20px;
	margin-inline-start : 16px;
	margin-inline-end : 16px;
	font-weight : bold;
}

10、steps 步骤条

<a-card :style="{height:'130px'}">
  <div><h2>设备步骤</h2></div>
  <div>
    <a-steps :style="{marginTop:'-40px';marginLeft:'150px';cursor:pointer}">
      <a-step
        v-for="(item,i) in stepList.steps"
        :key="i"
        :description="
          '步骤持续时间：' +
          item.value.rTime +
          '秒 \n 相对T0时间：'
          +item.value.aTime+'秒'
        "
        @click.native="updateStepList(i)"
      />
    </a-steps>
  </div>
  <div><a-button>添加步骤</a-button></div>
</a-card>
  
<style scoped lang="less">
  .box-card-component{
    :deep(a.step_description){
      /* 设置换行 */
      white-space: pre;
    }
  }
</style>

11、全屏与退出全屏

<a-tooltip
	:content="
	  isFullscreen
	    ? '点击退出全屏模式'
	    : '点击切换全屏模式'
	"
>
	<a-button
	    class="nav-btn"
	    type="outline"
	    :shape="'circle'"
	    @click="toggleFullScreen"
	  >
	    <template #icon>
	      <icon-fullscreen-exit v-if="isFullscreen" />
	      <icon-fullscreen v-else />
	    </template>
	</a-button>
</a-tooltip>

12、Select 选择器

<a-select 
	:style="{width:'160px'}" 
	placeholder="Select" 
	:trigger-props="{ autoFitPopupMinWidth: true }"
	v-model="temp.selecList"
	allow-search
	allow-clear
	@change="test"
>
      <a-option>Beijing-Beijing-Beijing</a-option>
      <a-option label="可用" :value="0"></a-option>
      <a-option label="不可用" :value="0"></a-option>
      <a-option disabled>Disabled</a-option>
</a-select>
  • allow-clear 允许清空
  • allow-search 允许搜索
  • multiple 开启多选模式

13、Switch 开关

<a-switch 
	v-model="value" 
	:checked-value="true" 
	:unchecked-value="false" 
>
<template #checked>是</template >
<template #unchecked>否</template >
</<a-switch>
  • model-value (v-model) 绑定值
  • default-checked 默认选中状态（非受控状态）
  • disabled 是否禁用
  • loading 是否为加载中状态
  • type 开关的类型 ‘circle’ | ‘round’ | ‘line’
  • size 开关的大小 ‘small’ | ‘medium’
  • checked-value 选中时的值
  • unchecked-value 未选中时的值
  • checked-color 选中时的开关颜色
  • unchecked-color 未选中时的开关颜色
  • before-change switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换。

14、输入框中字符串转数组对象

  • HTML

    <a-form-item label="p1">
    <a-textarea
      v-model="params.p1"
      placeholder="请输入"
      :rows="5"
      auto-size
      @change="strToArr(params.p1,'p1')"
  />
  </a-form-item>
    <a-form-item label="p2">
    <a-textarea
      v-model="params.p2"
      placeholder="请输入"
      :rows="5"
      auto-size
      @change="strToArr(params.p2,'p2')"
  />
  </a-form-item>

  • JS

    <script>
  function strToArr(data,flag){
    // param.value[flag] 即 param.value.flag，flag为传进来的字段名p1或p2
    param.value[flag] = data.split(',').map(parseFloat)
  }
</script>

15、Tab页切换

<template>
  <div class="box-card-component">
    <a-card title="标签页管理">
    <a-tabs :active-key="activeKey" @change="handleClick">
      <a-tab-pane key="1" name="pone">
        <template #title> <icon-home /> pone</template>
        <pone v-if="activeKey === '1'" />
      </a-tab-pane>
      <a-tab-pane key="2" name="ptwo">
        <template #title> <icon-home /> ptwo</template>
        <ptwo v-if="activeKey === '2'" />
      </a-tab-pane>
    </a-tabs>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import pone from './components/pone.vue';
  import ptwo from './components/ptwo.vue';

  const activeKey = ref('2');

  function handleClick(data) {
    activeKey.value = data;
  }
</script>

<style scoped lang="less">
  .box-card-component {
    padding: 0px 20px;
    .card-header {
      color: #409eff;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      // height: 20px;
    }
  }
</style>

16、Textarea 文本域

 <a-textarea 
 	default-value="This is the contents of the textarea." 
 	:auto-size="{
	    minRows:2,
	    maxRows:5
  	}" 
  	allow-clear
  	max-length="200"
  	placeholder="请输入"
  	disabled
    style="margin-top: 20px"/>
  • default-value 默认值
  • auto-size 绑定最大行和最小行数选择
  • max-length 最大长度
  • placeholder 提示信息
  • disabled 禁用
# vue.js # 前端 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue