1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
| <template>
| <div>
| <Divider class="component-blue" orientation="left">图片上传输入框</Divider>
| <upload-pic-input v-model="picUrl" style="width: 400px"></upload-pic-input>
| <h3 class="component-article">基础用法</h3>
| 基本用法，使用 <code>v-model</code> 实现数据的双向绑定。
| <h3 class="component-article">样式冲突</h3>
| 在 <code>FormItem</code> 中使用时，建议在该标签上加上
| <code>class="form-noheight"</code>。
| <h3 class="component-article">props</h3>
| <Table
| :columns="props"
| :data="data1"
| border
| size="small"
| width="1000"
| ></Table>
| <h3 class="component-article">events</h3>
| <Table
| :columns="events"
| :data="data2"
| border
| size="small"
| width="1000"
| ></Table>
| </div>
| </template>
| <script>
| import { props, events, methods } from "./columns";
| import uploadPicInput from "@/views/my-components/xboot/upload-pic-input";
| export default {
| components: {
| uploadPicInput,
| },
| data() {
| return {
| picUrl: "",
| props: props,
| events: events,
| methods: methods,
| data1: [
| {
| name: "value",
| desc: "绑定的值，可使用 v-model 双向绑定",
| type: "String",
| value: "空",
| },
| {
| name: "accept",
| desc: "接受上传的文件类型，等同<input>标签的accept属性",
| type: "String",
| value: ".jpg, .jpeg, .png, .gif",
| },
| {
| name: "maxSize",
| desc: "单个文件最大限制大小（单位Mb）",
| type: "Number",
| value: "5",
| },
| {
| name: "size",
| desc: "输入框和按钮尺寸，可选值为large、small、default或者不设置",
| type: "String",
| value: "-",
| },
| {
| name: "placeholder",
| desc: "占位文本",
| type: "String",
| value: "可输入图片链接",
| },
| {
| name: "disabled",
| desc: "设置输入框和上传按钮为禁用状态",
| type: "Boolean",
| value: "false",
| },
| {
| name: "readonly",
| desc: "设置输入框为只读",
| type: "Boolean",
| value: "false",
| },
| {
| name: "maxlength",
| desc: "设置输入框最大输入长度",
| type: "Number",
| value: "-",
| },
| {
| name: "icon",
| desc: "设置上传按钮图标",
| type: "String",
| value: "ios-cloud-upload-outline",
| },
| {
| name: "text",
| desc: "设置上传按钮文字",
| type: "String",
| value: "上传图片",
| },
| {
| name: "previewIcon",
| desc: "设置预览图标",
| type: "String",
| value: "md-eye",
| },
| {
| name: "showUpload",
| desc: "是否显示上传按钮",
| type: "Boolean",
| value: "true",
| },
| {
| name: "type",
| desc:
| "按钮类型，可选值为 default、primary、dashed、text、info、success、warning、error或者不设置",
| type: "String",
| value: "default",
| },
| {
| name: "ghost",
| desc: "幽灵属性，使按钮背景透明",
| type: "Boolean",
| value: "false",
| },
| {
| name: "shape",
| desc: "按钮形状，可选值为circle或者不设置",
| type: "String",
| value: "-",
| },
| ],
| data2: [
| {
| name: "on-change",
| type: "返回完整上传图片路径或用户输入的链接",
| value: "value（输入框文本值）",
| },
| ],
| };
| },
| methods: {},
| mounted() {},
| };
| </script>
|
|
