Skip to content

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

更新代码

parent 9b273339
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 872 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
This diff is collapsed.
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
This diff is collapsed.
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