Skip to content

V
vue-toolbox
Commit b1eb60c0 authored by 马雄伟's avatar 马雄伟
Browse files
Options

更新代码

parent 9b273339
Hide whitespace changes
Inline Side-by-side
Showing with 1524 additions and 0 deletions
dist/components.common.js
View file @ b1eb60c0
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/components.umd.js
View file @ b1eb60c0
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/components.umd.min.js
View file @ b1eb60c0
This source diff could not be displayed because it is too large. You can view the blob instead.
doc/cascader.md 0 → 100644
View file @ b1eb60c0
# 级联选择器组件
>说明：UI订制级联选择器，满足设计需求，在Element-ui基础上增加宽度size
## 组件参数说明
> 额外新增参数
| 参数名称 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| width-size | 宽度大小 | string | small(280px) / medium(400px) | small |
> Element-UI原生参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | 选中项绑定值 | - | — | — |
| options | 可选项数据源，键名可通过 `Props` 属性配置 | array | — | — |
| props | 配置选项，具体见下表 | object | — | — |
| size | 尺寸 | string | medium / small / mini | — |
| placeholder | 输入框占位文本 | string | — | 请选择 |
| disabled | 是否禁用 | boolean | — | false |
| clearable | 是否支持清空选项 | boolean | — | false |
| show-all-levels | 输入框中是否显示选中值的完整路径 | boolean | — | true |
| collapse-tags | 多选模式下是否折叠Tag | boolean | - | false |
| separator | 选项分隔符 | string | — | 斜杠' / ' |
| filterable | 是否可搜索选项 | boolean | — | — |
| filter-method | 自定义搜索逻辑，第一个参数是节点`node`，第二个参数是搜索关键词`keyword`，通过返回布尔值表示是否命中 | function(node, keyword) | - | - |
| debounce | 搜索关键词输入的去抖延迟，毫秒 | number | — | 300 |
| before-filter | 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选 | function(value) | — | — |
| popper-class | 自定义浮层类名 | string | — | — |
## 组件事件说明
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 当选中节点变化时触发 | 选中节点的值 |
| expand-change | 当展开节点发生变化时触发 | 各父级选项值组成的数组 |
| blur | 当失去焦点时触发 | (event: Event) |
| focus | 当获得焦点时触发 | (event: Event) |
| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |
| remove-tag | 在多选模式下，移除Tag时触发 | 移除的Tag对应的节点的值 |
## 组件方法说明
| 方法名 | 说明 | 参数 |
| ---- | ---- | ---- |
| getCheckedNodes | 获取选中的节点 | (leafOnly) 是否只是叶子节点，默认值为 `false` |
## 组件插槽说明
| 名称 | 说明 |
|---------|-------------|
| - | 自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据 |
| empty | 无匹配选项时的内容 |
## props相应的参数说明
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ----------------- | ------ | ------ | ------ |
| expandTrigger | 次级菜单的展开方式 | string | click / hover | 'click' |
| multiple | 是否多选 | boolean | - | false |
| checkStrictly | 是否严格的遵守父子节点不互相关联 | boolean | - | false |
| emitPath | 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值 | boolean | - | true |
| lazy | 是否动态加载子节点，需与 lazyLoad 方法结合使用 | boolean | - | false |
| lazyLoad | 加载动态数据的方法，仅在 lazy 为 true 时有效 | function(node, resolve)，`node`为当前点击的节点，`resolve`为数据加载完成的回调(必须调用) | - | - |
| value | 指定选项的值为选项对象的某个属性值 | string | — | 'value' |
| label | 指定选项标签为选项对象的某个属性值 | string | — | 'label' |
| children | 指定选项的子选项为选项对象的某个属性值 | string | — | 'children' |
| disabled | 指定选项的禁用为选项对象的某个属性值 | string | — | 'disabled' |
| leaf | 指定选项的叶子节点的标志位为选项对象的某个属性值 | string | — | 'leaf' |
#### 效果图
<img src="https://img-crs.vchangyi.com/组件说明样式资源/管理后台/ts/cascader.png" width="500px" />
#### 代码示例
```html
<template>
<div class="counter">
<div class="template">
<cy-cascader
v-model="cases"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change="changeCases"
placeholder="宽度small级联选择器(hover触发子级)"
clearable
></cy-cascader>
</div>
<div class="template">
<cy-cascader
width-size="medium"
v-model="cases"
:options="options"
:props="{ checkStrictly: true }"
@change="changeCases"
placeholder="宽度medium级联选择器(带单选)"
clearable
></cy-cascader>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component
export default class extends Vue {
private cases = [];
private options = [
{
value: "zhinan",
label: "指南",
children: [
{
value: "shejiyuanze",
label: "设计原则",
children: [
{
value: "yizhi",
label: "一致"
},
{
value: "fankui",
label: "反馈"
},
{
value: "xiaolv",
label: "效率"
},
{
value: "kekong",
label: "可控"
}
]
},
{
value: "daohang",
label: "导航",
children: [
{
value: "cexiangdaohang",
label: "侧向导航"
},
{
value: "dingbudaohang",
label: "顶部导航"
}
]
}
]
},
{
value: "zujian",
label: "组件",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout 布局"
},
{
value: "color",
label: "Color 色彩"
},
{
value: "typography",
label: "Typography 字体"
},
{
value: "icon",
label: "Icon 图标"
},
{
value: "button",
label: "Button 按钮"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio 单选框"
},
{
value: "checkbox",
label: "Checkbox 多选框"
},
{
value: "input",
label: "Input 输入框"
},
{
value: "input-number",
label: "InputNumber 计数器"
},
{
value: "select",
label: "Select 选择器"
},
{
value: "cascader",
label: "Cascader 级联选择器"
},
{
value: "switch",
label: "Switch 开关"
},
{
value: "slider",
label: "Slider 滑块"
},
{
value: "time-picker",
label: "TimePicker 时间选择器"
},
{
value: "date-picker",
label: "DatePicker 日期选择器"
},
{
value: "datetime-picker",
label: "DateTimePicker 日期时间选择器"
},
{
value: "upload",
label: "Upload 上传"
},
{
value: "rate",
label: "Rate 评分"
},
{
value: "form",
label: "Form 表单"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table 表格"
},
{
value: "tag",
label: "Tag 标签"
},
{
value: "progress",
label: "Progress 进度条"
},
{
value: "tree",
label: "Tree 树形控件"
},
{
value: "pagination",
label: "Pagination 分页"
},
{
value: "badge",
label: "Badge 标记"
}
]
}
]
}
];
private changeCases() {
console.log(this.cases);
}
}
</script>
<style lang="scss" scoped>
.template {
padding: 15px 30px;
}
</style>
```
doc/form.md 0 → 100644
View file @ b1eb60c0
# 表单组件
> 说明
* 除以下几个不支持和新增验证属性，其余同原生el-form组件相同
* 原生inline不支持
* 原生hide-required-asterisk不支持
* 原生show-message不支持
* 原生inline-message不支持
## 新增form-item内置校验参数
| 参数名称 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| required | 是否必填 | Boolean | - | false |
| email | 校验邮箱 | Boolean | - | false |
| phone | 校验手机号 | Boolean | - | false |
| idcard | 校验身份证 | Boolean | - | false |
| number | 校验数字 | Boolean | - | false |
| url | 校验http链接 | Boolean | - | false |
| zh | 校验中文 | Boolean | - | false |
| en | 校验英文 | Boolean | - | false |
| ennum | 校验英文+数字 | Boolean | - | false |
| en_num | 校验英文+数字+下划线 | Boolean | - | false |
| min | 校验最小长度 | Number / String | - | - |
| max | 校验最大长度 | Number / String | - | - |
* trigger='change' 默认校验为blur函数，若需其他需要传入，仅对required有效
* 支持自定义校验
## 原生ElementUi参数可用
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| model | 表单数据对象 | object | — | — |
| rules | 表单验证规则 | object | — | — |
| label-position | 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 `label-width` | string | right/left/top | right |
| label-width | 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 `auto`。 | string | — | — |
| label-suffix | 表单域标签的后缀 | string | — | — |
| status-icon | 是否在输入框中显示校验结果反馈图标 | boolean | — | false |
| validate-on-rule-change | 是否在 `rules` 属性改变后立即触发一次验证 | boolean | — | true |
| size | 用于控制该表单内组件的尺寸 | string | medium / small / mini | — |
| disabled | 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效 | boolean | — | false |
## 组件方法说明
`特别说明`
`1.validateField、clearValidate 方法仅支持string类型参数`
| 方法名 | 说明 | 参数
|---------- |-------------- | --------------
| validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean, object))
| validateField | 对部分表单字段进行校验的方法 | Function(props: array \| string, callback: Function(errorMessage: string))
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | —
| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 | Function(props: array \| string)
clearValidate | 移除表单部分属性的校验结果 | Function(array:Array<string>)
## 组件事件说明
| 事件名称 | 说明 | 回调参数 |
|--------- |-------- |---------- |
| validate | 任一表单项被校验后触发 | 被校验的表单项 prop 值，校验是否通过，错误消息（如果存在） |
## Form-Item组件参数说明
`特别说明`
`1.form-item的rules本期暂不支持`
`2.required、min、max 请使用form-item内置校验`
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| prop | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string | 传入 Form 组件的 `model` 中的字段 | — |
| label | 标签文本 | string | — | — |
| label-width | 表单域标签的的宽度，例如 '50px'。支持 `auto`。 | string | — | — |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | — | false |
| error | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |||
### Form-Item组件方法说明
| 方法名 | 说明 | 参数
|---------- |-------------- | --------------
| resetField | 对该表单项进行重置，将其值重置为初始值并移除校验结果 | -
| clearValidate | 移除该表单项的校验结果 | -
#### 效果图
<img src="https://img-crs.vchangyi.com/组件说明样式资源/管理后台/ts/form.png" width="500px" />
#### 代码示例
```html
<template>
<div class="counter">
<layout-form type="mobile">
<template slot="content">
<cy-form ref="cform" :rules="rules" :model="ruleForm">
<cy-form-item
label="测试form-one测试form-one"
prop="name"
number
required
>
<cy-input
v-model="ruleForm.name"
clearable
width-size="medium"
></cy-input>
</cy-form-item>
<cy-form-item
label="手机"
prop="phone"
desc="这是对输入的描述"
required
phone
number
max="11"
>
<cy-input v-model="ruleForm.phone" clearable></cy-input>
</cy-form-item>
<cy-form-item label="邮箱" prop="email" desc="这是对邮箱的描述" email>
<cy-input
v-model="ruleForm.email"
width-size="medium"
clearable
></cy-input>
</cy-form-item>
<cy-form-item
label="收费方式"
prop="fee"
desc="这是对兴趣的描述"
required
trigger="change"
>
<el-switch
v-model="ruleForm.fee"
active-text="按月付费"
inactive-text="按年付费"
></el-switch>
</cy-form-item>
<cy-form-item label="身份证" prop="idcard" required idcard>
<cy-input v-model="ruleForm.idcard" width-size="medium"></cy-input>
</cy-form-item>
<cy-form-item
label="兴趣"
prop="faverate"
desc="这是对兴趣的描述"
required
trigger="change"
>
<el-checkbox-group v-model="ruleForm.faverate">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</cy-form-item>
<cy-form-item
label="兴趣"
prop="sex"
desc="性别咯"
required
trigger="change"
>
<el-radio-group disabled v-model="ruleForm.sex">
<el-radio label="男" value="1"></el-radio>
<el-radio label="女" value="2"></el-radio>
</el-radio-group>
</cy-form-item>
<cy-form-item prop="date" label="日期" required trigger="change">
<el-date-picker
placeholder="选择日期"
v-model="ruleForm.date"
></el-date-picker>
</cy-form-item>
<cy-form-item prop="date" label="日期区间" required trigger="change">
<el-date-picker
type="daterange"
v-model="ruleForm.dateVal"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</cy-form-item>
<cy-form-item prop="date" label="时间" required trigger="change">
<el-time-picker
placeholder="选择时间"
v-model="ruleForm.time"
></el-time-picker>
</cy-form-item>
<cy-form-item prop="date" label="时间" required trigger="change">
<el-date-picker
placeholder="选择时间"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
v-model="ruleForm.times"
></el-date-picker>
</cy-form-item>
<cy-form-item label="活动形式" prop="action" required max="10">
<cy-input type="textarea" v-model="ruleForm.action"></cy-input>
</cy-form-item>
<cy-form-item label="上传">
<upload-image
class="upload-template"
:urls="ruleForm.avator"
@change="picSuccess"
></upload-image>
</cy-form-item>
</cy-form>
</template>
</layout-form>
</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import UploadImage from "@/components/business/upload-image/index.vue";
@Component({
components: {
UploadImage
}
})
export default class FormDemo extends Vue {
private ruleForm = {
name: "",
phone: "",
email: "",
faverate: ["美食/餐厅线上活动"],
fee: false,
sex: "",
idcard: "",
action: "",
date: "",
dateVal: [],
times: [],
time: "",
timeVal: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
select: "",
avator: ""
};
private options = [
{
value: "选项1",
label: "黄金糕"
},
{
value: "选项2",
label: "双皮奶"
},
{
value: "选项3",
label: "蚵仔煎"
},
{
value: "选项4",
label: "龙须面"
},
{
value: "选项5",
label: "北京烤鸭"
}
];
private rules = {
name: [
{
validator: this.validateself,
trigger: "blur"
}
]
};
private validateself(rule: any, value: any, callback: any) {
value.length > 5 ? callback(new Error("五字不行")) : callback();
}
private picSuccess(res: any) {
this.$set(this.ruleForm, "avator", res);
}
}
</script>
```
doc/input.md 0 → 100644
View file @ b1eb60c0
# 输入框组件
> 说明：UI订制输入框，满足UI需求，在Element-ui基础上增加宽度size
## 组件参数说明
> 额外新增参数
| 参数名称 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| width-size | 宽度大小 | string | mini(140px) / small(280px) / medium(400px) | small |
> Element-UI原生参数
| 参数名称 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| type | 类型 | string | text，textarea 和其他 [原生 input 的 type 值](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
| value / v-model | 绑定值 | string / number | — | — |
| maxlength | 原生属性，最大输入长度 | number | — | — |
| minlength | 原生属性，最小输入长度 | number | — | — |
| show-word-limit | 是否显示输入字数统计，只在 `type = "text"` 或 `type = "textarea"` 时有效 | boolean | — | false |
| placeholder | 输入框占位文本 | string | — | — |
| clearable | 是否可清空 | boolean | — | false |
| show-password | 是否显示切换密码图标| boolean | — | false |
| disabled | 禁用 | boolean | — | false |
| size | 输入框尺寸，只在 `type!="textarea"` 时有效 | string | medium / small / mini | — |
| prefix-icon | 输入框头部图标 | string | — | — |
| suffix-icon | 输入框尾部图标 | string | — | — |
| rows | 输入框行数，只对 `type="textarea"` 有效 | number | — | 2 |
| autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean / object | — | false |
| autocomplete | 原生属性，自动补全 | string | on, off | off |
| auto-complete | 下个主版本弃用 | string | on, off | off |
| name | 原生属性 | string | — | — |
| readonly | 原生属性，是否只读 | boolean | — | false |
| max | 原生属性，设置最大值 | — | — | — |
| min | 原生属性，设置最小值 | — | — | — |
| step | 原生属性，设置输入字段的合法数字间隔 | — | — | — |
| resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |
| autofocus | 原生属性，自动获取焦点 | boolean | true, false | false |
| form | 原生属性 | string | — | — |
| label | 输入框关联的label文字 | string | — | — |
| tabindex | 输入框的tabindex | string | - | - |
| validate-event | 输入时是否触发表单的校验 | boolean | - | true |
## 组件插槽说明
| 插槽名称 | 说明 |
|------|--------|
| prefix | 输入框头部内容，只对 `type="text"` 有效 |
| suffix | 输入框尾部内容，只对 `type="text"` 有效 |
| prepend | 输入框前置内容，只对 `type="text"` 有效 |
| append | 输入框后置内容，只对 `type="text"` 有效 |
## 组件事件说明
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| @blur | 在 Input 失去焦点时触发 | (event: Event) |
| @focus | 在 Input 获得焦点时触发 | (event: Event) |
| @change | 仅在输入框失去焦点或用户按下回车时触发 | (value: string \| number) |
| @input | 在 Input 值改变时触发 | (value: string \| number) |
| @clear | 在点击由 `clearable` 属性生成的清空按钮时触发 | — |
## 组件方法
| 方法名 | 说明 | 参数 |
| ---- | ---- | ---- |
| focus | 使 input 获取焦点 | — |
| blur | 使 input 失去焦点 | — |
| select | 选中 input 中的文字 | — |
#### 效果图
<img src="https://img-crs.vchangyi.com/组件说明样式资源/管理后台/ts/input.png" width="500px" />
#### 代码示例
```html
<template>
<div class="counter">
<div class="template">
<cy-input
ref="inp"
placeholder="我是定宽为280px的input"
v-model="count"
size="medium"
></cy-input>
</div>
<div class="template">
<cy-input
placeholder="一般用于表格中"
width-size="mini"
size="mini"
v-model="count"
></cy-input>
</div>
<div class="template">
<cy-input
disabled
placeholder="我是定宽为280px被禁用的input"
v-model="count"
></cy-input>
</div>
<div class="template">
<cy-input
width-size="medium"
placeholder="我是定宽为400px的input带有前后插槽"
v-model="count"
>
<template slot="prepend">http://</template>
<template slot="append">.com</template>
</cy-input>
</div>
<div class="template">
<cy-input
width-size="medium"
placeholder="我是宽为400px文本区域"
v-model="text"
:rows="2"
type="textarea"
@input="change"
>
</cy-input>
</div>
<div class="template">
<cy-input
width-size="medium"
placeholder="我是带图标的input"
v-model="text"
prefix-icon="el-icon-search"
maxlength="50"
show-word-limit
>
</cy-input>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component
export default class extends Vue {
private count = "";
private text = "";
private select = "1";
private change() {
console.log(this.text);
}
mounted() {
(this.$refs["inp"] as any).focus();
}
}
</script>
<style lang="scss" scoped>
.template {
padding: 15px 30px;
}
</style>
```
doc/select-input.md 0 → 100644
View file @ b1eb60c0
# 附带下拉选择的输入框组件
> 说明：满足UI需求，二次封装的附带下拉选择的输入框组件
## 组件参数说明
| 参数 | 类型 | 说明 | 可选值 | 默认值 | 是否必填 |
|------------------- |-------------- |---------------|-------------------------------- |-------- | ------- |
| v-model / value | String | 绑定值 | - | - | 是 |
| list | Array(obj)> obj: {key: 绑定对应value值,name: 绑定的label值} | 下拉框的option数组 | - | - | 是 |
| placeholder | String | 占位符文案 | - | - | 否 |
| disabled | Boolean | 是否禁用 | - | false | 否 |
## 组件事件说明
| 事件名称 | 说明 | 回调参数 |
|---------|---------|---------|
| @change | 仅在输入框失去焦点或用户按下回车时触发 | 输入框目前的内容 |
| @selectChange | 下拉框选中内容变化回调 | 目前选中值 |
| blur | 在 Input 失去焦点时触发 | (event: Event) |
| focus | 在 Input 获得焦点时触发 | (event: Event) |
| input | 在 Input 值改变时触发 | (value: string \| number) |
## 组件方法说明
| 方法名称 | 说明 | 参数 |
| ---- | ---- | ---- |
| focus | 使 input 获取焦点 | — |
| blur | 使 input 失去焦点 | — |
| select | 选中 input 中的文字 | — |
#### 效果图
<img src="https://img-crs.vchangyi.com/组件说明样式资源/管理后台/ts/select-input.png" width="500px" />
#### 代码参考
```html
<template>
<div class="counter">
<div class="template">
<!-- 需要单独引入 SelectInput -->
<select-input
v-model="text"
:list="list"
@selectChange="changed"
@change="changeText"
placeholder="请输入啊"
></select-input>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import SelectInput from "@/components/business/select-input/index.vue";
@Component({
name: "Counter",
components: {
SelectInput
}
})
export default class Counter extends Vue {
private text = "";
private list = [
{ key: 1, name: "老坛胡说" },
{ key: 2, name: "徐大虾咯" }
];
private changed(val: any) {
console.log(val);
}
private changeText() {
console.log(this.text);
}
}
</script>
<style lang="scss" scoped>
.template {
padding: 15px 30px;
}
</style>
```
\ No newline at end of file
doc/select.md 0 → 100644
View file @ b1eb60c0
# 下拉选择组件
> 说明：UI订制下拉框，满足UI需求，在Element-ui基础上订制宽度size,和带有输入框的筛选功能
## 组件参数说明
> 额外新增参数
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---------- |-------------- |---------------|-------------------------------- |-------- |
| width-size | String | 宽度大小型号 | medium(400px)/small(280px) | small |
| search-input | Boolean | 下拉框是否展示筛选的输入框 | — | false |
> Element-UI原声参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | 绑定值 | boolean / string / number | — | — |
| multiple | 是否多选 | boolean | — | false |
| disabled | 是否禁用 | boolean | — | false |
| value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
| size | 输入框尺寸 | string | medium/small/mini | — |
| clearable | 是否可以清空选项 | boolean | — | false |
| collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false |
| multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |
| name | select input 的 name 属性 | string | — | — |
| autocomplete | select input 的 autocomplete 属性 | string | — | off |
| placeholder | 占位符 | string | — | 请选择 |
| filterable | 是否可搜索 | boolean | — | false |
| allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false |
| filter-method | 自定义搜索方法 | function | — | — |
| remote | 是否为远程搜索 | boolean | — | false |
| remote-method | 远程搜索方法 | function | — | — |
| loading | 是否正在从远程获取数据 | boolean | — | false |
| loading-text | 远程加载时显示的文字 | string | — | 加载中 |
| no-match-text | 搜索条件无匹配时显示的文字，也可以使用`slot="empty"`设置 | string | — | 无匹配数据 |
| no-data-text | 选项为空时显示的文字，也可以使用`slot="empty"`设置 | string | — | 无数据 |
| popper-class | Select 下拉框的类名 | string | — | — |
| reserve-keyword | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false |
| default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
| popper-append-to-body | 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false | boolean | - | true |
| automatic-dropdown | 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 | boolean | - | false |
## 组件事件说明
| 事件名称 | 说明 | 回调参数 |
|---------|---------|---------|
| @change | 选中值发生变化时触发 | 目前的选中值 |
| @visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |
| @remove-tag | 多选模式下移除tag时触发 | 移除的tag值 |
| @clear | 可清空的单选模式下用户点击清空按钮时触发 | — |
| @blur | 当 input 失去焦点时触发 | (event: Event) |
| @focus | 当 input 获得焦点时触发 | (event: Event) |
## 选择插槽
|   name  | 说明   |
|---------|---------|
| — | Option 组件列表 |
| prefix | Select 组件头部内容 |
| empty | 无选项时的列表 |
## Option 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value | 选项的值 | string/number/object | — | — |
| label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | — | — |
| disabled | 是否禁用该选项 | boolean | — | false |
## 组件方法说明
| 方法名 | 说明 | 参数 |
| ---- | ---- | ---- |
| focus | 使 input 获取焦点 | - |
| blur | 使 input 失去焦点，并隐藏下拉框 | - |
#### 效果图
<img src="https://img-crs.vchangyi.com/组件说明样式资源/管理后台/ts/select.png" width="500px" />
#### 代码参考
```html
<template>
<div class="counter">
<div class="template">
<cy-select
v-model="eat"
size="medium"
placeholder="宽度为280高为36的下拉选择"
@change="changeEat"
>
<cy-option label="冰淇淋" value="1"></cy-option>
<cy-option label="可乐" value="2"></cy-option>
<cy-option label="热巧克力" value="3"></cy-option>
</cy-select>
</div>
<div class="template">
<cy-select
v-model="eat"
clearable
width-size="medium"
placeholder="宽为400高为36的下拉选择"
@change="changeEat"
>
<cy-option label="冰淇淋" value="1"></cy-option>
<cy-option label="可乐" value="2"></cy-option>
<cy-option label="热巧克力" value="3"></cy-option>
</cy-select>
</div>
<div class="template">
<cy-select
v-model="eat"
clearable
width-size="small"
size="mini"
placeholder="宽为280高为32的下拉选择"
@change="changeEat"
>
<cy-option label="冰淇淋" value="1"></cy-option>
<cy-option label="可乐" value="2"></cy-option>
<cy-option label="热巧克力" value="3"></cy-option>
</cy-select>
</div>
<div class="template">
<cy-select
v-model="eat"
size="medium"
placeholder="下拉带搜索功能(280)"
search-input
@change="changeEat"
>
<cy-option label="冰淇淋" value="1"></cy-option>
<cy-option label="可乐" value="2"></cy-option>
<cy-option label="热巧克力" value="3"></cy-option>
</cy-select>
</div>
<div class="template">
<cy-select
v-model="eat"
clearable
width-size="medium"
placeholder="下拉带搜索功能(400)"
search-input
@change="changeEat"
>
<cy-option label="冰淇淋" value="1"></cy-option>
<cy-option label="可乐" value="2"></cy-option>
<cy-option label="热巧克力" value="3"></cy-option>
</cy-select>
</div>
<div class="template">
<cy-select
v-model="eat"
clearable
width-size="medium"
size="mini"
disabled
placeholder="被禁用"
@change="changeEat"
>
<cy-option label="冰淇淋" value="1"></cy-option>
<cy-option label="可乐" value="2"></cy-option>
<cy-option label="热巧克力" value="3"></cy-option>
</cy-select>
</div>
<div class="template">
<cy-select
v-model="eats"
@change="changeEat"
multiple
collapse-tags
search-input
placeholder="多选下拉"
>
<cy-option label="冰淇淋" value="1"></cy-option>
<cy-option label="可乐" value="2"></cy-option>
<cy-option label="热巧克力" value="3"></cy-option>
</cy-select>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component
export default class Counter extends Vue {
private eat = "";
private eats = "";
private changeEat() {
console.log(this.eat, this.eats);
}
}
</script>
<style lang="scss" scoped>
.template {
padding: 15px 30px;
}
</style>
```
\ No newline at end of file
doc/table.md 0 → 100644
View file @ b1eb60c0
# table组件
> 说明：在Element-ui基础上内置多种列类型,集成分页功能方便快速开发
## 组件参数说明
> 参数
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---------- |-------------- |---------------|-------------------------------- |-------- |
| tableConfig | Object | 导入table数据以及列配置 | - | - |
## 参数详解
> tableConfig
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| data | 显示的数据 | Array | — | — |
| maxHeight | Table 的最大高度。合法的值为数字或者单位为 px 的高度。 | string/number | — | — |
| height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 | string/number | — | — |
| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id | string | — | — |
| defaultSort | 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序 | Object | order: ascending, descending | 如果只指定了prop, 没有指定order, 则默认顺序是ascending |
| columns | 表格列的配置描述，具体项见后文 | Array | — | 见下文 |
| operate | 操作列的配置描述，具体项见后文 | Array | — | 见下文 |
| checkbox |是否展示多选框|Object|-|见下文|
| radio |是否展示单选框|Object|-|见下文|
| tree |树型结构数据| Object | — | 见下文 |
| empty | 无数据时展示的图片和文案 | Object | — | 见下文 |
| pagination | table分页配置 | Object | — | 见下文 |
| isRowSort | 是否开启行排列 | boolean | — | false |
| rowSort | 行排序后的回调函数，参数为排序后的data |Function(Array) | — | — |
| columnSort | 当表格的排序条件发生变化的时候会触发该事件| Function({ column, prop, order }) | — | — |
> columns
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------|---------|---------|---------|---------|
| key | 对应列内容的字段名 | string |— |— |
| title | 显示的标题 | string | — | — |
| width | 对应列的宽度 | string | — | — |
| minWidth | 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string |— |— |
| splitLength | 列字符长度超过splitLength，截取展示... ,并将文案展示在el-popover上| number | — | 1000 |
| type | 指定对应列使用内置的column去渲染 | string | mobile/money/int/image/date/slot | — |
| filter | 对应列展示文字使用commonFilter过滤器 | Array | [{ value: string/number;label: string;}]。 value为列对应的值，label为需要展示的文案 | — |
| sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 columnSort 事件 | boolean, string |true, false, 'custom' | false |
| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | — |
| align | 对齐方式 | String | left/center/right | left |
> operate
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------|---------|---------|---------|---------|
| title | 显示的标题 | string | — | — |
| width | 对应列的宽度 | string | — | — |
| key | 操作列直接展示的操作 | Array，[{key: "detail",text: "查看"}]| — | — |
| more | 更多操作中包含的操作 | Array，[{key: "edit",text: "编辑"}]| — | — |
| operateKeyClick | 操作被点击回调，row行数据，key对应key/more数组对象中key字段 | Function(row: any, key: string) | — | — |
> empty
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------|---------|---------|---------|---------|
| text |无数据时展示的文案|string | — |暂无数据 |
| emptyType | layout-empty组件支持的empty_type类型 | string | list | list |
> pagination
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------|---------|---------|---------|---------|
| pageSizes |每页显示个数选择器的选项设置|number[] | — |[10, 20, 30, 40, 50, 100] |
| pageSize |每页显示条目个数，支持 .sync 修饰符| number | — | 10 |
| total |总条目数| number | — | — |
| currentPage |当前页数，支持 .sync 修饰符| number | — | 1 |
| handleSizeChange |pageSize 改变时会触发|Function(pageSize) | — | — |
| handleCurrentChange |currentPage 改变时会触发|Function(pageNo) | — | — |
> tree
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------|---------|---------|---------|---------|
| rowKey | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。 |string| — | id |
| expandAll | 树形数据是否默认展开 | boolean | — | false |
| treeProps |渲染嵌套数据的配置选项 | Object | — |{ hasChildren: 'hasChildren', children: 'children' } |
> checkbox
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------|---------|---------|---------|---------|
| isShow | 是否展示多选框 | boolean | — | false |
| rowKey | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。 |string| — | id |
| selectionChange | 当选择项发生变化时会触发该事件 | Function(selection) 选中结果 | — | — |
> radio
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------|---------|---------|---------|---------|
| isShow | 是否展示单选 | boolean | — | false |
| radioModel | v-model默认选中值项的索引 |number| — | — |
| radioText | 单选的label文案 |string| — | "" |
| radioChange | 当选择项发生变化时会触发该事件 | Function(row) 选中结果 | — | — |
#### 演示图
<img src="./table-demo.png" />
#### 使用demo
```html
<template>
<cy-table :tableConfig="tableConfig">
<template slot="tags" slot-scope="scope">
<div v-if="scope.row.tags && scope.row.tags.length !== 0">
<div v-if="scope.row.tags.length > 2">
<span>
{{ scope.row.tags[0].name }}
</span>
<span>
{{ scope.row.tags[1].name }}
</span>
<el-popover
placement="top-start"
trigger="click"
popper-class="popover-Tip"
>
<el-tag
v-for="tag in scope.row.tags"
:key="tag + Math.random()"
:disable-transitions="false"
style="background: #f0f3fe; color: #708df5"
>
{{ tag.name }}
</el-tag>
<el-button
size="small"
type="text"
slot="reference"
icon="el-icon-more"
></el-button>
</el-popover>
</div>
<div v-if="scope.row.tags.length <= 2">
<span v-for="tag in scope.row.tags" :key="tag + Math.random()">
{{ tag.name }}
</span>
</div>
</div>
<div v-else>--</div>
</template>
</cy-table>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { ItableConfig } from "@/components/public/cy-table/type";
@Component
export default class extends Vue {
private tableConfig: ItableConfig = {
data: [],
maxHeight: "",
columnSort: val => {
console.log("排序", val);
},
selections: [],
pagination: {
pageSizes: [10],
pageSize: 10,
total: 0,
currentPage: 1,
handleSizeChange: val => {
console.log("分页大小改变", val);
},
handleCurrentChange: val => {
console.log("分码改变", val);
}
},
radio: {
isShow: true,
radioModel: 0, //传入默认选中项的索引，无匹配传入-1
radioText: "",
radioChange: row => {
console.log("radio", row);
}
},
checkbox: {
isShow: true,
rowKey: "id",
selectionChange: rows => {
console.log("selection-change", rows);
},
checkSelectable: key => {
return true
}
},
empty: {
text: "查无数据啦",
emptyType: "list"
},
columns: [
{
key: "name",
title: "名称",
minWidth: "100",
fixed: "left"
},
{
key: "mobile",
title: "手机号",
minWidth: "150",
type: "mobile"
},
{
key: "tags",
title: "标签",
minWidth: "220",
type: "slot" //支持插槽
},
{
key: "pay_order_num",
title: "支付订单数",
minWidth: "140",
sortable: "custom",
type: "int"
},
{
key: "pay_total",
title: "实付金额",
minWidth: "120",
type: "money",
sortable: "custom"
},
{
key: "latest_marketing_time",
title: "最近营销时间",
minWidth: "200",
sortable: "custom",
type: "date"
}
],
operate: {
title: "操作",
width: 230,
key: [
{
key: "detail",
text: "查看"
},
{
key: "addNote",
text: "备注"
}
],
more: [
{
key: "del",
text: "删除"
}
],
operateKeyClick: (row, key) => {
console.log("operateKey:", key, "-------", row);
switch (key) {
case "detail":
//
break;
case "addNote":
//
break;
case "del":
//del
break;
}
}
}
};
private created() {
setTimeout(() => {
this.tableConfig.data = [
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
},
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
},
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
},
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
},
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
},
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
},
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
},
{
name: "test",
mobile: "15091097322",
tags: [{ name: "标签1" }, { name: "标签2" }],
pay_order_num: 9999,
pay_total: 19999,
latest_marketing_time: 11231321231
}
].map(item,index => {
const enable = true; // true 可以点击 false 禁止点击
return {
...item,
detail:enable,
addNote:enable,
del:enable,
delShow:enable //显示删除按钮
}
if(index === 0){
item.del = false;
}
});
}, 3000);
this.selections = data[1]
}
}
</script>
```
\ No newline at end of file
doc/upload-image.md 0 → 100644
View file @ b1eb60c0
# 上传图片组件
> 说明：上传图片的专用组件，可单张上传，可批量多张上传并拖拽排序
## 组件参数说明
| 参数 | 类型 | 说明 | 可选值 | 默认值 | 是否必填 |
|----------------|------- |-------------------- |----------------- |------------- | ------------------ |
| img-type | String | 单张上传or多张上传 | single(单张)/batch(多张) | single | 否 |
| urls | String/Array | 绑定的图片url,单张上传时为字符串，多张上传时为数组 | — | - | 是 |
| multiple | Boolean | 是否开启批量上传，只在多张上传时生效 | — | false | 否 |
| on-success | Function | 上传成功的回调函数 | | - | 否 |
| before-upload | function(file) | 上传之前的钩子函数，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传 | — | - | 否 |
| on-remove | function() | 文件列表移除文件时的钩子 | — | - | 否 |
| disabled | Boolean | 是否禁用 | — | false | 否 |
| size | string | 大小型号 | medium(宽高100px)/small(宽高50px) | medium | 否 |
| tips | string | 位于上传器的文案提示 | - | '上传图片' | 否 |
## 组件事件说明
| 事件 | 说明 | 回调参数 |
|-----|------- |---------- |
| @change | 绑定urls值发生变化会执行 | res: urls |
| @fail | 上传失败执行 | res: urls |
#### 效果图
<img src="https://img-crs.vchangyi.com/组件说明样式资源/管理后台/ts/upload-image.png" width="500px" />
#### 代码参考
``` html
<template>
<div class="upload-demo">
<div class="upload">
<h3 class="title">上传图片组件 单张demo</h3>
<upload-image
class="upload-template"
:urls="form_data.avator"
@change="picSuccess"
></upload-image>
</div>
<div class="upload">
<h3 class="title">上传图片组件 多张可拖拽排序demo</h3>
<upload-image
class="upload-template"
img-type="batch"
:urls="form_data.urls"
@change="update"
multiple
></upload-image>
</div>
<div class="upload">
<h3 class="title">size为small的上传图片</h3>
<upload-image
class="upload-template"
size="small"
:urls="form_data.avator"
@change="picSuccess"
></upload-image>
</div>
<div class="upload">
<h3 class="title">size为small的上传多张图片</h3>
<upload-image
class="upload-template"
img-type="batch"
size="small"
:urls="form_data.urls"
@change="update"
multiple
></upload-image>
</div>
</div>
</template>
<script lang="ts">
interface Normal {
[propName: string]: any;
}
import { Component, Mixins } from "vue-property-decorator";
import UploadImage from "@/components/business/upload-image/index.vue";
import UploadValidate from "@/mixins/UploadValidate";
import { Loading } from "element-ui";
@Component({
components: {
UploadImage
}
})
export default class extends Mixins(UploadValidate) {
// data 变量
private images = [];
private remove(i: number) {
console.log(i, "删除的索引");
}
private form_data: Normal = {
avator: "",
order_num: "",
selecter: "",
urls: []
};
private picSuccess(res: any) {
this.$set(this.form_data, "avator", res);
}
private update(res: Array<string>) {
this.$set(this.form_data, "urls", res);
Loading.service({ fullscreen: true }).close();
}
private picRemove() {
console.log("我删除了");
}
}
</script>
<style lang="scss" scoped>
// 公共颜色
.upload-demo {
margin: 30px;
.upload {
margin-bottom: 30px;
.title {
display: inline-block;
vertical-align: middle;
margin-right: 50px;
}
.upload-template {
display: inline-block;
vertical-align: middle;
margin: 0;
}
}
}
</style>
```
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment