1.0.301 • Published 9 months ago
gk-admin v1.0.301
使用说明
打包步骤
- merge 到 master 分支
- 生成 lib 包 npm run lib
- 执行 git add 后 执行 git commit
- 生成版本号 npm version patch(patch 版本第三位，minor 版本第二位，major 版本第一位)
- 发布 npm publish
- git push 提交到远程 git
项目中使用 gk-admin 库步骤
需要将仓库指向公司私有库执行以下命令
npm set registry http://npmregistry.geekbang.org:4873
然后安装 gk-admin,执行以下命令
npm i gk-admin
安装完成后，在 main.js 文件中引入,添加以下代码
import gkAdmin from 'gk-admin'
Vue.use(gkAdmin)
在其他页面直接使用，如时间范围组件
<template> <gk-admin-time-range></gk-admin-time-range> // 具体名称参照readme </template>
组件说明
时间范围组件(gkAdminTimerange)说明
可更改的参数
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| identifie | string | 定义唯一的 id,区分多个组件在页面展示 | |
| placement | string | bottom-end | 下拉框显示位置 |
| placeholder | string | 请选择时间 | 显示的 placeholder 内容 |
| styleVal | object | {width: '100%'} | 定义样式，对象格式 |
| typeVal | string | datetimerange | 展示类型，目前只支持 datetimerange 和 daterange |
| format | string | yyyy/MM/dd HH:mm:ss | 时间展示的格式 |
| showShort | boolean | false | 是否显示快捷选项 |
| disabled | boolean | false | 是否禁用选择器 |
| readonly | boolean | false | 完全只读，开启后不会弹出选择器 |
| transfer | boolean | false | 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 |
| size | string | default | 改变选择框大小。包含值为 large、small、default |
| value | array | [] | 显示的默认值；格式如1585281479, 1585291479或者'2019/02/02 22:22', '2019/02/04 22:22'或者'2019-02-02 22:22', '2019-02-04 22:22',其他格式暂不支持 |
| disabledDate | function | null | 可以设置不可选择时间。格式如：function (date) {return date && date.valueOf() < Date.now() - 86400000} |
| clearable | boolean | true | 是否显示清除按钮 |
| editable | boolean | true | 文本框是否可以输入，只在没有使用 slot 时有效 |
返回说明
返回方法为 result
返回值为对象，格式如下：
参数名 类型 说明 identifie string 传入的 id time array 选中的时间值 type string 触发区域(下面特殊说明) 触发区域(根据产品要求，点击快捷选项直接进行搜索；鼠标选中时间后不需要搜索，点击确定按钮搜索；修改时间后点击确定搜索)区分以下点击范围
short 点击左侧快捷选项触发事件(无快捷选项下没有此值)
select 自选时间后触发
modify 修改后触发
ok 确认按钮触发(daterange 类型下不显示此按钮没有此值)
clear 清空操作
组件说明
可更改的参数
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| identifie | string | 定义唯一的 id,区分多个组件在页面展示 | |
| placement | string | bottom-end | 下拉框显示位置 |
| placeholder | string | 请选择时间 | 显示的 placeholder 内容 |
| styleVal | object | {width: '100%'} | 定义样式，对象格式 |
| typeVal | string | datetimerange | 展示类型，目前只支持 datetimerange 和 daterange |
| format | string | yyyy/MM/dd HH:mm:ss | 时间展示的格式 |
| showShort | boolean | false | 是否显示快捷选项 |
| size | string | default | 改变选择框大小。包含值为 large、small、default |
| defaultValue | array | [] | 显示的默认值；格式如1585281479, 1585291479 |
返回说明
返回方法为 result
返回值为对象，格式如下：
参数名 类型 说明 identifie string 传入的 id time array 选中的时间值 type string 触发区域(下面特殊说明) 触发区域(根据产品要求，点击快捷选项直接进行搜索；鼠标选中时间后不需要搜索，点击确定按钮搜索；修改时间后点击确定搜索)区分以下点击范围
short 点击左侧快捷选项触发事件(无快捷选项下没有此值)
select 自选时间后触发
modify 修改后触发
ok 确认按钮触发(daterange 类型下不显示此按钮没有此值)
clear 清空按钮触发(daterange 类型下不显示此按钮没有此值)
素材组件(gkAdminSourceList)说明
可更改的参数
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| isShow | boolean | false | 是否显示素材选择框 |
| title | string | 上传图片 | 弹框显示的标题 |
| identifie | string | 定义唯一的 id,区分多个组件在页面展示 | |
| format | number | 1 | 素材类型：1 图片 2 音频 3 视频 4 文档 5 文章 |
| type | string | singel | 单选还是多选;singel 单选；multiple 多选 |
| project | string | zeus | 用来区分项目,zeus 或 infoq... |
| firstSign | string | '' | 二级 id,在 info 文档中区分电子书，电子书下的某种格式 |
| protocal | string | https | 请求地址的协议，目前代码中暂未使用 |
| isPrivate | number | 0 | 区分是否对外可以传播，不希望对外传播的需要传 1，默认是 0；(目前极客大学上传文档时使用了) |
| source | string | '' | 项目来源，保存时会传给后端 |
返回说明
返回方法为 result
返回两个值，格式如下：
参数名 类型 说明 onlyClose boolean 返回方法，是否仅关闭弹框，默认为 true 仅关闭弹框不返回数据 results array/object 选中的素材数据，单选是对象，多选是数组
下拉搜索组件(selectsearch)说明
可更改的参数
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| identifie | string | 定义唯一的 id,区分多个组件在页面展示 | |
| placement | string | bottom-start | 下拉框显示位置 |
| placeholder | string | 请选择... | 默认显示 placeholder |
| styleVal | object | {width: '100%'} | 样式 |
| items | array | [] | 展示的下拉选项,格式为{id: 数字, name: ''} |
返回说明
返回方法为 resultSearch 和 result
resultSearch 返回值格式如下：
参数名 类型 说明 string 返回输入框内的值即要搜索的条件 result 返回值格式如下：
参数名 类型 说明 对象 object 返回值是个对象，格式为：{id: '',data: obj}，id 用来区分多个组件，data 是选中的下拉数据，包含名称和 id{id:数字, name:''},即传入的 items