元素用户界面的基本使用
最编程
2024-04-21 15:28:40
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入CSS -->
<link rel="stylesheet" href="./css/index.css" />
<!-- 导入Vue3 -->
<script src="./js/vue.global.js"></script>
<!-- 导入组件库 -->
<script src="./js/index.full.js"></script>
<!-- 导入图标库 -->
<script src="./js/index.iife.min.js"></script>
</head>
<body>
<div id="app">
<el-container class="layout-container-demo" style="height: 500px">
<el-aside width="200px">
<el-scrollbar>
<el-menu :default-openeds="['1', '3']">
<el-sub-menu index="1">
<template #title>
<el-icon>
<message />
</el-icon>Navigator One
</template>
<el-menu-item-group>
<template #title>Group 1</template>
<el-menu-item index="1-1">Option 1</el-menu-item>
<el-menu-item index="1-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="1-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>Option4</template>
<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-sub-menu index="2">
<template #title>
<el-icon><icon-menu /></el-icon>Navigator Two
</template>
<el-menu-item-group>
<template #title>Group 1</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="2-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="2-4">
<template #title>Option 4</template>
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-sub-menu index="3">
<template #title>
<el-icon>
<setting />
</el-icon>Navigator Three
</template>
<el-menu-item-group>
<template #title>Group 1</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
<el-menu-item index="3-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="3-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="3-4">
<template #title>Option 4</template>
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
</el-sub-menu>
</el-sub-menu>
</el-menu>
</el-scrollbar>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<div class="toolbar">
<el-dropdown>
<el-icon style="margin-right: 8px; margin-top: 1px">
<setting />
</el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span>Tom</span>
</div>
</el-header>
<el-main>
<el-scrollbar>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="140" />
<el-table-column prop="name" label="Name" width="120" />
<el-table-column prop="address" label="Address" />
</el-table>
</el-scrollbar>
</el-main>
</el-container>
</el-container>
</div>
<script>
const { ref } = Vue
const App = {
setup() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({ length: 20 }).fill(item))
return {
item,
tableData
}
},
};
const app = Vue.createApp(App);
// 添加全部组件
for ([name, comp] of Object.entries(ElementPlusIconsVue)) {
app.component(name, comp);
}
app.use(ElementPlus);
app.mount("#app");
</script>
<style scoped>
.layout-container-demo .el-header {
position: relative;
background-color: var(--el-color-primary-light-7);
color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
color: var(--el-text-color-primary);
background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
border-right: none;
}
.layout-container-demo .el-main {
padding: 0;
}
.layout-container-demo .toolbar {
display: inline-flex;
align-items: center;
justify-content: center;
height: 100%;
right: 20px;
}
</style>
</body>
</html>
推荐阅读
-
KatalonRecorder 系列 (I)：基本使用 + XPath 元素定位
-
微信 "扫一扫 "物联网，全面揭秘 "扫一扫 "背后的扫盲技术！-1.1 扫一扫感知物体是做什么的？ 1.1 微信扫一扫是做什么的？ 扫一扫识物是指以图片或视频（商品图片：鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品）为输入媒介，挖掘微信内容生态中的有价值信息（电商+百科+资讯，如图1所示），并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商，可以支持用户货比N家并直接下单购买，百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等，向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货，亲自体验，也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景？ 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口，以用户扫图片为输入形式，为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外，我们还将进一步拓展长按操作，让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分： a. 科普知识： a.科普知识。用户通过扫一扫，可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻，帮助用户更好地了解该对象； b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品，支持用户即扫即购； c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息，从而更好地投放匹配广告，提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术？ 对于扫一扫来说，大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符，都可以看作是图片的一种特定编码形式，而物的识别则是对自然场景图片的识别，这对于扫一扫家族来说是一个质的飞跃，我们希望从物的识别入手，进一步拓展扫一扫对自然场景图片的理解能力，比如扫酒、扫车、扫植物、扫人脸等服务，如下图3所示。 图 3 Sweep 家族
-
元素用户界面的基本使用
-
气泡排序（超级详细）--升序"，从小到大；另一种是 "降序"，从大到小。该主题可抽象为 "按升序对 n 个数字排序 "的一般形式。 排序是一种重要的基本算法。排序的方法有很多种，但在本题中我们将使用冒泡排序法。 冒泡法的基本思想 冒泡法的基本思想是，每次比较相邻的两个数字时，较小的那个会被移到前面。如果有 5 个数字9,8,5,2,0，第一次将前两个数字 8 和 9 互换。第二次将第二个和第三个数字（9 和 5）对调......这样一共对调 4 次，得到 8-5-2-0-9 的顺序，可以看到：最大的数字 9 一直在 "下沉"，成为最下面的一个数字，而小的数字 "上升" 最小的数字 "上升"。最小的数字 0 已经向上 "浮 "了一个位置。经过第一次比较（共 4 次比较和交换），得到了最大的数字 9。 然后进行第二趟比较，对剩下的前 4 个数字（8、5、2、0）进行新一轮比较，这样第二个最大的数字就 "沉到了底部"。同样，按照上述方法进行第二轮比较。经过 3 次比较和交换，我们得到了第二大数 8。 按照这个规律，我们可以推断出，比较 5 个数字需要 4 次旅行，才能将 5 个数字从小到大排列起来。在第一次旅行中，两个数字之间进行了 4 次比较，在第二次旅行中，进行了 3 次比较......在第四次旅行中，只进行了一次比较。 思路总结 总结：如果有 n 个数字，那么要进行 n-1 次比较。在第一次行程中进行 n-1 次比较，在第 i 次行程中进行 n-i 次比较。
-
什么是可用性测试？有效性（Effectiveness）-- 用户完成特定任务和实现特定目标的正确性和完整性程度；效率（Efficiency）-- 用户完成任务的正确性和完整性程度与所用资源（如时间）之比；满意度（Satisfaction）-- 用户在使用产品时的主观满意度和接受程度。 2.如何获得可用性？ 可以参考以下原则：Gould、Boies 和 Lewis（1991 年）为以用户为中心的设计定义了 4 个重要原则： 早期以用户为中心：设计者应在设计过程的早期就努力了解用户的需求。 综合设计：设计的所有方面都应同步发展，而不是按顺序进行。使产品的内部设计始终与用户界面的需求保持一致。 早期和持续测试：当今唯一可行的软件测试方法是经验主义方法，即如果实际用户认为设计可行，该设计就是可行的。通过在整个开发过程中引入可用性测试，用户就有机会在产品推出之前对设计提出反馈意见。 迭代设计：大问题往往掩盖了小问题的存在。设计人员和开发人员应在整个测试过程中对设计进行迭代。 3...什么是可用性测试？ 可用性测试是根据可用性标准对图形用户界面进行的系统评估。 可用性测试是衡量用户与系统（网站、软件应用程序、移动技术或任何用户操作设备）交互时的体验质量。4.如何进行可用性测试？ l 实验室实验
-
纯干货分享 | 研发效能提升——敏捷需求篇-而敏捷需求是提升效能的方式中不可或缺的模块之一。 云智慧的敏捷教练——Iris Xu近期在公司做了一场分享，主题为「敏捷需求挖掘和组织方法，交付更高业务价值的产品」。Iris具有丰富的团队敏捷转型实施经验，完成了企业多个团队从传统模式到敏捷转型的落地和实施，积淀了很多的经验。 这次分享主要包含以下2个部分： 第一部分是用户影响地图 第二部分是事件驱动的业务分析Event driven business analysis（以下简称EDBA） 用户影响地图，是一种从业务目标到产品需求映射的需求挖掘和组织的方法。 在软件开发过程中可能会遇到一些问题，比如大家使用不同的业务语言、技术语言，造成角色间的沟通阻碍，还会导致一些问题，比如需求误解、需求传递错误等；这会直接导致产品的功能需求和要实现的业务目标不是映射关系。 但在交付期间，研发人员必须要将这些需求实现交付，他们实则并不清楚这些功能需求产生的原因是什么、要解决客户的哪些痛点。研发人员往往只是拿到了解决方案，需要把它实现，但没有和业务侧一起去思考解决方案是否正确，能否真正的帮助客户解决问题。而用户影响地图通常是能够连接业务目标和产品功能的一种手段。 我们在每次迭代里加入的假设，也就是功能需求。首先把它先实现，再逐步去验证我们每一个小目标是否已经实现，再看下一个目标要是什么。那影响地图就是在这个过程中帮我们不断地去梳理目标和功能之间的关系。 我们在软件开发中可能存在的一些问题 针对这些问题，我们如何避免？先简单介绍做敏捷转型的常规思路： 先做团队级的敏捷，首先把产品、开发、测试人员，还有一些更后端的人员比如交互运维的同学放在一起，组成一个特训团队做交付。这个团队要包含交付过程中所涉及的所有角色。 接着业务敏捷要打通整个业务环节和研发侧的一个交付。上图中可以看到在敏捷中需求是分层管理的，第一层是业务需求，在这个层级是以用户目标和业务目标作为输入进行规划，同时需要去考虑客户的诉求。业务人员通过获取到的业务需求，进一步的和团队一起将其分解为产品需求。所以业务需求其实是我们真正去发布和运营的单元，它可以被独立发布到我们的生产环境上。我们的产品需求其实就是产品的具体功能，它是我们集成和测试的对象，也就是我们最终去部署到系统上的一个基本单元。产品需求再到了我们的开发团队，映射到迭代计划会上要把它分解为相应的技术任务，包括我们平时所说的比如一些前端的开发、后端的开发、测试都是相应的技术任务。所以业务敏捷要达到的目标是需要去持续顺畅高质量的交付业务价值。 将这几个点串起来，形成金字塔结构。最上层我们会把业务目标放在整个金字塔的塔尖。这个业务目标是通过用户的目标以及北极星指标确立的。确认业务目标后再去梳理相应的业务流程，最后生产。另外产品需求包含了操作流程和业务规则，具需求交付时间、工程时间以及我们的一些质量标准的要求。 谈到用户影响的地图，在敏捷江湖上其实有一个传说，大家都有一个说法叫做敏捷需求的“任督二脉”。用户影响地图其实就是任脉，在黑客马拉松上用过的用户故事地图其实叫督脉。所以说用户影响地图是在用户故事地图之前，先帮我们去梳理出我们要做哪些东西。当我们真正识别出我们要实现的业务活动之后，用户故事地图才去梳理我们整个的业务工作流，以及每个工作流节点下所要包含的具体功能和用户故事。所以说用户影响地图需要解决的问题，我们包括以下这些： 首先是范围蔓延，我们在整张地图上，功能和对应的业务目标是要去有一个映射的。这就避免了一些在我们比如有很多干系人参与的会议上，那大家都有不同想法些立场，会提出很多需求（正确以及错误的需求）。这个时候我们会依据目标去看这些需求是否真的是会影响我们的目标。 这里提到的错误需求，比如是利益相关的人提出的、客户认为产品应该有的、某个产品经理需求分析师认为可以有的....但是这些功能在用户影响地图中匹配不到对应目标的话，就需要降低优先级或弃掉。另外，通常我们去制定解决方案的时候，会考虑较完美的实现，导致解决方案括很多的功能。这个时候关键目标至关重要，会帮助我们梳理筛选、确定优先级。 看一下用户影响到地图概貌 总共分为一个三层的结构： 第一层why，你的业务目标哪个是最重要的，为什么？涉及到的角色有哪些？ 第二层how ，怎样产生影响？影响用户角色什么样的行为? （不需要去列出所有的影响，基于业务目标） 第三层what，最关键的是在梳理需求时不需一次把所有细节想全，这通常团队中经常遇到的问题。 我们用这个例子来看一下 这是一个客服中心的影响地图，业务目标是 3个月内不增加客服人数的前提下能支持1.5倍的用户数。此业务目标设定是符合 smart 原则的，specific非常的具体，miserable 是可以衡量的，action reoriented是面向活动的， real list 也是很实际的。 量化的目标会指引我们接下来的行动，梳理一个业务目标，尽量去量化，比如 ：我们通过打造一条什么样的流水线，能够提高整个部署的效率，时间是原来的 1/2 。这样才是一个能量化的有意义的目标。 回到这幅图， how 层级识别出来的内容，客服角色：想要对它施加的影响，把客户引导到论坛上，帮助客户更容易的跟踪问题，更快速的去定位问题。初级用户：方论坛上找到问题。高级用户：在论坛上回答问题。通过我们这些用户角色，进行活动，完成在不增加客户客服人数的前提下支持更多的用户数量。 最后一个层级，才是我们日常接触比较多的真正的功能的特性和需求，比如引导到客户到论坛上，其实这个产品就需要有一个常见问题的论坛的链接。这个层次需要我们团队进一步地在交付，在每个迭代之前做进一步的梳理，细化成相应的用户故事。 这个是云智慧团队中，自己做的影响地图的范例，可以看下整个的层级结构。序号表示优先级。 那我们用户影响地图可以总结为：
-
iCloud 切换区域，中国区保留 appStore（更新）--自 2018 年 2 月 28 日起，中国区 iCloud 由云上贵州管理 苹果公司发布的公告 https://support.apple.com/zh-cn/HT208352 关键词 关键部分 受影响的 iCloud 账户：国家或地区设置为 "中国 "的 Apple ID。 iCloud 包含的服务照片、邮件、通讯录、日历、提醒事项、备忘、书签、钱包、钥匙串、云备份、云驱动器、应用程序数据 新条款和条件： 同意仅出于本协议允许的目的并在中国法律允许的范围内使用服务。 云桂洲在提供服务时应使用合理的技能并尽职尽责，但在适用法律允许的最大范围内，我们不保证或担保您通过本服务存储或访问的任何内容不会意外损坏、崩溃、丢失或根据本协议的条款被删除，如果发生此类损坏、崩溃、丢失或删除，我们不承担任何责任。您应自行负责维护您的信息和数据的适当备份。 Apple 和云上贵州有权访问您存储在服务中的所有数据，包括有权根据适用法律相互之间共享、交换和披露所有用户数据（包括内容）。 本协议的解释、效力和履行应适用*法律。对于因本协议引起的或与本协议有关的任何争议，云桂洲和您同意提交中国国际经济贸易仲裁委员会（CIETAC）根据提交仲裁时有效的法律在北京进行具有约束力的仲裁。 由云桂洲管理，用户选择： 停用； ID 到地区； 受 iCloud（由云桂洲运营）条款和条件约束 首先，我想说说我对数据安全的看法。 当我在朋友圈发布通知时，有些朋友回复说国外的操作并没有多安全，或者国外的安全只是相对于国外而言的等等。首先，我非常感谢这些朋友，这让我反思什么是数据安全。以下观点均属个人观点： 国外的月亮一定比国内圆？ 这是一个根深蒂固的问题，只要有人说国外的东西比国内好，就会有人嘲笑崇洋媚外。我觉得我们在某些方面应该向国外学习，比如搜索引擎和版权问题。打开百度搜索 "数据安全"，第一行肯定是广告。打开谷歌搜索 "数据安全"，第一条就是 "数据安全_百度百科" .....各种版权问题大家都明白，支持正版，但不仅客户一心想找免费破解，就连作者也往往没有保护自己劳动成果或产品的想法。但从另一个层面来说，国内的发展和安全，甩国外几条街。没有说哪里好，哪里不好，辩证地去学习更好。 国外也有别有用心的数据泄露，谈何安全？ 从加密解密的角度看，自古以来就没有绝对安全的加密，只有相对安全的做法。苹果的棱镜门、微软的 cpu 漏洞，各种参差不齐的被破解案例 ....是的，这的确是一个很好的论据，但凡事都不能只看一面，当年苹果面对FBI破解手机的要求，几经论证，苹果还是拒绝破解。这点拿到国内，只要上面的文件传达下去，还有企业敢说不吗？还敢说不吗？ 关于这次iCloud数据迁移个人看法？ 把数据迁移到贵州的云端，相当于把手机的所有数据都存储在贵州的云端服务器上。也许访问数据的速度会快很多，但我会把我的iCloud区放到美国，因为我不想数据存在云上贵州后经常接到莫名其妙的电话或短信，更不想因为乱用国外服务器而被请去喝茶。iCloud一个ID，即从中国账号转到美国区，主要用于数据存在美国服务器上。appStore一个ID，除了注册一个中国ID外，专门用来下载应用用，因为国外ID不支持酷狗和网易云等应用。麻烦的是，用了新的 appStore ID 后，当前的应用还得重新下载安装，因为旧的应用 ID 与新的应用 ID 不兼容，安装不了。最后，iCloud迁移后，国内用户使用美国服务器，估计要 "扶墙 "了。 专业步骤： 首先，进行appleID设置，这是前提条件，否则无法选择转移区域！ 取消 appleID 的双重认证 取消家庭共享选项 二、窗口下载并安装 icloud 3.0 版
-
vue]讨论元素用户界面的自定义主题颜色
-
[ PyQt 教程 ] PyQt5 基本控件使用：消息弹出、用户输入、文件对话框
-
.NET高级面试指南 Topic XVIII [ 介绍外观模式（Appearance Pattern），该模式提供了一个隐藏系统复杂性的简化界面 ]。- 简化复杂系统：当系统具有复杂的子系统结构时，可以使用外观模式来简化界面。提供统一界面：当客户端需要访问多个子系统时，可以使用外观模式提供统一界面。 外观模式在现代软件开发中得到广泛应用，尤其是在复杂系统中。例如 图形用户界面库：许多图形用户界面库（如 Qt、GTK+ 等）都使用外观模式来隐藏底层的复杂性，并为开发人员提供简单的界面来创建用户界面。 操作系统接口：操作系统中的系统调用和应用程序接口通常也使用外观模式来隐藏底层硬件和系统的复杂性，为应用程序提供访问系统资源的简单接口。企业应用程序：在可能涉及多个子系统的大型企业应用程序中，外观模式可用于封装这些子系统，并为客户端提供统一的使用界面。 网络框架：许多网络框架（如 ASP.NET MVC、Spring MVC 等）也使用外观模式来隐藏底层的复杂性，并为开发人员提供简单的接口来处理 HTTP 请求和响应。 集成开发环境（IDE）：集成开发环境通常包含代码编辑器、编译器、调试器等多种功能。外观模式可用于封装这些功能，并为开发人员提供开发软件的简单界面。 代码示例：