@wulechuan/vue2-ui--transfer-items-among-columns
v1.0.1
Published
此为吴乐川的《任意两列间转移条目之界面部件》。典型的用法是将条目置于左右两列之一,并辅以按钮将条目转移到对列。
Downloads
15
Maintainers
Keywords
Readme
任意两列间转移条目——采用 Vuejs 2.x 技术编写的界面部件
中国人——特别是汉族人,理应坚持广泛、规范地使用汉语。凡非必要之情形不说外国话、不用外国字。此乃天经地义!然则每当必要,亦不排斥采用外国之语言。不妨 博世界之学问,养中国之精神 。
本人亦支持少数民族坚持采用自己民族的传统语言。仍须强调,凡中国人,皆应会用汉语、积极使用汉语,此乃中华各民族之大一统之必由。
NPM 页
@wulechuan/vue2-ui--transfer-items-among-columns
源代码仓库
| 提供仓库服务之组织 | 仓库组织之国别 | 仓库地址 | | ------------- | :----------: | ------- | | 码云 | 中华人民共和国 | https://gitee.com/nanchang-wulechuan/wulechuan-typescript-vue2-ui--transfer-items-among-columns.git | | 阿里云之代码仓库 | 中华人民共和国 | https://code.aliyun.com/wulechuan/wulechuan-typescript-vue2-ui--transfer-items-among-columns.git | | GitHub | 美 | https://github.com/wulechuan/wulechuan-typescript-vue2-ui--transfer-items-among-columns.git |
简介
言简意赅版
本工具集之主旨是提供一种【界面部件】,其外观、功用均类似于“饿了吗”之【穿梭框
】(外国话所谓“Transfer”)。请使用本工具集中名为【现成实用的双列
】的部件。本工具之典型形态如下图所示。
上图亦存放在以下地点:
冗长版
粗略地说,本工具集旨在提供一种【界面部件】(外国话所谓“UX Component”),其外观、功用均类似于“饿了吗”之【穿梭框
】(外国话所谓“Transfer”)。
但本工具提供的界面部件不止一个,而是一组。这些部件全部采用 Vuejs 2.x 技术做成。这些部件或为包含关系,或为平级关系,配合联动,更为灵活。上图中的典型形态即是采用若干部件拼搭而得的。
本工具集中的界面部件具体有:
【
单列
】部件。其组成如下:- 其 主体 为一个竖列,其内罗列若干【条目】。这些【条目】可以“选中”。凡选中者,可经其他部件或其他功能代码“转移”至另一【
单列
】中去。一般的,“选中”的【条目】在视觉上会较其余【条目】“凸显”。 - 主体上方附带了 【条目】筛选之功能区 。
- 主体上方附带了统计摘要之功能区。
- 主体下方附带了说明书之功能区。该功能区内含一枚按钮和一个 说明书面板 。其中的说明书面板由【
单列之说明书
】部件做成。其中的按钮可开关说明书面板。
- 其 主体 为一个竖列,其内罗列若干【条目】。这些【条目】可以“选中”。凡选中者,可经其他部件或其他功能代码“转移”至另一【
【
单列之说明书
】部件。【单列
】部件已采用本部件。一般情形下程序员不必采用本部件(即指【
单列之说明书
】部件)。然而,当界面设计师要求单列之说明书在其应用之其他位置呈现时,程序员可以采用本部件另行构建说明书。
【
条目-默认形态
】部件。此为【单列
】部件中列示的条目之默认形态。既然它是默认形态,程序员不必采用本部件(即指【
条目-默认形态
】部件)。另,【条目】之形态亦可订制。订制形态须脱离于默认形态单独制作,而非在默认形态之基础上修改变化。见本文的《订制【
条目
】部件》。【
两列之间之默认竖栏
】部件。本部件适合置于两个【单列
】部件之间,用于操控两个单列中的各【条目】,令【条目】在列间转移。【
现成实用的双列
】部件。本部件采用【单列
】部件和【两列之间之默认竖栏
】部件组合做成。我们知道,多数情形下,设计师只要求实现条目仅在两列之间资源转移,故本部件直接适用。
参阅下图若干。
《示例1-图2-配文》
上图亦存放在以下地点:
《示例2-图1-edge》
上图亦存放在以下地点:
《示例2-图2-配文》
上图亦存放在以下地点:
术语
术语概述
本文有少数概念较为关键。为减少乃至消除歧义,先为各概念约定术语。部分术语为本人之拙见,未必见于其他文章或材料。
术语表
【
部件
】外国话所谓 component 。其它文章或材料多译为【组件】。但本工具集及相关文档坚持称【部件】。
条目【
在乙列
】与条目【被选中故而凸显
】于典型的“条目在两列之间自由转移”之功能,每当有条目从
甲列
(或称左列
)转移到乙列
(或称右列
)时,通常我们可能采用“选中”、“挑拣”、“挑选”、“选择”等词来描述这一转移动作,及其结果。但考虑到在甲乙两列之任意一列中的条目,在参与转移之前,须先被标记为“处于等待转移之状态”。这一标记动作及其结果也可用“选中”、“挑拣”、“挑选”、“选择”等字眼来表达。于是,歧义出现。为消除上述歧义,本文约定:
- 当表达条目被标记为“稍后可转移至另一列”之状态时,我们说条目【
被选中故而凸显
】; - 当表达条目已转移到乙列时,我们说条目【
在乙列
】。
- 当表达条目被标记为“稍后可转移至另一列”之状态时,我们说条目【
【
界面皿
】Vuejs 的模板系统中有一种名为
slot
的元素,用以容纳外界提供的界面片段。官方的汉语文档中称之为【插槽
】。但本工具集及相关文档坚持称【界面皿
】。【范】
所谓【范】,对应 TypeScript 或 JSDocs 概念中的 type 。一般译为【类型】,但本工具集及相关文档坚持称【范】。例如:
TypeScript
type 范_条目之唯一标识 = number | string; interface 范_基础条目 { 唯一标识: 范_条目之唯一标识; 在界面中的称谓: string; 已禁止选择?: boolean; 数据?: any; }
JSDocs
/** * @typedef {number | string} 范_条目之唯一标识 */ /** * @typedef {object} 范_基础条目 * @property {范_条目之唯一标识} 唯一标识 * @property {string} 在界面中的称谓 * @property {?boolean} 已禁止选择 * @property {?any} 数据 */
用法(针对最终用户而非开发者)
【单列
】
在顶部的文字输入框中输入文字可以筛选条目,不符合筛选条件之条目将暂时隐藏。筛选条目非但有助于操作者搜寻条目,还可防止呈现之条目过多时浏览器卡顿乃至卡死。
另,该输入框可以输入正则表达式以设计复杂的筛选条件。参见本文的《本工具集随附的完整示范》。
单击(或触摸)某条目,即可反复选中或取消选中该条目。事先由程序设定为不允许选中的条目除外。
在点选条目时,按住 Shift 键,则可一次性选中或取消选中位置相邻的一组条目,但不改变其间任何隐藏着的条目之选中状态。
在点选条目时,若同时按住 Shift 键和 Ctrl 键,则可一次性选中或取消选中位置相邻的一组条目,且其间隐藏着的条目也一并选中。
用法(针对开发者)
安装
npm i @wulechuan/vue2-ui--transfer-items-among-columns
编程用法概述
各【部件】之关系
【
现成实用的双列
】包含并使用:【
单列
】。【单列
】包含并单列使用:【
单列之说明书
】。【
主表条目_默认形态
】。
【
两列之间之竖栏_默认形态
】。工具函数
将某列选中的条目迁移至另一列
。
关键数据之【范】
【条目】数据之范
【现成实用的双列
】和【单列
】都会用到这样一种数据:【条目】之列表。其中,【现成实用的双列
】间接采用这类数据。因此,准确地说,仅【单列
】这一部件采用【条目】数据。
在现实应用环境中,【条目】的外观、功能因各应用之功能要求而异,变化多端。因此,外界代码向【单列
】部件提供【条目】列表时,附带的数据自然也各不相同。
为保通用、普适,本工具集仅对【条目】数据之结构仅做最简要求。该最简要求系由一个名为【范_基础条目
】的 TypeScript interface
做成并体现。如下:
type 范_条目之唯一标识 = number | string;
interface 范_基础条目 {
唯一标识: 范_条目之唯一标识;
在界面中的称谓: string;
已禁止选择?: boolean;
已选中?: boolean;
数据?: any;
}
须知,较为实用的情形往往要求外界给出的【实用条目】之范系从上述【范_基础条目】扩展而得,特别是要按需对其上【数据
】这一字段(或者说属性)做详实定义。以下是若干假想的例子:
例 1,中华神兽。
本例中的【实用条目】之【范】故意采用
interface
做成。并借助了extends
保留字。import type 范_基础条目 from '@wulechuan/vue2-ui--transfer-items-among-columns' export interface 范_任意两列间转移条目_实际条目_中华神兽 extends 范_基础条目 { 数据?: { 描述?: string | string[]; 描述内容块已展开故而描述呈现?: boolean; }; }
例 2,中华名将。
本例中的【实用条目】之【范】故意采用
type
做成。并借助了&
运算符。import type 范_基础条目 from '@wulechuan/vue2-ui--transfer-items-among-columns' export type 范_中华名将_实际条目 = 范_基础条目 & { 数据: { 诞年: string; 排序数: number; 朝代或时期: string; }; };
另须知,【条目】之数据并非【条目】之界面部件,尽管二者紧密配合。见本文的《订制【条目
】部件》。
本工具集随附的完整编程示范
文档集/示范应用集/示范应用-1/采用-javascript-与-sass-编写/
文档集/示范应用集/示范应用-1/采用-typescript-与-stylus-编写/
各【部件】之具体编程应用示例
使用【现成实用的双列
】部件
运行状态的截图
《示例3-图1》
上图亦存放在以下地点:
类 HTML 模板的写法示范
<div class="页面 页面--示范页3-遣将"> <Wlc任意两列间转移条目_现成实用的双列 v-model="已出征的将军之列表" :双列全部条目之总列表="可任命的中华名将之列表" 甲列之称谓="未出征的中华名帅名将" 乙列之称谓="已出征的中华名帅名将" 界面措辞_中央竖栏_内建按钮甲="出征" 界面措辞_中央竖栏_内建按钮乙="凯旋" 界面措辞_底部内容栏默认内容_按钮甲="出征" 界面措辞_底部内容栏默认内容_按钮乙="凯旋" :应全面禁止交互="false" :无需底部内容栏="false" :无需中央列之功能="true" :各列均无需底部的说明书功能区="false" > <template v-slot:界面皿-总标题栏> <h3>遣将</h3> </template> </Wlc任意两列间转移条目_现成实用的双列> </div>
功能逻辑的写法示范
采用 TypeScript 语言
import { Vue, Component } from 'vue-property-decorator' import { Wlc任意两列间转移条目_现成实用的双列, } from '@wulechuan/vue2-ui--transfer-items-among-columns' import type { 范_条目之唯一标识之列表, 范_基础条目, } from '@wulechuan/vue2-ui--transfer-items-among-columns' type 范_中华名将_实际条目 = 范_基础条目 & { 数据: { 诞年: string; 排序数: number; 朝代或时期: string; }; }; const 可任命的中华名将之列表: Array<范_中华名将_实际条目> = [ { 姓名: '妇好', 朝代或时期: '商', 诞年排序数: -1200 }, { 姓名: '霍去病', 朝代或时期: '西汉', 诞年: -140 }, { 姓名: '赵云', 朝代或时期: '东汉(三国)', 诞年排序数: 190 }, { 姓名: '秦琼', 朝代或时期: '隋末唐初', 诞年排序数: 600 }, { 姓名: '王忠嗣', 朝代或时期: '唐', 诞年: 705 }, { 姓名: '杨业', 朝代或时期: '北宋', 诞年排序数: 930 }, { 姓名: '岳飞', 朝代或时期: '南宋', 诞年: 1103 }, { 姓名: '辛弃疾', 朝代或时期: '南宋', 诞年: 1140 }, { 姓名: '袁崇焕', 朝代或时期: '明末', 诞年: 1584 }, { 姓名: '郑成功', 朝代或时期: '明末清初', 诞年: 1624 }, { 姓名: '戚继光', 朝代或时期: '明', 诞年: 1528 }, { 姓名: '左宗棠', 朝代或时期: '清末', 诞年: 1812 }, { 姓名: '张自忠', 朝代或时期: '当代', 诞年: 1891 }, { 姓名: '刘bó承', 朝代或时期: '当代', 诞年: 1892 }, // 迁就【码云】的文本审核机器。 { 姓名: '彭dé怀', 朝代或时期: '当代', 诞年: 1898 }, // 迁就【码云】的文本审核机器。 ].map(某位将军的基本配置 => { const { 姓名, 诞年, 诞年排序数, 朝代或时期, } = 某位将军的基本配置 let 排序数: number let 诞年_采纳值: string if (typeof 诞年排序数 === 'number') { 排序数 = 诞年排序数 } else if (typeof 诞年 === 'number') { 排序数 = 诞年 } else { console.error('某位将军之配置未指明排序数。', { ...某位将军的基本配置 }) 排序数 = 2022 } if (typeof 诞年 === 'number') { 诞年_采纳值 = `${诞年}` } else { 诞年_采纳值 = '?' } const 唯一标识 = 姓名 const 在界面中的称谓 = `〔${朝代或时期}〕${姓名}。${ 诞年_采纳值 === '?' ? `诞年不详,约 ${排序数} 年。` : `诞于 ${诞年_采纳值} 年。` }` const 某名将之条目: 范_中华名将_实际条目 = { 唯一标识, 在界面中的称谓, 已禁止选择: false, 数据: { 排序数, 诞年: 诞年_采纳值, 朝代或时期, }, } return 某名将之条目 }).sort((甲, 乙) => 甲.数据.排序数 - 乙.数据.排序数) @Component({ components: { Wlc任意两列间转移条目_现成实用的双列, }, }) export default class Page示范页3_遣将 extends Vue { private 已出征的将军之列表: 范_条目之唯一标识之列表 = [ '郑成功', '岳飞' ] private 可任命的中华名将之列表: Array<范_中华名将_实际条目> = 可任命的中华名将之列表 }
采用 JavaScript 语言
import { Wlc任意两列间转移条目_现成实用的双列, } from '@wulechuan/vue2-ui--transfer-items-among-columns' /** @typedef {import('@wulechuan/vue2-ui--transfer-items-among-columns').范_条目之唯一标识之列表} 范_条目之唯一标识之列表 */ /** @typedef {import('@wulechuan/vue2-ui--transfer-items-among-columns').范_基础条目} 范_基础条目 */ /** * @typedef {object} 范_中华名将_实际条目 * * @property {范_基础条目['唯一标识']} 唯一标识 * @property {范_基础条目['在界面中的称谓']} 在界面中的称谓 * @property {范_基础条目['已禁止选择']} 已禁止选择 * @property {范_基础条目['已选中']} 已选中 * @property {object} 数据 * @property {string} 数据.诞年 * @property {number} 数据.排序数 * @property {string} 数据.朝代或时期 */ /** @type {Array<范_中华名将_实际条目>} */ const 可任命的中华名将之列表 = [ { 姓名: '妇好', 朝代或时期: '商', 诞年排序数: -1200 }, { 姓名: '霍去病', 朝代或时期: '西汉', 诞年: -140 }, { 姓名: '赵云', 朝代或时期: '东汉(三国)', 诞年排序数: 190 }, { 姓名: '秦琼', 朝代或时期: '隋末唐初', 诞年排序数: 600 }, { 姓名: '王忠嗣', 朝代或时期: '唐', 诞年: 705 }, { 姓名: '杨业', 朝代或时期: '北宋', 诞年排序数: 930 }, { 姓名: '岳飞', 朝代或时期: '南宋', 诞年: 1103 }, { 姓名: '辛弃疾', 朝代或时期: '南宋', 诞年: 1140 }, { 姓名: '袁崇焕', 朝代或时期: '明末', 诞年: 1584 }, { 姓名: '郑成功', 朝代或时期: '明末清初', 诞年: 1624 }, { 姓名: '戚继光', 朝代或时期: '明', 诞年: 1528 }, { 姓名: '左宗棠', 朝代或时期: '清末', 诞年: 1812 }, { 姓名: '张自忠', 朝代或时期: '当代', 诞年: 1891 }, { 姓名: '刘bó承', 朝代或时期: '当代', 诞年: 1892 }, // 迁就【码云】的文本审核机器。 { 姓名: '彭dé怀', 朝代或时期: '当代', 诞年: 1898 }, // 迁就【码云】的文本审核机器。 ].map(某位将军的基本配置 => { const { 姓名, 诞年, 诞年排序数, 朝代或时期, } = 某位将军的基本配置 /** @type {number} */ let 排序数 /** @type {string} */ let 诞年_采纳值 if (typeof 诞年排序数 === 'number') { 排序数 = 诞年排序数 } else if (typeof 诞年 === 'number') { 排序数 = 诞年 } else { console.error('某位将军之配置未指明排序数。', { ...某位将军的基本配置 }) 排序数 = 2022 } if (typeof 诞年 === 'number') { 诞年_采纳值 = `${诞年}` } else { 诞年_采纳值 = '?' } const 唯一标识 = 姓名 const 在界面中的称谓 = `〔${朝代或时期}〕${姓名}。${ 诞年_采纳值 === '?' ? `诞年不详,约 ${排序数} 年。` : `诞于 ${诞年_采纳值} 年。` }` /** @type {范_中华名将_实际条目} */ const 某名将之条目 = { 唯一标识, 在界面中的称谓, 已禁止选择: false, 数据: { 排序数, 诞年: 诞年_采纳值, 朝代或时期, }, } return 某名将之条目 }).sort((甲, 乙) => 甲.数据.排序数 - 乙.数据.排序数) export default { components: { Wlc任意两列间转移条目_现成实用的双列, }, data () { return { /** @type {范_条目之唯一标识之列表} */ 已出征的将军之列表: [ '郑成功', '岳飞' ], /** @type {Array<范_中华名将_实际条目>} */ 可任命的中华名将之列表, } }, activated () { document.title = '两列间转移条目·例3:遣将(TypeScript)' }, }
使用【
现成实用的双列
】部件时样式的写法你的 Vuejs 项目中的样式不妨暂分两类,或者说两大部分:
为了采用本工具集自带的样式而做的配置或准备工作。具体而言,要在你的 Vuejs 项目的
main.ts
或main.js
中设法采用本工具集自带的标准样式(或者说默认样式、基础样式)。设计其它样式。
为令范例完整,本小节对上述两部分内容均有阐述,而不是仅仅阐述第一部分。若仅关心如何正确采用本工具集所提供的标准样式,则仅阅读第一部分即可。
在你的 Vuejs 项目的
main.ts
或main.js
中采用本工具集自带的标准样式见本文的《本工具集内建的层叠样式表的用法》部分。尤其是其中《使用本工具集内建的层叠样式表的编码步骤》一节。
设计其它样式
此例中,所谓其它样式即是本示范页专属的样式。
采用 Stylus 语言
.页面--示范页3-遣将 { height 100% display flex flex-direction column justify-content center align-items center h3 { font-size 2rem text-align center margin 0 padding 1rem } }
采用 Scss 语言
.页面--示范页3-遣将 { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; h3 { font-size: 2rem; text-align: center; margin: 0; padding: 1rem; } }
将【单列
】与【两列之间之默认竖栏
】部件灵活组合
类 HTML 模板的写法示范
<template v-for="(某列, 某列之列表编号) in 各列数据之表"> <Wlc任意两列间转移条目_两列之间之竖栏_默认形态 v-if="某列之列表编号 > 0" :key="`操控列-${某列之列表编号}-${某列之列表编号 + 1}`" :甲列当下选中的条目之总数="各列数据之表[某列之列表编号 - 1].当下选中故而凸显的所有条目之唯一标识之列表.length" :乙列当下选中的条目之总数="各列数据之表[某列之列表编号 - 0].当下选中故而凸显的所有条目之唯一标识之列表.length" @已点击按钮甲="每当点击某两列之间之某按钮后(某列之列表编号 - 1, '左至右')" @已点击按钮乙="每当点击某两列之间之某按钮后(某列之列表编号 - 1, '反过来')" ></Wlc任意两列间转移条目_两列之间之竖栏_默认形态> <Wlc任意两列间转移条目_单列 :key="`列-${某列之列表编号 + 1}`" v-model="某列.当下选中故而凸显的所有条目之唯一标识之列表" v-bind="某列.可成批自动绑定的属性" ></Wlc任意两列间转移条目_单列> </template>
功能逻辑的写法示范
采用 TypeScript 语言
import { Vue, Component } from 'vue-property-decorator' import { Wlc任意两列间转移条目_单列, Wlc任意两列间转移条目_两列之间之竖栏_默认形态, Wlc任意两列间转移条目_专用工具集, } from '@wulechuan/vue2-ui--transfer-items-among-columns' import type { 范_条目之唯一标识之列表, 范_基础条目, } from '@wulechuan/vue2-ui--transfer-items-among-columns' const { 将某列选中的条目迁移至另一列: Wlc任意两列间转移条目_专用工具_将某列选中的条目迁移至另一列, } = Wlc任意两列间转移条目_专用工具集 import Wlc任意两列间转移条目_主表条目之订制形态 from '@/视图/部件/wlc-任意两列间转移条目-主列之条目-订制形态.vue' import { 一切可能的条目之列表, } from '../../数据/示范页之数据库' import type { 范_任意两列间转移条目_实际条目, } from '../../数据/示范页之数据库' type 范_任意两列间转移条目_实际完整形式之条目 = 范_基础条目 & 范_任意两列间转移条目_实际条目; type 范_任意两列间转移条目_实际完整形式之条目之列表 = Array<范_任意两列间转移条目_实际完整形式之条目>; type 范_多列间转移条目功能_单列数据 = Wlc任意两列间转移条目_单列.泛范_实例可绑定之属性集<范_任意两列间转移条目_实际完整形式之条目> & { 当下选中故而凸显的所有条目之唯一标识之列表: 范_条目之唯一标识之列表; 可成批自动绑定的属性: { 所有条目之列表: 范_任意两列间转移条目_实际完整形式之条目[]; }; }; const 一切可能的实用完整形式之条目之列表: 范_任意两列间转移条目_实际完整形式之条目之列表 = 一切可能的条目之列表.map((原始条目) => { const 完整形式之条目: 范_任意两列间转移条目_实际完整形式之条目 = { ...原始条目, 已选中: false, // 确保该布尔值存在。 已禁止选择: !!原始条目.已禁止选择, // 确保该布尔值存在。 } if (!完整形式之条目.数据) { 完整形式之条目.数据 = {} } 完整形式之条目.数据.描述内容块已展开故而描述呈现 = false return 完整形式之条目 }) const 天干表: string[] = '甲乙丙丁戊己庚辛壬癸'.split('') @Component({ components: { Wlc任意两列间转移条目_单列, Wlc任意两列间转移条目_两列之间之竖栏_默认形态, }, }) export default class Page示范页2_多于2列互通之形式 extends Vue { private 各列数据之表: Array<范_多列间转移条目功能_单列数据> = [] public 每当点击某两列之间之某按钮后 (甲列之列表编号: number, 按钮之代号: '左至右' | '反过来'): void { let 起列之列表编号: number let 迄列之列表编号: number if (按钮之代号 === '左至右') { 起列之列表编号 = 甲列之列表编号 迄列之列表编号 = 甲列之列表编号 + 1 } else{ 起列之列表编号 = 甲列之列表编号 + 1 迄列之列表编号 = 甲列之列表编号 } this.将某列选中之条目迁移至另一列(起列之列表编号, 迄列之列表编号) } private 将某列选中之条目迁移至另一列 (起列之列表编号: number, 迄列之列表编号: number): void { const 起列之数据集 = this.各列数据之表[起列之列表编号] const 迄列之数据集 = this.各列数据之表[迄列之列表编号] const 迁移结果 = Wlc任意两列间转移条目_专用工具_将某列选中的条目迁移至另一列( 起列之数据集.可成批自动绑定的属性.所有条目之列表, 迄列之数据集.可成批自动绑定的属性.所有条目之列表 ) if (!迁移结果) { return } const { 迁移后起列所有条目之列表, 迁移后迄列所有条目之列表, } = 迁移结果 起列之数据集.可成批自动绑定的属性.所有条目之列表 = 迁移后起列所有条目之列表 迄列之数据集.可成批自动绑定的属性.所有条目之列表 = 迁移后迄列所有条目之列表 } private 构建各列之数据 ({ 总计列数 }: { 总计列数: number; }): void { const 用于规定列数的临时数组: Array<boolean> = new Array(总计列数).fill(false) this.各列数据之表 = 用于规定列数的临时数组.map((无用的值, 列编号) => { const 本列之天干: string = 天干表[列编号] const 故意要求该列之条目总是排序: boolean = [ 2, 3, 4 ].includes(列编号) const 故意要求该列之条目之形态为自定义形态: boolean = [ 0, 2, 3 ].includes(列编号) const 某单列之数据: 范_多列间转移条目功能_单列数据 = { // 用于 v-model 双向绑定。 当下选中故而凸显的所有条目之唯一标识之列表: [], // 用于 props 单向绑定。 可成批自动绑定的属性: { 本列之称谓: 本列之天干, 本列之特征样式类名之配置: 本列之天干, 所有条目之列表: 列编号 > 0 ? [] : 一切可能的实用完整形式之条目之列表, 新增条目之插入规则: !故意要求该列之条目总是排序 ? null : '总是参与排序', 条目排序之函数: !故意要求该列之条目总是排序 ? null : (甲, 乙) => 甲.在界面中的称谓.length - 乙.在界面中的称谓.length, // 下方 “ as Vue.VueConstructor ” 不能省略。否则报错。 vue部件之定义_订制的主表条目: !故意要求该列之条目之形态为自定义形态 ? null : Wlc任意两列间转移条目_主表条目之订制形态 as Vue.VueConstructor, }, } return 某单列之数据 }) } private beforeMount (): void { this.构建各列之数据({ 总计列数: 5 }) this.$nextTick().then(() => { this.各列数据之表[0].当下选中故而凸显的所有条目之唯一标识之列表 = [ '建马', '騊駼', '比翼鸟', '青龙', '白虎', '朱雀' ] }) } }
采用 JavaScript 语言
从略。
将【
单列
】与【两列之间之默认竖栏
】部件灵活组合时样式的写法你的 Vuejs 项目中的样式不妨暂分两类,或者说两大部分:
为了采用本工具集自带的样式而做的配置或准备工作。
见本文的《本工具集内建的层叠样式表的用法》部分。尤其是其中《使用本工具集内建的层叠样式表的编码步骤》一节。
设计其它样式。
此例中,所谓其它样式即是本示范页专属的样式。
采用 Stylus 语言
/* autoprefixer: off */ .页面--示范页2-多于-2-列互通之形式 { flex 1 1 auto box-sizing border-box height 100% display flex flex-direction row flex-wrap nowrap padding 2em overflow auto margin 0 2em 2em .吴乐川-任意两列间转移条目-单列 { flex 0 0 24em &.甲 .列首 { background-color: #fdd; } &.乙 .列首 { background-color: #ffd; } &.丙 .列首 { background-color: #dfd; } &.丁 .列首 { background-color: #dff; } &.戊 .列首 { background-color: #ddf; } } & { // 定义各列通用的默认配色。又,后续另有几行代码令【甲】列具备独特的配色。 {wlc_transfer_items_among_columns__css_var_name__element_highlighting_color_static} #008b8b {wlc_transfer_items_among_columns__css_var_name__element_highlighting_color_hover} #1eb8b8 {wlc_transfer_items_among_columns__css_var_name__element_highlighting_but_disabled_color_static} #40c9c9 {wlc_transfer_items_among_columns__css_var_name__element_non_highlighting_color_hover} #baf2f2 {wlc_transfer_items_among_columns__css_var_name__focusing_element_outline_color} 'var(%s)' % unquote(wlc_transfer_items_among_columns__css_var_name__element_highlighting_color_static) } .吴乐川-任意两列间转移条目-单列.甲, // 故意另【甲】列之配色与众不同。 .操控列-1-2 .迁移条目之按钮--乙列至甲列 { // 从【乙】列转移至【甲】列的按钮,也应采用独特的配色。 {wlc_transfer_items_among_columns__css_var_name__element_highlighting_color_static} #f66 {wlc_transfer_items_among_columns__css_var_name__element_highlighting_color_hover} #f88 {wlc_transfer_items_among_columns__css_var_name__element_highlighting_but_disabled_color_static} #ecc {wlc_transfer_items_among_columns__css_var_name__element_non_highlighting_color_hover} #fdd {wlc_transfer_items_among_columns__css_var_name__focusing_element_outline_color} 'var(%s)' % unquote(wlc_transfer_items_among_columns__css_var_name__element_highlighting_color_static) } }
应用编程接口(外国话所谓 API)
【单列
】部件之编程接口
【条目】的排序
条目的排序由 新增条目之插入规则
和 条目排序之函数
两个参数配合控制。
新增条目之插入规则
可取三种值:'总是参与排序'
、'总是在队尾追加'
和'总是在队首插入'
。其中:总是参与排序
为首要默认值。当【排序函数】确已给出时,若并未给出【插入规则】,则【插入规则】采纳该值。总是在队尾追加
为次要默认值。当【排序函数】并未给出时,若亦未给出【插入规则】,则【插入规则】采纳该值。
条目排序之函数
可以省略。如果给出,则应给出一个函数,接口为:(甲: 范_基础条目, 乙: 范_基础条目) => number
【条目】在两列间转移
当采用【单列
】部件以自行拼装功能模块时,难免要编写这样的工具函数(不妨暂称【甲】):【甲】接受两个【单列
】(暂称【起】、【迄】两列)的旧有【条目】数据列表,并将【起】列中凡已【被选中故而凸显】之【条目】转移到【迄】列中。由此得到两个新的【条目】数据列表。又,【甲】返回这两个新的【条目】列表,供【起】、【迄】两列采用。
又,【甲】不应作为【单列
】的方法函数。换言之,【甲】既不属于【起】,也不属于【迄】。
本工具集随附了这样的工具函数,名为 将某列选中的条目迁移至另一列
。其接口描述如下:
declare function 将某列选中的条目迁移至另一列 (
迁移前起列所有条目之列表?: 范_基础条目之列表,
迁移前迄列所有条目之列表?: 范_基础条目之列表
): null | {
迁移后起列所有条目之列表: 范_基础条目之列表;
迁移后迄列所有条目之列表: 范_基础条目之列表;
}
不难料想,本工具集中的【
现成实用的双列
】这一部件,在采用【单列
】部件的同时,也用到了将某列选中的条目迁移至另一列
这一工具函数。
【单列
】的 Vuejs 模板的完整写法
下方用于描述接口之代码采用 Vuejs 的默认模板语言撰写。
<Wlc任意两列间转移条目_单列
v-model="当下选中故而凸显的所有条目之唯一标识之列表"
:应全面禁止交互="false"
:本列之称谓="'无名列'"
:本列之特征样式类名之配置="null"
:允许列示的条目数之上限="500"
:所有条目之列表="条目列表"
:新增条目之插入规则="'总是参与排序'"
:条目排序之函数="null"
:本列初始的用以过滤条目之配置="null"
:当下另有他列优先于本列采取视觉强调引导用户操作之="false"
:无需底部的说明书功能区="false"
:vue部件之定义_订制的主表条目="Wlc任意两列间转移条目_主列之条目_默认形态"
:应在控制台输出详尽的调试信息="false"
@选中的条目已变动="选中的条目已变动($event)"
@内部某元素之视觉强调之状态已变动="内部某元素之视觉强调之状态已变动($event)"
>
<template v-slot:界面皿-标题栏>
<h3>无名列</h3>
</template>
</Wlc任意两列间转移条目_单列>
【单列
】的 Vuejs 模板的【界面皿】
该【部件】仅配备一个【界面皿】,名为 界面皿-标题栏
。
【单列
】的 TypeScript 接口
下方用于描述接口之代码采用 TypeScript 语言撰写。且仅给出公开的内容或条目。完整的接口定义见 源代码/发布的源代码/typescript/index.d.ts
。
/**
* - `总是参与排序` 为首要默认值。当【排序函数】确已给出时,若并未给出【插入规则】,则【插入规则】采纳该值。
* - `总是在队尾追加` 为次要默认值。当【排序函数】并未给出时,若亦未给出【插入规则】,则【插入规则】采纳该值。
*/
type 范_各列新增条目之插入规则 = (
| '总是参与排序'
| '总是在队尾追加'
| '总是在队首插入'
);
class Wlc任意两列间转移条目_单列 extends Vue {
// -------- 自动接驳数据( 即视为 v-model 的数据 ) ----
public readonly 当下选中故而凸显的所有条目之唯一标识之列表?: 范_条目之唯一标识之列表
// -------- 外来数据( 即外国话所谓 Props ) -----------
public readonly 应全面禁止交互?: boolean
public readonly 本列之称谓?: string
public readonly 本列之特征样式类名之配置?: 泛范_界面元素之样式类名之配置
public readonly 允许列示的条目数之上限?: number | string
public readonly 所有条目之列表?: 范_内用格式之条目之列表
public readonly 新增条目之插入规则?: 范_各列新增条目之插入规则
public readonly 条目排序之函数?: 范_各列条目排序之函数
public readonly 本列初始的用以过滤条目之配置?: string | RegExp
public readonly 当下另有他列优先于本列采取视觉强调引导用户操作之?: boolean
public readonly 无需底部的说明书功能区?: boolean
public readonly vue部件之定义_订制的主表条目?: null | 范_Vue动态部件之Is属性可接受的数据_但不可为部件名称字符串
public readonly 应在控制台输出详尽的调试信息?: boolean
}
namespace Wlc任意两列间转移条目_单列 {
type 范_事件名称 = (
| '选中的条目已变动'
| '内部某元素之视觉强调之状态已变动'
);
}
【单列之说明书
】部件之编程接口
【单列
】部件已采用本部件。
一般情形下程序员不必采用本部件(即指【
单列之说明书
】部件)。然而,当界面设计师要求单列之说明书在其应用之其他位置呈现时,程序员可以采用本部件另行构建说明书。
【单列之说明书
】的 Vuejs 模板的完整写法
下方用于描述接口之代码采用 Vuejs 的默认模板语言撰写。
<Wlc任意两列间转移条目_单列之说明书
v-model="一个布尔值"
:采用的标准配色方案之名称="'默认'"
:采用的标准配色方案之磨砂玻璃效果之名称="'默认'"
></Wlc任意两列间转移条目_单列之说明书>
【单列之说明书
】的 Vuejs 模板的【界面皿】
该【部件】无任何【界面皿】。
【单列之说明书
】的 TypeScript 接口
下方用于描述接口之代码采用 TypeScript 语言撰写。且仅给出公开的内容或条目。完整的接口定义见 源代码/发布的源代码/typescript/index.d.ts
。
type 范_信息文本块_配色方案之名称 = (
| ''
| '默认'
| '亮'
| '暗'
);
type 范_信息文本块_标准配色方案之磨砂玻璃效果之名称 = (
| ''
| '默认'
| '弱'
| '无'
);
class Wlc任意两列间转移条目_单列之说明书 extends Vue {
// -------- 自动接驳数据( 即视为 v-model 的数据 ) ----
public readonly 当下正呈现着?: boolean
// -------- 外来数据( 即外国话所谓 Props ) -----------
public readonly 采用的标准配色方案之名称?: 范_信息文本块_配色方案之名称
public readonly 采用的标准配色方案之磨砂玻璃效果之名称?: 范_信息文本块_标准配色方案之磨砂玻璃效果之名称
}
【两列之间之默认竖栏
】部件之编程接口
【两列之间之默认竖栏
】的 Vuejs 模板的完整写法
<Wlc任意两列间转移条目_两列之间之竖栏_默认形态
:应全面禁止交互="false"
:界面措辞_按钮甲="'▶'"
:界面措辞_按钮乙="'◀'"
:甲列当下选中的条目之总数="一个数字值"
:乙列当下选中的条目之总数="一个数字值"
@已点击按钮甲="已点击按钮甲($event)"
@已点击按钮乙="已点击按钮乙($event)"
>
<template v-slot:界面皿-增补功能之功能区>
<button>额外的按钮</button>
</template>
</Wlc任意两列间转移条目_两列之间之竖栏_默认形态>
【两列之间之默认竖栏
】的 Vuejs 模板的【界面皿】
该【部件】仅配备一个【界面皿】,名为 界面皿-增补功能之功能区
。本工具集随附的示范项目中,《示范2:多于两列互通之形式》一页中的 3 个“戊”按钮即是在此种【界面皿】中添加额外功能的例子。
【两列之间之默认竖栏
】的 TypeScript 接口
下方用于描述接口之代码采用 TypeScript 语言撰写。且仅给出公开的内容或条目。完整的接口定义见 源代码/发布的源代码/typescript/index.d.ts
。
class Wlc任意两列间转移条目_两列之间之竖栏_默认形态 extends Vue {
// -------- 外来数据( 即外国话所谓 Props ) -----------
public readonly 应全面禁止交互?: boolean
public readonly 界面措辞_按钮甲?: string
public readonly 界面措辞_按钮乙?: string
public readonly 甲列当下选中的条目之总数?: number
public readonly 乙列当下选中的条目之总数?: number
}
namespace Wlc任意两列间转移条目_两列之间之竖栏_默认形态 {
type 范_事件名称 = (
| '已点击按钮甲'
| '已点击按钮乙'
);
}
【条目-默认形态
】部件之编程接口
【条目-默认形态
】的 Vuejs 模板的完整写法
<Wlc任意两列间转移条目_主表条目_默认形态
:条目="一个对象"
:所属列已禁止交互="false"
></Wlc任意两列间转移条目_主表条目_默认形态>
【条目-默认形态
】的 Vuejs 模板的【界面皿】
该【部件】无任何【界面皿】。
【条目-默认形态
】的 TypeScript 接口
下方用于描述接口之代码采用 TypeScript 语言撰写。且仅给出公开的内容或条目。完整的接口定义见 源代码/发布的源代码/typescript/index.d.ts
。
class Wlc任意两列间转移条目_主表条目_默认形态 extends Vue {
// -------- 外来数据( 即外国话所谓 Props ) -----------
public readonly 条目?: 范_内用格式之条目
public readonly 所属列已禁止交互?: boolean
}
另,参阅本文的《订制【条目
】部件》。
【现成实用的双列
】部件之编程接口
【现成实用的双列
】的 Vuejs 模板的完整写法
<Wlc任意两列间转移条目_现成实用的双列
:应全面禁止交互="false"
:无需总标题栏="false"
:无需中央列="false"
:无需底部内容栏="false"
:各列均无需底部的说明书功能区="false"
:应在控制台输出详尽的调试信息="false"
:甲列之称谓="'未选择的条目'"
:乙列之称谓="'已选择的条目'"
:甲列之特征样式类名之配置="null"
:乙列之特征样式类名之配置="null"
:界面措辞_中央竖栏_内建按钮甲="null (等同于 '▶')"
:界面措辞_中央竖栏_内建按钮乙="null (等同于 '◀')"
:界面措辞_底部内容栏默认内容_按钮甲="'▶'"
:界面措辞_底部内容栏默认内容_按钮乙="'◀'"
:双列全部条目之总列表="双列全部条目之总列表"
:单列允许列示的条目数之上限="null (等同于 500)"
:各列新增条目之插入规则="null (等同于 '总是参与排序')"
:各列条目排序之函数="null"
:甲列初始选中故而凸显的条目之唯一标识之列表="一个列表"
:乙列初始选中故而凸显的条目之唯一标识之列表="一个列表"
:甲列初始的用以过滤条目之配置="null"
:乙列初始的用以过滤条目之配置="null"
:vue部件之定义_订制的主表条目="null (等同于 <Wlc任意两列间转移条目_主表条目_默认形态 /> )"
@条目之分布已变动="每当条目之分布变动后($event)"
@已出错="每当出错后($event)"
>
<template v-slot:界面皿-总标题栏>……</template>
<template v-slot:界面皿-中央列>
<template v-slot:界面皿-中央列之增补功能之功能区>……</tempalte>
</template>
<template v-slot:界面皿-底部内容栏>……</template>
</Wlc任意两列间转移条目_现成实用的双列>
【现成实用的双列
】的 Vuejs 模板的【界面皿】
该【部件】有 4 个【界面皿】:
界面皿-总标题栏
、界面皿-中央列
、界面皿-中央列之增补功能之功能区
界面皿-底部内容栏
。
其中,界面皿-中央列之增补功能之功能区
位于 界面皿-中央列
内部。即是说,如果自定义了 界面皿-中央列
之内容,则 界面皿-中央列之增补功能之功能区
不复存在。
【现成实用的双列
】的 TypeSript 接口
下方用于描述接口之代码采用 TypeScript 语言撰写。且仅给出公开的内容或条目。完整的接口定义见 源代码/发布的源代码/typescript/index.d.ts
。
class Wlc任意两列间转移条目_现成实用的双列 extends Vue {
// -------- 自动接驳数据( 即视为 v-model 的数据 ) ----
public readonly 乙列所有条目之唯一标识之列表?: 范_条目之唯一标识之列表
// -------- 外来数据( 即外国话所谓 Props ) -----------
public readonly 应全面禁止交互?: boolean
public readonly 无需总标题栏?: boolean
public readonly 无需中央列?: boolean
public readonly 无需底部内容栏?: boolean
public readonly 甲列之称谓?: string
public readonly 乙列之称谓?: string
public readonly 甲列之特征样式类名之配置?: 泛范_界面元素之样式类名之配置
public readonly 乙列之特征样式类名之配置?: 泛范_界面元素之样式类名之配置
public readonly 界面措辞_中央竖栏_内建按钮甲?: string
public readonly 界面措辞_中央竖栏_内建按钮乙?: string
public readonly 界面措辞_底部内容栏默认内容_按钮甲?: string
public readonly 界面措辞_底部内容栏默认内容_按钮乙?: string
public readonly 各列均无需底部的说明书功能区?: boolean
public readonly 双列全部条目之总列表?: 范_基础条目之列表
public readonly 单列允许列示的条目数之上限?: number
public readonly 各列新增条目之插入规则?: 范_各列新增条目之插入规则
public readonly 各列条目排序之函数?: 范_各列条目排序之函数
public readonly 甲列初始选中故而凸显的条目之唯一标识之列表?: 范_条目之唯一标识之列表
public readonly 乙列初始选中故而凸显的条目之唯一标识之列表?: 范_条目之唯一标识之列表
public readonly 甲列初始的用以过滤条目之配置?: string | RegExp
public readonly 乙列初始的用以过滤条目之配置?: string | RegExp
public readonly vue部件之定义_订制的主表条目?: null | 范_Vue动态部件之Is属性可接受的数据_但不可为部件名称字符串
public readonly 应在控制台输出详尽的调试信息?: boolean
// -------- 公开行为 --------------------------------
public 将甲列选中的条目迁移至乙列 (调用者?: Vue): void
public 将乙列选中的条目迁移至甲列 (调用者?: Vue): void
}
namespace Wlc任意两列间转移条目_现成实用的双列 {
type 范_事件名称 = (
| '条目之分布已变动'
| '已出错'
);
}
订制【条目
】部件
【条目】之形态亦可订制。订制形态须脱离于默认形态单独制作,而非在默认形态之基础上修改变化。
下文是较为复杂的【条目】的设计示范。
订制【
条目
】的 Vuejs 模板<div class="条目根-在该范例中的订制形态" :class="{ '描述内容块已展开': 条目_最终采纳值.数据.描述内容块已展开故而描述呈现 }"> <div class="吴乐川-任意两列间转移条目-条目之视觉根"> <span class="输入项 输入项-勾选项" :class="输入项之样式类名配置"> <span class="勾选项视觉假体"></span> <input type="checkbox" :checked="条目_最终采纳值.已选中" @click.prevent> </span> <span class="输入项配文 输入项配文-勾选项">{{ 条目_最终采纳值.在界面中的称谓 }}</span> <span class="位于中央的宽度自调节之占位器"></span> <button class="详情内容块开关按钮" @click.stop="条目_最终采纳值.数据.描述内容块已展开故而描述呈现 = !条目_最终采纳值.数据.描述内容块已展开故而描述呈现">解释</button> </div> <div v-if="条目_最终采纳值.数据.描述内容块已展开故而描述呈现" class="内容块-详情" @click.stop> <article> <p v-for="(段落文本, 段落文本之列表编号) in 条目描述文本之诸段落之列表" :key="段落文本之列表编号" >{{ 段落文本 }}</p> </article> <button v-if="条目描述文本之诸段落总字数较多" class="位于底部的收起内容块之按钮" @click.stop="条目_最终采纳值.数据.描述内容块已展开故而描述呈现 = false" >收起【{{ 条目_最终采纳值.在界面中的称谓 }}】的解释</button> </div> </div>
订制【
条目
】的功能逻辑的写法示范TypeScript
import { Vue, Component, Prop } from 'vue-property-decorator' import type Wlc任意两列间转移条目 from '@wulechuan/vue2-ui--transfer-items-among-columns' import type { 范_任意两列间转移条目_实际条目, } from '../../数据/示范页之数据库' type 范_界面元素之样式类名之配置 = Wlc任意两列间转移条目.泛范_界面元素之样式类名之配置<string>; @Component({}) export default class Wlc任意两列间转移条目_主列之条目_订制形态 extends Vue { @Prop() public 条目?: 范_任意两列间转移条目_实际条目 @Prop() public 所属列已禁止交互?: boolean public get 条目_最终采纳值 (): 范_任意两列间转移条目_实际条目 { const 外界给出的值 = this.条目 if (!外界给出的值) return this.构造临时的条目以滥竽充数() return 外界给出的值 } public get 输入项之样式类名配置 (): 范_界面元素之样式类名之配置 { const 条目 = this.条目_最终采纳值 return { '已勾选': 条目.已选中, '已禁止交互': 条目.已禁止选择 || !!this.所属列已禁止交互, '未选中': !条目.已选中 } } public get 条目描述文本之诸段落之列表 (): string[] { let 诸段落之列表: string[] = [] const 原始数据 = this.条目_最终采纳值.数据 if (原始数据) { const 原始值 = 原始数据.描述 if (Array.isArray(原始值)) { 诸段落之列表 = 原始值 } else if (typeof 原始值 === 'string') { 诸段落之列表 = [ 原始值 ] } 诸段落之列表 = 诸段落之列表 .filter(某段落文本 => typeof 某段落文本 === 'string' && !!某段落文本.trim()) .map(某段落文本 => 某段落文本.trim()) } if (诸段落之列表.length === 0) { 诸段落之列表 = [ '不详。' ] } return 诸段落之列表 } public get 条目描述文本之诸段落总字数较多 (): boolean { const 总字符数: number = this.条目描述文本之诸段落之列表.reduce((字数, 某段落文本) => { return 字数 + 某段落文本.length }, 0) return 总字符数 > 219 } private 构造临时的条目以滥竽充数 (): 范_任意两列间转移条目_实际条目 { const 称谓: string = Math.random().toFixed(10) return { 唯一标识: 称谓, 在界面中的称谓: 称谓, 已禁止选择: true, 已选中: false, 数据: {} } } }
JavaScript
import { 范_任意两列间转移条目_实际条目, 范_任意两列间转移条目_实际条目之数据, } from '../../数据/示范页之数据库' /** @typedef {import('@wulechuan/vue2-ui--transfer-items-among-columns')} Wlc任意两列间转移条目 */ /** @typedef {Wlc任意两列间转移条目.泛范_界面元素之样式类名之配置<string>} 范_界面元素之样式类名之配置 */ export default { name: 'Wlc任意两列间转移条目_主列之条目_订制形态', props: { /** @type {范_任意两列间转移条目_实际条目} */ 条目: { type: Object, default: null, }, /** @type {boolean} */ 所属列已禁止交互: { type: Boolean, default: null, }, }, data () { return {} }, computed: { /** * @returns {范_任意两列间转移条目_实际条目} */ 条目_最终采纳值 () { const 外界给出的值 = this.条目 if (!外界给出的值) return this.构造临时的条目以滥竽充数() return 外界给出的值 }, /** * @returns {范_界面元素之样式类名之配置} */ 输入项之样式类名配置 () { /** @type {范_任意两列间转移条目_实际条目} */ const 条目 = this.条目_最终采纳值 return { '已勾选': 条目.已选中, '已禁止交互': 条目.已禁止选择 || !!this.所属列已禁止交互, '未选中': !条目.已选中 } }, /** * @returns {string[]} */ 条目描述文本之诸段落之列表 () { /** @type {string[]} */ let 诸段落之列表 = [] /** @type {范_任意两列间转移条目_实际条目} */ const 条目_最终采纳值 = this.条目_最终采纳值 /** @type {范_任意两列间转移条目_实际条目之数据} */ const 原始数据 = 条目_最终采纳值.数据 if (原始数据) { const 原始值 = 原始数据.描述 if (Array.isArray(原始值)) { 诸段落之列表 = 原始值 } else if (typeof 原始值 === 'string') { 诸段落之列表 = [ 原始值 ] } 诸段落之列表 = 诸段落之列表 .filter(某段落文本 => typeof 某段落文本 === 'string' && !!某段落文本.trim()) .map(某段落文本 => 某段落文本.trim()) } if (诸段落之列表.length === 0) { 诸段落之列表 = [ '不详。' ] } return 诸段落之列表 }, /** * @returns {boolean} */ 条目描述文本之诸段落总字数较多 () { /** @type {number} */ const 总字符数 = this.条目描述文本之诸段落之列表.reduce( /** * @param {number} 字数 * @param {string} 某段落文本 */ (字数, 某段落文本) => { return 字数 + 某段落文本.length }, 0 ) return 总字符数 > 219 }, }, methods: { /** * @returns {范_任意两列间转移条目_实际条目} */ 构造临时的条目以滥竽充数 () { /** @type {string} */ const 称谓 = Math.random().toFixed(10) return { 唯一标识: 称谓, 在界面中的称谓: 称谓, 已禁止选择: true, 已选中: false, 数据: {} } }, }, }
订制【
条目
】的样式从略。
本工具集内建的层叠样式表的用法
综述
两种语言任选
本工具集提供了两套独立的层叠样式表代码。一套采用 Stylus 语言编写,另一套采用 Scss 语言编写。两套样式产生最终的观感完全相同。实用时,任选一套即可,不必也不应同时采用二者。
防止样式代码重复加载、重复编译
在你的 Vuejs 项目中,可能在多处采用本工具集之各部件。若不谨慎配置,则可能导致本工具集自带之样式在你的项目的最终编译得到的 css 文件中反复出现。 反复出现显然是不可取的。
解决之道是在你的 Vuejs 项目的 main.ts
或 main.js
中一次性加载本工具集自带的所谓标准样式(亦可称默认样式)。 确保仅此一处加载之,则可避免样式定义重复出现在最终打包的文件集中。
因此,不论采用哪套样式,均应在你的 Vuejs 项目的 main.ts
或 main.js
中设法引用它们,而不应在采用本工具集的各个 .vue 文件中分别引用它们。
开发者可按需加载样式表的各个部分
本工具集的所有样式表代码均分为两大类:
【仅尺寸与排版与关键行为】的部分。
包含除下文【仅着色与装饰】所涉的一切样式属性。典型的例如:
display
、font-size
、margin
、padding
、border-width
、width
、height
、line-height
、user-select
……【仅着色与装饰】的部分。仅包含:
font-family
font-weight
border-radius
opacity
color
、border-color
、background-color
、outline-color
background-image
box-shadow
、text-shadow
不难料想,如果设计师对本工具集默认的配色不满意,开发者可以仅采用第 1 类内建样式表。并借鉴第 2 类内建样式表来重写与配色有关的样式规则集。
又,本工具集还提供一套所谓 “完整样式表”,即是简单地讲上述两部分样式合并而已。以 源代码/原始的源代码/sass/完整样式表/默认/0-基础.scss
为例,其内容全文如下:
@import '../../仅尺寸与排版与关键行为/默认/0-基础.scss';
@import '../../仅着色与装饰/默认/0-基础.scss';
参见下图——《样式表源文件之文件夹结构》。
上图亦存放在以下地点:
CSS 变量
本工具集各部件采用了若干 CSS 变量,汇总如下:
--吴乐川-任意两列间转移条目--主要布局块-边线粗度
--吴乐川-任意两列间转移条目--获得交互焦点之元素-边线粗度
--吴乐川-任意两列间转移条目--文字输入框-边线粗度
--吴乐川-任意两列间转移条目--按钮-边线粗度
--吴乐川-任意两列间转移条目--高亮元素标准色-静置时
--吴乐川-任意两列间转移条目--高亮元素标准色-鼠标悬停时
--吴乐川-任意两列间转移条目--高亮元素标准色-禁止交互时
--吴乐川-任意两列间转移条目--非高亮元素标准色-鼠标悬停时
--吴乐川-任意两列间转移条目--获得交互焦点之元素-视觉强调之包边之颜色
众所周知,CSS 变量可在文档对象树中层层继承。因此说“这些 CSS 变量附着在某 CSS 选择器上”不妥,而应说“这些 CSS 变量根值于某 CSS 选择器上”。本工具集的所有 CSS 变量根植在这样的 CSS 选择器上:
- 于 Stylus 语言,该根植点的 CSS 选择器由变量
wlc_transfer_items_among_columns__identifiable_selector__css_vars_injection_root
给出。无默认值! - 于 Scss 语言,该根植点的 CSS 选择器由变量
$吴乐川_任意两列间转移条目__标志性选择器__css变量根植点
给出。默认取body
。
使用本工具集内建的层叠样式表的编码步骤
采用 Stylus 语言
可分为两个大步骤。
导入样式文件
假定样式代码存在于
@/公共样式/index.styl
文件内。在你的 Vuejs 项目的
main.ts
或main.js
中加入如下语句:import '@/公共样式/index.styl'
在上述假定的文件中书写代码,以正确配置并采用本工具集内建的样式。此步骤又可进一步分为 2 个步骤:
定义好“本 npm 工具集各部件所需的【Stylus 全局变量】”。其中:
变量
app_styles_global_wrapper
不可省略 。又,虽然该变量取值可以为空(''
),但须注意调整 Scss 代码,以确保不令wlc_transfer_...__css_vars_injection_root
也为空。变量
wlc_transfer_items_among_columns__identifiable_selector__css_vars_injection_root
不可省略 。虽然该变量取值为空(''
)时,编译不会报错,但不应这样做!因为取空将导致该选择器不存在,进而导致 CSS 变量无从根植。变量
wlc_transfer_items_among_columns__identifiable_selector__base_styles_wrapper
可省略。变量
wlc_transfer_items_among_columns__identifiable_selector__dedicate_styles_wrapper
可省略。
按需导入本 npm 工具集各部件的标准样式(或者说默认样式)。
请看示例。
以下是假定存在的
@/公共样式/index.styl
文件之内容全文。通常情形下,除了第一句 “app_styles_global_wrapper = '#vue-应用根'
” 外,原封不动照搬即可。注:因 Stylus 语言不允许变量名中使用汉字,故在各 styl 文件中不得不采用外国字来设计变量名。
// Stylus 语言的变量名不允许采用汉字! app_styles_global_wrapper = '#vue-应用根' @require '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/stylus/_通用变量集_' wlc_transfer_items_among_columns__identifiable_selector__css_vars_injection_root = unquote(app_styles_global_wrapper) wlc_transfer_items_among_columns__identifiable_selector__base_styles_wrapper = unquote(app_styles_global_wrapper) wlc_transfer_items_among_columns__identifiable_selector__dedicate_styles_wrapper = unquote(app_styles_global_wrapper) @import '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/stylus/完整样式表/默认/0-为-css-变量赋值.styl' @import '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/stylus/完整样式表/默认/0-基础.styl' @import '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/stylus/完整样式表/默认/1-单列.styl' @import '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/stylus/完整样式表/默认/1-两列之间之默认竖栏.styl' @import '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/stylus/完整样式表/默认/2-现成实用的双列.styl'
采用 Scss 语言
可分为两个大步骤。
导入样式文件
假定样式代码存在于
@/公共样式/index.scss
文件内。在你的 Vuejs 项目的
main.ts
或main.js
中加入如下语句:import '@/公共样式/index.scss'
在上述假定的文件中书写代码,以正确配置并采用本工具集内建的样式。此步骤又可进一步分为 2 个步骤:
定义好“本 npm 工具集各部件所需的【Scss 全局变量】”。受益于 Scss 语言的特点,各【 Scss 全局变量】均有默认值,故该步骤可省略。
按需导入本 npm 工具集各部件的标准样式(或者说默认样式)。
请看示例。
以下是假定存在的
@/公共样式/index.scss
文件之内容全文。通常情形下,除了第一句 “$用以包裹整个应用之部分样式之选择器 = '#vue-应用根'
” 外,原封不动照搬即可。注:因 Scss 语言允许变量名中使用汉字,故在各 Scss 文件中大量采用了汉字来设计变量名。
$用以包裹整个应用之部分样式之选择器: '#vue-应用根'; @forward '../../../../node_modules/@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/sass/_通用变量集_/index.scss' with ( $吴乐川_任意两列间转移条目__标志性选择器__css变量根植点: $用以包裹整个应用之部分样式之选择器, $吴乐川_任意两列间转移条目__标志性选择器__基础样式之外层包裹: $用以包裹整个应用之部分样式之选择器, $吴乐川_任意两列间转移条目__标志性选择器__本部件专属样式之外层包裹: $用以包裹整个应用之部分样式之选择器, ); @import '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/sass/完整样式表/默认/0-为-css-变量赋值'; @import '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/sass/完整样式表/默认/0-基础'; @import '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/sass/完整样式表/默认/1-单列'; @import '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/sass/完整样式表/默认/1-两列之间之默认竖栏'; @import '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/sass/完整样式表/默认/2-现成实用的双列';
又,采用 Scss 语言编码时,第 1 步骤可以完全省略,故更简略的写法如下:
@import '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/sass/完整样式表/默认/0-为-css-变量赋值'; @import '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/sass/完整样式表/默认/0-基础'; @import '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/sass/完整样式表/默认/1-单列'; @import '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/sass/完整样式表/默认/1-两列之间之默认竖栏'; @import '@wulechuan/vue2-ui--transfer-items-among-columns/源代码/发布的源代码/sass/完整样式表/默认/2-现成实用的双列';
未来计划
尚无。
许可证类型
WTFPL
注意:
我未研究过许可证的约束。因此姑且声明为 WTFPL 类型。但实际上该许可证类型可能与我采用的开源模块有冲突。